When launching image modal with Fancybox, Flash banners delivered from a third-party ad server could take over the top layer, covering the portion of the enlarged image.

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.

The old school way of setting large (intro) texts on web pages involved some kind of CSS image replacement, enabling a fine-grained control over how type and text render.

Now that we have web fonts available, we can avoid image replacement and apply virtually any font to a plain HTML with a little help of @font-face rule.

Another problem with HTML text is how lines of text break. If you aim to create a particular rhythm to your copy, you’d probably want to control the length of each line. Naturally, you can use <br /> to push the text into another line.

However, to enable natural flow of text on mobile screens which are narrower than the desktop horizontal text block offset, you simply add @media query to your CSS:

@media (max-width: 480px) {
    .your-particular-selector br { display:  none; }
}

Please note that you should leave an extra space behind each <br />. This way when it’s removed with CSS for mobile devices, you won’t end up with weird results, for instance Lorem ipsumdolor sit amet,consectetur:

Lorem ipsum<br /> dolor sit amet,<br /> consectetur...

If you’re a print designer or a photographer, this post is probably not very useful, but stick around and see if provided links can help.

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.

PHP is quite handy for creating local prototypes and better file management with regular backs and forths during a project development. It allows you to quickly make changes on a model templates all at once.

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.

It’s been said many times before — the typography is fundamental for any kind of visual and interactive communication. I’ll quote Erica Hall here — Copy is Interface.

With the new age of web typography, many designers jumped into the bandwagon, using all this newly available typefaces. But the abundance of options available is actually a pitfall.

Strong sense of typography is still mandatory. Additionally, we still have a number of technical limitations in the digital space (but that’s a topic for another occasion). Let’s discuss the common mistakes and how to avoid them. Continue reading »

Creative Nights was re-hired by the Internet marketing agency SeekandHit to realign their web site. The previous redesign was back in April 2009. and it was quite a success, but there is always room for improvements.

It was quite a challenge not to overdo it, especially when the existing design is so familiar, and both — the client and us — were so eager about the process. However, the goal was not to make something prettier or different or wild (which would result in a short-term hype), but instead to focus on tiny little details. After the last relaunch, significant number of pages were published ad hoc and that parts needed our attention the most.

The feedback from Seekandhit clients and visitors was of a great help. Not the “I wish you had…” kind of complaints, but rather relevant comments, for instance “I didn’t understand how X service works or how service Y can help me.”. Mario Frančešević, the Seekandhit CEO also delivered very useful brief based — among other things — on visitors behavior tracked by Google Analytics.

The cornerstone for this iteration were detailed screenshots of actual adverts and illustrations for the most prominent advertising features. That was especially important on Services Overview page, where some visitors had difficulties understanding the differences between various advertising platforms.

Another roadblock for visitors was Project Questionnaire, which had too many (specific) questions than is normally required for the initial contact. SeekandHit tries to custom-tailor campaigns for each client, so the obvious shift was to simplify the web form and provide the prospects with a brief overview of the process in a form of numbered steps.

Now let’s see the results with real-life users. Fingers crossed.

HTML resized images in Internet Explorer look like crap, unless you add the following line in IE-speciffic CSS:

img { -ms-interpolation-mode: bicubic; }

Handle with care.

Backup2Mail is automatic MySQL database backup web application. The latest upgrade solves permissions and/or file path problems on various commercial web servers. It also removes the need to move script above the web root folder with .htaccess fix.

Download v.0.17 and as always send your feedback!

Many web designers and front-end developers are using MAMP for its ease of use. However, MAMP doesn’t come with very popular and wide spread image manipulation library ImageMagick. Just recently my fellow internet super talent Mario Lončarić clarifyied steps for installing ImageMagick library to your Mac with MAMP.

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. Continue reading »

When ordering web design services, people tend to miss the point of the medium. What makes it different from other platforms, products or services is its flexibility. Not the flexibility in just updating the content in a blink of an eye, but the ability to quickly change the user experience, improve it, make it better. A web site or application is a living thing: it’s adaptive and is constantly evolving.

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.