SEO copywriting

A good online copywriter will have a thorough understanding of SEO and how this can be integrated into his or her writing. Key phrases are used in long and short copy alike, to great effect.

1 Optimising for human and machine users

One of the most notable differences between writing for print and writing for digital is that when it comes to the latter, you are writing not only for an audience, but also for the search engines. While your human audience should always be your first priority, your copy also needs to speak to the search engines in a language they can understand. This digital tactic will be covered in greater depth in the  Search Engine Optimisation.

Optimising your copy for search engines is important because your target audience is likely to be using a search engine to find the products or services you are offering. If the search engine is not aware that your content can give users the answers they are looking for on a particular subject, it won’t send traffic to your website.

Optimising your content for search is the process of telling search engines what content you are publishing. Keywords and key phrases are an integral part of this. SEO copywriters need to know how to blend keywords into their content and how to use them in conjunction with text formatting and meta data. In addition to assisting you with structuring your content, these tags indicate relevance and context to search engines. Some of the tags are used by screen readers, and so they assist
visitors with technical limitations to access your content. The meta description can also be used by search engines on the search engine results pages (SERPs).

2 Key phrases

A keyword refers to a single word used in a search query, while a key phrase refers to more than one word used in the search query.

Key phrase research is an important element of digital copywriting, and is covered in detail in the chapter on SEO. Having identified the themes of your web pages, keyword research should be used to identify what phrases your target audience use when searching for you. It is important to know what people are searching for, so that you can give them what they need.

Once you have a good idea of the words people are using to find information online, you can use these phrases in your copy as a signal to search engines that your content is relevant to these users.

A good copywriter is able to weave a predetermined set of key phrases into a piece of copy seamlessly, so that the reader cannot detect that they have been included. Each page should be optimised for a primary key phrase, and can be optimised for a secondary and tertiary key phrase as well. Usually a web page is optimised for three key phrases, but can be optimised for up to five (although only if the page is very long). Any more than that and you are better off creating new, niche web pages.

Key phrases can be integrated into nearly every type of content that you write for the web. Below are a few places where we tend to include key phrases on our website.

Page title

The page title appears at the top of a user’s browser and should be able to tell the user (and the search engine spiders, of course) what the main theme of the page is. The page title is usually limited to 71 characters (including spaces). The key phrase should be used as close to the beginning of the title as possible, followed by the name of the company or website.

Page URL

The main key phrase for the page should be used whenever possible in the URL for the page. If you are using a blogging tool or content management system (CMS), the URL is generated from the page title, so using the key phrase in the page title should ensure that it is in the URL as well.

Meta description

The meta description is a short paragraph describing the page content. This summary is usually shown on the SERPs if it contains the search term, which means that it needs to entice users to click through with a strong CTA. The spiders use the meta description to deduce the topic of the page, so using targeted key phrases is important here. Copy is limited to 156 characters (including spaces).

Meta keywords

Meta keywords are the list of the words and phrases that are important on a web page. Using targeted key phrases is important, but remember – no keyword stuffing. The meta keywords are limited to 200 characters (including spaces). This is, however, no longer a major source of information used by search engines (though it certainly doesn’t hurt to include these). Headings and sub-headings
Spiders assign more relevance to the text used in headings, so it is important to use your key phrases in the headings on your page. It also helps to structure your content. Headings are created with HTML tags.

Heading structures:
•  <h1> Main page headings
•  <h2> Sub-headings
•  <h3> Information under the sub-headings

Having a good heading hierarchy is important as spiders use it to move through your page and understand its relevance to the search query; it also helps human readers to scan your page.

On-page copy

The number of times you use the key phrases is entirely dependent on how long the page of copy is. You want to optimise the page for the key phrases without their use being overt. For SEO effectiveness, a page of web copy should be at least 250 words long. On a 250-word page, you could use the primary and secondary key phrases several times (this includes use in meta data, headings, title and body copy). Make sure that these integrate seamlessly into the text and that it sounds as natural as possible.

The page should not be so long that the user needs to scroll continuously to get to the end of it. If you find the page is getting exceptionally long, consider breaking it into different web pages for different sections. In this way, you could add several pages of optimised copy focused on one theme, instead of one very long page.

Links to your optimised page

The text used to link from one page to another is considered important by search engine spiders, so try to ensure that your key phrase is used when linking to the optimised page. The anchor text of links should include the key phrase of the page being linked to, and not the page being linked from.

Images: Alt text and title tags

Alt text refers to the ‘alt’ attribute for the <img> HTML tag: this is the text that appears in the caption. It is used in HTML to attribute text to an image on a web page, normally to describe what an image is about and display text in instances where the image is unable to load. While this is handy for humans and aids accessibility, it is also used for another reason: search engine spiders can’t read
images, but they can read the alt text. The image title tag shows when you hover with your mouse over an image (depending on your browser) and can also be read by the search engine spider.

HTML for formatting

HTML stands for HyperText Markup Language, and it’s the foundation of documents on the web. HTML tags tell browsers how to present content. HTML tags are written in brackets that look like arrows: < >.

A good digital copywriter will also be able to use basic HTML to lay out copy, knowing that the appearance of the page will get his or her words read. It should be easy for users to skip and skim the copy, and it should be easy for them to find the parts that are most relevant to them.

When writing online copy, you can use an HTML editor, where you insert the tags yourself, or a ‘What You See Is What You Get’ (WYSIWYG) editor, which works in a similar way to a word processor.

Basic HTML is not hard to use, and will help you format your content. Here are some basic HTML tags:

•  To bold: <b>phrase you want to bold</b>
•  To italicise: <i>phrase you want to italicise</i>
•  To underline: <u>phrase you want to underline</u>
•  To list:<li>lines you want to list</li>
•  To create a paragraph: <p>paragraph text</p>
•  To insert a line break: <br>
•  To insert a link: <a href=“page url”>phrase you want to link</a>
•  To insert a heading: <h1>Level one heading</h1>
•  To insert a sub-heading: <h2>Level two heading</h2>

The tags also help search engines to identify how the content has been laid out on the page.
The best way to get to grips with HTML is to start using it online, where you can see how the tags work.

Long copy

Online copywriting is not just about short, sharp Calls to Action and attention-grabbing headlines and adverts – it also covers longer pieces of content.

Longer copy has advantages. Primarily, it allows you to provide more information and encourage the reader to convert. You can foster a relationship with a reader, whether it is on a blog, through email communications, or through articles and news releases. With more words and space available, you are able to build a voice and a personality into your writing.

The expression ‘long copy’ is somewhat misleading. As online readers behave slightly differently from offline readers, it is unlikely that a skilled copywriter will be called on to create copy for the web that is longer than 800 or 1 000 words per page (although, of course, there are exceptions to this).

Long copy needs to be structured and formatted so that it’s easy for attention-starved web readers to digest. Web users tend to scan pages quickly to determine whether or not they will read further. Specifically in longer copy, you need to take this into consideration.

There are many types of long online copy. Here, we will focus on a few that are useful for marketing:

•  News releases
•  Articles for online syndication
•  Emails
•  Blog posts
•  Advertorials
•  Website

Bear in mind that this is by no means an exhaustive list.

News releases

The news release is a staple of public relations. As the Internet grows, so does the overlap between PR and marketing. As a result, many copywriters are called upon to write news releases for online distribution as this is a standardised format for releasing information. Originally intended to provide information for journalists, news releases are increasingly being read without going through the journalists first. This means that they should be written in the brand tone, be accessible to the general public, and be optimised and formatted according to the principles of good web writing (more on those later). Also remember to focus on a compelling headline to win over your reader.

Articles for online syndication

Online article syndication involves writing articles that are in no way a direct promotion of your brand. In other words, they are not press releases. These articles are written to provide information and valuable content to readers about something which is indirectly related to your product or service.

For example, a hotel management company could write articles about travel tips and advice, while a pet food seller could create content around ways to keep pets healthy and happy.

Articles are submitted to online article directories, from where they are picked up and republished on other sites.

As the articles contain links and key phrases relevant to your site, the benefits for SEO can be excellent. But the strategy won’t work unless people want to read your articles – so they need to be interesting, informative, and not just thinly disguised adverts. You are aiming to inform your audience, position your brand as an expert in your field and demonstrate authority and thought leadership. While this practice is not as widely used as it once was, a well-executed online article syndication strategy can still yield results.

Emails

Email as a channel is an integral part of many online marketing strategies. Of course, content is a huge part of this; it comprises the words in an email with which a user engages.

By virtue of their nature, emails are the ideal medium for communicating and building relationships with your consumers. Successful email campaigns provide value to their readers. This value can vary from campaign to campaign. Newsletters can offer:

•  Humour and entertainment
•  Research and insight
•  Information and advice
•  Promotions and special offers

Blogging

Blogs can be very successful marketing tools. They’re an excellent way to communicate with staff, investors, industry members, journalists and prospective customers. Blogging also helps to foster a community around a brand, and provides an opportunity to garner immediate feedback. This is an audience made up of players vital to the success of a company – which is why it is important to get
blogging right. A key consideration is the quality of your headlines - you have to convince your reader to grant you attention..

There is plenty to be gained from the process of blogging and obviously, the value, as with email marketing, lies in the content. This communication channel provides an opportunity for you to foster an online identity for your brand as well as giving your company a voice and a personality. This happens through the content you distribute as well as the tone you use to converse with your readers.


Website copy

Digital copywriters need to structure content effectively so that users want to engage on the site and read on. Some ways to create digital copy that is usable and appropriate for an online audience include:

•  Writing text that can be easily scanned.
•  Using meaningful headings and sub-headings.
•  Highlighting or bolding key phrases and words.
•  Using bulleted lists.
•  Having a well-organised site.
•  Limiting each paragraph to one main idea or topic. The leading sentence should give a clear indication of what the paragraph is about. Readers can scan each paragraph without missing any essential information.
•  Cutting the fluff. Get rid of meaningless turns of phrase and words that bulk up copy unnecessarily.
•  Removing redundancies. These often creep into writing by accident, but you should work to eliminate them in order to get to the point.
•  Including multimedia wherever relevant. See http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek as a good example.

Writing for mobile

Mobile websites differ from traditional websites for various reasons – these are explored in the chapter on Mobile Marketing. Here are some points on creating digital copy for mobile websites that encourages interaction and achieves marketing and business goals:

•  Get to the point. With limited screen space, there really is no room for wordy text. You need to determine exactly what your message is and get to the point quickly!
•  Put the important bits up front. This includes contact information and navigation links. Word these clearly so that people can take the right action.
•  Condense information to its simplest form. But ensure that it still makes sense and is grammatically sound.

•  Use a Call to Action upfront. Mobile web users are goal-orientated, so provide them with the next step early on.
•  Use headings and subheadings for scanning.

Short copy

On the web, writers often have very little time and space to get a message across to a visitor, and entice them to take action. This is especially true of banner and search adverts, but is also important across all digital marketing disciplines. Probably the most important short copy anywhere is the Call to Action.


Call to Action


Users scan web pages and look for clues on what to do. Tell them. A Call to Action is a short, descriptive instruction that explicitly tells a reader what to do (for example, ‘Click here’ or ‘Buy this now’). Any time there is an action you want a reader to take, a Call to Action should instruct them on what to do. This means using active verbs when you write, and crafting hyperlinks to be clear instructions that resonate with your visitors at each step in the conversion process.

Banner advertising involves clear Calls to Action, and they can also be used in social media posts, search adverts, content marketing and more. Call to Action copy is not limited to short copy: email newsletters and promotions should also make use of Calls to Action, and we even see them all over web pages.

A good Call to Action resonates with the action the visitor needs to take, as opposed to the technical function that is performed. For example, if a user has entered an email address to sign up to your email newsletter, the action button should say ‘Sign up’ and not ‘Submit’.

Also consider what actions mean offline. For an email newsletter, ‘Sign up’ can have very different connotations from ‘Subscribe’. Furthermore, ‘Subscribe’ is very different from ‘Subscribe for free’. Whereas subscriptions have connotations of costs, ‘Sign up’ does not carry the same burden. However, ‘Subscribe for free’ could imply greater value – something that would normally carry a cost is available to you for free.

Titles and subject lines

Titles and subject lines often form part of a body of long copy. However, they are important enough to be discussed as stand-alone short copy. Titles and subject lines are there for a very important reason: they tell a reader whether or not they should read further. They are the gateway to your content.

Consider the following titles:

•  Guide to online copywriting
•  Ten steps to online copywriting that sells

The second title conveys more information and excitement to the reader, which helps the reader to make a decision to read further.

Subject lines are like headlines for emails, and can make the difference between an email being deleted instantly and being opened and read. As with a headline, which should be carefully crafted like the headline of a newspaper, use the subject line to make it clear what the email is about. For example, if there is a promotion in the email, consider putting it in the subject line as well.

Titles, headlines and subject lines need to be both persuasive and enticing. Consider what need your copy is meeting for your readers, and express that first.

Search adverts

Search adverts have very limited space and time to get a message across, as well as plenty of competition for a reader’s attention. These four lines of copy need to work hard to ensure a top return on investment.

Search adverts typically follow the same basic structure and have strict character limits for each line:

Heading   (max. 25 characters)
Two lines of advert copy,   (max. 35 characters)
Which can be displayed on one line.   (max. 35 characters)
www.DisplayURL.com  (max. 35 characters)

With a limited character count, it can seem daunting to communicate information that entices the right people to click through, and differentiates you from your competition. Testing variations of copy is the best way to determine what works best for your campaign. While copywriters are not generally responsible for writing paid search ads, they are often brand custodians and should review all copy representing a brand.

Social copy

Social media allows brands to have conversations with their customers and fans. This gives consumers a powerful voice and the ability to tell brands what they want. There are a few considerations to keep in mind when creating content for social media:

•  Research is vital. Understand what type of content community members want. Meaningful and relevant content is more likely to be shared.
•  Remember that it’s a conversation.Your content must be personable and appealing. Use personality and convey the humanity of your brand in order to generate conversation and encourage comments.
•  Write shareable content. Offer value and be insightful. Ultimately you should aim to create an overall perception that your brand is the thought leader in its industry. Shareable content is credible content.
•  Avoid overly promotional content. Community members are likely to see right through a sales pitch.
•  Have a solid communication protocol. These can be internal guidelines for organisations to follow on how they use and communicate on social media platforms.

Types of web copy

Whether it is long or short, the purpose of content is to communicate a message. Communication implies that the message has been both received and understood. The considerations covered here are aimed at ensuring that when you distribute a message, it is communicated effectively to the people who need to receive it.

In order to communicate the intended message effectively, content needs to be:

•  Clear and concise
•  Easy to read
•  Well written
•  Well structured

Content written for the web can be divided into two broad categories: short copy and long copy. The division is by no means scientific.

Personas

A persona is a profile that a writer creates to embody the characteristics of the target audience for whom he or she is writing.

Personas are based on the profile of readers of your copy. Creating a profile is all about considering the characteristics of your readers and their needs and desires. When you are building this profile, there are a number of things that you should consider about your audience:

•  Are they primarily male, female or a mixture?
•  How old are they?
•  What are their other demographics and psychographics?

Once you understand these simple characteristics, you can ask yourself some more in-depth questions. If you are selling something, questions include:

•  How do they make purchasing decisions?
•  Do they compare many service providers before selecting one?
•  Do they make lists of questions and call in for assistance with decision making, or do they make purchase decisions spontaneously based on a special offer?

Understanding the reader profiles of your readers is an important process, and the best copy usually results from extensive time spent figuring out your audience.

Tailoring your copy to your audience does not necessarily limit you to one persona. Digital copy can be structured so that it caters for several personas. Also consider that your various marketing channels may have different audiences, so ensure that you have a persona for each main platform you use. However, you need to spend time understanding their needs before you are able to write copy that addresses these personas.

The audience of one

According to Price and Price, audiences were traditionally thought of as a vast and vaguely defined crowd (Price & Price, 2002). Because the web provides a voice to individuals and niche groups, the concept of this mass audience is disintegrating.

Price and Price go on to argue that the Internet has led to an audience of one (Price & Price, 2002). What does this mean? While your audience is not literally one person (and if it is, thank your mum for reading your copy, but spend some time growing your readership), it is not a vast, vaguely defined crowd either. Instead, the web has many niche audiences who are used to being addressed as individuals.

When you are writing marketing material, you need to identify that ‘individual’, investigate what he or she wants, and write as if you are speaking directly to him or her. The individual that you have in mind when you are writing could also be called a persona.

Writing for your audience

One of the assumptions you can make about writing is that it is done for an audience. In marketing and advertising, knowing your audience is vital: it will guide you in developing your content strategy, determining the topics they are interested in, and help you organise information in a way that makes sense to them. It will direct how you express your copy for your audience.

Ultimately, understanding who you are writing for will ensure that you are able to communicate your message to them and thereby increase the likelihood that your copy will achieve the desired result.

Step one of writing for digital is to ensure you have researched your audience and understand what they want. Once you have a clear idea about this, you can figure out how to fulfil those needs using your copy.

Holly Buchanan of Future Now(Buchanan, 2008) summarises this with three questions you should ask:

1.  Who is my audience?
2.  What actions do I want them to take?
3.  What information do they need in order to feel confident taking action?

When you are researching your audience, there are two useful concepts to bear in mind: the audience of one, and personas.

Writing for Digital Key terms and concepts

Term	Definition
Above the fold	The content that appears on a screen without a user having to scroll.
Active verb	A word that conveys action or behaviour, and in a Call to Action, tells a reader what to do.
Audience	The group of people at which a marketing communication is targeted.
Benefit	The positive outcome for a user that a feature provides.
Call to Action (CTA)	A phrase written to motivate the reader to take action (sign up for our newsletter, book car hire today, etc.).
Dynamic keyword insertion	In paid search advertising, this allows keywords used in searches to be inserted automatically into advert copy.
Feature	A prominent aspect of a product that is beneficial to users.
HyperText Markup Language (HTML)	Code used to structure the information and features within a web page.
Keyword stuffing	The process of putting too many keywords into the meta data of the website or using many irrelevant keywords. Search engines can penalise websites using this practice.
Mass customisation	Tailoring content for many individuals.
Meta data	Information that can be entered about a web page and the elements on it in order to provide context and relevant information to search engines.
Persona	A character created to define a group of readers in order to speak to them as though they were a unique reader.
Paid search advertising	Usually refers to advertising on search engines, sometimes called PPC advertising. The advertiser pays only for each click of the advert.
Sender alias	The name that is chosen to appear in the sender or ‘from’ field of an email.
Search engine optimisation (SEO)	The process of improving website rankings on search engine results pages.
Search engine results page (SERP)	The actual results returned to the user based on their search query.
Tone of voice	The register, formality and personality that comes through in the text.
Unique selling point (USP)	The aspect that makes your offering different from your competitors’.

Writing for Digital Introduction

Online copy is a hardworking multi-tasker. It must provide information to visitors, engage with them, convince them to take a desired action and, all the while, convey brand ethos. It also has to provide context and relevance to search engines. It needs to achieve all this without making it look as if the author is trying too hard.

You will see in this chapter that writing for digital is different from writing for more traditional media. Because of the sheer volume of information on the Internet, quality content is king – many people argue that it is one of the most significant determinants of the success of your online campaigns. Considering it is one of the most direct lines of communication with your consumers, this is not surprising. Therefore, you will see many links between this and the  Content Marketing Strategy.

Online copywriting involves everything from the text on a website to the subject line of an email, and all things in between. From PR articles of 800 words to four-line search adverts, if it’s being read on a screen, it’s online copy.

Writing for digital does not mean the traditional rules of writing need to be abandoned. By and large, the foundations remain.

In this  you will see:
•  The principles of writing for your web audience
•  Which types of web copy are available to you
•  The basics of HTML for formatting online text
•  How to write for search engine optimisation (SEO), focusing specifically on keywords
•  The best practices for successful online copywriting

Step-by-step guide to building a website

This section discusses the process of building a website from the client’s perspective. There are different approaches to building a website. The one described here is the waterfall process, where one step follows the other. This is in contrast with other methods such as the Agile methodology, which involves faster iteration and greater collaboration, but doesn’t afford clients as much control and upfront clarity on the deliverable and timelines.

Step 1: Planning and research

Planning a website starts with research: your market, your users, your competitors and your business. If you already have a website, you can use existing web analytics data to understand how well you are meeting your users’ needs. It’s also worth running some user labs to watch how users interact with your existing site.

Key questions you need to ask:

•  Business:What are your business objectives? How should this digital property help you to achieve those objectives? (For example, should it generate leads for you to follow up on? Is it an eCommerce store?)
•  Users: Who are your users, your potential customers? What problem does your website need to help them solve? (For example, collate travel information in one place, such as with www.tripit.com.)

This research helps you to plan your website strategically, ensuring that it is aligned with both user needs and business objectives.

In research and planning, you should also reach an understanding of what tasks (or actions) users need to do on your website. These are usually in line with your business objectives. Some tasks a user may need to do include checking the availability of a hotel, signing up to a newsletter, or printing information.

Step 2: Choosing a domain name

Domain names are important. They are part of the URL of a website. A domain name looks something like this: www.mycompany.com

But a lot more information can be included in this. Domain names can carry the following information:

subdomain.domain.tld/directory

•  Domain– the registered domain name of the website
•  Subdomain – a domain that is part of a larger domain
•  TLD– the top level domain, uppermost in the hierarchy of domain names
•  directory – a folder to organise content

The TLDcan indicate the country in which a domain is registered, and can also give
information about the nature of the domain.

•  .com– the most common TLD
•  .co.za, .co.uk, .com.au – these TLDs give country information
•  .org– used by non-profit organisations
•  .gov– used by governments
•  .ac– used by academic institutions

Domain names must be registered and in most cases there is a fee for doing so. Many hosting providers will register domain names on your behalf, but you can also do it yourself.

Domain names should be easy to remember, and if possible, include important search keywords for your business. For example, if you were building a website for your restaurant named Omega, www.omegarestaurant.com could be a better choice than www.omega.com as it contains the important keyword ‘restaurant’.

Step 3: UX and content strategy

You also need to gather, analyse and map out what content is needed on the website. This content is then structured in a process called information architecture. A sitemap should reflect the hierarchy of content on the website, and navigation (how users make their way through a website).

Before a website is designed and developed, it should be sketched out using wireframes. These should then be reviewed by everyone involved in the web design and development project to make sure that they are feasible, as well as to identify new ideas or approaches for design and development. It’s much easier to change track in the planning and research phase than down the line when design and development have started.

At the same time, consider what content you want to include on your site – will it be a relatively static site that doesn’t change often, or will you need an editable CMS to regularly add and update content, such as blog posts, images and products?

Should the website be large enough to require it, a functional specification document should be created, using all the information compiled so far. This document details the development requirements for the website, and can be used to communicate any specific design constraints. It’s now time to move on from planning to building.

Step 4: Search engine visibility

Search engine traffic is vital to a website; without it, chances are that the site will never fulfil its marketing functions. It is essential that the search engines can see the entire publicly visible website, index it fully, and consider it relevant for its chosen keywords.

Search engine optimisation (SEO) has its own chapter in this textbook, but here are the key considerations when it comes to web development and design.

The Writing for Digital and Search Engine Optimisation  provide details on writing copy for online use and for SEO benefit. When it comes to web development, the copy that is shown on the web page needs to be kept separate from the code that tells the browser how to display the web page. This means that the search engine spider will be able to discern easily what content is to be read (and therefore scanned by the spider) and what text is an instruction to the browser. Cascading style sheets (CSS) can take care of that.

The following text styles cannot be indexed fully by search engines:

•  Text embedded in a Java Applet or a Macromedia Flash File
•  Text in an image file (that’s why you need descriptive alt tags and title attributes)
•  Text accessible only after submitting a form, logging in, etc.
•  Text accessible only after JavaScript on the page has executed

If the search engine cannot see the text on the page, it means that it cannot crawl and index that page.

Step 5: Design

Design happens before development. According to the steps explained earlier in this , the designer will transform the wireframes and basic planning materials into beautifully designed layouts – these are static images that show how the website will look once it’s coded.

Step 6: Development

The development phase usually kicks in once the design is finished, although developers will sometimes start their involvement as early as the wireframe stage by creating low-fidelity prototypes to support the user-testing process. Normally, the developer uses the design templates to code the actual website, using the front-end language that you have chosen. Server-side development and CMS considerations may also be part of this phase.

Step 7: Testing and launch

Having planned an amazing site, designed it beautifully, built it skilfully and filled it with fantastic copy, it’s time to test it fully and then take it live!

Testing is an important part of website development and design, and it should take place throughout the process of planning, designing and building, leaving just final quality assurance (QA) testing before the site goes live. Test subjects should be real potential users of the website, not just members of the development team!

The site needs to be tested in all common browsers to make sure that it looks and works as it should across all of them. All links should be tested to make sure that they work correctly, and it’s always a good idea to get a final check of all the copy before it goes live.

Tools such as W3C’s HTML validator (validator.w3.org) should be used to validate your HTML. Make sure your web analytics tracking tags are in place, after which it will be time to take your site live. Now, you need to move on to driving traffic to your newly launched site – that’s where all the Engage tactics in this textbook come in handy.

Responsive design

Responsive websites are designed for a range of screen widths. When deciding whether to create a responsive site or separate mobi and desktop sites, consider your customer first:


•  How much of your website traffic comes from (specific) mobile devices? If this is a large percentage, consider building a dedicated mobile site. Bear in mind that the popularity of particular mobile devices can change quickly as consumer preferences evolve.
•  Do your desktop users have the same goals as your mobile users? If your mobile consumer’s goals are very different, then you may want to consider building a separate mobile site.
•  What is your budget and how quickly do you need your website to be built? Responsive websites take longer to build and can be more expensive. You could save money long term by going this route, but there is a sizeable upfront investment.
•  Do you have an existing site, and can it be converted into a responsive website, or will it need to be rebuilt (Du Plessis, 2012)? Responsive design comes with a fair bit of terminology, but there are three key concepts with which you should be familiar.

Flexible grid

Typical websites are designed as a large, centred, fixed-width block. With responsive design, the page elements (the heading; the text or copy; the main image; and other blocks of information) are arranged in a grid of columns that have predefined spacing. Each element relates proportionally to the other elements. This allows elements to rearrange or resize in relation to each other whether the screen is tiny or huge and the screen quality is high or low. Although this system allows for flexibility, an extremely narrow screen can cause the design to break down. In this case we can make use of media queries.

Media queries
Media queries are bits of code that allow websites to ask devices for information about themselves. It then selects the website style that will suit the device best from a list of styles defined in a CSS. Media queries ask for information about the device’s browser window size, orientation (landscape or portrait) and screen display quality.

Flexible images

Images are designed to move and scale with the flexible grid. How fast the website loads is an important consideration, so high-quality images are made available for larger screens and lower-resolution images are made available for smaller screens, according to the information received from the media query. Parts of images can also be displayed for smaller screens to maintain image quality. Images can even be hidden completely.

Designing a mobile site

Designing a site that will display consistently across multiple handsets is difficult, but understanding and sticking to web standards will bring you closer to this goal.

Design your site so that the information your users want is not only on display, but also easy to get to. The limited screen space is valuable, so you can’t necessarily have the full site navigation on every page. The information architecture of your site is therefore essential to ensuring you make the most logical use of navigation in line with what your site visitors need. There are benefits to mobile development that can help you get around this.

Standards

There are few mobile standards currently in place. Creating content (including images, text and beyond) that can be correctly formatted on most phones (or at least legible on phones where formatting is flawed) is still not entirely possible. There is therefore a certain amount of trial and error involved in designing a mobile site. The process is certainly worth it, though, considering that there are 3.4 billion unique mobile phones, and a fair number of these are accessing the mobile web
(International Telecommunication Union, 2013).

Mobile handset emulators allow you to see how your work-in-progress website will be formatted, depending on which device you are emulating. It has been suggested that nothing can replace testing on actual mobile devices, so if you are doing the testing, recruit contacts with different handsets to show you the difference in display.

Some emulators:

•  Test iPhone – www.testiphone.com
•  BlackBerry – www.blackberry.com/developers/downloads/simulators
•  Mobile Phone Emulator – for Samsung, iPhone, BlackBerry and others www.mobilephoneemulator.com