In the relative short time that websites have been around, compared to other media, much has been learnt about web design. There aren’t any ‘rules’ beyond web standards and even then, they’re only guidelines. There are a number of other guidelines or rules that you should be adhering to when designing for the web. There isn’t a manual or paper or anything to refer to except people’s findings and common sense, mainly because the web is constantly changing and also because there is often more than one way of doing something, suiting different contexts. Here are a few rules that you definitely should be taking note of.
Don’t Print a Web Design
In some companies, usually in-house jobs, it may be common to get a design signed off by printing concepts and bringing them to a meeting. This isn’t a good idea as there are some significant differences to viewing something intended for a computer monitor compared to viewing it in printed form.
- Colours in print won’t match the intended colours of the design on screen.
- Size. Long pages will look smaller on a sheet of paper and short pages will appear bigger when printed. By viewing on a screen, every page will look exactly as it should do when the site is built.
- Lack of interactivity. Even when mocking up a design concept, you can add interactivity to convey functionality of certain parts of the site without confusion which is obviously impossible to do in print.
If you’re still presenting designs in printed form then do something about it. Take a laptop to meetings or ask to get a cheap computer installed in the meeting room. It will save a lot of hassle when the client sees it on screen and thinks it is different to what they saw on paper.
Resources
- Print Design to Web Design: Comparative Analogies (CSS Tricks)
Don’t Base Usability Decisions on Assumptions
If you’re making usability decisions because you or your colleagues assume how users will use your site, you almost certainly won’t be getting the most out of them. In fact, you they may feel frustrated when they use your site, if they haven’t left and gone elsewhere.
Do some testing to determine exactly what you’re users do when they use your site. A site could be performing adequately but even a little user testing will go a long way to improving a user’s happiness and increasing conversion rates.
Resources
Usability testing is easier and much cheaper than you think. Here are a few ways of testing that can get you started:
- Usertesting.com – See videos and written reviews of how users use your site and what they think. Highly recommended. (UX Booth review)
- Userfly – Record how users use your site by adding some Javascript code.
- Silverback – Mac OS X app that records people using a camera while they use a website.
Design by Committee happens – Deal with it
Basically, design by committee happens when there are too many people making decisions with poor decisions being heavily influenced on other people and can involve designing on the fly with people standing behind you. Any web designer who takes pride in what they do will tell you that this is not an ideal working condition and design almost always suffers for it.
This will likely happen in larger companies but can happen with clients in design agencies and even freelancers too. There are things that you can do to minimise the impact of design by committee such as simply refusing to ‘design on the fly’ giving suitable reasons to why it is a bad idea. Paul Boag runs through some great tips in Combating Design By Committee.
Resources
Never Use Inline Styling
Inline styling is a way of applying CSS properties directly into HTML elements such as in the example below:
Title Goes Here
Specificity defines inline styles as the most important declaration and applies that, ignoring any properties in a separate stylesheet. If we wanted to change the H1 to green with a padding of 10px in a separate stylesheet, we can’t because the inline style takes precedent. You can get around this by using !important but as it is forcing a style by circumventing specificity, it isn’t good practice.
Obviously this causes problems when attempting to change styles and not knowing that it has an inline style. Also, in a separate stylesheet all H1s can be targeted with one line of CSS whereas inline styles are inefficient as they are only applied to the element it is included in.
Resources
Test Your Design in Multiple Resolutions and on Different Monitors
As designers, we like to have the most up-to-date monitors as we can afford. We also like to use bigger monitors with higher than average resolutions which give us the most screen real estate to work on.
Of course, we’re not the average web as they tend to use monitors with much lower resolutions. Remember the lowest resolution for the site that you’re designing for. The absolute bottom end of monitor resolutions that you should be designing to these days is 1024 x 768. This is slowly being phased out as more and more people buy new, widescreen monitors with higher resolutions. So when you’re designing on you’re large monitor at 1650 x 1050 or higher don’t forget that your work will look different on different screens.
As an added benefit of viewing your work of different screens, you’ll see how different monitors handle colours and contrast allowing you to make any amends should something appear unclear on a particular monitor. The average computer user doesn’t change their monitor settings, so while it’s impossible to get everything looking exactly the same on every single monitor, you can adjust your work so it looks as good as it can on as many monitors as possible.
Further Rules
We’ll be looking at other rules in a future post but in the mean time if you have anything to add in the comments below don’t hesitate to let us and the rest of the readers know.
0 comments:
Post a Comment