10 things designers should know before designing for the web

Many designers are currently moving from print to web these days. Of those many, a big part decide to focus on design and pay someone to make the HTML+CSS coding part. While this sounds like a wise strategy that let designers focus on what they do best, if they don’t bother to learn the limits of the web, they’ll soon pay the price with interests. Without realising it, they boycott themselves too often, making things harder to code. That means more time, more problems and probably a higher price on the coding side.

1 - Everything in pixels, including fonts

Forget every measure unit but pixels ASAP. The native measure unit for the web is the pixel, so everything in your PSD (or whatever you use) should be in pixels, including fonts. Yes, you can use points in the web, but not all computers/operating systems/browsers render them the same way. The point-to-pixel ratio is just a convention, not all devices respect it the same way, and there’s no guarantee this convention won’t change in the future.

2 - The right size for your drawing

Sounds like an stupid tip, but I once received a design that was about 4500 pixels wide. FAIL.

If you don’t know what could be a more appropiate size for your web design, 960 pixels wide for the content, plus some extra for the borders should be enough. Or even better, ask your coder.

3 - What happens with the space outside your design?

Bad news, no web page can auto-resize to get full screen. No, they can’t. Maybe Flash can give a try, but HTML+CSS? No way. That means, if a user has a big enough screen, he will see some empty space around the website. We can fill the void with some repeating background or a flat color, but how should it look like? This should be specified in the design too. Look at the example image:

That image shows the coder what to do with the extra space. That should be enough.

4 - Fixed or elastic width?

OK, HTML can’t auto-resize to full screen, but the content’s width can adapt to the user’s screen. The bad news is that this is all it does, becoming wider or narrower. Nothing sophisticated, no making fonts bigger when line is wider, nothing at all. Just wider boxes and longer text lines. If you check the web with a big monitor, you’ll notice very few sites use the whole screen. As of writing this article, ESPN (which is a great site with great professionals supporting it) or The Washington Post, don’t use it. Amazon does, but there’s a lot of well tested code behind it, and there has been a lot of care defining which areas should be elastic and which others fixed.

Don't assume it can be done, or it will work the way you want. Ask your coder before making a choice on this subject.

5 - Color space should ALWAYS be sRGB

Color space is a problem in web because some browsers process color profiles in images, while others don’t. The default color space for web browsers is sRGB. Many browsers are currently “color-spaces blind”, that is, everything is sRGB for them. It’s quite possible that your coder knows nothing about color spaces, as this is a subject more related to photography than to web, so to avoid surprises, give your coder your PSD (or whatever) in sRGB space.

Note for Apple users: For some reason, Apple defaults its monitor profiles to 1.8 gamma. Further, Apple has designed its ColorSync color management system to Default/Assign/Apply/Assume it monitor profiles. This really conflicts with web surfing because the web is based on sRGB, a 2.2 gamma monitor profile. This means if you are using a standard Apple monitor profile, 98% of your web color is being washed out.

Quoted from http://www.gballard.net/psd/saveforwebshift.html . Reading quite recommended.

6 - Text anti-aliasing is beyond coder's control

Designers love typography, so I'm pretty sure we're about to dissapoint all designers reading this:

Photoshop is really cool on font aliasing. It softens font borders in several different ways. More focused, stronger, crips... it looks very, very pleasing, and exactly the way you want. Perfect for obsessive designers.

Sorry about that, things are not that good in the web. Antialiasing is beyond coders control, it depends on the browser and operating system. There’s nothing we can do on this issue. Some users will see anti-aliased fonts. Some others won’t. Accept it.

7 - Only a few fonts available

The problem: you want to use a font for the text of your website. Does your visitor have this font?

This is the key problem: for a text be shown in any given font, the font must be in the user’s computer. There’s direct no way to  overcome that. So what are our options?

1 - The safest one: limit yourself to a web-safe font, a font that will be in any user’s computer. The list of web safe fonts is pretty narrow: Times New Roman, Arial (Windows) / Helvetica (Mac), Georgia, Verdana and Courier. This is the absolute minimum. Yes, Mac designers, your pretty copywriting in Helvetica will be seen by the majority of your visitors, all those that use Windows. That's life.

2 - Try to use the font you want. You can specify any font, and if it’s not in the user’s computer, his computer will use one of the web safe fonts instead. This is the big drawback: some users will not see your text in the font you chose.

3 - Give the user the font you want to use using CSS3. That’s the good news: Using CSS3 @font-face about 90% of the users will be able to see exactly the font you want (yes, amazing but true, Internet Explorer does it since version 4!). The drawback are: a small share of your users still won’t be able to see it, and your page will take a bit longer to load. More info here:

http://www.isegura.es/blog/you-can-use-fonts-you-want-now-use-font-face-...

Besides that, what you’re doing is distributing a copyrighted material (the font). This has some legal implications, so check if you have the rights to do so.

4 - Same as number 3, but using Google fonts. Those are royalty-free. The list of fonts they offer is pretty short, but growing. Worth a look:

http://code.google.com/webfonts

8 - Favicon is a 16x16 image

The Favicon (Favourite icon) is this little icon appearing besides the address bar or the tab bar.

This image should be exactly 16x16 pixels, RGB color. To stay in the safe side, convert the image to 8-bit colour and save it in ICO format (there are Photoshop plugins and lots of converters out there to do that). 32x32 pixels size icons are also accepted, but they will be resized to 16x16 in most environments. Don’t try other measures or get ready for bad surprises.

9 - Backgrounds can’t be dynamically resized or rotated

The title pretty much says it all. Background can’t be resized nor rotated, period. If a background image is 500 pixels wide, it’s 500 pixels and there’s nothing you can do about it. It can be repeated horizontally and/or vertically to build a mosaic, it’s x-y origin can be moved, but that’s all you can do with a background.

10 - Text is always distributed in vertical columns

If you want to distribute text diagonally, or in other forms that are not rectangles, well, just forget about it. Any HTML website is a bunch of piled rectangular boxes. You can’t rotate or skew these boxes. You can try some tricks to rotate a bunch of words, a few phrases or convert a paragraph to an image, but anything over that is simply not possible, or the possible solutions are absurdly complicated.

Besides that, you probably never noticed it, but something like this can’t be automated in the web.

This can’t be automated because there is no such thing as “repel text under”, that is, the image pushing out all text below it automatically. It can repel text from left side of a text box, for example, but it can’t repel text from two different boxes in two different directions.

Of course, you can do something like this by positioning both the image and the text by hand, but as soon as you change the text, everything will be screwed up. That’s to say, you can do this, but not in an automated way. Of course, a Javascript program could be written to do it automatically, but coding it would require both skill and time.

Besides that, you can notice in the former example that George Orwell's picture is an eliptical image. That's another web limitation, all images are rectangular.

Extra - Making a design work on Internet Explorer 6 requires extra time

Internet Explorer 6 (the one that comes with good old Windows XP) is almost ten years old and it has a big bunch of problems. Therefore, many web coders spend extra time just in making something work on IE6. Sorry, but if some coder wants to charge extra to give IE6 support, think twice before complaining, because he’s right: IE6 will require him to spend some extra hours, and no matter how good is he, some things will never run smothly. Either if you want support for IE6 or not, specify it in advance so the price is properly adjusted. Nobody wants surprises at work.

Additional sources:
A bit off-topic, but worth reading:

http://www.batescreativegroup.com/align/what-print-designers-need-to-kno...

http://boagworld.com/design/10-things-a-web-designer-would-never-tell-you