01 Get to grips with pixels
While you may be used to designing by picas, millimetres and points, work on the web is measured in pixels only. The first rule for any designer moving from print to the web is to ditch your understanding of measurements; online, nothing is fixed.
02 Don't expect uniform design
The toughest web trait for print designers to understand is the uncontrollable aspect of your finished design: most users will have screens of at least 1024x768 pixels, although many of them may have smaller resolutions. This makes it safest to subscribe to 800x600 designs.
03 Differentiate style and content
While print designers combine words and images in a single design, on the web the two remain separate. The CSS (Cascading Style Sheet) dictates the style of your content, such as underlined headers, italics and text colour. The design is the wrapping within which the content sits.
04 Farewell design fonts
Although you can set the preferred fonts for your site, the viewers can only display these if they have them on their system. There's a list of web-safe fonts, based on popular system fonts, which will display uniformly on all browsers. For anything more outlandish, image replacement is the only way to go.
05 Colour correct
CMYK is dead. Long live RGB. Like font usage online, web-safe colours are restricted by the monitor upon which they're viewed. Check the Web-Safe colour block in Photoshop or Illustrator to ensure your designs appear as close to how you envisaged them as possible.
06 Photoshop is still your friend
When designing for the web, use the skills and tools that you're familiar with. If you're using Photoshop, supply a layered PSD file to a developer. This means they can slice up your page elements and code them correctly, rather than having to unstitch your entire design.
07 Remember the scroll bar
While you may be used to laying out the copy and imagery across several pages, web-wise your design space is unlimited. When designing for the web, then, think about how your potential users will scroll though the content. Horizontal scrolling is generally seen as a big no-no, although in some cases it can bring an extra edge to design-led websites.
08 Navigation and stickiness
Guiding people around your site and keeping them on it are the designers' core objectives. Like print elements and page furniture, online navigational elements help direct a viewer through your content. Make your navigation clear, bold and easy to understand, no matter how wild the rest of your design may be.
09 Understand fluid and fixed width
Designs can be created to fill the browser window or sit at a fixed size within it. 'Fixed width' maintains your design dimensions, while 'fluid' stretches the design across the browser window. Technically there's little advantage to one over the other, although if you want to ensure your creations appear uniform wherever they're viewed, go for fixed-width design.
10 Get to grips with the basics
It may seem obvious, but understanding basic HTML, CSS and web technologies such as JavaScript actively helps you to design successful sites. You don't need to be able to code fluently, but considering the way in which your design will function when creating it keeps developers happy and makes for a better finished product.
Resources: HTML for type designers
Learn the basics before you begin. Here's where to get to grips with basic HTML and more advanced technologies
.net magazine
One of Computer Arts' sister titles and a bible for web designers - visit their website for developers' tutorials.
www.netmag.co.uk
Beginning CSS Web Development, Simon Collison
This brilliant book is aimed at designers.
www.csswebdevelopment.com
Smashing magazine
A veritable treasure trove of inspirational web ideas.
www.smashingmagazine.com
HTML Dog
Excellent tutorials and basic HTML information.
www.htmldog.com
