We Love The Web - Blogorhea

If you aren’t a full-time web designer, there are a few design constraints that may surprise you. In print, you can place everything pixel perfect because you know that there is a single output: ink on paper.

It's. Just. Not. Like. That. Online.

Your design has to work on any computer, anywhere in the world. Mac, PC, Netbook, iPhone, Android running any one of: Firefox, Safari, Internet Explorer, Chrome…
...and the list just keeps getting longer. 

Good news: we’re here to help.

We’ve compiled all the problems that we see again and again into handy do’s and don’ts that will save you a bucket-load of time and frustration. You can get all the materials, templates, pre-flght checklists and other bits 'n' bobs described below by clicking this link:
download our handy digital artworking kit (zip)

Page Size

Artworking for print isn't easy, but at least you know what size of paper you are working to. Online it has to look good on everything from a 2-inch iPhone to a 24-inch screen.

So: how on earth do you work with that?

Use our Photoshop template to help you. Different layers have different screen size, including common laptop, desktop and big-screen setups. If it looks good in all three: you've cracked it!
(if the others are right, then the iPhone will take care of itself)

Do:

• Design to 1024x768. Then put a ‘surround’ around it for other screen sizes.
• Use our template (included in this kit).
• Think about what happens when the page extends vertically: make sure you've considered that.

Don't:

• Design fixed-height websites: they rarely look good.

Don’t forget:

• 1024x768 is the total screen size. You are actually designing for about 960x560(ish): toolbars and menubars take up space. Simplest way: just use our template.

Fonts

Web pages don't usually embed fonts, so you have to use the fonts installed on the user's computer. That does impose restrictions since it means you have to use fonts installed on everyone's computer.

Do:

• Use any font you want for headlines and display text. We have techniques to display small amounts of text in any font, but the more we use, the longer it takes for the web page to display, so we use them sparingly.
• Use system fonts for body text and navigation.
  These are: 
Times, Arial, Courier, Verdana, Georgia, Trebuchet, Tahoma, Lucida
• If you use custom fonts, we may need to license them for online use.

Don’t forget:

• People can (and do) change the text size in their browser, old and partially sighted people especially. Typeset things so that it doesn't matter if text boxes get bigger or smaller. Test any text boxes you design by making the text 4 points larger in Photoshop/Illustrator and seeing if it still fits.
• Don’t use comic sans. Not ever.

Layout

Do:

• Design the navigation and background etc. in one layer set, then each page layout in another. That way, if the 'surround' changes, you don't have to re-work 20-30 pages: just the one. This can save you hours and hours.

Don’t:

• Chain text-boxes in HTML like you do in Quark and InDesign. HTML doesn’t do that, so avoid multi-column 'newspaper' layouts.
• You cannot flow text around a curve or get it to 'wrap around' an image the way you can in print. HTML works in square/oblong grids. HTML does not understand curves.

File Formats

Do:

• Give us layered Photoshop or Illustrator files.
• Include fonts with your artwork (if appropriately licensed).
• Supply artwork with fonts outlined if fonts aren’t appropriately licensed.

Don’t:

• Give us PDF, InDesign or Quark files. These are primarily intended for print and can be problematic.
• Give us Jpegs and tiffs – they are ‘flattened down’ and aren't suitable.

Resolution and Colours

Print runs at 300dpi in CMYK colour.

Web runs at 72dpi in RGB colour.

Do:

• Supply artwork at 72dpi in RGB.
• Use pixels for measurement, not points, picas, mm or inches: none of those mean anything to a web browser so if you supply them like that, we'll have to adjust it. Photoshop and Illustrator will both let you set the units in preferences.

Don’t:

• Supply artwork in CMYK as we can't guarantee accurate colour reproduction. Sorry, not our fault: conversion between CMYK and RGB can significantly change the on-screen colours when you show them side-by-side.
• Allow the edge of images to anti-alias. This creates an uncertainty where we can't measure the width that an image should be as the 'edge' of the image is smeared over 2-3 pixels. Illustrator does this by default and it makes it harder for us to faithfully render your designs.

Copy

• Copy always changes throughout the build process. If the copy is in the artwork, it's hard to amend and keep track of what has changed. We've had to completely re-implement every piece of copy on a site before because 10% of the copy had changed but no-one was sure exactly what was new. That pushes up our prices as we have to price in the risk of having to re-work all those pages 'just in case' we miss something.

Do:

• Supply copy separately from artwork, in a Word document.
• Use 'Track Changes' in Word.  You can then see what’s changed.
• Use our sample copy document, also in this kit (unbranded so you can share it with clients).

Don’t:

• Supply final copy inside artwork.

Colour Gradients and Drop-Shadows

This gets less of an issue every day, but the problem is this: Internet Explorer version 6, which still runs about 3% of the worlds browsing, can't do transparency very well.

Do:

• Use grads. with sparingly.

Don’t:

• Put images with curved outlines on a gradient background.
• Overlap two or more colour gradients. HTML can be funny when it comes to transparency.
• Overlap drop-shadows and gradients or drop-shadows and other drop-shadows

Buttons, Links & Forms

Do:

• Links: include a rollover state: you don’t need to artwork every instance, just so long as we can see what you want.
• Buttons: include a rollover state. Here, we do need every instance artworked. Include them on a separate layer so you/we can switch between them easily.

Don’t:

• Scroll bars: don't restyle these, you can't make that happen consistently between browsers in HTML.

Don’t forget:

• Error messages and required fields: when you submit a form, the server checks that you've filled it in correctly. If you've missed something, you get an error message. We need to know how that should look.
What we usually do is put a generic error message at the top of the form like 'Sorry, we've spotted some problems with the information you've supplied, please review this form for more guidance'. Thereafter we put specific feedback next to the form field that is wrong e.g. 'Required' or 'That doesn't appear to be a valid email address' etc.
• Thank you pages: after your user has completed the form, it's nice to say thanks. Please include copy/artwork for that.

Pre-flight checklist

Prepare your digital artwork for handover with as much care as you would a print job. It saves everyone a whole heap of time.

We've put together a pre-flight checklist and you can find that in the downloadable kit (above). You don't have to use this, but it's what we will run through upon receipt of artwork anyway, so it may save you time to look it over before sending.

Here's a great article on preparing your files for production. If you do this, we will love you!

In the next 'How-to': Artworking for Content Managed Sites and eCommerce.

Coming soo: Artworking for Flash, Artworking for HTML email

As ever, if you have any questions about any of this stuff or have a topic that you'd like us to cover, get in touch in the usual way: make.it.work@welovetheweb.com