StormBiz Blog

Everything you need to know about website design, website hosting, graphic design, our website design courses and more...

Web Design - Simple Mistakes and Golden Rules

Good Web DesignGood Web DesignGood web design is something that can be achieved relatively easily by sticking to a small set of guiding principles and avoiding some very common mistakes.

Truly excellent web design skills are born out of years of experience, dedication, and plenty of hard-learned mistakes. Fortunately, being truly excellent at web design is not a pre-requisite for building a fantastic website, and the lessons learned from those mistakes can be passed on without the hardship.

This article contains some of the principles which I have learned the hard way, and the easy way. Each principle is fairly obvious, but so many designers ignore them for one reason or another, and the consequence is a hard-to-use, poor looking site that is difficult to manage, and fails to make the top 1000 in Google. If your website adheres to the principles below, it will almost certainly be much healthier, and you, and your visitors will reap the benefits.

1. Keep Everything Obvious - Don't Make Me Think

The book entitled Don't Make Me Think!: A Common Sense Approach to Web Usability by Steve Krug, is one of the best selling books on the subject of web design and usability. Personally, I think thinking is a good thing, but at the same time, I don't want to be struggling to figure out how to submit a web form!

Visitors to a website expect certain conventions, breaking these is a great way of losing visitors. People expect to find the navigation at the top of a page, or on the left hand side. Logos are mostly found on the top left. Much research has been conducted into how people view and use web pages. The good news is that you do not need to know all of this; instead, look at how larger companies, such as eBay, Amazon, Google, and Microsoft structure their pages, and the language they use, then emulate them.

website colourswebsite colours2. Limit Colours

A website using too many colours at a time can be overwhelming to many users, and can make a website look cheap and tacky. Any users with colour blindness, or contrast perception difficulties, may even be unable to use the site.

Limiting a palette to 2 or 3 colours, will nearly always lead to a slicker looking design, and has the added bonus of simplifying your design choices, reducing design time.

Software like Color Wheel Pro, can greatly simplify the creation of a pallet, by showing which colours sit well together. If you really do not have the eye for design, then software like this provides the perfect way of escaping monotone, or badly combined colour schemes.

If your site uses blue and yellow together, or red and green, then it may present problems to anyone suffering with colour blindness. Vischeck.com provide free software that can simulate different types of colour blindness.

Web fontsWeb Fonts3. Be Careful With Fonts

The set of fonts available to all visitors of a website is relatively limited. Add to that the possibility of a user having a visual impairment, then the options become even smaller. It is advisable to stick to fonts such as Arial, Verdana, Courier, Times, Geneva and Georgia. They may not be very interesting but your content should be more interesting than your font, and if it can't be read, what is the point of having a site?

Black text on a white background, is far easier for the majority of people to read, than white text on a black background. If you have large amounts of text, then a white or pale background is far more user friendly. Always ensure that there is a good contrast between any text and its background. Blue text on a blue background is okay, as long as the difference in shade is significant.

Verdana is often cited as being the easiest to read on the screen. Georgia is probably the best option for a serif font.

web design developmentWeb Design and Development4. Plan for Change

If you fix the height of your page to 600 pixels, will you still be able to add additional menu items, without completely redesigning your page?

The ability to add or remove content from a website is fundamental to the ongoing success of it. Having to rewrite the entire web page, or website, each time you want to make a small change, is a sure fire way to kill your interest in your own site, and will negatively impact your overall design and usability.

Getting a good idea of how your website is likely to grow, will clarify how best to structure your layout. For example, a horizontal navigation is often more restrictive than a side navigation, unless you use drop down menus; if your navigation is likely to grow, and you hate drop down menus, then your design choice has been 99% made for you!

Understanding how to use Cascading Style Sheets (CSS), avoiding unconventional layouts, and complicated backgrounds, will all help enormously.

5. Be Consistent

Again, don't make your visitors think! About how to use your site, at least. If your navigation is at the top on your homepage, it should be at the top on all other pages too. If your links are coloured red, ensure the the same convention is used on all sections.

By using CSS correctly, you can make most of this happen automatically, leaving you free to concentrate on the content.

holiday picturesNon Relevant Holiday Pictures6. Keep it Relevant

A picture is better than a thousand words, but if the picture you took on holiday is not relevant to your Used Car Sales website, then you should really replace it with something which reflects the content or mood of the page; a photo of a car perhaps!

If you can take something off of your web page without it adversely affecting the message, appearance or legality of your website, you should do it without hesitation.

Avoid the need to add images, Flash animations or adverts, just because you have space. This wastes bandwidth, and obscures the intentions of your website. If you absolutely must fill the space, then exercise your imagination to find something as relevant as possible.

Keeping your content focused will ultimately help your search-engine rankings

cascading style sheetsCSS-Cascading Style Sheets7. Become a CSS Expert

Cascading Style Sheets should be any web designer's best friend. CSS makes it possible to separate the appearance, and layout of your page, from the content. This has huge benefits when it comes to updating and maintaining your site, making your site accessible, and making your site easy for search engines to read.

CSS at a first glance is very straightforward but it is definitely worth investing in one, or more books. Two great books are: CSS the Missing Manual by David McFarland and Bulletproof Web Design by Dan Cederholm.

8. Avoid Complexity

Using standard layouts for your web page will save you development time, and make your site easier to use. Pushing the boundaries nearly always leads to quirky behaviour, cross-browser problems, confused site visitors, and maintenance headaches. Unless you really do like a challenge, then avoid complexity wherever possible.

Many standard layouts are freely available online with much of the boring, repetitive work already done for you.

The principles above all border on common sense, and are well known to most people, yet so many sites continue to deviate away from them, and suffer as a consequence. Following these principles will help you keep away from trouble, although it still doesn't guarantee it!

For a free quotation, or more information, please contact us

Continue reading
0
  895 Hits
895 Hits

Why Your Site Should Be Developed With CSS And Semantic Markup

webdevelopment1Web DevelopmentOne thing that I have learned in over a decade developing web sites is that the 'Net is continually changing, and to keep up you need to change with it. One of the more recent developments in web design is the use of CSS and semantic markup. CSS and semantic web design has several benefits: clarity in code, browser and other web-enabled devices compatibility, separation of content and presentation, smaller burden on bandwidth, and better visibility to search engines.

Back in the day, we designed sites with tables and hacked those tables into doing things that they were never meant to do. The table tag was designed to display tabular data, not as a way to render the layout of a website. Unfortunately, a better alternative did not exist, so we used tables. This made for inefficient, slow loading sites with code that was very hard to read and maintain. defines semantic markup like this:

Continue reading
0
  552 Hits
552 Hits

Why a CSS Website Layout Will Make You Money

web devlopmentWeb DevelopmentAlthough CSS layouts have been around for years, they haven't become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) - nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at http://www.thecounter.com/stats/2004/August/browser.php).

So, why should you convert your website from its current table-based layout to a CSS layout? It'll make you money. Simple really. And here's four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It's not unusual to see reductions of 50% or more in file size when switching from tables to CSS. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

Continue reading
0
  622 Hits
622 Hits

Why CSS Is Good For Your Web Site

css style sheetsCSS Style SheetsCascading Style Sheets (CSS) are used within the HTML behind your Web site as a way of controlling how each page is laid out and what elements on it look like. For instance, you can use CSS to make headings in your copy a standard size across the whole of your site.

CSS has been around for several years and is supported by all the major browsers available today, including Internet Explorer for the PC and Mac, Firefox, Safari and Opera.

Using CSS to control your Web site will give you several benefits:

Continue reading
0
  586 Hits
586 Hits

Calendar

Wait a minute, while we are rendering the calendar

Latest Blogs

Reward Credit

Login/Register for credits