Web design Good Practice - the basics

I decided to write this post after seeing far too often web companies receiving poorly structured and, occasionally, unusable designs from designers - sending PSDs with just several flat layers of pages, objects moving out of place between screen designs, text in points instead of pixels and blurred lines where objects have been resized.

For a developer to successfully, and efficiently, produce a website they require basic elements that designers often don't provide. Below is a list of issues and requirements that will make life a lot smoother in the long run:

Supply layered PSDs
Photoshop is the standard for web design (although illustrator, image ready, fireworks and freehand are often used for their different stregths). Supply files with all the layers intact. You may feel it is easier to flatten the file first - you may even think this is what developers want but it isn't. It is you who will be getting constant phone calls asking what such a typeface is or what size text is this header. Most web companies will have, at the very least, a copy of GIMP.

Text sizes and anti-aliasing
When inputting text in Photoshop, make sure your preferences are set to show text size in pixels not points and reference px sizes when sending over style guides. Pixels is the standard measurement on screen (as opposed to points which is for print work). Also, set anti-aliasing to none. When smoothing text the edges are blurred. While you may think this is better to look at it isn't accurately portraying how a browser will render it. Not only will this prevent clients wondering why their site doesn't look as slick as you proposed it also means developers can take correct measurements right to the edge of the text as opposed to deciphering where a blur ends as well as a more accurate colour selection.

Screen size
To satisfy the largest audience you must design your site for the lowest possible scenario - i.e. 800px X 600px screen. This gives you a space of 770px width to work with (taking into account the edges of the browser and scroll bar). You can either make it so on larger screens there is a background colour, pattern etc or create a stretchy site although remember that text shouldn't really have a line length bigger than 10 to 12 words average so it is best to wrap it after this. It is also possible to add a couple of words onto this if the line spacing is increased slightly. As 800px X 600px screen size dwindles even further and 1024px X 768px screens become the minimum screen size, obviously, this basic design template will be increased in size. There are several articles on using specific css stylesheets depending on the users viewing device. E.g a style sheet for widescreens, one for normal, one for mobiles, one for pda's etc.

Don't make more work for yourself
Create an initial template first. As with using CSS to apply site wide styles it is good practice to get styles signed off before applying them to all your visuals as it is a nightmare to create a screen for every page of a site to be told that the client wants to change the typeface of the headers. To save time, create an initial visual of the homepage and a content page and get all styles approved by the client before proceeding to mock-up the other areas. By doing this you can ensure elements remain in the same place. For example, when a news page is completed you can save it and 'Save As' another page. This ensures all the consistent elements remain the same and you can just populate the main content area with different information.

Use Photoshop folders
Use folders. Photoshop allows you to use folders to organise layers. This is a useful tool when a developer is looking for a particular element and doesn't want to search through 100's of layers named 'Layer 112', 'vector smart object' etc. You can organise the PSD to assist the developers. Seperate layers into 'Header', 'pNav' (primary navigation), 'sNav' (secondary navigation), 'pContent', 'sContent' (often side columns, content areas that are not the main body text), 'Footer' and 'Background Elements' (or whatever naming conventions the developers find useful). You can also begin to use the template for all your web designs by including folders that contain common form elements, program icons, arrows, buttons etc saving you considerable time in the creation of your designs.

Provide a breakdown of your sites styles
Finally, although not essential, you could provide a break down of elements on the page. If you are quite clued up in simple HTML and CSS you could create a quick mock-up with each of these styles applied meaning the developer simply needs to copy and paste your code and you will know the final page will look as you intended. See Kevo Style Guide for an example although, please note, I recommend saving the use of H1s as a clickable logo through CSS. Failing that you should at least be supplying a word document which details all the typefaces, text sizes, colours, element sizes, image borders etc. This will save them having to trawl through your (now unflattened) visuals trying to find the information themselves.

Hopefully, these few simple guidelines will help you create faster designs and, more importantly, help the developers implement these designs with as few complications as possible.