The workaround is easy, but it’s not well documented. It’s done by Fancybox’s own callback options.

$('a[href$=".jpg"]').fancybox({
    onStart: function() { $('.banner object, .banner embed').hide(); },
    onClosed: function() { $('.banner object, .banner embed').show(); }
});

Other Fancybox callback options:
onStart, onCancel, onComplete, onCleanup and onClosed.

See it in action at Gadgeterija.net.

Dell U2711 is significantly cheaper here in Croatia than 27-inch LED Cinema Display. It’s a smart alternative, especially if you don’t like glossy screens.

But are there any caveats?

Color-spaces for web design

Internet is all in sRGB, i.e. the relatively small color-space. This standard is brought by Microsoft and HP back in the days, to create a common denominator for consumer grade systems and it’s a default for Windows PCs.

I found this article a good starting point to understand differences between various color-spaces: Setting a Work Color Space in Digital Photo Professional.

If you are designing for the web exclusivelly, it’s best to work in sRGB. Learn how to set up Color Management for web design.

Oversaturated colors issue

Macs output colors in Apple RGB, so if a monitor can handle it, it will display colors more vivid, and somewhat truer to the real colors.

Apple is shipping displays that are not wide-gamut, but probably Apple RGB (at the time of this writing I haven’t found exact technical specs).

Apple displays are calibrated to Apple RGB and for the average PC user the picture is rich in colors. Apple’s products are also evenly calibrated to keep consistent experience across platforms, but that also gives you troubles once you pair Apple product with something else.

Dell U2711 is wide-gamut monitor, which means out-of-the-box colors will look too saturated than you probably used to using your laptop’s display or regular (lower-gammut) LCDs.

The display has quite a lot OSD controls, which was in my case miss-leading. There’s an option to set gamma for PC or Mac and also some handy color-space presets.

In Snow Leopard, default gamma is 2.2 (like the rest of the World) and not 1.8 like in Leopard (read how to make your display’s gamma in Leopard match Snow Leopard).

Setting gamma to Mac will create over-saturated picture and if you try different OSD presets, you’ll probably notice that nothing changes, even though you are switching between sRGB and Adobe RGB which are significantly different.

To make Dell U2711 display proper sRGB colors, set gamma back to PC and choose sRGB from the presets menu. This gives you the most accurate colors for web design and general use via built-in OSD.

At this point you might want to calibrate with OS X calibration software under System Preferences – Displays – Color – Calibrate. In my case Dell’s default .icc profile was a little greenish (Dell’s profile was already in there when MacBook Pro detected new display).

I was not happy with the results, so I calibrated mine using Spyder3Pro. Download .icc profile and see if this suits your particular display.

The created profile is more or less accurate. Spyder3Pro is a calibration tool for photographers and from what I learned on the internet forums not very accurate with spot colors, so I’m interested to give ColorMunki Design a try sometimes in the future, just to make sure this is true (Belgian graphic/web designer Veerle Pieters wrote a ColorMunki review back in 2009.).

Connectivity

I’m still working on a MacBook Pro with DVI port, so it was a breeze for me to connect the display with included Dual-Link DVI cable.

Newer Apple laptops are shipped with Mini DisplayPort, which leaves you with either Mini DisplayPort to Dual-Link DVI adapter or Mini DisplayPort to DisplayPort cable (both Dual-Link DVI and DisplayPort cables are included with the monitor).

However, I didn’t try any of these, so I suggest you investigate more about Dell U2711 + MacBook Mini DisplayPort.

The former is available in Apple Store, but costs $99 or $75 in OWC, and the later is $25 in OWC store (I’m not affiliated with OWC, but they ship items almost anywhere in the World).

Obviously, cable is a better option than adapters, but it might not suit your particular setup.

However, when the time comes to deliver the prototype, it’s best if you convert it to pure HTML form, especially if the backend development team works with a different programming language…

There’s a handy command line tool wget. It can mirror any live site, including your local copies — and tidy it nicely in your local folder. The command is actually quite simple:

wget -m -k -p http://www.myprototype.dev/

The only thing that’s left is to manually copy CSS images folder. At the time of this writing, wget still can’t read CSS files nor get paths to CSS background images.

Some other uses can be found in Mastering wget.

Obviously, this article is not for Terminal savvy programmers, but rather for the rest of us who are using drag and drop web server packages such as MAMP.

I guess you already have MAMP installed on your local computer, most likely in /Applications/MAMP. If not, install it before you move on to the next step.

First, download ImageMagick for Mac OS X and unarchive it to /Applications/MAMP/bin/ImageMagick.

Next, open up Terminal.app (don’t be afraid, it won’t bite you), and enter line by line:

$yourmacname> export MAGICK_HOME="/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1"
$yourmacname> export PATH="$MAGICK_HOME/bin:$PATH"
$yourmacname> export DYLD_LIBRARY_PATH="$MAGICK_HOME/lib"

Test if everything works up to this point:

$yourmacname> cd /Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1
$yourmacname> convert logo: logo.gif
$yourmacname> identify logo.gif
$yourmacname> display logo.gif

Last: browse to /Applications/MAMP/Library/bin and open envvars file with your text editor. Change the two uncommented lines, i.e. DYLD_LIBRARY_PATH="... and export... to following:

DYLD_LIBRARY_PATH="/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1/lib:/Applications/MAMP/Library/lib:$DYLD_LIBRARY_PATH"
export DYLD_LIBRARY_PATH

If you are using ImageMagick in your server-side application, be sure to set the correct path, for instance in PHP:

define('MAGICK_PATH', '/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1/bin/convert');

Restart Apache in MAMP and you’re done.

Due to the nature of the Internet and a broad range of possibilities for any given project, it’s impossible to provide the clients with a fixed quote based on an e-mail with five bullets.

What can you do?

Respond with the best guess estimates instead of proposals, simply to encourage agile development and deal with unavoidable scope changes up-front.

Tip for the clients: unavoidable scope changes develop frustrations on both ends. The frustration is caused by fixed contract or limited budget. Consequently — production delays occur and the quality of work suffers.

With estimates clients get better picture about how overall scope and tight deadline affect the budget and can plan costs for each step accordingly. I found it that for clients it’s easier to decide about the priorities when they have better picture about what they really need.

The benefit of abstract estimates is that you usually end up doing the essential features first, and rethinking add-ons later.

Essentials vs. Add-ons

The best possible investment for clients is to hire pro photographer and/or copywriter to take care of the essential content first. Products, services and about information is a must.

Office photo gallery or office furniture, newsletter system or custom made contact form, blog or forum is an add-on. User comments might be essential, but user registration or activity log is an add-on. Simple send video link form is essential, but custom made video uploader is an add-on (the later will also produce hosting/bandwidth costs, since you have to store those uploads somewhere).

Tip for web producers: The quickest way to filter serious projects is to simply reply with a ballpark costs, for instance:

“Such sites usually cost between X and Y hundreds, thousands or millions <insert prefered currency here>.”

Production of community based interactive web site with file uploads based on WordPress can indeed take from a week to a couple of months. And if it’s urgent, that means doubling the agency staff and raising overall costs.

Web design packages

But don’t offer packages, that’s irresponsible. We are not in a car industry. You don’t manufacture 1000 pieces of the same model each year, so you can’t create equipment packages. You couldn’t possibly analyze the costs of every single optional feature with a dozen (or two) projects a year. The sample is too small and the variety of options is too wide.

When buying a car you don’t go to a car factory and negotiate about wether the logo should be bigger or a little bit more on the left. You only get what’s offered. That’s unless you are a buyer who’s not asking about the price.

With cars it’s easy to create packages and set the prices, but with web sites virtually everything is an option. Except the domain name, of course.

A few tips for wasting web designer’s time.

This is how-not-to make the first contact with a web design agency:

1. Promise more work later on, as a compensation for limited budget
2. Copy and paste response e-mail to competing agencies and forget to change the recipients name
3. Offer a share in a project
4. Not having budget at all

Promise more work later on

Instead of planning future projects and future marketing and future additions to the current project, it’s better to focus on doing what you do right now. And do it the best you can. If your current task is to create the best possible web site, then you better create the best possible web site.

If your budget is limited, do the single best thing that fits your money. A single feature done right is way better than fully featured nonsense.

Forget recipients name

This is obvious. For starters, stop copy/paste your e-mails.

Next, don’t collect proposals from many different agencies all at the same time. We are in custom tailored service business, not mass production. Many Most of us don’t copy and paste web sites, so we can’t provide you with a discount based on lower production costs.

If you’re looking for the cheapest option, go grab some templates.

Offer a share

Would you share your house with a tiler or carpenter who built it?

Shares only make sense if the project is something that attracts that particular agency or freelancer in contexts other than merely building a web site. If they find the project interesting, they will usually offer to do it for alternative kinds of compensation.

Not having money, only great ideas

If you don’t have money, earn it. Earning money actually helps. It puts you in reality perspective. Working (instead of dreaming) usually allows some room to rethink your next revolutionary idea.

In my experience there are rarely features worth the upgrade in new software versions — take a look at MS Office. The flip side is usually bloated code, overcrowded interface and poor performance.

New Photoshop tools are mostly useful for repetitive tasks, such as removing stains on 100+ batches or image stretching. But seriously, how often do you need that? Will you now start working with crappy images, just because your new software allows you to fix it? How about firing a photographer and tell clients to send you their mobile camera shots? I mean, you have the software, right?

Does an actor comes to a set with filthy hands and after the shooting they force some unfortunate soul with Photoshop to make it award winning scene?

…

Large companies upgrade their software regularly, because of large multi-seat license discounts and perhaps to stay up to date with other businesses who already upgraded. And sometimes it’s the matter of a company’s public image.

However, for a small or tiny creative agency with experienced users (at least with regard to the tools of trade), new amazing “where have you been all my life” features are not really essential. It is much more useful to teach people basics about using computers, than to offer magical bullet.

With tough economics why not wait and skip at least one major release. Your business is not going to suffer because of it.

The latest technology doesn’t make a master. Skills and experience do.

For occasional photo retouching or web/UI design you’re quite good with CS4 or even CS3. So save your money and buy it on Amazon. They sell CS4 Student edition for under $400.

At that time I was much more involved with ASP 2.0 and only heard about PHP. But since then — my focus shifted far, far away from ASP, and we decided not to fix the ancient codebase, but to move the backend to WordPress.

With the migration, we had to take care about the new URL scheme. The language part of previous scheme was full-length language name and therefor clumsy. The transition had to be seamless, so we don’t cut-off visitors landing from Google.

The solution is quite simple. All pages are organized as a child pages of two parents: /hr/ and /en/. We created two additional first-level pages — /hrvatska/ and /english/ — and set both pages’ templates to “Page Redirect”. This is how it’s done step by step:

Step 1: Create page template

In your WordPress theme folder create new blank file: page-redirect.php, paste the code below and save it. Keep in mind that there’s no space left before <?php or after ?> or it might throw you an error.

<?php
/*
Template Name: Page Redirect
*/
    header('HTTP/1.1 301 Moved Permanently'); 

    $redirect_url = get_post_meta($post->ID, 'redirect_url', true); 

    if (!empty($redirect_url)) {
        header('Location: ' . $redirect_url);
    } else {
        header('Location: /');
    }
?>

Step 2: Add New Page

Create new page in WordPress (Pages » Add New), and paste the old URL into Permalink field — right below the title field.

Step 3: Add custom field

In Custom Fields box, enter new custom field, named redirect_url and set the value to new URL.

Step 4: Choose page template

In attribute box (usually on the right hand side), there is Templates drop-down. Select “Page Redirect” and hit Publish.

Type the old URL into browser’s address bar, and it should be instantly redirected to your new URL. WordPress will also automagically redirect all child pages, so in my example /english/marble/ redirects to /en/marble/.

In getting ready for HTML5 instead of element header:

<header>Site Name</header>

you’d write

<div class="header">Site Name</div>

For the inclined readers, here’s the HTML5 working draft. Quick overview of the element list will help you catch the train.

Definition lists, rediscovered

Definition list is a personal favorite HTML pattern for marking-up 2 or more related content elements. I found it especially useful when nested in list-items on search results pages and various tag/category listings. This raised a lots of controversy in the past and is still raising today, but I won’t go down that route now. Here’s just a quick example, just in case you don’t have a clue what I’m talking about:

<ul>
    <li><dl>
        <dt>Title</dt>
        <dd class="thumbnail"><img src="image.jpg" alt="" /></dd>
        <dd class="abstract">Lorem ipsum dolor sit amet...</dd>
    </dl></li>
</ul>

The all new rediscovered use of definition lists is with comments or dialogs, for instance Twitter conversation. It has always been it’s intended for this, but now with the dawn of HTML5 (or launch-break for many) it regains the popularity.

HTML4 specs say:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

And here it is:

<dl class="dialog">
    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Oh, it looks beautiful with shortcuts.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>What? But we have full sentences over there!</dd>  

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Huh?... but it breaks my grid?!
        F*ckin user generated content.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Another solution is: we don’t let users post anything.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>No, we can’t do that neither.
        How about we ask
            <a href="http://twitter.com/programmer">@programmer</a>
            to shorten strings?</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Clever idea! Go ask him!</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>I came with the idea, <em>you</em> ask him!</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>On second thought, I’ll tell
        <a href="http://twitter.com/cssdeveloper">@cssdeveloper</a>
        to think of something.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>See? Problem solved!</dd>
</dl>

Is this making any sense? Or should we just stick with ordered/unordered lists and cite + blockquote pairs?

Clients are usually not familiar with the complexity of certain features. Something that occupies small area on the interface — for instance, a newsletter subscription form or “send to a friend” — might be more complex than the rest of the site.

RFP full of features

When glancing over the request for a proposal that is full of tiny little add-ons, you already know — it will boost the quote up to the sky. Most of the functionalities are in their original form simple and straight-forward, but each project has it’s own twists. Ideally, each detail have to be tailored to perfectly fit the rest of the site.

When the prospect is able to bare her requirements down to absolutely essential parts, the “core”, you are half way there.

This is not a single player match. We as an experienced professionals should help and educate clients — and finally: make them confident in our abilities.

Depending on the nature of the relationship with the client, ask simple questions:

— “If you’d ask someone to create a web site as a favor, what would be the absolutely necessary parts?”.

Break it by milestones

It is a win-win situation. Quoting a Must-have list is so much easier! When you’re both settled with the features/price, call it a milestone, a phase in a process.

During the first phase, you’re about to show the client that you are worth her money. Release this first “essential” version. If she’s satisfied with the results, price and timeline, you gained the trust.

From that point on, discussing the Nice-to-have features is a breeze.

When I land to a site, I’m interested to first read About us section, so I can visualize author while browsing her showcase. It helps me better remember people, and more easily get back when I need to. Authentic copy helps. Photo, too. Don’t make it generic.

Don’t copy and paste sentences and phrases you found on other sites. Don’t claim you’re something, you’re not, hoping that such facts would bring you more work. Rather than that — show us what would you like to be sometimes in the future, and someone might give you a chance.

It’s okay if you don’t have experience, it stinks if you provide false or generic information.

The quantity of experience is not the essential part of your resume. It’s the progress, and the current state of you. If you have tendency to develop new professional interests and enhance personal grow over time, then you have an advantage over a person who sticks at the same level over years, just switching companies.

If you are your own copywriter, let friends and colleagues randomly describe you. You’ll have enough raw material to chop off the interesting chunks of text and spice it up with your own writing style.

I want to run faster.
Get brief. Set goals. Score. Get out.
Wet dreams.

Experts are cursed. In my experience — the more a person knows, the more she is unsure when asked for an approximation in terms of time for the task at hand.

This can be quite challenging situation, since the majority of clients/investors are not able to deliver fully developed specs. Most of the time, they just tell you what they envision in general, and you’ll have to figure it all out by yourself. If you are not reacting promptly, in many cases you loose a prospect.

In fact, prospects are right. They hire you to create magic from their random thoughts. The only problem is — you can’t charge your know-how separately. But I digress.

All professions on the web are infected by the correct estimate syndrome. Perhaps because I’m at the front-end side of things, I perceive back-end people are more into this epidemic than designers or front-end developers. I rarely ask front-end people, since I already know what can be done at what cost and in what time. So take my claims with a grain of salt.

Designers as a more irrational people are giving the estimate by their gut feeling or quite often already have established prices for various deliverables.

Programmers are rational and concrete, so they are always trying to give the exact estimate. I dare to send a message: we need such a precision only and exclusively in your work. The time programmer spends on discovering how things work, should be calculated in the estimate. I strongly believe that anything can be disassembled in matter of days, if not hours.

Features that clients request are almost always invented before. Clients are occasionally surprisingly informed and educated, but very rarely with a true authentic concept. My logic tells me — we are re-factoring what have already being adopted on the web. We should be familiar with 95% of the requested features or tasks.

Unless it’s something completely new. People are telling me The new things are fun to work with. I hear that all the time. So I have a second-guess that the estimate in terms of billable hours is not applicable here.

As I see it — you work repetitive tasks for money, while you innovate for fun and personal growth (and so you can make more money later, when the feature becomes popular request or part of a standard package).

For any task, there is the worst case estimate, the super-optimistic case estimate and the estimate by experience. Experienced expert should know:

• what can go wrong
• how fast she can do it, if she is in the right mood
• how much time and effort some similar task(s) took her in the past

This is, of course, my point of view. What’s your approach on this?

Addenum

Snook lists the most common tasks a true web developer has to go through in A Web Developer’s Personal Projects.

If that’s the case, here’s the quick tip.

First, make sure the Time Capsule recognizes the printer. You can check that under the “Manual Setup” in your Airport Utility.

Next, open System Preferences, choose “Print & Fax” and hit the plus button on the left (i.e. add printer). At this point you should already have your printer drivers installed on the computer.

The default tab is the most probably IP and that is misguiding. Switch to “Default” and wait a couple of seconds. This however could take a while, just don’t close the window too soon. When the list is updated, select a printer from the list (the “Kind” column should indicate Bonjour).

Finally, hit “Add” on the same screen and you’re done.