Principles

32 principles to follow for a great website

A short while ago we were discussing the principles of what we do in marketing, web design and development, ecommerce and SEO.

Some of them we have written about before such as ECommerce web design principles but we have not really tried to “bring it all together” before.

Anyway the ‘boiler room discussion’ became an idea for this newsletter. Whilst we like to think we are all those good things like creative and innovative, we really can’t say we are “deep thinkers” who can and have “deep thoughts” about underlying principles so much of what comes below comes from people who really do have those deep thoughts.

Principles: Marketing

So, when designing a website, “what people want” should be the starting point. Our essay: What is marketing? covers the process and the principles are, generally well known. They first 4Ps are the classics laid down by Philip Kotler, Professor of International Marketing at the Kellogg School of Management at Northwestern University, in his book Marketing Management, first published in 1967 but over the years others have been added:

1. Product
   No product (or service) or no need for it and there is no business. It must be distinct from the competition.

2. Place
   Where you can buy is crucial. The web is just one channel.

3. Promotion
   If no one knows your product exists, nor its benefits whether tangible or intangible, then they can’t buy and the psychology of branding can give an extra edge too.

4. Price
   Price says a lot about a product and its place in the market, its quality and more.

5. Process
   Staff training for product knowledge and service, building relationships with customers and suppliers, understanding the ‘touch points’ and interactions all affect success.

6. People
   Understanding customers and what they want; staff who want to serve those customers; having committed suppliers who’ll go the extra mile – the psychology is crucial.

Principles: Design

Good design makes sure the message gets across and in helping with branding and sales that is crucial. Good design helps in business to communicate ideas and information emphasising what’s important whilst including what is required.

Good design makes people want to ‘stay and play’, find out more and builds trust so that people will act positively – things that are really important on a website where the competition is a click away and where there is little physical investment such as having to go across town to see a competitor.

Dieter Rams, a German industrial engineer, is one of the most influential designers of the 20th and 21st centuries. He is best known for his work with Braun consumer products. He asked himself, “Is my design good design?” His answer to that question gave rise to his famous ten principles. His ethos is the mantra of modern designers: Less and More. These principles were born in the realm of industrial engineering, but can equally be applied to websites. He said good design is:

• aesthetic
• as little design as possible
• environmentally-friendly
• honest
• innovative
• long-lasting
• makes a product understandable
• makes a product useful
• thorough down to the last detail
• unobtrusive

Following his principles makes sense as almost anything with all those characteristics is going to be liked. But we still have to apply those principles. However, the basics of good graphic design are just as true for web design. Most are well known and some (like proportion and the golden ratio) were known over 2,000 years ago. They include:

1. Balance
   Larger, darker elements appear heavier than smaller, lighter elements. A large light shape can be balanced by a small dark shape close to the edge. In symmetrical balance, the elements used on one side of the design are similar to those on the other side; in asymmetrical balance, the sides are different but still look balanced.

2. Contrast
   There is more to contrast than colour such as contrasting shapes, contrasting textures or contrasting sizes. Too much contrast or opposing elements can destroy unity and make something difficult to look at which is fine if you want to depict chaos but otherwise…

3. Emphasis
   Emphasis is that to which the design draws your eyes. Giving everything equal emphasis gives a bland result. Design needs hierarchy, dominance and submission. Is that like life?

4. Gradation
   Gradation of size and direction produce linear perspective. Gradation of colour from warm to cool and tone from dark to light can add interest and movement. A gradation from dark to light will cause the eye to move along a shape.



5. Harmony
   Harmony is combining similar, related elements such as adjacent colours on the colour wheel, similar shapes etc.

6. Movement
   Movement is the path the viewer’s eye takes through the work of art, often to focal areas. Such movement can be directed along lines, edges, shape etc..

7. Proportion
   Proportion is the feeling of unity created when all parts relate well with each other. Many famous works of art and architecture such as the Mona Lisa, the Great Pyramids of Giza and the Parthenon have proportion based on the golden ratio (Φ) of 1 to 1.618.

8. Rhythm
   Rhythm brings consistency as patterns are easy for people to understand and repetition creates patterns. Repetition though needs some variation to relieve monotony and thus to create interest repeating elements need a degree of variation but one, like in music, with a rhythm.

9. Unity
   Unity is keeping like elements together and diverse elements further apart.

10. Variety
    Variety is the use of several elements to hold the viewer’s attention and to guide the viewer’s eye through and around the design.

Principles: Usability

If people can’t use the site they won’t stay or return. This is so obvious it’s amazing it needs saying. However the number of times one sees sites where the navigation is hard to understand or use or that are inaccessible or ‘lose data’ when you press send………

1. Access
   Your site must be available (or people must know why it’s not) and load fast. It must have easy to read type and plug ins must work.

2. Understanding
   Keeping things easy to understand is crucial. People don’t want to have to think. They want to achieve THEIR goal(s). So tell them who you are, what you do, how to find you and how to contact you.

3. Navigation
   The navigation must be obvious, show the choices and give a sense of what lies beneath the links. Users should not have to click on things just to find out what they are. The navigation should also reveal the most important content of the site so that users have a good sense of what's there by looking at the top-level categories. Search should work simply.

4. 

   Content
   Content is key but people don’t read they skim – though they’ll notice bad use of language or bad spelling – so make things digestible via the images (a picture paints a thousand words), headlines and subheadings with more detail for those that want it.

5. Colours
   Colours can affect the usability of your website as some people have colour blindness issues. Not only that, colours on in page links make it easier to navigate if used well.

6. Validity
   Writing valid HTML and CSS helps keep your website usable in many browsers across many browser generations. And it’s important to stay up-to-date on what browsers will and won’t support.

Principles: Infrastructure

1. Simplicity
   "Keep it simple, stupid!" It’s easy to complicate things, but keeping things simple in IT is often ignored. Using the simplest language, not doing things that aren’t needed, understanding what the intermediate and end users need rather than say they want.

2. Modularity
   Modularity is just good engineering so that when you want to change the system, you can only one part, which will only require you to understand and test that part. Nowadays it’s sometimes referred to as DRY (Don’t Repeat Yourself).

3. Tolerance
   Tolerance allows a system to continue operating properly in the event of the failure of (or one or more faults within) some of its components. Tolerance is no excuse for a product which contravenes a standard.

4. Decentralization
   A single common point which is involved in any operation trends to limit the way the system scales and produce a single point of complete failure which, obviously, is to be avoided.



5. Integration
   Designing a system to work with as yet unspecified super or sub systems that may be inside or outside the organization (e.g. payments) so that the system tries to do one thing well, and leaves other things to ‘better’ solutions.

Principle: SEO

Remember, Google looks at pages and not just sites. Search engines use a wide range of factors to determine any individual page’s performance in any particular search. Google says it uses over 200 factors to determine which page is the most relevant to place at #1 for any particular search.
To achieve and maintain high search engine ranking there are three major areas that have to be correct:

• Technical: factors such as correct HTTP headers, page load speed, no page duplications.

• On page: factors such as search engine friendly urls, search relevant page titles and headlines, proper use of semantic markup such as h tags and meta descriptions.

• Off page: factors such as the number of back links pointing to the site (which affect PageRank), use of xml sitemaps, article submissions, blogging.

But getting each of these areas ‘correct’ does not cover SEO principles. The crucial principles are:

1. Write for people
   It’s people who come to your site to buy. It doesn’t matter how many times Googlebot visits, it will never buy anything from you. That does not mean you should ignore it, just recognize that it’s people that buy and the purpose of SEO is to get found so they can buy. That means you have to understand that search engines primarily look at text (not all the flashy stuff) so concentrate on what you write. If in everything you do you make sure you can answer “yes” to the question “does this help the end-user?” then you will probably be found and they will probably buy.

2. Create quality content
   It’s difficult to differentiate commodity products and services but that does not mean it can’t be done. By keeping it simple, writing good English and giving the facts for an informed decision based on ‘What’s in it for me?’; by showing the benefits and engaging the emotions to create an image in the prospect’s mind using the appropriate tone of voice you can create good quality content. It won’t appeal to everyone, but it’s not meant to, it needs to appeal to your desired customers.



3. Have patience
   Getting good rankings rarely happens overnight. Google has to find your page and crawl it, index it using hundreds of characteristics and then give the searcher the most relevant results based on their query, query history etc. And, of course it’s not just looking at your page but at all the other at least 8.67 billion pages (as at Wednesday, 14 November, 2012). It has to do that every time there is a query and do it in milliseconds. And you thought it was only your page(s)?

4. Think long term
   There are many snake oil salesmen out there. There’s a new fad (scam) every day. But, you know what? It’s an arms race for those that are trying to ‘beat Google’ but they don’t have $50 billion a year in revenues to protect together with some of the best brains on the planet working for them. Don’t be fooled, Google has the ‘data muscle’ and brains to change its algorithm (daily) to beat them.

5. Test and measure
   Make sure you use analytics and webmaster tools to understand where you are and whether what you have done when you make a change has improved things or made them worse. It’s done pretty much everywhere in business you know.

Written by Richard Hill

Daily news

2012

November: 32 principles for a great website

October: The move to mobile

August: Does social media affect SEO? If so, how?

July: Building a better ecommerce site

June: Using APIs to leverage business growth

April: Website design & development brief

March: Web analytics and webmaster tools

February: Choosing a web design company

January: Mobile web & search strategy

2011            

2010            

2009            

2008            

2007            

2006            

2005            

Essays          

Some testimonials

Just a brief note to let you know of a change of email address. I'm very keen to continue receiving your newsletter as you are by far the most intelligent and perceptive writer of these that I receive. Many other (lesser writers) tend to simply regurgitate whatever the latest next best thing is without thinking about the implications of what they write. So thank you for all the interesting things you have written over the years.

Nick Davis
Abacus Photography

Just to say Hi and that your article on going mobile is very good….Spot on! Best wishes,

Roger
Roger Ellman

A very good run down of design........Mention was made in the newsletter of breadcrumbs. This was a new term to me. I clicked on the e-crm logo to get the front page and used the search box which was not a great deal of help. Perhaps a glossary is needed somewhere.

Tony Cox

very useful!

Giles White

As ever excellent. Best Regards,

Guy Mathiot

Thanks for your latest newsletter – interesting and helpful, as usual. All the best,

Jim
Jim O’Connor

Another very good article and useful summary. Thanks

Paul Lewis

Hope this finds you well. I think the newsletter is great and would like to keep getting it. Could you please change my e-mail address to this new one? Thanks very much. Regards,

Tim
Tim Goodall

Nice newsletter… as always. This is one of the few that I actually read ☺ Cheers,

Trevor
Trevor Lever