The Perfect Web Page“The Anatomy of a Perfect Web Page” (2013 edition) is designed to give you an overview, introduction and in depth references for all the elements which make up the complete web page. (On a side note, here’s a guide we wrote in case you want to learn how to make any of those elements more interesting)

As Web Design, User Experience, Search Engine Optimisation, Conversion Rate Optimisation and many other traditionally individual disciplines become more and more unified it’s important, regardless of your specific role, to be aware of how all the elements on a page contribute to your site’s success and their relationship with one another.

Each section is short and easy to understand. We’ve linked to dozens of high quality and comprehensive resources on other sites where you can learn about each element in much more depth.

We hope you enjoy it.

Update: Many people asked what we used to create the page diagrams. We used Balsamiqwhich we also use to rapidly create wireframes when we’re building websites for clients.

01 / Design & Content

Your design needs to, quickly and efficiently, communicate what your website is about and demonstrate how it can add value to the user. Design is as much about responding to user needs as it is about visual appeal. Design and content should work hand in hand, such that the design maximises the impact of the content. You can create more engaging content by selecting the content medium that best communicates your message. As such, copy, text and images can all be used cohesively to create a very effective content-rich page.

1 – Headline

Design & Content - HeadlineYour headline is arguably the most important piece of copy on your page. In terms of user navigation, it needs to describe the content featured on the page, so that the user knows what to expect and is reassured that they are in the right place. This consideration should tie in with the SEO perspective – that search engines understand what your page is about, so including your primary keyword is considered best practice.

If this is a product page, for example, it is perfectly reasonable to simply use the product name. With more social content such as blog posts, you need to also consider how ‘click-worthy’ your headline is, since you are typically relying on click-throughs not only from the SERPs but also from social networks such as Twitter.

Recommended Further Reading

2 – Navigation

Design & Content - NavigationInformation Architecture (IA) is the organising and labelling of your website content to support usability and findability. You want to enable your users to find what they are looking for, whilst also funnelling them into the areas you want them to go. Navigation is fundamental to IA, and should be determined during the research and planning phase.

Fundamentally, your navigation must make it as easy as possible for your users to complete their immediate goals. What task are they trying to accomplish? What problem are they trying to solve? You want to determine how to communicate with your users and show them how to complete their goals, in the most natural way possible.

On large sites, you will need to categorise your pages in one way or another, by placing them in logically relevant groups. There is no ‘correct’ way to do this, but some options you may consider:

  • Type (E.g. ‘Beds’)
  • Intended use case (E.g. ‘Sleep’)
  • Contextual setting (E.g. ‘Bedrooms’)

Recommended Further Reading

3 – Copy

Copy WritingWriting for the web is writing for both users and robots at the same time. In terms of SEO, your copy must be unique, and you should use your keywords and synonyms wherever it feels natural – certainly don’t be afraid to use them.

Your copy should be clear and descriptive, focused on benefits over features and speak with the potential user in mind. Further, you want your copy to be memorable, so write with cognitive ease in mind – avoid the use of jargon and stick to phrases people can easily understand (and may realistically search for).

Using familiar language reduces cognitive strain, making your copy both more believable and more persuasive.

Recommended Further Reading

4 – Readability

Design & Content - ReadabilityThere is no point creating highly memorable content if no one reads it in the first place, and you can further reduce cognitive strain by making your content easily digestible. Typically users will scan your content and pick out the parts which are most relevant to them, and you can help them identify these parts by making your copy more ‘scannable’.

Make sure your font type and size are legible, and that your line height is comfortable to read. Use white space to break up blocks of text with paragraphs and sub-heading, and pick out your most important phrases in bold or present them as a list of bullet points.

Recommended Further Reading

5 – Web Fonts

Design & Content - Web FontsUntil relatively recently, web designers were restricted to a limited range of fonts to use as text on a website. More creative fonts had to be embedded in images (or flash), so any copy they represented was either uncrawlable or described using an alt tag.

Webfonts allow designers and developers to make use of much more creative fonts, whilst still utilising live, crawlable text. Typography is a subject in itself, and web designers have been using bold and creative fonts to attract user attention for years – webfonts just make the process SEO friendly.

You often have to pay a license for the use of webfonts from providers like,MyFontsTypekit and Font Deck. There are some free services though like Google Fonts.

Recommended Further Reading

6 – Images

Design & Content - ImagesThere is significant research to suggest that images are much more memorable than text, and many online shoppers will browse by looking at images alone. For product pages, use crisp, clear images and make your image space as large as possible. Also consider including a larger version or zoom function.

Make your default image your most relevant image (e.g. best selling colour option) and include lots of additional images to cover different colour options, products in/out of context and group shots. If you’re reseller, you can add unique value by doing your own photography or demonstrating a unique value proposition, which will set you apart from your competitors’ stock images.

Note: If you do not own the images outright, you must either obtain the rights to use the images or use images already licensed for commercial use (via Creative Commons or similar).

Recommended Further Reading

7 – Trust Signals

Trust SignalsIn order for people to buy from you, they must first trust you. In addition to great design, content and UX, you can help build user trust through incorporating trust signals, such as customer testimonials. Most trust signals aim to convince the user that the website is run by real people, is large enough to handle their business, and is trusted by other like-minded users.

Other common trust signals include

  • User reviews – in particular, video reviews, as they are more difficult to fake
  • Live chat – reaffirms to the user that real people operate the site
  • Q & A – user questions that are answered by staff or other users, demonstrating that other users are interested/have purchased the product also
  • Local phone number (in addition to a non-geographic number)
  • Social media share counts (if significant) – social proof
  • Listing a physical address (and encouraging visitors)
  • Client lists/logos
  • SSL or credit card logos
  • Transparent Terms & Conditions pages
  • Industry association logos or accreditations
  • Social media accounts – their very existence implies that you are investing in your site

Recommended Further Reading

8 – Breadcrumbs

Breadcrumbs (markup)Breadcrumbs are an important factor for website usability, as they confirm to the user where they are, often their browsing journey so far and it also allows users to quickly jump back to higher level categories – no matter which page they initially land on. Breadcrumbs are also useful for SEO as they enable search engines to determine your site structure more easily.

Utilising microdata markup allows the breadcrumb data to display within the SERPs – rather than an ugly URL, it simply displays your domain name and breadcrumb link. This is another nice trust signal that could help increase CTR.

Recommended Further Reading

9 – Video

VideoVideo can be used on product pages to communicate features and benefits often much more effectively than text or images, and many companies report a significant increase to conversion rates after embedding product videos. Video content also increases the richness of the page, improving user experience and acting as an additional trust signal.

Customer video reviews offer a neat way of combining user-generated video content with a very strong trust signal (particularly if they are showing off the product). Additionally, you can transcribe your videos very cheaply, using services likeSpeechpad, which provides unique, natural, highly relevant text content that you don’t need to create yourself.

By setting up your video hosting correctly and using the correct markup, video rich snippets can display in the SERPs, which statistically improves CTR and allows you to ‘steal’ clicks from better ranked websites.

Recommended Further Reading

Design & Content - FooterAs part of your site wide template, users expect to find certain information in your footer, such as company page links (E.g. About Us, Contact Us), links to ‘other’ pages (E.g. Blog), T & C links and social account links.

There is an argument that users who have scrolled all the way to the bottom of your page are highly engaged, so you can optimise your footer with additional CTAs, such as a newsletter sign up form.

You could also reward a users intrigue and make your pages more interesting with a unique, quirky or humorous footer design.

Recommended Further Reading