Yesterday, The Telegraph website rebranded and rejigged.
From a chrysalis of clunky and drab pages emerged a butterfly of
colour,navigability and engagement.And herein lie some key lessons
for websites of all shapes and sizes - because you should be
following principles of good web design whether your site has three
pages or 3,000.
Let's look at the The Telegraph's rebrand improvements to see
what you can learn from it about web design:
Keep your online and offline brand consistent
The Telegraph.co.uk masthead is dead - long live
Telegraph.co.uk. The site is now under the banner of 'The
Telegraph', with the stated aim of creating a more consistent brand
with the newspapers (the Daily Telegraph and the
Sunday Telegraph). And the website now uses the same
colour palette as the papers too.
This is online branding 101 - your brand needs to stay
consistent on the web as it does offline. That means using the same
colours, feel, style of writing and, in this case, monikers. It
breeds familiarity among visitors to the site who know your
business from offline, and looks professional.
Make sure your navigation is easier than pie
The Telegraph's navigation wasn't too shoddy before, but it's
well worth highlighting how it's done. All nav happens across a
simple bar across the top. This is how navigation should be: all
along one strip, not with some across the top and some down the
left-hand side. You should also avoid duplicating links and buttons
on a single page - it confuses readers. Keep links to all other
pages in the same place, so a user can find them instinctively and
immediately. Attention spans online are mere microseconds, and if a
user can't find what they're looking for straight away, they just
go to another website.
It also helps to have a 'breadcrumb trail' across the top (that
tells you which sub-sections of the site you're in) if you have a
fairly complex site with numerous sub-sections. You should
also have lots of internal links (going to other pages on your
site) from text. This helps your SEO and
encourages users to stay on the site longer to find out more.
Multimedia and images are more engaging than text
The Telegraph online is now buzzing with big, bright images,
videos and graphics - it's full of colour, and much more engaging
than Telegraph.co.uk was. This is a simple lesson, but a crucial
one: imagery is powerful, and site visitors love it. Include plenty
of nice images (particularly if you sell products online, as users
can't see them in real life), and make sure they're top quality.
Ask someone with a good eye if you're not aesthetically
inclined.
Introduce the team
Key Telegraph journalists now have their own dedicated web pages
on the site, introducing them and their specialities and listing
recent articles. This is becoming an increasingly standard feature
on newspaper sites, and for good reason. The web is a dauntingly
anonymous and vast place, yet people love people. Introduce your
visitors to the faces behind the website, and they feel more loyal
and emotionally involved with the site. This is such a simple
concept for business owners to imitate: just have a nice 'about us'
page with pics of all of you, and brief bios. This also gives you a
chance to shout about your skills and expertise.
Check out the website of this B2B sales performance consultant to see what we
mean.
Keep an eye on the competition
Marketing.co.uk wrote of the redesign: "The investment in
digital media is a bid by The Telegraph Media Group (TMG) to
increase online readership and gain ground on Guardian.co.uk, site
which has received higher figures since April 2009." It's not wrong
there.
You might not be competing on as big a playing field as national
newspapers, but you need to be acting just as competitively. Check
your rivals' sites constantly to keep an eye out for improvements,
learn from what they excel at and what they botch, and strive for
the edge, always.
Other best practise website design tips
- Keep your page header and footer consistent across each page.
Make sure you have a logo in the same place on each page.
- Make sure your 'contact us' tab is obvious.
- Make sure all borders and images look neatly aligned.
- Use the same font and colour for headings / subheadings on all
pages.
- Keep the most important information above the fold (ie. so you
don't need to scroll down to see it).
- Calls to action ('call a sales representative' or links to
buying products) should always be above the fold and visible.
- Keep image size consistent - use only one or two image sizes
throughout the site.
- Don't make pages too long - you want to avoid lots of
scrolling.
- Leave plenty of white space to keep it looking clean.
- Aim to make every page of the website no more than two clicks
away from the homepage.
- Needs to look great - a strong image and clean branding are
crucial.
- Needs to explain what you do in a couple of sentences.
- Make sure your site displays as it should on popular browsers
in most up to date versions: Internet Explorer, Firefox, Opera,
Safari, and on smartphones.
- Make sure it loads up quickly - too many images and videos can
slow it down.
- A page of testimonials helps assure potential customers.
- If you're using Flash, include a link to a text version of the
site in the footer.
- If you have premises, include your opening hours.
- Include a 'contact us', 'about us', privacy policy and terms
and conditions along the footer. Search engines favour this and it
builds credibility.
- If you've won any awards, include them on the homepage to build
credibility.
- Make sure hyperlinks are obviously hyperlinks - they should be
a different colour (and possibly underlined too).
Get more advice on website
design