Designing for web: some rules to consider
As a web developer I get delivered website designs by many different graphic designers. Some of them are experienced with designing for web, but many have a strong background in print and apply the same rules for web.
Needless to say that print and web are two totally different media, each with its own rules.
From my experience, I can point out some commonly made “mistakes”:
- Size matters
Designs for print are often vector graphics that can be scaled to whatever size/resolution is needed. Designs for web are almost always created in Photoshop and can not be scaled afterwards. So to start with the correct size from the beginning is important.
When the website will have a considerable amount of (dynamic) content, it is best practice not to work with a fixed height (f.i. to have it vertically centered). The browser window of Firefox (perhaps with some extra toolbars installed) on a widescreen notebook for example is very limited in height and nobody likes to end up with a double vertical scroll, one for the browser window and one for the content.
As for the width, you just have to prevent a horizontal scrollbar. The big majority of computer screens these days have a horizontal resolution of 1024px or more. Substract the witdh of the browser borders and the horizontal scrollbar and you end up with a safe width of about 980px. Since many people don’t use the maximize button of the browser but instead drag the corners of the browser to enlarge it (and likely not using the full resolution that way), 960px is even a safer width. Besides that, 960 is easily divisible by 3, 4, 5, 6, 8, … making it easy to create a grid layout. Also does it facilitate the IAB widths (for bannering) pretty good.
Be aware that if you add shadows to the sides of the site, that possibly those shadows might add up to the total width of the site.
At the moment of writing,
For websites or components to be built in Flash, there is not really a restriction in terms of fonts that can be used. Just know that special fonts have to be embedded into the Flash file which can increase the file size significantly.
As for html websites, unfortunately there aren’t many fonts available. Arial, Verdana, Georgia, Helvetica are probably the most popular and readable ones. Be aware of that. Also there is no way to anti-alias html text, so you might want to disable anti-aliasing in your design to see a more realistic representation. UPDATE: Some of the latest browsers do render text in much smoother way than before.
The use of a special font can be allowed in some cases (f.i. a limited amount of page titles or menu items) but then either special but limited techniques (like sIFR) need to be used or the text will have be converted into images, which is less interesting towards search engine crawling and maintainability.
Oh, and don’t rasterize your text layers. Developers must be able to change the text (f.i. to reproduce other titles).
- Background gradients
Not much to say about this one. Just don’t use vertical gradients as a background in places where the height is variable. In some cases simple linear gradients with a fixed height can be allowed though.
- No playing around with ads
This one might sound obvious, but I’ve seen designs that didn’t respect this rule so just to be sure: ads like a leaderboard, skyscraper, banner, rectangle, … should stay untouched. Most of the time they are controlled by another party and comply with the IAB guidelines so for that that it is impossible to scale, rotate or crop them. In many cases the position of the ad is rather fixed as well. If you have to redesign an existing site and that site has a leaderboard in the top, chances are big that you won’t be allowed to change that position.
And to end with: it’s always nice to receive a well ordened psd file, with each component or section in a seperate folder, with properly named layers.
These tips should help you to reduce the conflicts with your web developer.
Comments are closed.