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.
Good advice. I’ve been guilty of inline styling of unique instances as a quick and dirty approach. I hate adding a class to a stylesheet for one exception.
Good advice, especially about printing. The prints never do justice to the website design.
I think its ok to use inline styling in one or two minor situations on part of a website, but yes CSS is the efficient / standards route.
Good advice in general. But, I really disagree with this statement:
“The absolute bottom end of monitor resolutions that you should be designing to these days is 1024 x 768. This is slowly be phased out as more and more people buy new, widescreen monitors with higher resolutions.”
Yes, very few people have resolutions smaller than 1024 x 768 any more. But screen resolution does not equal browser window size — lots of people don’t maximize. Also remember that in many ways, resolutions are getting smaller — many people browse on mobile phones and netbooks these days. People also browse on iPhones and Wiis and other devices where sizes cannot be changed by the user and are sometimes smaller than 1024.
I’m not saying to design to 800 x 600 necessarily. I’m just saying I disagree with your broad blanket statement. Personally, I almost always design liquid in order to accommodate as many users as possible and make my site as popular and successful as possible.
thank you need more like this….Cheers.
Good article! But these are not rules; more like guidelines, that work well in most cases.
For instance:
“Never use inline styling”
This is gernallya good practice but not a rule,Sometimes in a small single page website, inline style serves far better, than seperare stylesheets.
very useful
thank you
I totally agree with your suggestion of not using inline styling of CSS, but perhaps i think that naming CSS classes with the name of element’s ID is also not a suggested approach, since you might require to apply more than one class to an Element. The above row of “Never Use Inline Styling” shows and encourages the unsuggested approach of CSS usage, even when not Inline.
Making some standards in web designing is a better thing. How ever they may change from one design to another. However good instructions.
One thing you should also check is your output to cheap (mainstream) 8-bit LCD screens. Graphics with nice subtle color gradients designed on a high-end Eizo 10-bit panel can/will look crap on your visitors screens… It’s in little bit like going back to 256 colors =)
Great article Tom : )
I see it made many people react!
I’m personnaly thinking about the designing in group part. Awful isn’t it? I remember in Graphic Design school, I once was put in team with two really great designers. Really they were awesome! But they sooo were not able to work with other people.
Another time I was put in team with a guy I couldn’t stand (and he couldn’t stand me either), trust me, that was reflecting in the result.
In most of the cases, designing in group can be a real nightmare, but it can also be a really great experience in the end.
Fantastic article. I love the three user study apps you showcased I am going to start using them today!
The points of not printing out websites for sign offs is a great point as well so hard to implement especially with old school CEO’s who basically want everything printed out, while in the same breath talk about how “green” their company is…
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
good advice .. thanks..i like this article..
Thanks for the list. I need to get out of the habit of inline styling. I feel so guilty about it, and this proves to be an extra push. Thanks.
Nice article! This is not rules and we can take it as guidelines when we start work on the CSS.
Great post, I definitely agree that you should test your designs in different resolutions and on different monitors.
Thanks for sharing.
Another great and cheap user testing tool is Loop11 (www.Loop11.com).
You write “Test your design in multiple resolutions and on different monitors”. I think you need to add “… and on different browsers on different operating systems.”
In an ideal world, all browsers would render the same markup the same way. In this one, they don’t. You can follow Yahoo!’s lead and create an ‘A-list’ of browsers that your design really has to work perfectly for, followed by a ‘B-list’ of browsers you’d like to support but which may have minor glitches, but you need to make sure all the browsers in your A-list render the design acceptably before you release.
Wow this is a nice collection. Thanks for sharing
I’m happy that these rules are written down.. now.
I identify most with the incredible misuse of inline styles (I guess I could have just said “use” – its mere existence is a foul misuse).
I think that there are many conventions in web design that have worked in the past, and many wet-behind-the-ears web designers burst out of college and try to reinvent the wheel when it comes to structural, semantic, and navigational best practices. If I were to write a one-liner to describe this issue, I’d say “Standards are standards for a reason,” or “Don’t spin your wheels by trying to reinvent it.” Something clever like that.
Thanks for the post, Tom!
inline styling is pretty useful in creating HTML emails.