Example
HTML5 LAYOUT
This example shows a cooking site built using
new HTML5 elements to describe the structure
of the page (rather than just grouping items
using <div> elements).
The header and footer of the page sit inside <header> and <footer>
elements. The courses are grouped together inside a <section>
element that has a class attribute whose value is courses (to
distinguish it from other <section> elements on the page). The sidebar
sits inside an <aside> element.
Each of the courses lives inside an <article> element, and use the
<figure> and <figcaption> elements to contain an image. The
headings for the courses have subheadings, so these are grouped inside
an <hgroup> element. In the sidebar, the recipes and contact details are
placed inside separate <section> elements.
The page is styled using CSS. The only difference is that our selectors
are using the new HTML5 elements to allow us to create rules that
target those elements. In order for the CSS to work in versions of IE
before Internet Explorer 9, the HTML5 page contains a link to the
HTML5 shiv JavaScript (hosted on Google's servers) inside a
conditional comment.
HTML5 LAYOUT 444
Example
HTML5 LAYOUT
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Layout</title>
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/dark-wood.jpg");
background-position: center;
font-family: Georgia, times, serif;
line-height: 1.4em;
margin: 0px;}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;}
header {
height: 160px;
background-image: url(images/header.jpg);}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 40px;}
nav li a {
445 HTML5 LAYOUT
color: #ffffff;} Example
nav li a:hover, nav li a.current {
color: #000000;} HTML5 LAYOUT
section.courses {
float: left; HTML5 LAYOUT 446
width: 659px;
border-right: 1px solid #eeeeee;}
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top:40px;}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
background-color: #efefef;}
a {
color: #de6581;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
Example
HTML5 LAYOUT
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
447 HTML5 LAYOUT
Example
HTML5 LAYOUT
<p>A five week introduction to traditional Japanese vegetarian meals,
teaching you a selection of rice and noodle dishes.</p>
</article>
<article>
<figure>
<img src="images/teriyaki.jpg" alt="Teriyaki sauce" />
<figcaption>Teriyaki Sauce</figcaption>
</figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>An intensive one-day course looking at how to create the most delicious
sauces for use in a range of Japanese cookery.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />
27 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</section>
</aside>
<footer>
© 2011 Yoko's Kitchen
</footer>
</div><!-- .wrapper -->
</body>
</html>
HTML5 LAYOUT 448
Summary
HTML5 LAYOUT
XX The new HTML5 elements indicate the purpose of
different parts of a web page and help to describe
its structure.
XX The new elements provide clearer code (compared
with using multiple <div> elements).
XX Older browsers that do not understand HTML5
elements need to be told which elements are
block-level elements.
XX To make HTML5 elements work in Internet Explorer 8
(and older versions of IE), extra JavaScript is needed,
which is available free from Google.
18
Process
& Design
XX How to approach building a site
XX Understanding your audience and their needs
XX How to present information visitors want to see
This section discusses a process that
you can use when you are creating a new
website.
It looks at who might be visiting your site and how to ensure
the pages feature the information those visitors need. It also
covers some key aspects of design theory to help you create
professional looking sites. In this chapter, we will look at:
●● How to understand the audience your site may attract and
what information they will expect to find on it
●● How to organize information so that visitors can find what
they are looking for
●● Design theory for presenting information in a way that
helps visitors achieve their goals
●● Design tips to help you create more attractive and
professional sites
453 PROCESS
PROCESS 454
Who is the Site For?
Every website should be designed for the
target audience—not just for yourself or the
site owner. It is therefore very important to
understand who your target audience is.
It can be helpful to ask some Target Audience: individuals
questions about the people you
would expect to be interested in ●● What is the age range of your target audience?
the subject of your site. ●● Will your site appeal to more women or men? What is the mix?
●● Which country do your visitors live in?
If you ask a client who a site is ●● Do they live in urban or rural areas?
for, it is not uncommon for them ●● What is the average income of visitors?
to answer "the entire world." ●● What level of education do they have?
●● What is their marital or family status?
Realistically, it is unlikely to be ●● What is their occupation?
relevant to everyone. If your site ●● How many hours do they work per week?
sells light bulbs, even though ●● How often do they use the web?
most people using a computer ●● What kind of device do they use to access the web?
probably use light bulbs, they
are not likely to order them from Target Audience: Companies
someone in a different country.
●● What is the size of the company or relevant department?
Even if the site has a wide ●● What is the position of people in the company who visit your site?
appeal, you can still think about ●● Will visitors be using the site for themselves or for someone else?
the demographics of a sample of ●● How large is the budget they control?
the target audience.
455 PROCESS
Invent some fictional visitors from your typical
target audience. They will become your friends.
They can influence design decisions from color
palettes to level of detail in descriptions.
Name Gordon Molly Jasper Ayo Ivy
Gender M F M M F
Age 28 47 19 32 35
Location
Occupation Chicago San Francisco New York Miami Boston
Income Teacher Attorney Student Retail Journalist
Web Use $180k $160k
$62k Daily $24k 4-5 days/wk $75k
2-3 days/wk Daily Daily
If you have a question about how will be able to think back and ask
the site is going to be used, or yourself, "What would Gordon
what its priorities should be, you or Molly want in this situation?"
PROCESS 456
Why People Visit
YOUR Website
Now that you know who your visitors are, you
need to consider why they are coming. While
some people will simply chance across your
website, most will visit for a specific reason.
Your content and design should Key Motivations Specific Goals
be influenced by the goals of
your users. ●● Are they looking for general ●● Do they want general
entertainment or do they information / research (such
To help determine why people need to achieve a specific as background on a topic /
are coming to your website, goal? company), or are they after
there are two basic categories of something specific (such as a
questions you can ask: ●● If there is a specific goal, is particular fact or information
it a personal or professional on a product)?
1: The first attempts to discover one?
the underlying motivations for ●● Are they already familiar with
why visitors come to the site. ●● Do they see spending time on the service or product that
this activity as essential or a you offer or do they need to
2: The second examines the luxury? be introduced to it?
specific goals of the visitors.
These are the triggers making ●● Are they looking for time
them come to the site now. sensitive information, such as
the latest news or updates on
a particular topic?
●● Do they want to discover
information about a specific
product or service to help
them decide whether to buy
it or not?
●● Do they need to contact you?
If so, can they visit in person
(which might require opening
hours and a map)? Or might
they need email or telephone
contact details?
457 PROCESS
What Your Visitors are
Trying to Achieve
First you want to create a list It is unlikely that you will be able to list every
of reasons why people would reason why someone visits your site but you
be coming to your site. You can are looking for key tasks and motivations. This
then assign the list of tasks to information can help guide your site designs.
the fictional visitors you created
in the step described on the Gordon bought a tennis racquet several years ago; now he wants to
previous page. purchase one from your site for his girlfriend.
Molly has read about your new doggy daycare service in the press and
wants to find out whether it would be suitable for her to use.
Jasper had a bad experience staying in a hotel when visiting Sydney,
Australia, and wants to make a complaint.
Ayo hopes to study architecture and wants to learn more about a new
course that is being offered.
Ivy is a picture editor and wants to look at a photographer's site to see
examples of his work before deciding whether to commission him.
PROCESS 458
What Information
Your Visitors Need
You know who is coming to your site and why
they are coming, so now you need to work out
what information they need in order to achieve
their goals quickly and effectively.
You may want to offer additional Therefore, you will have more Key Information
supporting information that you opportunity to tell them any
think they might find helpful. extra information that you think ●● Will visitors be familiar with
would be helpful to them (or to your subject area / brand
Look at each of the reasons why expose them to other products or do you need to introduce
people will be visiting your site and services you want to yourself?
and determine what they need to promote).
achieve their goals. ●● Will they be familiar with
If you do not appear relevant to the product / service /
You can prioritize levels of them by answering their needs, information you are covering
information from key points however, they are likely to go or do they need background
down to non-essential or elsewhere. information on it?
background information.
Here are some questions to help ●● What are the most important
By ensuring that you provide the you decide what information to features of what you are
information that your visitors provide for visitors to your site... offering?
are looking for, they will consider
your site more relevant to them. ●● What is special about what
you offer that differentiates
you from other sites that offer
something similar?
●● Once people have achieved
the goal that sent them to
your site, are there common
questions people ask about
this subject area?
459 PROCESS
How Often People Will
Visit Your Site
Some sites benefit from being updated more
frequently than others. Some information (such
as news) may be constantly changing, while
other content remains relatively static.
A website about fashion trends It can often be helpful to set a Goods / Services
will need to change a lot more schedule for when a site will be
frequently than one that is updated (rather than doing it on ●● How often do the same
promoting a service that people an ad hoc basis). people return to purchase
do not buy regularly (such as from you?
domestic plumbing or double You will often find that some
glazing). parts of a site will benefit from ●● How often is your stock
being updated more frequently updated or your service
Once a site has been built, it can than others. changed?
take a lot of time and resources
to update it frequently. Here are some questions to help Information
you decide how often to update
Working out how often people your website content... ●● How often is the subject
are likely to revisit your site gives updated?
you an indication for how often
you should update the site. ●● What percentage of your
visitors would return for
regular updates on the
subject, compared with
those who will just need the
information once?
PROCESS 460
Site Maps
Now that you know what needs to appear
on your site, you can start to organize the
information into sections or pages.
The aim is to create a diagram The groups of information are You may need to duplicate some
of the pages that will be used then turned into the diagram information if it needs to appear
to structure the site. This is that is known as the site map. on more than one page.
known as a site map and it will
show how those pages can be Sometimes it can be helpful to The pages (or groups of pages)
grouped. ask people who are the target will inform how users navigate
audience to help you group through the site.
To help you decide what related information together.
information should go on each Remember to focus on the
page, you can use a technique A site map will usually goals that your visitors want to
called card sorting. begin with the homepage. achieve.
Additionally, if the site is large
This involves placing each and is compartmentalized It is worth noting that the
piece of information that a into sections, each section site owner might organize
visitor might need to know on might require its own section information in a way that is
a separate piece of paper and homepage to link to all of the different to what the public
then organizing the related information within it. expects. It is important to reflect
information into groups. the public's understanding of the
For example, most online shops subject (rather than just the site
Each group relates to a page and, have section homepages for owner's understanding of it).
on larger sites the, pages can in each type of product, which then
turn can be grouped together to in turn link to individual product
create different sections of the pages.
website.
461 PROCESS
Example Site Map
Home
About Articles Visit Shop Contact
History News Location Books
Gifts
Foundation Book Reviews Opening Times
Future Plans Press Tickets
Interviews
PROCESS 462
WireFrames
A wireframe is a simple sketch of the key
information that needs to go on each page of a
site. It shows the hierarchy of the information
and how much space it might require.
A lot of designers will take the You should not include the how the the page should look.
elements that need to appear on color scheme, font choices, It can be very helpful to show the
each page and start by creating backgrounds or images for wireframes of a site to a client
wireframes. This involves the website in the wireframe. before showing them a design.
sketching or shading areas It should focus on what It enables the client to ensure
where each element of the page information needs to be on the site has all the functions and
will go (such as the logo, primary each page and create a visual information it needs to offer.
navigation, headings and main hierarchy to indicate the most
bodies of text, user logins etc). important parts of each page. If you just present a site design
to a client, it is common for them
By creating a wireframe you can The wireframes make design to focus on how the site looks,
ensure that all of the information easier because you know what which means they may not raise
that needs to be on a page is information needs to appear on issues about its function after
included. which page before considering the site has been built.
The example on the right was You can sketch wireframes There are also online wireframe
created in Photoshop using the on paper or use a graphics tools such as those at:
templates that come with the application on your computer http://gomockingbird.com
960.gs grid system. (such as Illustrator or InDesign). http://lovelycharts.com
463 PROCESS
Example Wireframe
PROCESS 464
Getting your message
across using design
The primary aim of any kind of visual design
is to communicate. Organizing and prioritizing
information on a page helps users understand
its importance and what order to read it in.
CONTENT Prioritizing Organizing
Web pages often have a lot of If everything on a page appeared Grouping together related
information to communicate. in the same style, it would be content into blocks or chunks
For example, the pages of much harder to understand. (Key makes the page look simpler
online newspapers will have messages would not stand out.) (and easier to understand).
information that does not appear
on every page of the print By making parts of the page Users should be able to
equivalent: look distinct from surrounding identify the purpose of each
content, designers draw block without processing each
●● A masthead or logo attention to (or away from) individual item.
those items.
●● Links to navigate the site By presenting certain types of
Designers create something information in a similar visual
●● Links to related content and known as a visual hierarchy style (such as using the same
other popular articles to help users focus on the key style for all buttons or all links),
messages that will draw people's users will learn to associate that
●● Login or membership options attention, and then guide them style with a particular type of
to subsequent messages. content.
●● Ability for users to comment
We look at visual hierarchy on We look at grouping and
●● Copyright information pages 467-468. similarity on pages 469-470.
●● Links to privacy policies,
terms and conditions,
advertising information, RSS
feeds, subscription options
With so much on the page, the
designer needs to organize and
prioritize the information to
communicate their message
and help users find what they're
looking for.
465 PROCESS
Let's look at an example of how
design can be used to effectively
communicate the services of a
company.
visual hierarchy Grouping Similarity
Attention is immediately drawn There are several chunks of There are several examples of
to a picture that shows the information on this page. similarity within this page.
service this company offers
and a headline to explain it. The At the top you can see the logo The four points (at the bottom
size and colored background and navigation. Under this is the left of the screenshot) are all
reinforce that this is the primary information that introduces the presented in a similar manner
message on the page. company's services. with consistent headings and
icons.
Should this service appeal to the Further down are three distinct
user, below they can see more groups showing you what the All of the links in the body text
detail about what it does, how services do, the costs involved are in blue so it is clear what text
much it costs, and who uses it. and some of the services' users. is clickable.
PROCESS 466
Visual hierarchy
Most web users do not read entire pages. Rather, they skim to find
information. You can use contrast to create a visual hierarchy that gets
across your key message and helps users find what they are looking for.
SIZE COLOR Style
Larger elements will grab users' Foreground and background An element may be the same
attention first. For this reason it color can draw attention to key size and color as surrounding
is a good idea to make headings messages. Brighter sections tend content but have a different style
and key points relatively large. to draw users' attention first. applied to it to make it stand out.
Lorem ipsum Lorem ipsum dolor Lorem ipsum dolor
sit amet, consectetur sit amet, consectetur
dolor sit amet, consectetur adipiscing elit. adipiscing elit.
adipiscing elit. Lorem Lorem ipsum dolor Lorem ipsum dolor
ipsum dolor sit amet, sit amet, consectetur sit amet, consectetur
consectetur adipscing elit. adipscing elit. adipscing elit.
467 PROCESS
Visual hierarchy refers to the order in which your eyes perceive what
they see. It is created by adding visual contrast between the items being
displayed. Items with higher contrast are recognized and processed first.
Images
Images create a high visual
contrast and often attract the
eye first. They can be used to
draw attention to a specific
message within the page. In
some cases, the right image can
succinctly reveal more than an
entire page of text.
The effect of a well-designed
visual hierarchy is largely
subliminal. Achieving a good
hierarchy requires balance; if
nothing stands out a site can be
rather uninteresting, and if too
many aspects are competing
for your attention it can be hard
to find the key messages. This
example has a clear hierarchy
which addresses the needs of
visitors to the site.
PROCESS 468
grouping and
Similarity
When making sense of a design, we tend to organize visual elements
into groups. Grouping related pieces of information together can make a
design easier to comprehend. Here are some ways this can be achieved.
Proximity Closure Continuance
When several items are When faced with a complicated When elements are placed in
placed close together, they are arrangement of items, we a line or a curve then they are
perceived as more related than will often look for a single or perceived to be more related
items that are placed further recognisable pattern or form. than those that are not following
apart. (You can also nest groups A real or imaginary box can be the same direction. This can be
of information within larger formed around elements due to used to direct a reader from one
groups of information.) their proximity and alignment. part of a page to the next.
White Space color Borders
Placing related items closer A background color placed A line can be drawn around the
together and leaving a bigger behind related items to border of the group or between it
gap between unrelated items. emphasize their connection. and its neighbors.
469 PROCESS
We naturally observe similarities in design, and things that are similar are
perceived to be more related than things that are dissimilar. Repetition
of similar color, size, orientation, texture, font, or shape, suggests that
matching elements have similar importance or meaning.
Book Reviews Fantasy Worlds Consistency
Raw Creation Deidi von Schaewen, John Maizels In this example each book
Presenting the world's most unusual, review has a consistent style for
John Maizels colorful and poetic creations, some the book titles, author names,
Raw Creation is the definitive book of which have never previously and purchasing links. Having
on outsider art and provides an appeared in print. Fantasy Worlds read just one of the blocks it is
indispensible guide to the self-taught includes the classics of fantasy possible to infer the meaning of
art of this century and a fascinating architecture such as the Palais the other items in this box that
account of human creativity. The Ideal near Lyon and, of course, Nek follow the same style.
chapter entitled Wonders of the Chand's Rock Garden in Chandigarh,
World is mostly dedicated to Nek India. Headings
Chand's Rock Garden and includes a Buy on Amazon
number of color photographs. Giving a chunk of information
Buy on Amazon The Rock Garden a heading clearly tells the user
whether or not the content of
Nek Chand Outsider Art M.S.Aulakh the grouping is relevant to them.
This small black and white book is If not, they can ignore all of the
Lucienne Peiry, Philippe Lespinasse M.S. Aulakh's commentary on and elements within it. It also helps
This publication tells the story of tribute to the Rock Garden and is not users of screen readers, as users
Nek Chand and his life and takes the widely available, but used copies can often have the option to hear the
reader on a colorful journey through be found from time to time. headings on the page.
his Rock Garden, the world's most Buy on Amazon
expansive work of environmental art.
Buy on Amazon
Each visual chunk can contain its own hierarchy as shown in this
example, where the individual books have their own subsections of title,
author, text and link.
PROCESS 470
Designing Navigation
Site navigation not only helps people find where they want to go, but also
helps them understand what your site is about and how it is organized.
Good navigation tends to follow these principles...
Concise Clear Selective
Ideally, the navigation should Users should be able to predict The primary navigation should
be quick and easy to read. It is the kind of information that only reflect the sections or
a good idea to try to limit the they will find on the page content of the site. Functions
number of options in a menu to before clicking on the link. like logins and search, and legal
no more than eight links. These Where possible, choose single information like terms and
can link to section homepages descriptive words for each link conditions and so on are best
which in turn link to other pages. rather than phrases. placed elsewhere on the page.
Home Artist Profiles Exhibitions and Events Galleries Books and Magazines
About this Website Contact Us Login Register Terms and Conditions Privacy Policy
Home Artist Profiles Exhibitions Galleries Publications About Contact ✔
471 PROCESS
A large site may have primary, navigation or down the side of Online Extra
secondary and even tertiary the page. Tertiary navigation Go to the website accompanying
navigation. Primary navigation often sits in the footer of the this book for information on
often appears across the top page. The menu will not be the how to implement search
of the site from left to right, or only way users navigate the site. functionality for your site using
down the left hand side of the They will also use links within Google Search.
page. Secondary navigation each page. Some sites also offer
could be under the primary a search function.
Context Interactive Consistent
Good navigation provides Each link should be big enough The more pages a site contains,
context. It lets the user know to click on and the appearance the larger the number of
where they are in the website at of the link should change when navigation items there will be.
that moment. Using a different the user hovers over each item Although secondary navigation
color or some kind of visual or clicks on it. It should also will change from page to page,
marker to indicate the current be visually distinct from other it is best to keep the primary
page is a good way to do this. content on the page. navigation exactly the same.
Home Artist Profiles Exhibitions Galleries Publications About Contact
Home Artist Profiles Exhibitions Galleries Publications About Contact ✔
PROCESS 472
Summary
PROCESS & Design
XX It's important to understand who your target audience
is, why they would come to your site, what information
they want to find and when they are likely to return.
XX Site maps allow you to plan the structure of a site.
XX Wireframes allow you to organize the information that
will need to go on each page.
XX Design is about communication. Visual hierarchy helps
visitors understand what you are trying to tell them.
XX You can differentiate between pieces of information
using size, color, and style.
XX You can use grouping and similarity to help simplify
the information you present.
19
Practical
Information
XX Search engine optimization
XX Using analytics to understand visitors
XX Putting your site on the web
To wrap up the book we are going to look
at some practical information that will
help you launch a successful site.
There are entire books written about each of the topics
covered in this chapter but I will introduce you to the key
themes that each subject deals with and give you pointers for
what you need to be considering. You will see:
●● The basics of search engine optimization
●● Using analytics to understand how people are using your
site after it has launched
●● Putting your site on the web
477 PRACTICAL INFORMATION
PRACTICAL INFORMATION 478
Search Engine
Optimization (SEO)
SEO is a huge topic and several books have been written on the subject.
The following pages will help you understand the key concepts so you can
improve your website's visibility on search engines.
The Basics On-Page Techniques Off-Page Techniques
Search engine optimization (or On-page techniques are the Getting other sites to link to you
SEO) is the practice of trying methods you can use on your is just as important as on-page
to help your site appear nearer web pages to improve their techniques. Search engines help
the top of search engine results rating in search engines. determine how to rank your
when people look for the topics site by looking at the number of
that your website covers. The main component of this is other sites that link to yours.
looking at keywords that people
At the heart of SEO is the idea of are likely to enter into a search They are particularly interested
working out which terms people engine if they wanted to find in sites whose content is related
are likely to enter into a search your site, and then including to yours. For example, if you
engine to find your site and then these in the text and HTML code were running a website that
using these terms in the right for your site in order to help the sold fish bait, then a link from
places on your site to increase search engines know that your a hairdresser is not likely to be
the chances that search engines site covers these topics. considered as relevant as one
will show a link to your site in from an angling community.
their results. Search engines rely very heavily
on the text that is in your pages Search engines also look at the
In order to determine who comes so it is important that the terms words between the opening
first in the search results, search people are going to search for <a> tag and closing </a> tag
engines do not only look at what are in text. There are seven in the link. If the text in the link
appears on your site. They also essential places where you want contains keywords (rather than
consider how many sites link your keywords to appear. just click here or your website
to you (and how relevant those address) it may be considered
links are). For this reason, SEO Ensuring that any images have more relevant.
is often split into two areas: appropriate text in the value of
on-page techniques and off-page their alt attribute also helps The words that appear in links to
techniques. search engines understand the your site should also appear in
content of images. the text of the page that the site
links to.
479 PRACTICAL INFORMATION
On-Page SEO
In every page of your website there are seven key places where keywords
(the words people might search on to find your site) can appear in order
to improve its findability.
1: Page Title 2 1
The page title appears at the top
of the browser window or on the 3 6
tab of a browser. It is specified in
the <title> element which lives 5 7: Page Descriptions
inside the <head> element. The description also lives inside
4 the <head> element and is
2: URL / Web Address specified using a <meta> tag.
The name of the file is part of 5: Link Text It should be a sentence that
the URL. Where possible, use Use keywords in the text that describes the content of the
keywords in the file name. create links between pages page. (These are not shown in
(rather than using generic the browser window but they
3: Headings expressions such as "click here"). may be displayed in the results
If the keywords are in a heading pages of search engines.)
<hn> element then a search 6: Image Alt Text Never try to fool search engines!
engine will know that this page is Search engines rely on you They will penalize you for it. For
all about that subject and give it providing accurate descriptions example, never add text in the
greater weight than other text. of images in the alt text. This same color as the background of
will also help your images show the page as they can detect this.
4: Text up in the results of image-based
Where possible, it helps to searches.
repeat the keywords in the main
body of the text at least 2-3
times. Do not, however, over-use
these terms, because the text
must be easy for a human to
read.
PRACTICAL INFORMATION 480
How to Identify
Keywords and Phrases
Determining which keywords to use on your site can be one of the
hardest tasks when you start to think about SEO. Here are six steps that
will help you identify the right keywords and phrases for your site.
1: Brainstorm 2: Organize 3: Research
List down the words that Group the keywords into There are several tools that let
someone might type into separate lists for the different you enter your keywords and
Google to find your site. Be sure sections or categories of your then they will suggest additional
to include the various topics, website. keywords you might like to
products or services your site is consider, such as:
about. For example, if your website adwords.google.co.uk/
was a pet shop you might have select/KeywordToolExternal
It often helps to ask other people different categories for different (When using this tool, select the
what words they would use to animals (such as dogs, cats and "exact match" option rather than
find your site because people rabbits). "broad match.")
less familiar with a topic might www.wordtracker.com
use different terms than you. (In On a large site you may www.keyworddiscovery.com
particular, they are less likely to break this up further into
use industry-specific jargon.) sub-categories (for example, Once these tools have suggested
separate groups for different pet additional keywords, add the
Your list may include some food brands). relevant options to your lists.
keyword phrases (not just (Keyword tools will most likely
individual words) if you have suggest some terms that are
topics which are described by irrelevant so do omit any that do
more than one word. not seem appropriate).
481 PRACTICAL INFORMATION
4: Compare 5: Refine 6: Map
It is very unlikely that your Now you need to pick which Now that you have a refined list
site will appear at the top of keywords you will focus on. of keywords, you know which
the search results for every These should always be the ones have the most competition, and
keyword. This is especially true that are most relevant to each which ones are most relevant,
for topics where there is a lot section of your site. it is time to start picking which
of competition. The more sites keywords you will use for each
out there that have already been If there is a phrase that is very page.
optimized for a given keyword, relevant but you find there is a
the harder it will be for you to lot of competition, you should Pick 3-5 keywords or phrases
rise up the search results when still use it. To improve the that map to each page of your
people search on that term. chances of your site being found website and use these as the
you can look at whether there keywords for each page.
Some of the keyword research are other words that could be
sites can tell you how many incorporated into a phrase. For You should not need to repeat
people have searched for a example, if the information or the same keywords on all of
specific keyword to help you service you offer on your website the pages. It is also likely that,
know how much competition is location specific, then you will as you move further away from
those terms have. often find that incorporating the homepage into the sections
your location into your keyword of the site, the keywords will
You can also use Google's list will help people find you. become more specific to the
advanced search feature to individual topic dealt with on
just search the titles of web If your site is promoting a slate each page.
pages. This will help you to roofing company in Australia
determine how many sites have then it is better to get 100
that keyword in the title of their people from Australia who are
pages. (The more pages with looking for a slate roof than
the term in the title, the more 10,000 from the USA who are
competition there is.) looking for other kinds of rooves.
PRACTICAL INFORMATION 482
Analytics: Learning
about your Visitors
As soon as people start coming to your site, you can start analyzing
how they found it, what they were looking at and at what point they are
leaving. One of the best tools for doing this is a free service offered by
Google called Google Analytics.
Signing Up How it Works The Tracking Code
The Google Analytics service Every time someone loads a A tracking code is provided
relies on you signing up for an page of your site, the tracking by Google Analytics for each
account at: code sends data to the Google website you are tracking. It
www.google.com/analytics servers where it is stored. should appear just before the
The site will give you a piece of Google then provides a web- closing </head> tag. The code
tracking code which you need to based interface that allows you does not alter the appearance of
put on every page of your site. to see how visitors use your site. your web pages.
At the time of writing, Google
was updating their Analytics
interface to Version 5. If you
log into your account and see a
different interface, look for a link
in the top right-hand corner of
the page that says 'New Version.'
483 PRACTICAL INFORMATION
How Many People Are
Coming to Your Site?
The overview page gives you a snapshot of the key information you are
likely to want to know. In particular, it tells you how many people are
coming to your site.
Visits Unique Visits Page Views
This is the number of times This is the total number of The total number of pages all
people have come to your site. If people who have visited your site visitors have viewed on your site.
someone is inactive on your site over the specified period. The
for 30 minutes and then looks at number of unique visits will be Pages per Visit
another page on your site, it will lower than the number of visits The average number of pages
be counted as a new visit. if people have been returning to each visitor has looked at on
your site more than once in the your site per visit.
defined period.
Average Time on Site
The average amount of time
each user has spent on the site
per visit.
Date Selector
Using the date selector in the top
right hand corner of the site, you
can change the period of time
the reports display. When you
log in, this is usually set to the
last month, but you can change
it to report on a specific time
period.
Export
The export link just above the
title that says "visitors overview"
allows you to export the
statistics on this page for other
applications such as Excel.
PRACTICAL INFORMATION 484
What Are Your Visitors
Looking At?
The content link on the left-hand side allows
you to learn more about what the visitors are
looking at when they come to your site.
Pages Landing Pages Top Exit Pages
This tells you which pages your These are the pages that people This shows which pages people
visitors are looking at the most arrive on when first visiting your most commonly leave from. If
and also which pages they are site. This can be particularly a lot of people are leaving from
spending the most time on. helpful because you may find the same page then you might
people are not always coming consider changing that page or
into your site via the homepage. improving it.
Bounce Rate
This shows the number of people
who left on the same page that
they arrived on. A high bounce
rate suggests that the content is
not what they were looking for or
that the page did not sufficiently
encourage them to look around
the rest of the site. What counts
as a bounce:
●● Clicked a link to another site
●● Clicked on an advertisement
●● Entered a new URL
●● Used the "back" button
●● Closed the browser
485 PRACTICAL INFORMATION
Where Are Your
Visitors Coming From?
The traffic sources link on the left hand side
allows you to learn where your visitors are
coming from.
Referrers Direct Search Terms
This shows the sites that have This shows which page a user This shows the terms users
linked to you and the number arrived on if they did not come entered into a search engine
of people who have come via via a link on another site. They to find your site. This can help
those sites. If a site sends a lot might have typed the URL into you learn how visitors describe
of traffic to you, get in touch and their browser, used a browser what they're looking for (which is
try to work together to ensure bookmark, or clicked a link in an often different to how someone
that traffic keeps flowing. You email, PDF, or Word document. might describe their own site).
could also try to find similar This can help you fine-tune your
sites and ask them to link to you. content and your SEO keywords.
Advanced Features
We have only scratched the
surface of what you can find
out about your visitors from
Google Analytics. Their help
files tell you many more of the
advanced features. If you run
an online shop, it is well worth
looking at their e-commerce
tracking, which adds information
about products sold, average
basket size and much more.
You can also set up goals where
you specify the paths you want
people to take, and then see how
far they get through those paths,
which is especially useful when
gathering data from users.
PRACTICAL INFORMATION 486
Domain Names
& Hosting
In order to put your site on the web you will
need a domain name and web hosting.
DOMAIN NAMES WEB HOSTING Disk space
This refers to the total size of all
Your domain name is your web So that other people can see of the files that make up your site
address (e.g. google.com or bbc. your site, you will need to upload (all of the HTML and CSS files,
co.uk). There are many websites it to a web server. Web servers images and scripts).
that allow you to register domain are special computers that are
names. Usually you will have to constantly connected to the Bandwidth
pay an annual fee to keep that Internet. They are specially set This is the amount of data the
domain name. up to serve web pages when hosting company will send to
they are requested. your site's visitors. If you imagine
These sites usually have a form 10 people looked at every page
that allows you to check whether With the exception of some very on your site, then it would be
your preferred domain name is large sites, most websites live on the equivalent to 10 times the
available, and because millions web servers run by web hosting amount of disk space you use.
of domain names have already companies. This is usually far
been registered, it might take cheaper and more reliable than Backups
you a while to find the one that is trying to run your own web Check whether the hosting
right for your site. servers. company performs backups on
your site (and how often). Some
A lot of sites that offer domain There are lots of different types only create backups so that
name registration also offer web of hosting on offer. We will now they can restore your website in
hosting. take a look at some of the key the event of a server breaking.
things that will help you choose Others allow access to backups
which hosting company to use. (which can be helpful if you
accidentally break the site when
updating it).
487 PRACTICAL INFORMATION
Email accounts It is often worth searching for Hosted Services
Most hosting companies will reviews of a hosting company
provide email servers with their to see what other people's There are a number of online
web hosting packages. You will experience has been with a services that allow you to point
want to check the size of mailbox hosting company. Unfortunately, your domain name to their
you are allowed and the number you often can only tell how good servers. Blogging platforms such
of mailboxes you can use. a hosting company is when as WordPress.com, Tumblr,
something goes wrong, at which and Posterous, or e-commerce
Server-side point you find out how they are platforms such as Big Cartel and
languages and able to help you (so you can Shopify provide the servers that
databases expect to see a few negative your site is hosted on. If you are
If you are using a content reviews for any company). using a platform like this you
management system, it will likely will not need your own hosting
use a server-side programming for the website, although you
language and a database (such often still need hosting for your
as PHP with a MySQL database, email. If this is the case, some
or ASP.Net with a SQL Server web hosting companies offer
database). Be sure to check that packages that will just offer
your hosting company supports email services.
the technologies your software
needs to run.
PRACTICAL INFORMATION 488
FTP & Third Party Tools
To transfer your code and images from your
computer to your hosting company, you use
something known as File Transfer Protocol.
As the name suggests, File
Transfer Protocol (or FTP) allows
you to transfer files across the
Internet from your computer to
the web server hosting your site.
There are many FTP programs
that offer a simple interface
that shows you the files on your
computer alongside the files that
are on your web server. These
allow you to drag and drop
files from your computer to the
server or vice versa.
489 PRACTICAL INFORMATION
There are a wide variety of sites that offer
services commonly created by web developers
(to save you having to build them yourself).
Some hosting companies offer Here is a list of some popular Here is a list of some popular
tools to upload files to their FTP applications: third party tools:
servers using a web browser, but
it is more common to use an FTP FileZilla Blogs
program as they are faster at filezilla-project.org wordpress.com
transmitting files. Windows, Mac, Linux tumblr.com
posterous.com
When you purchase your web FireFTP
hosting, you will be given FTP fireftp.mozdev.org E-commerce
details that you enter into your Windows, Mac, Linux shopify.com
FTP program in order to connect bigcartel.com
to the server. Usually this will CuteFTP go.magento.com
be an address (such as ftp:// cuteftp.com
mydomain.com), a username, Windows, Mac Email newsletters
and a password. It is important campaignmonitor.com
to keep this information secure SmartFTP mailchimp.com
in order to prevent strangers smartftp.com
from gaining access to your WIndows Social networking
server. sharing buttons
Transmit addthis.com
panic.com/transmit addtoany.com
Mac
PRACTICAL INFORMATION 490
Summary
PRACTICAL INFORMATION
XX Search engine optimization helps visitors find your
sites when using search engines.
XX Analytics tools such as Google Analytics allow you to
see how many people visit your site, how they find it,
and what they do when they get there.
XX To put your site on the web, you will need to obtain a
domain name and web hosting.
XX FTP programs allow you to transfer files from your
local computer to your web server.
XX Many companies provide platforms for blogging, email
newsletters, e-commerce and other popular website
tools (to save you writing them from scratch).
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
HTML AND CSS
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
HTML AND CSS
- 1 - 50
- 51 - 100
- 101 - 150
- 151 - 200
- 201 - 250
- 251 - 300
- 301 - 350
- 351 - 400
- 401 - 450
- 451 - 500
- 501 - 514
Pages: