About Matine

My portfolio website is www.matine.co.uk

Responsive Web Design


  • One Web and Mobile First
  • Adding flexibility to your layout
  • Flexible images?
  • Media queries
  • Putting it all together

The fixed/flexible debate
User choice or designer control? A debate about how website layouts should be constructed followed. Some (mainly graphic designers) said that the designer should be in control of the layout because they knew what looked/worked best and that layouts should be fixed width. Others took a more “user-centred” approach and argued that the user should be able to choose what width they wanted the webpage to be and that layouts should be flexible (fluid or elastic).

One Web
The “One Web” debate is still ongoing. Does it mean exactly the same content/services for all devices/contexts or does it mean modified versions. What is agreed is that it doesn’t mean one website for mobile users and another for desktop users.

Responsive Web Design
Flexible, Adaptive, Responsive – what does it all mean? Flexible web design means that a webpage can easily be viewed full-screen or in a resized browser window on a desktop monitor because widths are defined as percentages. Adaptive design means that a webpage can sense the screen width and configure itself accordingly, using fixed break-points*. Responsive design combines these 2 ideas, using flexibility between break points.

Mobile First
Mobile is the true web experience? Some designers are now starting to wonder whether the desktop web is the richer experience. After all, a mobile phone can provide your geographic location, has a compass and accelerometer. Desktops can’t do that. Maybe the mobile web experience is the richer of the two with many more possibilities for interaction and real-time information gathering. Maybe websites should be designed for mobile devices first and then gracefully degrade for desktop devices?

Aren’t Apps better? Of course, there is still another (different) debate going on about whether content is better served to mobile devices using an app or a webpage. This whole debate is just about to get a lot more complicated as Windows 8 is set to bring apps to the desktop!

Ethan Marcotte
Ethan Marcotte – it’s all his fault… In May 2010, Ethan Marcotte wrote an article for A List Apart entitled Responsive Web Design. He was building on ideas first proposed in John Allsopp’s seminal article The Dao of Web Design (also for A List Apart), published in April 2000. In it, Allsopp says:

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

Marcotte believes that now is the time to put these ideas into practice and it is all made possible using CSS3 media queries, but that’s not the only ingerdient. Marcotte identifies 3:

  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS
  • Media queries and media query listeners

Flexible Grids
target ÷ context = result When using percentages to specify the relative size of elements on a web page, the percentage is always relative to the parent element, or in this case, the context. The context is always 1 (full-size), so if the result you are after is a column with a width of 192px set within a containing element with a width of 960px, the formula gives us:
192 ÷ 960 = 0.2 (or 20%)
However, in most cases, our result isn’t a nice round number. Although the calculated percentage values look a bit ungainly, they work perfectly well – don’t be tempted to round the numbers up or down. Now, when the browser window is resized, the columns will also resize proportionally.

Flexible images
You want to display images smaller than they really are? To some extent, this technique goes against the grain. In order to conserve bandwidth, images should only be displayed at their actual size. However, responsive design requires that we resize images to maintain the integrity of our layouts.

<div class=”figure”>
<img src=”robot.jpg” alt=”” />
<b>Lo, the robot walks</b>
The markup, above will be used to describe our image and a caption. Note that there are no width or height attributes on the image element.

.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.53164557%; /* 12px / 474px */
width: 48.7341772%; /* 231px / 474px */
img {
max-width: 100%;
In order to create a “fluid” image, we must apply the fluid bit (the percentage) to a container. We must then use the max-width rule for the image so that it remains inside its container and is therefore scaled with it. Of course, things are never quite that simple – older browsers may cause problems. See this article for more information.

Media Queries
The magic ingredient CSS3 media queries are the magic ingredient that make responsive web design possible. A media query is a bit like a conditional statement. If the condition is true, something changes, if not, nothing changes. In the case of webpage layouts, we can make the condition the width of the screen in pixels and then apply a rule to change the default layout if it is true. For example, we could say, if the screen is less than 700px wide, the horizontal navigation bar should be displayed vertically in a column. In this example, 700px would be the “break point” where the design changes.

@media screen and (min-width: 1024px) {
body {
font-size: 100%;
This media query says: if the media is a screen and if that screen is 1024px wide or more, set the font-size to 100%. Elsewhere in our stylesheet there may be a rule that says font-size: 80% as a default value. Meaning that if the screen width is less than 1024px, text will display at 80%.

min-width or max-width? Notice that in the previous example, we used min-width to control what happens when the screen gets wider than a certain number of pixels. However, we can also test for when the screen gets smaller by using max-width. For those scaling up from a Mobile First perspective, things will change when the min-width breakpoint is found, whereas if you are scaling down from a desktop design, you will want to test using max-width.

Which break points should I use? Well that depends…
Different devices will have set screen sizes (iPhone, iPad, Laptop, Desktop see Chris Coyier’s Media Queries for Standard Devices), you could target those devices but what happens when they change and resolutions increase (as they inevitably will)? Some designers believe that media queries should be content-focused rather than device specific… Another debate.



  • Historical context
  • DOCTYPEs and such
  • Can/should I use HTML5 now?
  • The problem with browsers…
  • Syntax
  • Semantics
  • The new (structural) elements
  • HTML5 content model
  • Audio, Video and Canvas

Historical context
Somewhere along the way, W3C lost sight of the purpose of web markup when they proposed the radical XHTML 2 – an attempt to move the web to XML. It envisaged a new web built with new tools – and is was not backwards compatible with existing web content. It’s as if they were mainly interested in the markup language itself and not with those who were going to use it (browser-makers and front-end developers). Things came to a head in 2004 when Ian Hickson proposed an extension of HTML which was rejected by W3C. Hickson and other rebels formed the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG wanted a markup language that could be used to build web applications and not just webpages. They began developing Web Forms 2.0 and Web Apps 1.0, which merged to become HTML5. In 2006, W3C admitted that their approach just wasn’t working. Shortly afterwards, W3C issued a new charter for an HTML Working Group. They decided to use the work begun by WHATWG as the basis for the new specification.

For a while, W3C were developing two different and totally incompatible markup languages. But in 2009, they announced the end of XHTML2 development. Once the ambiguity was removed, web designers pounced on HTML5 as the “new kid on the block”. Both WHATWG and W3C continue to work on HTML5 but they are working together and progress has been faster than expected.

Partly as a reaction against the idealist nature of XHTML 2 development, HTML5 is a very pragmatic markup language. Rather than attempting to impose a new order on the web, it looks at what people are already doing and tries to codify it. The introduction of the <header> and <footer> elements are a good example of this. HTML5 development principles: Support existing content, Do not reinvent the wheel, Pave the cowpaths.

“…the doctype for HTML5 is very pragmatic. Because HTML5 needs to support existing content, the doc-type could be applied to an existing HTML 4.01 or XHTML 1.0 document. Any future versions of HTML will also need to support the existing content in HTML5, so the very concept of applying version numbers to markup documents is flawed.” Jeremy Keith HTML5 for Web Designers


  • The HTML 4.01 DOCTYPE:
    <!DOCTYPE HTML PUBLIC » “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
  • The XHTML 1.0 Strict DOCTYPE:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN ” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <!DOCTYPE html>

Content Type:
HTML5 aims to simplify markup, requiring only that information that is essential for the browser. For example, there is no need to specify a “type” attribute for the script tag because javascript is the only script type used.

  • <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8“ />
    HTML5: <meta charset=”UTF-8″>
  • <link rel=”stylesheet” type=”text/css” href=”file.css“ />
    HTML5: <link rel=”stylesheet” href=”file.css”>
  • <script type=”text/javascript” src=”file.js”></script>
    HTML5: <script src=”file.js”></script>

Can/should I use HTML5 now?
It is not imperative to use HTML5 now. It is still new and some browsers do not support the new elements. HTML5 is not finished and may change. There are however plenty of reasons why you may want it now. It’s sexy, it’s got a better functionality, it’s future proofing your site and it’s (almost) got freedom from proprietary technologies.

The key difficulty in implementing HTML5 now is that older versions of Internet Explorer (those before IE9) do not understand the new HTML5 elements. The workaround is to use JavaScript to tell IE how to interpret them. This is best done using Remy Sharp’s lovely html5shiv, now hosted at Google.

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>



Strict XHTML 1.0 syntax
<p>Typically, our students fall into three groups…</p>
<p>See <a href=”/our-students/”>Our students</a> for more information.</p>
<img src=”/our-students/graduation.jpg” width=”552″ height=”413″ alt=”Graduation” />

Valid HTML5 syntax
<p>Typically, our students fall into three groups…</P>
<p>See <A Href=”/our-students/”>Our students</a> for more information.</p>
<img src=”/our-students/graduation.jpg” width=552 height=”413″ ALT=”Graduation”>

Mixed upper and lower case tags and attributes, quoted and unquoted values, self-closing elements unclosed… …HTML5 has a pretty liberal syntax, however, we should still observe good coding practice. The strict syntax (top) also validates as HTML5. Most front-end developers agree that maintaining XHTMLs strict syntax in HTML5 is a good idea.

New Structural Elements
HTML5 has been designed to give web designers the tags they need to markup common page elements without needing to use id and class names

  • <article> Defines an article
  • <aside> Defines contents aside from the page content
  • <embed> Defines external interactive content or plugin
  • <figcaption> Defines the caption of a figure element
  • <figure> Defines a group of media content, and caption
  • <footer> Defines a footer for a section or page
  • <header> Defines a header for a section or page
  • <nav> Defines navigation links
  • <section> Defines a section
  • <wbr> Defines a possible line-break

Built-in Obsolescence
HTML5 aims to be backward compatible. Therefore there are no deprecated elements, only obsolete elements. This means that you can use obsolete elements, which your browser will still render, however your web page will be “non-conforming” due to the use of these. A list of elements that are obsolete: <frame> <frameset>  <noframes>  <acronym> (use <abbr> instead). Presentational elements such as: <font> <big> <center> <strike> are also obsolete.

Semantic Shift
Some previously presentational elements have not been made obsolete but have gone through a semantic shift so that their meaning has changed.

  • <small> no longer means “render this at a small size.” It now means “this is the small print” for legals, T’s & C’s or privacy agreements.
  • <b> previous meaning “render in bold.” New meaning “to be visually different from the normal text, without conveying extra importance.”
  • <i> previous meaning “italicize.” New meaning “in an alternate voice or mood”.

These changes are largely made to keep the specification and elements relevant to non visual user agents such as screen readers. ‘Bold’ and ‘Italic’ are words that only make sense visually. The idea of developing towards non visual user agents encourages designers to think beyond basic visual design and development.

One element in the HTML5 specification that has almost been re-invented. The <a> (anchor) element has always been an inline element meaning multiple <a> elements were needed for hyperlinks that span multiple elements. In HTML5 multiple elements can be wrapped into a single <a> element. For example:
<a href=”index.html”>
<h1>Welcome to my site</h1>

Document Structure
The HTML5 document structure aims to describe the content structure rather than the page structure because content can be portable (syndicated) and is not always defined within the context of a “page”. Notice in the two below comparisons, HTML5 has two <h1> tags, whereas we have always known there should only be one <h1> on a page.

XHTML 1.0 markup for a blog:
<div class=“header”>
<h1>My wonderful blog</h1>
<div class=“blog_articles”>
<div class=“article”>
<h2>The Zen of HTML5</h2>
<p>HTML5 is an evolution of HTML4…</p>
<p class=“author”>by David Watson</p>
</div> <!– /article –>
<div class=“article”>

</div> <!– /article –>
</div> <!– /blog_articles –>

HTML5  markup for a blog:
<h1>My wonderful blog</h1>
<h1>The Zen of HTML5</h1>
<p>HTML5 is an evolution of HTML4…</p>
<p>by David Watson</p>


Document Outline
HTML5 introduces a new concept to markup: sectioning. The new structural elements such as <section> and <article> are not just semantically rich versions of <div>, they are used to provide structure and hierarchy to a document. One <div> nested within another gives no meaning and conveys no hierarchy, whereas, an <article> nested within a <section> is considered subordinate to its parent as well as providing semantic information.

There is no hierarchical difference in the two <h1> here because the second <h1> is just embedded in a div which doesn’t say anything:
<h1>HTML5 is weird</h1>

<h1>XHTML has its problems</h1>

There is a hierarchical difference in the two <h1> tags here. The first <h1> is of more importance than the second. The first <h1> is the heading of the page, whereas the second <h1> is embedded in an article which means it is the title of the article and therefore not as important:
<h1>HTML5 is weird</h1>

<h1>XHTML has its problems</h1>

In order to make sense of sectioning and to understand why it’s possible to have many <h1> headings in a HTML5 document, whereas in XHTML it was best practice to have only one, it’s important to realise that the nature of headings has changed in HTML5. In XHTML, <h2> is subordinate to <h1> but in HTML5, one <h1> can be subordinate to another, depending on context.

The reason for this apparently bizarre implementation is actually quite simple. When XHTML was first codified, most websites were static and the context of any document element was obvious. Everything related to the webpage <body> and every element below (or within) that element was fixed in terms of its hierarchy. As more and more websites became dynamic, pulling content from databases and populating templates, it became difficult to be specific about heading levels because one couldn’t say where any particular chunk of content might end up. A blog is a very good example of what can go wrong. When a blog is listed with other blogs, the title of the blog would be of an <h2> importance but when the blog is the full page, the title of the blog is of a <h1> importance. So the new use of multiple <h1> embedded in <article> enables a blog title to have two types of importance, depending on it’s context.

Audio and Video
For the first time, HTML5 provides a way to play audio and video in a browser without the use of plugins like Flash. Unfortunately, there is still a problem with media formats. The most popular formats like MP3, are not open and browser makers must pay to support them. So, although the “big boys” can afford to pay for MP3 support in their browsers, Mozilla cannot – Firefox does not support MP3 but it does support the open Ogg Vorbis format. Unfortunately, not all of the other browsers support the .ogg format. The result is that we must provide different formats to different browsers.

An example from HTML5 for Web Designers by Jeremy Keith:
<audio controls>
<source src=”witchitalineman.ogg” type=”audio/ogg”>
<source src=”witchitalineman.mp3″ type=”audio/mpeg”>
<object type=”application/x-shockwave-flash” data=”player.swf?soundFile=witchitalineman.mp3″>
<param name=”movie” value=”player.swf?soundFile=witchitalineman.mp3″>
<a href=”witchitalineman.mp3″>Download the song</a>

The above example has four levels of graceful degradation: The browser supports the audio element and the Ogg Vorbis format. The browser supports the audio element and the MP3 format. The browser doesn’t support the audio element but does have the Flash plug-in installed. The browser doesn’t support the audio element and doesn’t have the Flash plug-in installed.

Canvas is a new element that can be used to create images dynamically. For example, data could be pulled from a database and <canvas> could be used to draw a graph of that data.

Information Architecture and Navigation

What is an Information Architect?

  • “I organize huge amounts of information on big web sites and intranets so that people can actually find what they’re looking for. Think of me as an internet librarian.”
  • “I help my company by making it easy for customers to find our products on our web site. I’m a kind of online merchandiser. I apply one-to-one marketing concepts on the Internet.”
  • “I’m the one who takes on that information overload problem that everyone’s been complaining about lately.”

Information Ecologies
The three following need to be divided equally:

  • Context: Business goals, funding, politics, culture, technology, resources and constraints
  • Users: Audience, tasks, needs, information seeking behaviour, experience
  • Content: Document/data types, content objectives, volume, existing structure

Al into Browsing Aids

  • Organization Systems: The main ways of categorizing a site’s content. Also known as taxonomies and hierarchies.
  • Site-wide Navigation Systems: Primary navigation systems that help users understand where they are and where they can go within a site.
  • Local Navigation Systems: Primary navigation systems that help users understand where they are and where they can go within a portion of a site.
  • Sitemaps/Tables of Contents: To supplement primary navigation systems; provide a condensed overview of and links to major content areas.
  • Site Indexes: Supplementary navigation systems that provide an alphabetical list of links to the contents of a site.
  • Site Guides: Supplementary navigation systems that provide specialized information on a specific topic.
  • Site Wizards: Supplementary navigation systems that lead users through a sequential set of steps.
  • Contextual Linking Systems: Consistently presented links to related content. Often embedded in text, and generally used to connect to highly specialized content within the site.

“Navigation plays a major role in shaping our experiences on the Web. It provides access to information in a way that enhances understanding, reflects brand, and lends to overall credibility of a site. And ultimately, web navigation and the ability to find information have a financial impact for stakeholders.”

  • A well designed website will have a “balanced” navigation system incorporating many navigation types.
  • Navigation affects site credibility.
  • Take a “user centred” approach to navigation design.
  • Users will build a mental map of a website; make it easy to visualise the structure.
  • Always confirm rather than confound user expectation.
  • Users do not always start at the homepage!
  • Consider the many types of navigation (e.g. breadcrumb).
  • Site maps – navigation and SEO/findability.
  • Site search is an important navigation tool.
  • Customers can’t buy what they can’t find.
  • Employees lose productivity when navigation is inefficient.
  • The cost of support increases with poor navigation.
  • Brands become devalued with poor navigation because of negative experiences.

Web Security

Security Precautions

  • PC anti-virus/malware
  • Use strong Passwords and keep them safe
  • Keep backups
  • Latest version of apps
  • Employ good coding practice: sanitise untrusted data such as URL parameters
  • Check your site files via FTP and look for anything suspicious
  • Check your server anylitics regularly for suspicious activity
  • Understand how hackers operate

How websites are attacked

  • Using stolen credentials: Login details stolen using keyloggers etc.
  • SQL injection: Malicious strings added to URL Parameters
  • Cross-Site Scripting: Malicious scripts run via HTML forms etc.
  • Denial of Service: Flooding a server with requests so that it becomes unavailable to legitimate users.

SQL Injection
SQL Injection is a technique hackers use to manipulate PHP code and insert their own scripts. They do this by replacing the seemingly innocuous URL parameter with their own code. Example:  http://www.cadtutor.net/corner/single-article.php?id=351
In the above example, “351” would be replaced with code that attempts to allow the hacker access to your database or to do practically anything else.

There are many different types of SQL Injection attacks, depending on context. They can be used to circumvent secure logins. Or to list all information in a database. Or to drop (delete) a database table. Or to insert malicious scripts that do other things – ultimately, a hacker could gain control of a web server. Hackers actively look for security holes…

Unsafe Code
The following script fragment takes the value given to it from GET, assigns it to a variable ($article) and uses that value in the SQL query. This is a very bad idea:
URL: article.php?article_id=5

require (‘/home/cadtutor/config_files/corner_config.php’);
require ($_SERVER[‘DOCUMENT_ROOT’].’/corner/includes/db_connect.inc.php’);
# query for the article requested
$query=”SELECT * FROM articles WHERE article_id = $article”;

Safe Code
This script fragment checks to see if the URL parameter conforms to the data type expected and if it doesn’t, the request is sent to the 404 page:
# if $article has no value or is not a string integer, go to 404
if (!$article || ctype_digit ($article) == FALSE) {
require (‘/home/cadtutor/config_files/corner_config.php’);
require ($_SERVER[‘DOCUMENT_ROOT’].’/corner/includes/db_connect.inc.php’);
# query for the article requested
$query=”SELECT * FROM articles WHERE article_id = $article”;

Server Logs – – [25/Jan/2011:02:45:04 +0000]”GET /corner/article.php?id=999999.9+UNION+ALL+SELECT+0x31303235343830303536%2C0x31
303235343830303536%2C0x31303235343830303536%2C0x31303235343830303536– HTTP/1.1” 200 26037 “-” “Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727) Havij”

You may be able to spot unusual user agent names in your server logs. In the above example, “Havij” doesn’t sound like any browser I’ve ever heard of. That’s because it isn’t a browser, it’s a piece of software used by a hacker to look for security vulnerabilities.

Software for hacking
Havij – Advanced SQL Injection Tool
Havij is legal and free. The product description is chilling:
“Havij is an automated SQL Injection tool that helps penetration testers to find and exploit SQL Injection vulnerabilities on a web page. It can take advantage of a vulnerable web application. By using this software user can perform back-end database fingerprint, retrieve DBMS users and password hashes, dump tables and columns, fetching data from the database, running SQL statements and even accessing the underlying file system and executing commands on the operating system. The power of Havij that makes it different from similar tools is its injection methods. The success rate is more than 95% at injectiong vulnerable targets using Havij. The user friendly GUI (Graphical User Interface) of Havij and automated settings and detections makes it easy to use for everyone even amateur users.”

What can hackers do?
Hackers can use a security hole to add their own files to your site, leading to all sorts of possibilities. They can even add a file manager that only they have access to. This is a script from an innocuous file called .sym.php – the leading period is used to hide the file:
<?php # Web Shell by oRb
$auth_pass = “b497dd1a701a33026f7211533620780d”;
$color = “#df5”;
$default_action = ‘FilesMan’;
$default_use_ajax = true;
$default_charset = ‘Windows-1251’;

Web Shell Software
Root Kit
Once a hacker finds a way to upload a file to your site, either via FTP or some vulnerability, they can install a file manager like the one above and eventually a “Root Kit”.

A Root Kit is malicious software that hides itself but allows a user to gain “root” access over a computer – usually a web server. Once such software is in place, the hacker has complete control of the server and can even lock out legitimate admin users. The only safe way to recover from such an intrusion is a complete server rebuild and to fix the original vulnerability so that it can’t happen again.

What can hackers do?
They can steal information from databases such as financial data, passwords, names, addresses, credit card details etc. They can steal media valued at millions of dollars from organisation that really should be protecting their interests better. They can change files on your website so that they install viruses on your visitor’s computers, causing your website to be blacklisted by Google. They can make your life really miserable and lose you lots of money. Hackers don’t just target big organisations. They seek out small, vulnerable sites for practice and fun.

Currently the hacking of websites is on the increase. Hacker’s software is freely available and increasingly sophisticated, though easy to use – anyone can do it. No website can be 100% secure but if you take all possible precautions, you can considerably reduce the risk. Guardian article about Hacking

Google warns users about unsafe sites
‘This site may harm your computer’ may appear under a site on the Google Search results page. If this happens to your site, you must use Google Webmaster Tools to request that Google scan your site and remove the notice if it is found to be clean.

What if I get hacked?

  • Close the site immediately – use .htaccess to redirect all traffic to a temporary holding page: Redirect 302 / http://www.mysite.com/site-maintenance.html
  • Report the problem to your web host.
  • Find the source of the problem.
  • Eradicate the problem.
  • Never open the site until you are 100% sure it is safe for your visitors.
  • Request a Google review.

Where can I get help?
Some companies claim to be able to recover hacked sites for you but unless you have lots of money, you’re pretty much on your own – however, if you have a good web host, they should be able to help and there is plenty of advice available, particularly from Google.


htaccess and other oddities


Within the root directory of a website there are often some useful files included:

  • .htaccess (hypertext access):
    custom error pages
    password protection
    redirects from one file to another
    rewrites URLs
    hot link preventionsitemap.xml (Google sitemap)
  • robots.txt (Disallow crawling)
  • favicon.ico (Favourites Icon)
  • CHMOD (Change Mode)
  • sitemap.xml
  • robots.txt
  • favicon.ico



  • What it is: .htaccess is a localised server configuration file that can be used to override default server configuration settings.
  • Originally… the files primary purpose was to facilitate password protection to web folders; hence the name (hypertext access).
  • On modern servers, .htaccess can be used to perform a range of tasks.
  • What they look like and how to edit: .htaccess files are simple ASCII text files and can be viewed and edited in any text editor, even Notepad. The file contains one or more lines, known as “configuration directives”.
  • Where it lives: If you have a .htaccess file it would live in the root of your site. There may be additional .htaccess files if password protection is used. Each secure folder will have its own .htaccess file.



  • Custom Error Pages:
    Configure the use of custom error pages (e.g. 404 “page not found”).
  • Password Protection:
    In combination with a .htpasswd file (containing encrypted username and password).
  • Redirection:
    Can redirect requests for one page to another (useful if your site changes).
  • Rewrite URLs:
    For consistency and for the benefit of search engines you can decide whether your site uses “www” or not (URL Canonicalization).
  • Prevent Hotlinking:
    Can prevent your web content (usually images) from being embedded in sites outside of your server.
  • And more…



  • What it is: All good websites make use of custom error pages; they are an excellent usability tool. The most common error is the 404, “page not found”.
  • How they work and why customise: When a hypertext request fails, the server determines the reason and allocates an error code. If a requested page cannot be found, the error code is 404. However, such codes are meaningless to the normal user and should be avoided. Far better to use a useful custom error page to help the user recover from the error.
  • What it looks like and how to edit: A custom error page is a HTML (or PHP) file so it is easy to customise. It should have the same look and feel of your site and include a navigation.
  • Some creative 404 pages:
    404 Research Lab
    50 Creative and Inspiring 404 Pages
  • How to add the 404 page to your .htaccess file: You tell the server to serve your custom error page by adding a directive to .htaccess. To write it in the .htaccess file include:
    ‘ErrorDocument’ (the directive)
    404 (the error type code)
    The location of the customised 404 file
    Each element is separated by a space and will look something like this:
    ErrorDocument 404 /error/404.html



  • Password protection requires a .htaccess file in the folder to be protected and a .htpasswd file located anywhere on the domain (ideally in a secure location).
  • Where it lives: In many cases, the .htpasswd file is located in the same folder as .htaccess but if you have access to folders above the web root, it should be placed there as it is more secure.
  • How it works:
    User requests access to folder by entering address in browser.
    Server checks if folder contains .htaccess. If authentication is required…
    …user is asked to enter User Name and Password.
    Server checks details against .htpasswd file.
    If correct, access is granted…
    …if incorrect a 401 error is issued and error page displayed (you can customise this page like you can with a 404 page).
  • Writing the password protection in the .htaccess file:
    AuthName = text that will display on the authentication dialogue box.
    AuthType = method used, Basic is the default.
    AuthUserFile = server path to the password file.
    Require = type of access (e.g. group access can be specified)
    It will look something like this:
    AuthName “student project work”
    AuthType Basic
    AuthUserFile /home/mawa/.htpasswds/.htpasswd
    Require valid-user
    More information:
    Authentication, Authorization and Access Control
  • The .htpasswd file: contains a list of all the valid User Name/Password combinations, one on each line. The User Name is plain text but the Password is encrypted using the MD5 algorithm.
  • How to make a .htpasswd file: There are plenty of free online tools that will automatically create .htpasswd files for you, such as .htpasswd generator.
    Use Notepad to save your .htpasswd file and then upload to your site using FTP. Once both .htaccess and .htpasswd are in place, the folder is protected and accessible only by entering the correct authentication details.



  • What and why: Websites change: FACT.
    In some cases you may want to rename a file or even rename your folders for SEO or for consistency as a site expands. So what happens when that popular page has to move or is renamed? All the inbound links will be broken, including those from search engines – disaster!
  • How: So, you need to make some major changes to your site…how can this be done without breaking all the inbound links? You can use a 301 redirect to tell search engines where the content has moved to. Furthermore, a 301 redirect tells search engines that this is a permanent move, so they can update their index accordingly.
  • The 301 Redirect: You can use a 301 “permanent” redirect in .htaccess.
    This does 2 things:
    It serves a new page when an old page is requested.
    It tells search engines to change their index and replace the old page with the new one.
  • Directive syntax:
    Redirect[space]301[space]old path from root[space]new absolute path
    The example below redirects any request for the folder /acad to the new folder /tutorials/autocad, for example:
    a request for /acad/index.html is redirected to /tutorials/autocad/index.html
    This is what it might look like:
    Redirect 301 /acad/ http://www.cadtutor.net/tutorials/autocad/
  • Continue Redirecting: Although search engines will learn the new location of content very quickly via your 301 redirect, inbound links are not usually updated in any systematic way, so it’s a good idea to keep the redirect in place for as many years as you think appropriate.
    Most webmasters want their content to be correct and a quick email asking them to update their link usually works.
  • Temporary Moves: It’s less common that you may need to move content temporarily…but if you do, there’s a way to do that too. Simply use a 302 redirect directive. This redirects user requests in the same way as a 301 but it tells search engines not to update their index.



  • What does it do: .htaccess allows you to rewrite any URL and change it’s form using a Rewrite Engine module in the Apache server, called mod_rewrite.
  • Common uses:
    To change http://www.mydomain.com to http://mydomain.com or vice versa.
    To change mydomain.co.uk to mydomain.com
    To change difficult URLs (generated by blogs etc.) to search engine friendly ones.
  • Canonicalization: Canonicalization is an SEO issue. Search engines may consider http://www.mysite.com and http://mysite.com to be different websites when, in fact, they are the same. The following directive forces all URLs to be rewritten with the “www” even if the request was made without it.
  • Regular Expressions:
    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^mysite.com$ [NC]
    RewriteRule ^(.*)$ http://www.mysite.com/$1 [R=301,L]
    The directive strings for RewriteCond and RewriteRule look a bit odd.
    They use regular expressions (regex) to mach URL patterns.
    There’s no need to craft your own regex, just use those that others have designed and substitute your own domain details.
  • Normalising TLDs: If you have a number of Top Level Domains (e.g. .com, .net, .co.uk) for the same name, mod_rewrite can be used to change them all to one preferred TLD.



  • Stop Hotlinking: mod_rewrite can also be used to prevent people hotlinking (or inline linking) to your content and stealing your bandwidth. The directives below (added to .htaccess) will cause a “failed request” when .GIF, .JPG, .JS or .CSS files are requested from outside the server.
    RewriteEngine on
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
    RewriteRule \.(gif|jpg|js|css)$ – [F]
  • Serving Alternate Content: mod_rewrite can even be used to serve alternate content in response to a hot linking request. The directives below serve an image called angryman.gif every time a .GIF or .JPG file is requested from outside the server.
    RewriteEngine on
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
    RewriteRule \.(gif|jpg)$ http://www.mydomain.com/angryman.gif [R,L]



  • What it is: As its name suggests, sitemap.xml is an XML file that lists all the important content on your website. It tells Google and other search engine spiders which content you would like them to index. It also includes options that allow you to specify how often the content changes and its relative importance.
    The sitemap protocol is recognised by Google, Yahoo! And Microsoft.
  • What it looks like:
    <?xml version=”1.0″ encoding=”UTF-8″?>
    <urlset xmlns=”http://www.google.com/schemas/sitemap/0.84″>
    <loc>http://www.websitearchitecture.co.uk/</loc> <changefreq>weekly</changefreq>
    <loc>http://www.websitearchitecture.co.uk/core-courses</loc> <changefreq>weekly</changefreq>
  • Building a sitemap.xml: You can easily build your own sitemaps if you have a simple site with a few pages. All the information you need is available at sitemaps.org.
    If you have a site with many 100s or 1000s of pages, what should you do then?
    Fortunately, there are a number of free services that will crawl your site and build sitemap.xml for you. For example: XML-Sitemaps.com.
    However, always check that you get what you want. These services do not discriminate and you may want to edit the result before using it.
    Google Webmaster Tools recommends you use sitemap.xml for all your sites – that’s a pretty good hint that you should have one!



  • The purpose of robots.txt: is to tell crawlers/spiders where they should not go. In other words, it lists any content that you do not want indexed. By default, spiders will index any content they find.
    In the example above, robots.txt is also used to alert spiders to the fact that sitemap.xml is available. Essentially, that file tells spiders what you do want them to index.
  • What it looks like:
    User-agent: *
    Disallow: /error/
    Disallow: /includes/
    Disallow: /forum/clientscript/
    Disallow: /forum/cpstyles/
    Disallow: /forum/customavatars/
    Disallow: /forum/customgroupicons/
    Disallow: /forum/customprofilepics/
    Disallow: /forum/images/
    Disallow: /forum/includes/
    Disallow: /forum/install/
    Disallow: /forum/signaturepics/
    Sitemap: http://www.websitearchitecture.co.uk/sitemap.xml
  • Building robots.txt: As its name suggests, robots.txt is just a simple text file and you can easily write your own following the protocol at robotstxt.org.
    All spiders request robots.txt when they first access a website. If the file is not found, a 404 error is issued and the spider continues with crawling your site.
    Even if you have no content to hide, having a robots.txt file avoids the 404 error and the serving of your custom error page, if you have one.
  • Empty robots.txt file:
    Will look like this:
    * Disallow:
    It’s probably a good idea to include a robots.txt file in your web root. Something like the text above is all you need (note the 2 blank lines after “Disallow:”). Don’t forget to add your sitemap when you have one in place.



  • What is it: A Favicon is a small graphic image that appears in the address bar and in other places when a website is viewed in a browser.
  • A Favicon is a special type of image file (.ico) that is not commonly supported by mainstream applications but there are plenty of online image convertors and icon editors such as Icon Editor
  • Adding a favicon to your site: Save your icon in the root as ‘favicon.ico’. Using the default filename means the server will look for it automatically.
  • You only need to point to a Favicon using a <link> tag if:
    Your icon file is called something other than favicon.ico or is in a sub-folder.
    You want to use different icons for different parts of your site.
    You want to conform to W3C preferences!
    <link rel=”icon” type=”image/x-icon” href=”/folder/favicon.ico” />



  • What it is: Change Mode (CHMOD) is a method used in Unix operating systems for setting file permissions. When a file is uploaded to a web server using FTP, it is given default permission settings. Permission settings are expressed as a 3 digit number. The default value is 644 and means all can read but only the server can write.
  • Why change permissions?
    Some server-based software (blogs, forums etc.) need to be able to create new files or to modify existing ones and in order for this to work correctly, you need to change permissions. Most FTP clients allow you to change permissions by right-clicking the file and selecting the appropriate option. In most cases, the install instructions will tell you what is required but usually involves changing the numeric value to either 666 (writable by all) or 777 (executable by all).
  • Security Implications: In order to maintain security, you should only change permissions on files and folders where it is absolutely necessary. This file listing shows a WordPress blog. The permissions for the folder “wp-content” have been set to 777 because WordPress uses it to store uploaded content. The default for folders is 755.



Some notes from the Typography class taught by Prisca…




Typeface: The design, shape and form of the characters. It can also have variants such as bold, italic etc but keeping the original typeface intact. These type variants combined become a font family.

Font: The file which allows the final type to be applied to the design. A font is something you use – in a digital format for example.



Definition: A font stack consists of a list of fonts, defined in the font-family declaration in CSS. Listed in order of preference, the fonts are used when available via the end user’s computer.

There are 5 different font families used for text styling via CSS:
serif, sans-serif, monospace, cursive, fantasy.

Commonly used font stacks: (sometimes default on coding apps eg. Dreamweaver)

  • Arial, Helvetica, sans-serif
  • Courier New, Courier, monospace
  • Times New Roman, Times, serif
  • Georgia, Times New Roman, Times, serif
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif

Building a Font Stack: Take care to select fonts which are ‘comfortable’ with each other, which are similar in x-height, character width as well as weight and you will ensure your nicely crafted layout will not be compromised if your preferred font is not found.

Tools to help with building font stacks:



When using @font-face it is useful to know what the font formats are:

  • EOT: Embedded OpenType: .eot
    This early font format by Microsoft is proprietary and exclusively supported by Internet Explorer. EOT fonts are required for all versions of IE, especially for all earlier versions. Only IE9 includes support for the WOFF format as well.
  • TTF: TrueType: .ttf
    Developed by Apple as a competitor to Adobe’s Type 1 format, used in PostScript. TTF fonts were soon widely adopted as the most common format for system fonts and are now compatible with most operating systems.
  • OTF: OpenType: .otf
    The OTF format was developed by Microsoft and Adobe and is based on the TrueType format. It does include typographical features such as ligatures though these are not yet fully supported by all browsers.
  • WOFF: Web Open Font Format: .woff
    The WOFF format is currently in the process of being standardized and the W3C who published a working draft in July 2010 is expecting it to become the interoperable format which all browsers will use in future. It is important to note that WOFF is not actually a font format per se – but rather a wrapper containing fonts such as TTF and OTF.
  • SVG: Scalable Vector Graphics: .svg
    SVG fonts are different to other font formats as they contain the letter outlines as vector objects. SVG fonts are usually quite heavy in file size as they do not have the compression built in as other formats do. The most common use of this format remains either the iPhone and iPad, prior to iOS4.2, or their implementation via web font providers (as covered in more detail later).



  • Check licencing before use
  • How the @font-face rule works: by linking the font file to your style sheet much like linking an image. The font file can be hosted local or on the server.
  • If the file needs formatting: This is if you are using a font file that you have on your computer and need to convert it for the web. There are plenty of tools but the @font-face generator by FontSquirrel is really good.
  • Writing the CSS:
    Load the font:
    @font-face {
    font-family: fontfamilyname;
    src: url(http://site.com/fonts/fontname.otf) format(‘opentype’);
    Apply the font:
    p {
    font-family: font family name, font family;
  • Catering for different browsers by linking fonts as different formats:
    src: url(‘fontname.eot’); /* IE */
    src: url(‘fontname.woff’) format(‘woff’); /* for all modern browsers */
    src: url(‘fontname.ttf’) format(‘truetype’); /* for Safari, IOS 4.2 & Android */
  • Browser compatibility issues:
    Refer to these articles: “Bulletproof @font-face syntax” by Paul Irish
    and The New Bulletproof @Font-Face Syntax by Ethan Dunham.

Revenue Models


Definition of freemium:
Freemium is an eCommerce business model by which a product or service (typically a digital offering such as software, media, games or web services) is provided free of charge, but a premium is charged for advanced features, functionality, or related products and services. The word “freemium” is a combination of  the two aspects of the business model: “free” and “premium”. Often, the business model is further supported by advertising, on the website and/or in the free version of the product. The free version of the product should be useful without the need to upgrade to the premium version; yet often there are obvious limitations that make upgrade tempting.




  • Definition of subscription content: Access to online content in exchange for payment. Also known as “Paywall”. http://en.wikipedia.org/wiki/Paywall
  • “Hard paywall”
    Paid subscription required before any content can be accessed e.g. The Times
  • “Soft paywall” Similar to freemium.
    Access to a certain number of articles (say, 20) before subscription required, or some content is free, some requires a subscription e.g. Wall Street Journal – some articles are free, some require subscription.
  • No paywall:
    Entire newspaper content, and more, available freely online e.g. The Sun
  • Discussion:
    What are the challenges of subscription content?
    Why do some newspapers charge for their online content, and others give it away for free?
    The internet is full of free, high quality reviews and consumer advice. How does http://www.which.co.uk survive by charging for similar content?



In this section we focus on banner adverts, internet advertising networks and software. We will look at internet advertising and its benefits to the advertiser and publisher (website owner). As a webmaster, you may wish to be both advertiser and publisher.

What type of advertising is appropriate for your site?

  • None:
    eCommerce sites might wish to focus entirely on promoting their own sales. Public services, e.g. local government.
  • Value Added:
    Contextual adverts.
    Visible yet discrete.
    Extra income as a sideline rather then primary e.g. Amazon carries adverts – have you noticed them?
  • Ads as a serious source of income:
    Contextual adverts.
    Highly visible.
    Does not affect usability of site.
  • Agressive:
    Pop ups.
    Pop unders.
    …and other annoyances!


  • Advertiser: The website / company that wants to advertise itself through banner adverts on other websites.
  • Publisher: The website / company that displays the adverts, in return for payment.
    To make a significant amount of money from banner adverts, high traffic is needed.
    A good rate of return would be £1 per 1,000 advert impressions.
    Multiple ads per page can scale this up.
    But even small websites can make money.
  • Inventory:
    The publisher’s available advertising space:
    Types of pages, e.g.
    Internal page.
    Zones, e.g.
    Leaderboard top, homepage, 728×90,
    Sidebar skyscraper 120×600,
    Footer leaderboard 728×90,
    Leaderboard top, internal pages, 728×90,
    More visibility = better revenue (ads in header will earn much more than ads in the footer).
    Page views = number of impressions per ad.
  • Advertising network:
    Online service that connects advertisers with publishers.
    Take payment from the advertiser e.g. an advertiser might buy 1,000,000 impressions at £1 CPM (total spend £1,000).
    The advertising network display the adverts across its network of publishers.
    Payment is made to publisher according to how many impressions were served on their website.
    The advertising network may be taking more than 50% of the advertisers spend.
  • User tracking:
    Many advertising networks track website use.
    Show adverts for previously visited sites: even advertising the exact product you may have looked at in the past on a different website.
    Controversial or ingenious?
  • Ad management software:
    Webmasters can use ad management software to place banner adverts directly on their websites.
    Good for managing direct advertising sales.
    Integrates with multiple advertising networks.
    Very useful for tracking performance of banners advertising your own content.
  • Sizes: There are industry standards governing dimension of adverts and other parameters such as file size.
  • Pricing models:
    CPM, CPC, CPA, Tenancy etc.
  • Dealing direct with advertisers:
    Make more money as revenue is not shared with advertising network.
    Only sites with lots of traffic have a chance of direct sales with large advertisers.
    Small sites can still strike deals with small advertisers e.g. related local businesses.




  • CPM: Cost per thousand (mille) impressions.
    Variable price.
    Market forces.
    Position on page (top / below fold etc)
  • CPC: Cost per click
  • ECPM: Effective cost per thousand.
    Allows revenue comparison between different models (CPM v CPC)
    e.g. if a CPC ad was displayed 1,000 times and was clicked 10 times @ £0.20 per click, the ECPM = £2.
  • CPA: Cost per action
    Advertiser pays the publisher when a certain action is completed
    e.g. telephone call made (attributed to the advert using unique phone numbers / extensions / quote reference)
    e.g. email marketing sign up
    e.g. installation of free, ad supported software.
  • Tenancy: A flat rate agreed between publisher and advertiser
    Not dependant on impressions / clicks.
    Although impressions / clicks could be used as a reference when agreeing the price.
  • CPS: Cost per sale, also known as revenue sharing
    See affiliates.



Ad standards and creative guidelines:



Definition of advertising network:
An advertising network is a company that connects advertisers to publishers (websites that want to host advertisements). The key function of an ad network is aggregation of ad space supply from publishers and matching it with advertiser demand. Adapted from http://en.wikipedia.org/wiki/Advertising_network

Benefits of using advertising networks:
  • Allow very small websites to carry adverts
  • Simple to join and integrate code into website
  • Advertiser has confidence dealing with the ad network company rather than thousands of smaller websites
  • Contextual adverts may be served where possible

Drawbacks of using advertising networks:

  • Publisher may have limited control over the quality of the adverts
  • Some networks carry “spammy” adverts
  • Advertising network may take 50% (or more) of the money
  • No payout until e.g. $100 has been earned – this can take many months for new websites.
  • http://buysellads.com/
  • A bit different to other networks
  • Publishers advertise their site to potential advertisers
  • Publishers set their own price, CPM or tenancy
  • Advertisers, and their banners, can be approved before the deal is agreed.

Specialist networks: Image ads and Video ads.



Google AdSense is an advertising network. It is a program that allows publishers to serve automatic contextual text, image, video, and rich media adverts. The adverts are administered, sorted, and maintained by Google, and generate revenue on either a CPC or CPM basis.

Key features:

  • Highly contextual
  • Highest paying advertising network?
  • Publisher has some control over the appearance of text ads
  • Publisher can remove ads from direct competitors
  • Google have strict quality standards for publisher sites
  • Excellent range of reports to help optimise revenue
  • Integrates with Google Analytics for more powerful reports
  • Minimum payout $100 (may take new sites several months to achieve this).



Self-hosted, or hosted, online applications to enable the webmaster to manage their own advert inventory. Typical features: http://adsenator.com/.
Probably only necessary for larger websites managing multiple advertisers.




  • Buying / selling text ads:
    Text ads can be a legitimate form of advertising (when used with the “nofollow” attribute)
    Text ads solely for the purposes of influencing search engine ranking, are contrary to Google’s Webmaster Guidelines on paid links
  • Contextual:
    Contextual advertising means advertising products or services that are related to the content of the page. Google AdSense is a market leader in this field.
    Clicks are more likely when the adverts are relevant to the page topic = more revenue.
    Similarly, adverts can be genuinely useful when offering related products.
  • Do not trick visitors into clicking ads:
    Deceptive practices are bad for the user experience.
    Will result in a ban from the advertising network.
    Avoid pop ups, pop unders etc.
  • Do not encourage, or reward visitors to click ads



In an affiliate scheme, a webmaster promotes another company’s products. When a customer buys a product, the webmaster is rewarded with a payment, either flat rate or a percentage of the sale.

  • An affiliate scheme brings together:
    The merchant / advertiser whose products are being offered.
    The publisher (webmaster, the “affiliate”).
    The customer.
  • Attract customers with:
    Banner ads
    Text links
    Product feeds / thumbnails.
    Often, commission will be paid even when the customer purchases at a later date (30 days standard).
  • Direct affiliate schemes:
    Sign up directly with the merchant.
    Amazon associates
  • Affiliate networks:
    Directories of affiliate programs.
    Commission is shared between publisher and network.
    Affiliate Window


    Commission Junction





Google Webmaster Tools provides reports about your pages’ visibility on Google. You can act on these reports to improve search engine visibility.

  • Google’s view of your site and problem diagnosis: See how Google crawls and indexes your site and learn about specific problems we’re having accessing it.
  • Link and query traffic: View, classify and download comprehensive data about internal and external links to your site with link reporting tools.
  • Find out which Google search queries drive traffic to your site: and see exactly how users arrive there. Share information about your site and tell Google about your pages with Sitemaps: which ones are the most important to you and how often they change.
  • Google Webmaster Help YouTube channel:
  • Google Webmaster support:



Google Analytics is an industry standard reporting tool. At a basic level, it gives the number of visitors and page views (impressions) a site receives. It is particularly useful for analysing website marketing campaigns and calculating return on investment from paid advertising.

Installation: Google Account required, sign up to Analytics service.
JavaScript tracking code must be installed on every page on the website.

Key features:

  • Real time monitoring
  • Audience (Demographics, Behaviour, Technology, Social media interaction, Mobile device usage)
  • Advertising
  • Traffic sources (Direct / referrals / from search engines, SEO keyword traffic and landing page analysis)
  • Content (Page popularity, Site speed, Internal site search, Events? AdSense reporting, In-page analytics)
  • Conversions (Goals, Ecommerce, Funnels)

Google Analytics YouTube channel:

Google Analytics support:



On the internet, split testing, also known as A/B testing, is a marketing technique to improve conversion rates.

Imagine a company is advertising on the internet, through banner ads or sponsored links. Each time a customer clicks on the advert, they are sent to either “Landing Page A” or “Landing Page B”, with an equal 50% split.

Landing Page A and B will have different design, wording or calls to action. The customer’s visit is tracked through to completion (site exit) and conversion rates are compared between those that entered through Page A and those that entered through Page B.

The advert itself can also be split tested, are customers who click on Advert A more likely to convert than those who click on Advert B?

Once a landing page or advert is found to have a higher conversion rate, the process can start again, to refine further.

Google Webmaster Optimizer:


Key Features:

Help and Support:



Goals and Funnels:

  • Google Analytics function:
    Define a goal: destination URL, or time on site, or number of pages visited.
  • For destination URL: e.g. “thank you for ordering” page, “thank you for contacting us” page.
  • YouTube Google Analytics Goals video
  • Define a funnel (Related to goals): the route you expect customers to take through your site to reach a goal – typically this is used for tracking a customer’s journey through checkout and understanding abandonment
  • YouTube Google Analytics Funnels video

PPC (sponsored links) tracking:
Google AdWords can track each customer from PPC click through to goal which is essential for calculating return on investment of PPC spend.

Cart abandonment: Use funnels to understand where carts are abandoned.
Use CMS reports to understand what products were in cart when abandoned.
Send email to customer to try and salvage sale (if you know their email address).

Google Analytics eCommerce reports:
YouTube Google Analytics eCommerce tracking video





  • SEOmoz provides free and paid-for SEO research and reporting tools
  • SEOmoz pro is $99/month
  • free 30 trial ideal for defining your SEO strategy and competitor research
  • http://www.seomoz.org

Key features

Campaign Monitoring:

  • Traffic reports (no different to Google Analytics)
  • Crawl diagnostics:
    Detects SEO errors / room for improvement in your site
  • Keyword rankings:
    Shows site’s position in search engine results pages for various target words and phrases
  • Competitive domain analysis:
    Compares your site against competitors against a number of metrics
  • On-page optimisation:
    Grades your site’s optimisation for target keywords
    Also check a competitor’s performance
  • Social interactions:
    Tracks social media interactions and referrals

Research Tools:



Sign up to Google Alert emails, to see when your site is mentioned on other sites: http://www.google.com/alerts


I was unable to attend this session, so I have read over the notes and written them out below.


Definition of eCommerce:

  • doing business electronically
  • a financial transaction via the internet, between buyer and seller, in exchange for a good or service
  • business to consumer (B2C) (internet)
  • business to business (B2B) (internet / extranet)
  • business to employee (B2E) (intranet)
  • includes the design, technology solution and marketing of the website
  • includes the fulfilment / logistics: taking payment, and delivering good or service to the customer.


  • tangible goods for delivery: “the high street on the web”
  • digital goods for instant download
  • content subscription
  • hosting solutions
  • online banking
  • and many, many more



For a site dedicated to eCommerce, a CMS is essential.

Free: open source, community supported, functionality extended through plug ins.
Affordable: paid support packages available
Hosted: no installation / technical expertise required, hosted on provider’s server, possibly less configurable than self-install, analogy: wordpress.org (self install) vs wordpress.com (hosted), monthly fee (specialist or enterprise level).

Open source eCommerce CMS:

Extensions to standard CMS: Most of the popular CMS offer extensions for selling online. This is probably OK for occasional sales but probably not OK for a dedicated eCommerce site.



Specialist: event tickets, accommodation booking, etc

Enterprise level: Magento Enterprise Edition (custom built)

eCommerce CMS – key features to look for in a CMS:

  • add / edit / delete products
    options within products, e.g. colour
    add / edit / delete categories / sub-categories
  • standard CMS functionality for pages (e.g. about us, terms and conditions)
  • postage and packaging price management (e.g. by weight, by price, by country)
  • tax management (e.g. VAT applied to EU destinations, not worldwide)
  • stock control (options to take products off sale / leave available for back-order when stock depleted)
  • cross selling facilitation (“if you like this you might also like this”)
  • customer account management (emails: order received / order despatched)
  • payment gateway integration
  • discounts
  • offer codes
  • typical feature list: http://www.jshop.co.uk/features




  • shedding their “jumble sale” image of old
  • many competitive brand new items on sale from independent sellers
  • massive reach
  • fees apply
  • many eBay sellers have their own eCommerce sites too.

Amazon Marketplace:


  • E-junkie
  • very low cost solution
  • integrates “buy now” buttons into any website
  • worth considering for selling sideline products as part of larger non-ecommerce site


  • very simple, add “buy now” buttons to existing website
  • PayPal provides a very simple cart
  • useful for small sales on otherwise non-eCommerce sites.


  • sell your products on other people’s websites
  • the other website take a commission on any sale
  • a form of advertising where you only pay when something is actually bought
  • also generates inbound links
  • most eCommerce CMS provide an affiliate system.

Price comparison sites:

  • a type of affiliate site, as they get commission on each sale

Voucher code / cashback sites:



Most visitors do not buy anything! According to the FireClick index:
Only 2-3% of eCommerce website visitors buy something – this is the conversion rate.
Cart abandonment rates are 75%.
Successful eCommerce is all about trying to improve on that 2-3% conversion rate.

Tactics for increasing conversion rates:

Targeted marketing:

  • targeted, targeted, targeted!
  • using internet marketing techniques we have learnt
  • generic SEO will be difficult (e.g. womens shoes)
  • long tail SEO more rewarding (e.g. womens black leather boots size 5)
  • social media following – for marketing, trust, customer service
  • may need a marketing budget: (PPC, banner ads, magazine ads)


  • naturally, if prices are higher than competitors you are at a disadvantage
  • be transparent: show tax / shipping clearly before the customer gets to checkout
  • consider offering discounts for multiple purchases
  • discounted postage for multiple purchases


  • “don’t make me think!”
  • no barriers
  • the rules of usability apply x10 for eCommerce!
  • intuitive categorisation
  • ensure site search works – consider plurals, thesaurus etc
  • give your customers a pleasant, rewarding shopping experience

Product information:

  • large, multiple images
  • video
  • accurate text
  • large, clear “add to cart” button


  • best seller lists
  • offers
  • enclose a “money off your next order” voucher in customer’s first purchase

Customer Service:

  • Provide easy ways for customers to contact you:
    Phone number with human on the end, live chat, email, Skype, Facebook, Twitter.
  • Publish clearly:
    Returns policy, delivery times – offer next day / alternative addresses, warranty information.
Site response time: fast server essential
Trust and security:
  • publish customer reviews, and respond calmly and honestly to criticism
  • use secure connection (SSL / https://) for checkout process
  • display reassuring security badges
  • get listed in human-edited directories
  • use a familar payment gateway


  • ensure repeat business
  • fast despatch
  • timely communications
Analytics: understanding your data is essential to continuous improvement.

Cart abandonment rates can be very high and negatively affect conversion rates. Here are some suggestions for making the customer’s journey as smooth as possible.

  • Usability is paramount!
  • Strip out navigation and other distractions: Once the customer is on their checkout journey, declutter the screen so they are focused on the task of form filling.
  • Be upfront about postage and tax: increased prices during checkout are a nasty surprise.
  • Registration optional: Many customers hate compulsory registration, but there are benefits to registration (point them out).
  • Don’t ask for too much personal information: e.g. is date of birth / gender really needed?
  • build confidence and trust: show payment gateway logos throughout checkout, show phone number for instant response to problems with checkout.
  • have a progress indicator bar: (e.g. “step 1 out of 3”)
  • clear, readable fonts
  • postcode look up: Provide a postcode look up service to save a little time
  • country default:Use IP detection to pre-fill the customer’s country (give them the full country list too in case IP detection is wrong)
  • Make form completion as user friendly as possible:Use microcopy to explain exactly what is required in each field. Use client side validation to immediately notify customer of errors (use server side validation too of course).
  • Offer different billing / delivery address: But don’t make customer type out the same address twice.
  • Keep cart session alive as long as possible: Check server timeout is long.
  • Gentle cross selling at checkout is OK but don’t be too aggressive
  • Provide a link back to the product: Possibly in a pop up or overlay, so customer doesn’t have to abandon checkout to look at what they are buying. Include a thumbnail of the product in the basket / checkout to avoid the above
  • Make it easy to edit cart: change quantity / remove
  • shopping cart abandonment infographic



A payment gateway takes the money from the customer and passes it on to the merchant, after deduction of a fee.

Benefits of a payment gateway:

  • security is handled by the gateway
  • no credit card storage on merchant website
  • avoids PCI compliance https://www.pcisecuritystandards.org/
  • trustworthy: customers more likely to enter their card details into a trusted gateway site, than directly into an unknown eCommerce site
  • customer protection
  • cards authorisation / fraud protection
  • integrate well with CMSs – orders only confirmed once card has been authorised.

List of common payment gateways:
An internet merchant accountis required for these gateways:

No internet merchant account is required for PayPal

Typical fees: 3-5% of transaction.



Book: only $5.94, essential reading for those entering eCommerce for the first time.