designing websites - what to include
This is a lot harder than the list of 'avoids' as I am mindful not to encroach on your design skills which I imagine are considerably more developed than mine!
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!
Don't design into a corner
Websites are 'living documents'. Invariably they change over time often placing great strain on your original design concepts. In your mind try to imagine the menu system doubling in size - is there room for this? Horizontal menus quickly use up space so are only suitable where you are pretty sure they describe main sections unlikely to grow too much. Vertical menus are much better for growing sites, but please always think twice before resorting to drop-down menus! So PLAN for expansion unless you have it signed in blood from your client that this will never happen!
Keep the template structure simple (does not mean boring!)
Generally a site will have a homepage design, then one or two drilldown page designs which may have a similar header and footer but more or less columns. It is possible to use the same structure but vary the layout to keep interest without resorting to multiple templates. For example if you have 3 columns try not to have 5 variants on the relative widths - this massively adds to the CSS work to create the pages. Lots of template variations add to the build costs considerably.
Show the what's different, not what's the same
To keep your design time down show all the elements the client and I need to see, but avoid endless repetition. Take the approach 'this is how all the pages will look until you get too this page which is different because of this . . . '
Nothing is more than 2 clicks away - architecture
This is a golden rule from a famous book called 'Don't make me think . . . ' Basically all the important information should be no more then 2 clicks away from the homepage. Of course you can go down 3 and 4 levels but the information here should be for the dedicated visitor who is already committed to the website.
Do think constantly about not just the design but the architecture of how a visitor finds their way though a site and cross-references pages. Your design should be self explanatory in this regard. I have built sites that I didn't understand how to use, and it didn't get any easy after completion. If I don't get it there is a good chance the user won't either!
Grids, grids, grids
Keep design elements as far as possible in grids. This should not stifle your creativity. Draw lines in your mind splitting the site up into rows and columns - this is how ALL sites end up being built. For example - if you clearly have 3 columns don't suddenly have copy in the middle column straying over into the right column! In print this is fine, but in websites it create a headache! We have to create a new structure just to accommodate that. W
We web builders see the world in blocks - its a bit dull, but with some well crafted background images we can disguise this ugly trait!
Positioning of elements
Try to keep all the important elements in the top 600 pixels of the site (that's 600px of height). Visitors will scroll, but the top is where snap decisions are made about the page's content.
It has become popular to have a mini-sitemap at the bottom of most pages - these are useful for both visitors and search engines.
Accessibility | Sitemap | Home
Having this subtle menu right at the top of the site in an unobtrusive way really helps screen readers. Hidden in the list before 'accessibility' I always create a link that bypasses all the site's menus to jump to the start of the page's content. Screen readers can then dive into your site quickly just as sighted readers do. Sitemaps should always be in the design.
Scale
This section is the opposite to the 'avoids'.
The maximum safe width for a fixed-width website is 990px, but more realistically 980px. There is a school of thought that prefers 960px but I've yet to have any problems going to 980px. Once the safe width is exceeded you run the risk of introducing horizontal scroll bars on smaller screens which is very bad. Smaller screens are no longer old-fashioned computers saved from the ark - they are the latest tablet devices which are bridging the mobile and desktop markets. In terms of screen size in pixels we are still stuck in 1998 despite the availability of huge monitors in the office & home.
If designing at 100% resolution - ie 980px wide at 72dpi you'll know exactly how to scale all the elements because you are looking at how the site will appear from the outset.
There is NOTHING wrong with 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. Check as you go by scaling down and asking yourself 'does this look too small in places'.
Bleed
Again, the opposite to the 'avoid' section. Keep in mind what happens to all the dead space either side of your design - specify the design or at least the colour. Your design may stop at the 980px mark but on a screen 1920px wide more than 50% is dead white space unless you fill it with something!
Contrast
Keep contract ratios between copy and background images or colours high. 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.
Forms
Always worth including for general contact as many web users use browser based email accounts which don't work easily with ordinary email links. Users may also be visiting your site from a work computer - forms are convenient. Your should also provide a standard email link too.
Legal's
For limited companies in the UK the Companies Act 2006 requires that websites include the registration number and registered office address of the company somewhere. It can be anywhere but not too hidden!
