Tag Archives: web design rules

9 Hard and Fast Rules of Web Design

web-designWeb design is a broad art with thousands of different aesthetic choices, but ultimately all web designers have one common goal: to display content on the web. That’s why we can compile a list of hard and fast web design rules to use regardless of your website’s look or function.

Let’s start with the building block of your content: the type.

Typographical Rules

1. Your body font size should be between 13px and 17px. Though 12px font is common on websites, it’s really too small for the web. Fonts sized between 13px and 17px are easy to read on screens. Your readers shouldn’t have to squint!

2. Your line-height should be between 120% and 160% of your font size. In CSS, this might look like this:

body { font-size: 14px; line-height: 1.45em; }

This means that your font-size will be 14px and your line height will be 1.45 times that font-size, giving your text plenty of room to breath.

3. Put space between your paragraphs. Again, so your text can breathe. Spaces can be coded right into your stylesheet with the following CSS:

p { margin-bottom: 1.5em; }

Now every paragraph will have a blank line-and-a-half after every paragraph.

General Design

4. Don’t auto play music, not ever. Not even if your website is about music. Not even if you’re in a band. Not even if you think it’s so perfect and audibly illustrates everything you want your website to say. Just. Say. No. Provide musical links or widgets so your site visitors can play your tunes at will – I assure you they will appreciate your consideration.

5. Make the navigation prominent and easy. Your navigation is the backbone of your website, and it’s also where people will first look to find the information they want. Your navigation should be clearly visible, and your menu links should be labeled with clear titles like ‘About’, ‘Portfolio’, ‘Contact’, etc.

6. Include contact information. Most websites have a goal, whether it be to land a sale or just get someone to call the office. For those sites, having a clear way to contact the website owner is paramount. Several ways is even better, such as a phone number, an email address, and a contact us form. For some websites, the goal is just to get visitors to read blogposts. Even in those cases, readers like to get in touch, so provide some way for them to reach you.

7. Be consistent. To make your site as user-friendly as possible, certain key elements should stay in the same place on every page like navigation and the site header. Other important points of consistency are to use the same font choice, weight, and size for headers, the same border (or no border) around content photos, and the same color for links across the site.

Compatibility

8. Browser check. Your website might look great in Safari, but Firefox might have other ideas on how to render your site. Be sure to run your website through a browser checker like Browser Shots to make sure there are no huge glaring errors in any of the major browsers.

9. Be mobile ready. Gone are the days when mobile compatibility is optional. More people than ever are browsing the net on their phones, so it’s crucial to ensure your website looks good on mobile devices. Whether you opt for a separate mobile site or a responsive one (check out the pros and cons of each in this blogpost), just be sure you have a mobile solution.