designing websites - what to avoid
There are a number of design choices that can lead to difficult builds, or websites that just don't 'feel right'.
Below are a number of the more common issues. There are just a summary. Shortly I hope to publish a full and detailed guide for free!
Typography
Editable HTML - that is the bulk of the copy on the website is restricted to using a limited set of fonts. Most commonly used fonts include: Arial, Verdana, Tahoma, Trebuchet, Times New Roman and Georgia. You can read more about the list on Wikipedia.
If your design shows large blocks of text using a stylish font then you're running into problems - we can't use it unless its displayed as an image, which is a big no-no for search engine optimisation and accessibility (screen readers can't read it). Also, editing the copy is going to be very hard.
There are technologies like Cufon that can do smart things with fonts and turn any font into editable copy but this usually breaks the licensing terms of the fonts as they are being distributed (albeit in a coded manner). I won't create sites that do this.
Typography and menus
It's boring, but its usually best to use standard fonts for menus too. This does not mean your design has to be boring, it just means you rely less on fonts to create impact than you might do in print. Logos and adverts can use any fonts as they are images. Web users partly expect menus to use fonts that are familiar to them - it aids with quickly feeling comfortable on your site. What is a compromise for you is a benefit to the overall design success for the medium. The range of professional website designs is not so wide as the range of brochure designs, so don't feel you have to be wildly different to other designers, infact success comes from 'fitting in' online.
Font sizes
Most of your design will be achieved with vectors (we web designers love vectors too). Your poster designs can end up on a bus stop or the side of a double-decker bus. The bigger vectors get the more beautiful they get. But websites are about making things smaller - we only have a certain number of pixels to play with - screens have a finite size and we have to funnel everything down a pair of twisted copper wires. Fonts that appear big in your design can end up very small on screen - too small to read. We can build websites using scalable fonts (ems or %) but for small fonts or where we have a fixed area we use pixels - not a scale you'll use often.
If you design using Photoshop and start with a canvas 960 to 980px wide (that's the maximum width we build fixed-width sites to) then place a copyright notice at the bottom in 11px sized font you'll see exactly how big it will be in the website. However, if you design in print programs you can only guess the proportional size of the fonts to each other, which is quite a skill ! Take a screen grab of your whole page, drop it into Photoshop and scale the viewable width of the intended design down to 980px wide. Do your fonts shrink to super-tiny? If so I'll not be able to recreate them as HTML - when I do they will be proportionally larger.
Scale - This leads onto perhaps the biggest pitfall
Designing at 100% resolution - ie 980px wide at 72dpi is brilliant for knowing exactly how to scale all the elements because you are looking at how the site will appear from the outset. There is NOTHING terrible about designing at 300dpi and not using a fixed pixel width - it just means when everything is scaled down you may be in for some suprises. One of the show-stoppers are menu items that no longer fit in the box when the text is converted to HTML. We have few size choices in fonts when things get small - 10,11,12 px. Less than 10px and things are getting very hard to read.
Basically check as you go by scaling down and asking yourself 'does this look too small in places'.
If you have lots of sweeping curves then designing at 300dpi is good because they alias better when scaled down. Subtle curves drawn at 72dpi look a bit rubbish. So it's swings and roundabouts.
Logos
Obvious any logos should be designed at print resolution as you always have done because they are destined for . . . . print. However again keep an eye on font sizes especially on tags lines with thin fonts - these can look dreadful scaled down on a website. Often a logo will be adapted (by you) specifically for online usage.
Bleed
Websites have bleed which is often forgotten in designs. Your bleed is conveniently chopped off and recycled into loo paper. A typical website is 980px wide and sits in the middle of the screen. The dead space either side is like your 'bleed' and is there for all to see on bigger screens. Your design should consider what to do with the bleed. Instead of seeing an A4 piece of paper before you, see an A4 design sat in the middle of an A3 canvas where what's either side is potentially just as valuable to the design as the content.
Width
As mentioned, sites are still not generally built wider than 980px. Sure many screens are much wider, but some fool decided just when we could all afford lovely big screens that it was cool to downsize with notebooks and tablets. Size wise this has taken us back to about 1998 ie 1024px width. Don't present designs 1100px wide. They break on many devices. If it can't fit in a 980px width (990px max but I didn't say that) then its time for a redesign.
Height
Websites generally don't have a height - it was never the plan to have fixed heights.
If your client does not want the vertical scroll bar (yes some don't) then your design must be no more then 560px high to be safe. Coming from the print world you'll feel like you've moved from a mansion to a bedsit!
There are times when it can be quite cool to have a small subtle site sat dead center of the browser - just keep in mind you have to be very sure there will never be more content than the area allows. A soon as you have more content you'll need to introduce some kind of internal scrolling or pagination which goes againt the visitor's natural urge to scroll the whole browser window with their mouse wheel - I bet right now your index finger is poised over the wheel!
Even with sites that can be any height to accommodate content (we are talking 99% of the net) you should always be mindful that the most important content should be at the top, where possible. Making the whole design fit vertically on your screen or that of your client's is quite pointless as there are dozens of different screen sizes. Flexible height means flexible height and site visitors will be fine with this.
Don't have very large images at the top of the site that mean a notebook user has to continually scroll down on every page to find the content. If the image is the content fine, but if its just for illustration or decoration be careful.
If you are wondering how big a website can safely look without vertical scrolling bars - well you are looking at it inside this box!
Poor contrast
Low contrast between copy and backgrounds is much less of a problem in print where natural light conveys the information off the page to the eye, on screen however it can be very tiring. I frequently see designs where everything looks fantastic zoomed in on the PDF (or when properly printed) but when its scaled down to screen resolution and things get tough to read. Web users are fast to flick between sites so you need to make your site legible.
Generally light backgrounds with dark copy is the safe way to go. What works in print simply may not work so well on screen. I know this sounds daft as you design on screen, but when designing print you know how things will look in the real world with the finished product.
Flash & animated menus
A big no-no for most sites unless you specifically want to go down the path of creating a full flash website (yes I can do this). SEO is not what it should be and accessibility takes a hit. iPads and iPhones can't display flash at the moment so you'll be best not specifying this. It is true my portfolio at JeliNet is littered with flash websites from the good old days before iPhones when flash become the standard for rich media on the net, but for now the king is dead, long live the king.
Positioning of elements
Don't place all of your important links and navigation over to the right (yep I've done this after getting bored with it on the left) - very small screen users (that is the screen not the users) will have to keep scrolling to the right to find things.
Drop down menus & horizontal fly-out menus
Although they can be useful, I generally advise avoiding these types of menus. They are not very accessible and can be especially problematic on touch-screen devices which are becoming more common. Invariably they add a large overhead to the project build times - it can take most of a day to style a bespoke menu system. Unless your client insists, best avoided.
Forms
One of the most common errors in design - I often see forms designed beautifully but in ways that can't be built! Styling forms on websites is one of the most difficult tasks (unless done in flash). Most operating systems and browsers display a certain amount of styling but a point is reached where the styling is over ridden. Keep styling simple - look at what most of the popular sites do and seek to emulate this.
