The Anatomy of a Perfect Web Page (2014)

“The Anatomy of a Perfect Web Page” (updated for 2014 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 incase 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 Balsamiq which 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

Your 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.

2 – Navigation

Information 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:

3 – Copy

Writing 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.

4 – Readability

There 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.

5 – Web Fonts

Until 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.

6 – Images

There 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).

7 – Trust Signals

In 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

8 – Breadcrumbs

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.

9 – Video

Video 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 like Speechpad, 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.

10 – Footer

As 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.

02 / Call To Actions

A call to action, or CTA, is typically a banner, button, or some type of graphic or text which is designed to trigger a user to interact with it and be taken down a conversion funnel. CTAs typically strive to convert a user into a lead or customer. The success of the CTA can be measured using conversion rates which are simply calculated by the number times the CTA was seen over the amount of interactions it received. Estimating the effectiveness of a CTA is normally done using A/B testing where two variants of the webpage are presented to a number of users and the version with the highest conversion rate becomes the winner, and subsequently the basis for the next test.

1 – Main Call to Action

Your main Call To Action (CTA) on your page is the one action you want users to take above all others, such as ‘Get Quote’, ‘Download’ or ‘Add to Basket’. Often this is repeated on many pages on your website (E.g. a quote request form on thousands of product pages) so a small change in its effectiveness can constitute a significant overall impact.

2 – Social Sharing Buttons

Many types of online content is designed to be shared, with the hope of attracting potential customers, further shares and incoming links. Social sharing buttons remind the user to share, and make the sharing process as easy as possible. Setting your code up to pull through the company/author profile link can help you gain additional mentions and followers.

One of the main benefits of social share buttons is the ‘count’ feature, allowing you to take advantage of a psychological phenomenon known as ‘social proof’ – which affects a person’s behavior so that they conform to the actions of others. In this situation it could be summed up as ‘if it has lots of shares, it must be good.’ Importantly, the inverse is also true, so consider not using the count feature until you are actually getting shares.

Some would argue that social shares on product pages distract from the main CTA on the page (the conversion) and should be built into thank you or confirmation pages. The counter argument is that the act of sharing makes the user more invested in the product, and actually more likely to buy/convert.

3 – Secondary CTAs

There are many situations when a user may not be in a ‘convertible’ position, as they are at an early stage of the buying funnel, such as the research stage. For example, B2B purchasing decisions are often made by committee, and as such it is not only the original user that you need to influence. Offering your information in a transferable format, such as a PDF, and allowing the user to download or email it, makes this process significantly easier.

Email sign up forms are another common secondary CTA, which are great as they tell you that the user is engaged and allow you to capture their email address for potential reconversion.

Although they won’t achieve a primary conversion, these secondary actions can help ensure your brand or product remains front of mind, and could assist a primary conversion further down the line.

4 – Cross-selling & Upselling

Cross-selling is the act of selling complimentary products or services, in addition to the main sale. Amazon have led the way in the ecommerce space, using their overwhelming amount of customer data to create highly effective cross-selling CTAs.

Upselling is an attempt to persuade prospects to purchase products or services that secure a higher margin or value than the initial line of enquiry. This is often achieved by hooking the user initially on a ‘basic’ product, then also highlighting the comparative benefits of the ‘premium’ version.

03 / On-site SEO

If you hope to attract traffic from the search engines, optimising the on-site elements is crucial. Where design and content are about communicating meanings to users, SEO is about communicating with robots. On-site SEO is about organising your content so that search engines know where to find it and what it’s about, whilst maintaining a flow of authority across your site.

1 – Site Architecture

Site architecture can make or break your on-site SEO efforts, but fortunately, a good experience for users is very similar to best practice for Googlebot.

The terms you use for your navigation should reflect the language that your visitors use, which should in turn align with your keyword research. Similarly, your site should be organised into thematic ‘silos’ based on semantic relevancy.

Typically, you want to aim for a flat site structure that utilises silos and cross-silo contextual linking, with no more than 3 clicks to the deepest level of the structure. This ensures that link juice is passed down, up and across the site, whilst ensuring high indexation rates for even the deepest buried pages.

2 – URL Structure

Keyword-rich URLs are still considered to be a ranking factor, and although you should not keyword stuff, it does make sense to include your target keywords in your page URLs.

Whilst search engines can now crawl and index most dynamic URLs, they are very rarely user-friendly, and since most CMS platforms can handle URL rewrites very comfortably, it is considered good practice to employ URLs like this:

3 – Title Tag

Your Title Tag is very important for SEO, in terms of keyword relevance, CTR and uniqueness. Most CMS platforms can auto-generate your titles for your, based on database entries such as product names or attributes. Typical examples of this include:

4 – Meta Description

The META description is considered to have no impact on rankings, so it should mainly be considered in terms of CTR and social shares. The META description, which should be no more than 155 characters, is what display on the SERPs underneath the page title. It is also used as the default description copy for Facebook or Google+ shares.

Your META descriptions should compel your users to click, by using relevant, engaging copy, highlighting benefits and using active, imperative language. As per the META title, you should be able to configure your CMS to auto-generate unique descriptions for each page if you need to scale the process.

5 – Header Tags

Although H1 tags are thought to carry negligible SEO value these days, it makes sense to optimise your header tags as it is so straightforward to do. Use one H1 tag per page, to include your primary keyword, and use secondary keywords or synonyms in H2/H3/H4 tags.

6 – Contextual Links

Contextual linking should be considered part of your core internal linking structure, as they allow you to pass PageRank to deep pages and cross-silo. Contextual links should be semantically relevant and beneficial to the user, and can also be used to upsell or cross-sell products.

7 – Alt Tags

Alt tags are used for basic image optimisation, and allow you to tell search engines what your image represents in crawlable text. Search engines don’t ‘know’ what an image represents, so we use alt tags (or attributes) to specify the ‘alternative’ text, which describes the image. Without alt tags, the search engines can’t assign a meaning or value to an image, so they remain an important aspect of on-site SEO.

8 – Video Hosting & Sitemap

Using video on-site can have a significant CRO impact, and they can also be used to increase SERP click-throughs via the use of rich snippets. Video rich snippets show a small video thumbnail within the search result, which draws the searcher’s eye and encourages clicks. However, you can’t achieve video snippets simply by hosting your video on YouTube and embedding a player in your site.

Instead, you need to become the canonical source for the video – either by self-hosting your videos or using a third party solution like Wistia or Vimeo Pro. Hosting on YouTube or Vimeo Pro will simply allow their versions to outrank your page, or steal the video snippet. Support your video content with schema.org markup and by submitting a video sitemap, which tells the search engines all the information you want associated with your video, such as the video title, description and thumbnail image.

9 – Sitemap

XML sitemaps are used entirely to aid page indexation in search engines, and allow site owners to specify the URLs they would prefer to be indexed first. Simply put, an XML sitemap is a list of URLs in a machine-readable format, that convey additional information about a URL through the use of tags. A typical entry looks like:

04 / Markup

Marking up your data gives the search engines additional information to help them understand the meaning of your content. Using markup can enable you to achieve rich snippets in the SERPs, which in turn often lead to increased CTR. Once you’ve added markup to your page, you can test how Google would interpret it using their structured data testing tool.

1 – Authorship Markup

Authorship markup can be implemented on your site or blog by implementing the rel=author tag, and linking this to your Google+ profile.

Authorship markup is one of the most interesting developments in the last couple of years. Firstly, Authorship markup enables you to achieve an author rich snippet in the SERPs (a picture of the author’s face), which are demonstrably effective in increasing CTR. Secondly, they allow you to associate the author to the content, which could prove to be extremely significant further down the line if AuthorRank kicks in.

The purpose of Google+, in addition to being a social layer to their services, is to be Google’s identity program. Their verification system allows them to confidently assign certain content to certain authors, so that they can use external signals such as links, shares and +1s to build up a profile for each author. Ultimately, this would allow them to assign each user an authority level (or rank) for a given topic. Authoritative users could then potentially impact organic search results through their content, links and shares.

2 – Schema.org

Schema.org is an initiative jointly launched by the search engines to support a common set of schemas, providing a framework for structured markup on the web. These schemas can be used in conjunction with Microdata to describe data points on your website, giving the search engines a better understanding of what your content is and how it fits together.

Using such markup can have significant benefits both now and in the future (ultimately, structured data helps inform the development of the semantic web). For example, it allows you to identify a product, and then a set of reviews associated with that product, with a rating for each review and an average rating of all the reviews. This information can then be displayed in the SERPs as a product review rich snippet:

Similarly, your video content can be marked up to produce video rich snippets:

For most content pages, there is something you can mark up that could give you a rich snippet. You can mark up movies to include director and actor details, recipes to include nutritional information, authors to include job titles and events to include location details. Utilising Schema.org markup can transform your SERPs listing and offer you a significant competitive advantage.

3 – Breadcrumbs (markup)

The search engines recognise that breadcrumb navigation is beneficial to the user, and support it with breadcrumb snippets in the SERPs. Not only does this look cleaner, but it enables you to present additional (clickable) links to other pages on your website.

For this example, in addition to the actual search result, Tripadvisor have got two additional clickable links that a user could select. To implement breadcrumb markup you can use the Schema.org vocabulary, or simply try Patrick Sexton’s easy-to-use generator below.

4 – Rel=canonical

Accepted SEO best practice is to simply avoid duplicate content, however in some circumstances duplications do come about, such as content that can be categorised in several different ways. In such instances, rel=canonical is used to differentiate between the duplicates, by assigning one version of the page as the authority version.

From a set of duplicate pages, you must determine which one you prefer to be considered the canonical version of the page, and by using the rel=canonical tag you make this preference known to Google, so that they may only index and serve the canonical version of the page.

The markup is very straightforward, you simply add a <link> element in the <head> section of all non-canonical pages. So on a non-canonical page such as http://www.example.com/electronics/samsung-tv, you would reference the canonical version of the page like this:

CMS platforms can often cause duplication issues by creating many category pages with near-identical content, however most modern systems will allow you to specify canonical URLs directly in the back-end.

5 – Open Graph Protocol

Whilst not affecting SEO as such, the Open Graph Protocol (a Facebook initiative originally) allows you to control how your content is displayed when it is shared.

Just as you can use META tags to tell the search engines which Title and Description you want them to use, you can use Open Graph tags to inform Facebook, Google+ and Twitter how you wish your content to be presented when shared. They allow you to specify things like the title, description and image (a custom thumbnail, for instance). You can also include personal information such as your locality, your contact details or the Page that corresponds to the website.

Twitter Cards allow you to enhance the expanded tweets that Twitter creates for your site when someone shares a page. Twitter Cards are basically a set of meta-tags that specify your sharing data, but a lot of the tags fall back on Open Graph data anyway.

05 / Code

Clean, well optimised code is not just important for your users but it’s also a ranking factor in Google. Fast load times improve user experience and therefore Google care about it. If your site is quick, light and responsive, you will be making both your users and the search engines happy. There’s lots of ways you can increase your site speed, most of which can be handled for you by modules and plugins, and it’s very easy to test and measure the results.

1 – Load Times

There are numerous tools you can use to measure the speed of the pages on your site including Web Page Test and Google also have their own PageSpeed tool which you can run online or install as a Chrome or Firefox plugin.

It can be an involved process depending on your technical expertise and the amount of control you have over your website but there’s some quick wins that most webmasters can achieve.

For example, if you’re on an Apache server, you can apply Google’s ‘modpagespeed’ module which “speeds up your site and reduces page load time” and “automatically applies web performance best practices to pages, and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow”.

You can cut down on wait times & latency by avoiding server redirects, and delivering assets to your site through a Content Delivery Network (CDN). There are many CDN providers around such as Max CDN, Akamai and Amazon CloudFront. Cloudflare also has a free option – https://www.cloudflare.com/plans

Minifying (removing unnecessary white space and formatting) HTML and CSS files is also standard practice and if you run a WordPress site you’ll find plugins like W3 Total Cache which will manage the whole process for you.

Other best practice includes optimising images (see below), turning on any server-side caching your platform offers, implementing client side caching and using server side compression if possible.

You should also get your developers to look for bottlenecks in database queries if you’re on an e-commerce platform as they are very common

2 – Image Compression

As mentioned above, you can improve page load time by optimising your images.

It’s important to ensure that your imagery looks as good as it can to maintain the quality of your site, whilst keeping the images at as low a file size as possible to reduce load times and maximise the user experience.

Here you should be considering how many images you are serving, the size (both visual size and file size), whether you could be utilising sprites, if the images are being scaled on the fly, if they’ve all been compressed properly and contain only the essential metadata.

3 – Responsive Design

Responsive design allows you to automatically adapt the structure of your content depending on the size of the screen that it is being viewed on.

This allows people who are using all sorts of devices from iPhones to giant PC monitors to view the same content in a method that is appropriate for their device. Large screens can be shown additional content, such as more products on the page, whilst smaller screens can be shown reduced, ‘essential’ content.

Responsive design negates the need for a specific mobile version of a website by using “media queries” to target styles to certain screen sizes.

Also consider using mobile first design to improve your experience for mobile users.

Making your site responsive, rather than creating a second mobile version of the site, is what Google recommends.

4 – HTML5

HyperText Markup Language (HTML) is the main markup language used for creating webpages, and HTML5 is simply the fifth (and latest) revision of the HTML standard. As with structured data markup such as Schema.org, many elements have been introduced in HTML5 to enrich the semantic content of documents. HTML5 is also good for mobile.

From an SEO perspective, HTML5 offers a favourable alternative to the likes of Flash, with features to allow videos, animation and interactivity to be rendered within the page. Importantly, HTML5 offers full CSS3 support.

Note: Although all the major browsers do support features of HTML5, none of them yet offer full support and it is not yet the official standard. When implementing elements in HTML5, cross-browser testing is essential.

Lots of our pages on the site probably don’t but it’s not something we always worry about. It’s unlikely to have affected your experience of the page which we’ve made sure works well on most devices and thankfully there’s 10000 clients jobs waiting that need seen to before validation on our site gets done

That’s an amazing and comprehensive resource you have provided. A good refresher for me and an awesome tool I can share with clients as validation when I suggest they augment their thinking about a certain page or even the entire site design/content/cta….

Straight fact is that none of us will ever achieve the ‘perfect web page’ just as we will never achieve perfection in anything else.
The important thing is that we keep striving towards that result though. We may never reach it but our goal has to be to aim for it.
Some excellent tips on how to approach it too.

Pretty sweet way to present the content and the visual queue’s along the way with reading!! There was a Moz blog post about the perfect website and having this post now adds some more fuel to the fire and validation that we’ve been building kickass websites, BUT, we know we can do better. Resources like this help significantly to improve our end products for client sites and always keeping in mind the 2 critical factors for any website: 1) Users experience and 2) Search engine compliance/friendliness. Thanks! – Patrick with Whiteboard

Maybe just me, but seems a glaring omission that your Trust Signals don’t include correct grammar & spelling. It’s hard to take a site seriously if its proprietors can’t afford a copy editor (big sites) or spell checker (small ones). This applies even to sites whose copy strains for a youthful effect thru affected “modern” slang & abbreviationisms — all other established rules of language still apply, and lax attention to these rules will nudge readers to (consciously or subconsciously) mistrust the author’s authority.

What Our Clients Say

It’s a pleasure dealing with the team. Hit Reach are patient, highly effective and very supportive towards our demands. I value their experience and knowledge, which always shows great, results. I can highly recommend Hit Reach and their excellent service.

Emmeli Kimhi
Web Coordinator
House of Holland

We challenged Hit Reach with helping us implement an international SEO strategy for our new website. They worked well alongside our in-house team and were efficient, knowledgeable and delivered exactly what we needed. I would highly recommend Hit Reach for your SEO needs.

Kevin Dorren
Founder
Diet Chef

Hit Reach were really easy to deal with and provide exemplary service. They implemented exactly what we wanted and guided us when we were uncertain about the solution. A highly professional and cost effective solution – what's not to love.

Unlike other web design companies who just build you a site, we strive to understand your core challenges first and then our team of web designers work passionately with you to develop tools that help you deliver real business solutions.