In this article I am going to be writing about something I have come across more and more, and to be honest it’s ANNOYING. The problem is with print designers. Not all of them, (in fact only a very small percentage) but this one’s for you, the print designer who designs a website 2500 pixels wide at 300DPI. You know who you are. This article is for you, and for those web designers who have had similar experiences working with print designers who don’t know what they are doing. Send them here and I’ll set them straight. If you are a print designer seeking to design your first website, I’m glad your here doing some research. This article should stop web developers from wanting to hurt you. We’ll start at the beginning – setting up Photoshop.

Setting Up

The first thing you need to do is to create a new file, and CHECK THE DPI. Your DPI should be set to 72. Not 300. Not 150. 72. This is the best resolution for designing for the web – you can find out more about why here. Also ensure your colour (color for those across the pond) mode is set correctly – monitors use light and therefore display colour in RGB mode, not CMYK.  Next, you have to bear in mind screen resolution. At the time of writing, 96% of users have a resolution of 1024 x 768 or greater (source). We therefore need to design sites that fit comfortably on the lowest end of this scale.

Enter the 960 grid system. Developed by Nathan Smith and adopted by many, the 960 grid system is “an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels“. Using this system and designing your site no greater than 960 pixels will ensure maximum compatibility for your site design, and minimum fallout with your web developer when you send the files over. Of course backgrounds and more can be placed outside this 960 pixels, but the main content of the website and all important information should be kept within these boundaries.

These three basic principals – main site are 960 pixels wide (I create a canvas wider than this so I can have space at the sides), RGB colour mode and 72DPI, will instantly make you a much more likable print designer in the eyes of a web developer – and will save MANY future headaches.

Planning

As a designer you should already know the importance of planning a project before putting pen to paper / mouse to… desk? I won’t go into detail on the planning side in this article – I have already covered this in another post which you can read here – Design planning simplified.

Images and Licensing

There are a few things to remember when applying images / photographs to a web design. The main annoyance with this is Aspect Ratio. For some reason, nearly every time I see an experienced print designer creating a website, images are stretched, squashed or just ridiculously altered in order to fit into a ‘designated’ slot. Ever tried cropping, people? There’s even a tool in Photoshop to allow you to crop – so use it! If you need a particular size / shape of image, crop it to fit don’t just squash it!

I know this sounds extremely basic – but you’d be suprised how often this happens! It can make or break a design – if you can’t use images properly then don’t use them!

The other side to this is Image Licensing. You MUST have the right to use any of the images included on your design, wether it be icons, photographs or product images. If you do not have explicit permission to use them from the owner, then don’t. This will avoid any future problems with copyrights. Images can be sourced from online stock photography sites – often for under $1 – so why risk it? Just make sure you check image licensing and you are 100% certain you can use it. A few resources for stock photography are:

Fotolia
Dreamstime
I-stock

Web-safe Fonts

There are only certain fonts which can be used safely in web design. The most common of these are Helvetica (mac), Arial, Verdana and Trebuchet MS. There are more, a comprehensive list can be found here. (I know comic sans is on that list, but that does not mean you should use it. It’s horrible) These are the fonts, with fallbacks, that will display on most PC’s / Macs and will prevent problems. This does not mean however that you are limited to using just these fonts. Recently more browsers are compatible with font replacement. There are a few services which dynamically replace font’s on your site, allowing the text to remain readable by search engines but giving you more freedom in what fonts you use. Although some cost, there are free options as well. Google’s new Font API is one such free service, although currently only a limited number of fonts are available. Fonts.com have also launched a service with 1200+ fonts available to use – although this is a paid service.

The benefit of using web-safe fonts is that search engines can read the copy, which they can’t if the text is a fancy font in an image. Allowing search engines to read your text will help with your sites rankings – so it’s a no-brainer really!

Repeatable Areas

Repeatable areas are a key problem if you do not understand them. Area’s of the site will need to repeat if the copy is changed, extended or shrank etc. This is key to making your design nice, but accessible. If a user enlarges the font’s on your page the containing boxes need to support the larger font, and expand to accommodate. If your entire site relies on being a fixed height, your are limiting the sites potential for accessibility and future development.

Navigation

Keep it consistent!  Obviously there may be some exceptions (such as category menu’s changing to reflect the page you are on) but the main navigation of the site should be consistent. Keep it in the same place throughout the site pages (usually at the top or on the side) and keep the items on that menu the same throughout. Your main navigation will usually consist of Home, About, Contact etc and will not need to move about the site. There is nothing more annoying than going from one page to the next with inconsistent navigation. It makes the user feel lost and they are more likely to go elsewhere if navigation is too difficult.

File Preperation

Lastly, please prepare your files properly! Every developer has ways they like to have files prepared, so it’s always a good idea to check with them first to see how they would prefer them – what format, layered, grouped etc, but there are a few things you can do to ensure it’s as easy as possible for them.

Name your layers – if you can name your layers as best as possible this will make things much easier when the site is to be built – ‘top-nav-bg’ will have much more meaning than ‘layer 17 copy 2′  for example!

Grouping layers is always helpful too – group all the header elements together in a folder, call the folder ‘HEADER’, and divide the layers inside into further groups if necessary such as ‘LOGO’, ‘CONTACT’ etc and your developer will be much happier! Group all the web-safe text within these folders so they can be turned off easily – this will allow the developer to turn off the text in one go leaving just the graphics that need to be sliced. You may well need to flatten graphics layers, but this is down to developer preference usually so do check!

Lastly – provide a stylesheet. The stylesheet should have all buttons and changeable graphic elements from the site on – for example buttons with standard, inactive, hover and on click states, link hover colours and sometimes much more (ask your developer!)

Summary

So in conclusion, the key things to remember are:

• DPI set to 72
• Colourmode set to RGB
• no wider than 960px
• don’t stretch images and check image licensing
• use only Web-safe fonts
• apply consistant navigation throughout the site
• prepare the files correctly

There are many more things to consider, but this should at least get you on your way to a healthier relationship with your web developer!

If you have anything to add – please leave a comment below!