By | September 19, 2012

GuitarSpec is up and running, register now for full access to the site and help build the database by adding guitars and videos.

Ampersand 2012

By | June 17, 2012

My notes from some of the speakers at last Friday’s Ampersand conference in Brighton.

Yves Peters Detail in Web Typography

Choosing a Font

  • Narrow your search by requirements
  • Consider aesthetic preferences last
  • Consider:
    1. Formal aspects
    2. Historical context
    3. Cultural references

Functional Criteria

The OpenType format provides:

  • Unicode character encoding for support of multiple scripts
  • Cross platform support
  • Advanced placement features (e.g. kerning)
  • Advanced replacement features (e.g. ligatures)

Font dimensions:

  • X height
  • Cap height
  • Ascender
  • Descender
  • Small-cap height

Numeral types:

Typesetting Numbers

© J. Bear

Fake small caps:

  1. Decrease cap size
  2. Increase weight
  3. Increase tracking

Make correct use of spacing entities:

  • non-breaking space  
  • thin space  
  • en space  
  • em space  
  • punctuation space  
  • figure space  

Veronika Burian & Jose Scaglione Typographic Matchmaking

Font Selection

  1. Morphology/funciton
    • Title or text?
    • Continuous or fragmented reading?
  2. Technical Aspects
    • Reproduction method
    • Media
    • Screen optimisation
  3. Aesthetics
    • Appearance vs. content
    • Volume and visibility
    • Relationships between fonts
  4. Economics
    • Price
    • Amount of licenses
    • Efficiency

Typographic Matchmaking

  • Start by choosing one typephase or family
  • You don’t have to use branding fonts in other contexts, find other ways to incorporate branding
  • Compare fonts by setting to the same x-height (optical size)
  • Contrasting sans-serif with serif with similar properties to maintain balance
  • Organic (handwritten, calligraphic) vs. mechanic (restrained, formal)

“Focusing on contrast makes combining fonts easier”

  • Make use of hierarchy and dominant/submissive pairings
  • ‘Super families’ are font sets containing matched versions (sans-serif, serif, mono-space etc.)
  • It’s harder to combine two sans-serif fonts, which need strong contrast to be differentiated

Laurence Penney Hacking the Stack

  • CSS font fallback works at character level, allowing hierarchical sub-setting
  • For example, old style numbers taken from one font and all other characters from a different font
  • Subset files must only contain the characters to be replaced
  • font-family: 'subset 1', 'subset 2', 'default', 'fall-backs';
  • Make custom fonts for special characters/icons e.g. arrows
  • Doesn’t require extra mark-up, maintaining separation of content and presentation

Jake Archibald In Your @font-face

Browser Support

  • IE – .eot
  • Other browsers – .woff
  • Older browsers – .ttf
  • Older IOS – .svg

Optimising Font Files

  • Remove unwanted glyphs (font squirrel)
  • Gzip TrueType fonts
  • Speed up subset loading with ‘unicode-range’ rule


  • IE loads the content first and then updates the fonts
  • Webkit waits for the font files before displaying the dependent content
  • Firefox allows 3 seconds before loading a fallback font
  • IE8 shows nothing until all files have loaded (move @font-face styles to the top of the head to fix this)
  • WebFont Loader provides control over the loading behavior for all platforms
  • Serve at least .eot and .ttf
  • Avoid downloading unnecessary files
  • Show content first
  • Make files as small as possible

Elliot Jay Stocks Enhancing the Future

Typography plugins by Trent Walton:

  • Lettering.js – automates character level style control
  • FitText.js – scalable text for responsive headlines

Developing CSS Features

Enable/disable ligatures and kerning:

text-rendering: optimizeLegibility | optimizeSpeed | geometricPrecision 
| auto | inherit;

Select subsets/style sets:

/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";


  • Consider the typephase – does it contain the features?
  • Consider the file – is it OpenType?
  • Consider the browser – which features are supported?
  • Consider the user – will it break?
  • Test OpenType in the browser with Type Cast

Typopgraphy Project Designs

By | April 25, 2012

wireframe for typography project

Inital wireframe showing page structure

mockup for typography project

Mock-up for 960px width

Mobile mockup for typography project

Mock-up for 320px width

Typography Project

By | April 24, 2012

Finished typography site for Applied Arts for the Web. Excerpt is from Exquisite Pain by Sophie Calle. Mood Board

By | March 28, 2012 Initial Designs

By | March 28, 2012

On-site SEO

By | March 16, 2012

Search Engine Optimization is the practice of improving a website’s performance in search engine listings with the aim of driving more traffic to the site. On-site SEO encompasses all of the internal changes that can be made to a website to increase its page rank and performance in relation to targetted keywords.

Recently I have been redesigning a website that has been struggling with its performance in search engines in comparison to its competitors. Pregnancy Preparation is a local business running evening classes for pregnant women in Derby. I will refer to this project in my examples, detailing what steps I have taken to hopefully improve the site’s page rank (currently 0) and help it to match relevant search queries.

Keyword Development

Before considering how to optimize a website it is vital to have a list of keywords that you are trying to target. There are many online tools to help identify relevant keywords and phrases, such as the Google Keyword Tool, which can help by providing statistics and suggesting related search terms.

To filter the results of your own ideas and suggestions that have some out of a keyword tool, keywords should be categorized as either primary, secondary or tertiary. In general it is preferable to target the keywords with a high search volume and low level of competition although other considerations, such as locality or industry, may lead to the selection of more specific terms with lower volumes.

The primary key-phrase identified by the client for Pregnancy Preparation was ‘pregnancy yoga derby’, which she felt was the most likely combination of keywords her potential customers would use. Currently her site is listed at the bottom of page 2 on Google for this query and is preceded by many of her competitors as well as many less specific results.

keyword search results for pregnancy preparation

Keyword search results for Pregnancy Preparation

Keyword Density

As search engine algorithms have become for sophisticated, the volume of keywords in page content has become less of a factor in page ranking. However, it is still important to consider keywords when writing content to ensure that it will be seen as relevant to the website and will match the other contextual indicators used in categorising your website. The optimal keyword density is 4-5%, any more than this could be considered keyword stuffing and result in a penalty. There are various online tools that can help identify the prevalence of keywords across a website, for example the SEO Book Keyword Density Analyzer. This crawls your site and ranks keywords and phrases by percentage, giving an insight into how well the content reflects the keyword strategy.

keyword density for pregnancy preparation

Keyword density for Pregnancy Preparation

This breakdown for Pregnancy Prepararation identifies ‘Class’ as the most common word. Whilst this may need to be addressed in terms of reducing occurrences of non-key words and phrases, many of the terms the client wishes to target are occurring naturally.

Page Title

The title tag is perhaps the most important element for telling people and search engines about the content of a page. It is commonly used by search engines as the heading for a search listing and is the first thing a user will read when scanning through a page of results. Page titles should:

  • Make use of primary and secondary keywords
  • Be between 8-10 words and 50-80 characters
  • Be unique to the page

The first word in the title should be a relevant primary keyword, followed by a secondary keyword or phrase that gives more specific information about the page contents. This will create a headline that is both informative and attractive to users and search engines, improving page rank and providing a match for the user’s search criteria. In the case of the yoga class website the following title was being used on every page:

<title>Pregnancy Preparation - Yoga-inspired exercise classes in the Derby area</title>

I changed this to prioritize the primary key phrase identified earlier, followed by a more detailed overview of the business making use of secondary keywords. I made the simple addition of the URL suffix for each of the subsequent files to identify the different pages and clarify the structure of the site:

<title>Pregnancy Yoga Derby | Yoga-inspired pregnancy preparation classes | About</title>

Meta Description Tag

The contents of the meta description tag is often used by search engines for the text that appears between listing titles and should be used as a way of presenting what is on offer to the user. Although descriptions are important for increasing click-through rates they are no longer a ranking factor, certainly for Google, and should be used as ad copy to match search terms and encourage interest. Description tags should:

  • Reinforce the title tag, providing more detailed information
  • Be between 25-30 words and 160-180 characters
  • Provide a strong call-to-action
  • Use primary keyword near the start and secondary keywords as appropriate
  • Be unique to the page

The existing meta tag on the Pregnancy Preparation homepage is passable, making use of some important keywords and clearly describing the nature of the content. However, there is no CTA and the same description has been used for every page.

<meta name="description" content="Pregnancy Preparation, organised by Berenice Sewell and Rebecca Cumming, provides bespoke Yoga-inspired exercise classes to pregnant women in the derby region" />

To improve this I have simply added the CTA for the homepage and then written variations for the other pages that are specific to each of their purposes:

<meta name="description" content="Pregnancy Preparation, organised by Berenice Sewell and Rebecca Cumming, provides bespoke yoga-inspired exercise classes to pregnant women in Derby. Call now to book your place." />

<meta name="description" content="Our Derby based pregnancy yoga courses take place at three locations in Mickleover and Little Eaton, come to the one that is most convenient for you." />


Headings should be used to give structure to the content and make it easier for users to find the information they are looking for. Whilst not as important for SEO purposes as the title tag, the h1 can still contain the primary keyword providing it can be worked in naturally and clearly describes the content. You should limit yourself to one top-level heading per page Subheadings (h2 and h3) can provide more specific information and should contain secondary keywords where possible.

<h1>Yoga-inspired gentle exercises, breathing and positions for birth. Relax, Stretch & Breathe</h1>

The original h1 for the homepage works well, clearly stating the nature of the business and managing to make sensible use of keywords. However, as with the title and meta description, it was duplicated on every page of the site. I have written unique top-level headings for each page that use relevant keywords to clarify the purpose of the content and encourage users to continue reading. For example, for the ‘benefits’ page:

<h1>How our yoga-inspired classes can help you and your baby</h1>

As the site doesn’t contain any large sections of copy, sub-headings (h2) have been used to label and divide content and as a result naturally contain relevant keywords.

Internal Links

Internal links should be used within copy to connect users to other relevant areas of the site as well as in the main navigation. They should be displayed using descriptive text and keywords where appropriate to make the destination explicit to the user. This can also help search engines by giving them an idea of the relevance of a destination in relation to the current page.

The first line of body copy on Pregnancy Preparation includes two of the locations of the yoga classes. Changing ‘Mickleover’ and ‘Little Eaton’ to links to their respective headings on the ‘courses’ page creates a short cut for users to key information whilst maintaining readability and keyword levels:

<p>Welcome to Berenice and Rebecca's website, we provide bespoke yoga-inspired exercise classes to expectant mothers with classes in Derby, <a href="courses/index.php#mick">Mickleover</a> and <a href="courses/index.php#little">Little Eaton</a>.</p>

External Links

As with internal links, external links should make use of keywords where appropriate and be descriptive about the destination. It is important to only link to reputable, authoritative websites that will not have a negative impact on your page rank. If an external source isn’t trusted, use the ‘nofollow’ attribute to prevent robots from making an association with the other website. It is also a good idea to regularly check the validity of links which may have been broken due to content being removed or changed on external sites. The W3C Link Checker is an online tool that checks all links on a domain and provides feedback about errors.


Images are an important aspect of SEO, with image searches providing an alternative path to your website. Images should:

  • have keyword rich file names, not ‘img1.jpg’
  • have keyword rich alt attributes
  • use hyphens instead of spaces (e.g. an-image.jpg)

It is important to not when writing an alt attribute that it primarily functions as a description of the image so only use keywords that will serve this purpose. There may also be instances when optimizing certain files, such as background or decorative images, wouldn’t be appropriate as they don’t necessarily relate to the content of the page.

The slider on the Pregnancy Preparation homepage contains four similar images that were previously marked up as:

<li><img src="images/yoga1.jpg" width="380" height="289" alt="1" /></li>

These have been changed to include more descriptive, keyword rich file names and alt attributes:

<li><img src="images/pregnancy-yoga-class-1.jpg" width="380" height="289" alt="expectant mums practicing pregnancy yoga 1" /></li>


Good quality, unique content is one of the most important factors in improving a website’s ranking. Search engines favour regularly updated content that is considered authoritative and is relevant to the subject of the website. As discussed earlier, it is important to use keywords in copy in context, considering readability and the usefulness of the information. It is advisable to include primary and secondary keywords in the first paragraph of each page as this may be used instead of the meta description when your site is displayed in a search query. There is also the option to highlight words or phrases within copy that are of particular significance as this will aid users in scanning the page to find what they are looking for. This should be used sparingly as overdoing it could ultimately reduce readability. For Pregnancy Preparation the client wanted two key terms that were unique to the business to be highlighted:

…run in an <span class="accent">Active Birth</span> format…
…the classes is <span class="accent">Topic Time</span>, where we…

Other Factors

In general it is helpful to write good quality, valid code as this makes it easier for robots to crawl a website and reduces the chance of errors that might prevent it from being indexed. All text that is visible on-screen should be present in the markup, even if images are being used to replace headings. In the case of the yoga site, the whole branding section was a single image with no actual text present in the code:

<img src="images/head.png" alt="main banner image" width="1055" height="225" />

This was simply replaced by appropriately marked-up text, providing a stable heading for the site and creating another legitimate opportunity to use keywords:

<p id="><a href="index.php">Yoga-inspired exercises for Pregnancy</a></p>
<p id="sub-heading">relax, stretch &amp; breathe</p>

Another problem that can prevent efficient listing of a website is canonicalization. As most browsers no longer require ‘www.’ in URLs it is possible that search engines can index two versions of the same website which may appear to be duplicated content and could have a negative effect on ranking. The same applies for websites with multiple top level domains (e.g. .com,, .net). To avoid this it is important to redirect all variations of the URL to a single address. This is achieved by writing a 301 redirect (indicating a permanent change to search engines) in the .htaccess file. For Pregnancy Preparation I rewrote non-www. to www. using:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.pregnancypreparation\$ [NC]
RewriteRule ^(.*)$$1 [L,R=301]

If you are using Google Webmaster Tools to manage a website it is possible to consolidate you URLs to ensure only one version of the site is indexed, however you will still need to upload a .htaccess file to setup the redirections. Other optional files include ‘sitemap.xml’ and ‘robots.txt’, both of which should be stored in the web-root. Sitemap.xml is a list of every page on the website with optional declarations for the frequency of updates and a relative score for importance. This file helps search engine bots to crawl your site and ensures that all of the pages are indexed. Robots.txt can be used to block certain robots and restrict access to particular pages. This can useful if there are files on the server that do not need to be indexed (e.g. include files). Even if you don’t need to limit access to robots it is still advisable to provide a robots.txt file as without it a 404 error will be logged every time the site is crawled.


.htaccess and other oddities

By | March 10, 2012


  • Hypertext Access File
    • Custom error pages
    • Password protection
    • Redirects form one file to another
    • Rewrite URLs
    • Prevent hotlinks
    • Used to override default server configuration settings
    • Originally used to create password protection
    • When using passwords, each protected folder has its own .htaccess file
    • Always use a custom 404 page to allow users to continue browsing more easily
    • Error Document 404 /error/404.html
  • Password Protection
    • Good for developing live sites
    • .htacces folder in the folder to be protected as well as .htpasswrd
    • Create custom 401 page
    • User name and password in .htpasswrd
    • username:password (MD5 encryption)
  • Redirection
    • 301 redirct shows search engine that a permanent change has been made
    • Redirects users to new page/folder
    • Redirect 301 (old path) (new path)
    • 302 for temporary moves
  • Rewriting URLs
    • For canonicalization (www. vs. non www.)
    • Rationalize top level domains ( to .com)
    • Rewrite generated URLs to SEO friendly ones
  • Prevent Hotlinking
    • If files are requested by another server, issue a failed request
    • Can be used to serve custom images/messages instead of requested file


  • Designed to help bots interpret your site
  • Similar to HTML syntax


  • Tells robots which pages/folders shouldn’t be indexed
  • Always use robots.txt to prevent unnecessary 404 errors


  • Always use .ico file type for full browser support
  • No need to link to the file if ‘favicon.ico’ is in the root


  • File permissions, default is 644 and 755 for folders
  • Only change permissions on files and folders when necessary for security reasons
    • 644 – all can read, only server can write
    • 666 – all can write
    • 777 – all can execute

Social Media

By | March 10, 2012

Online Communities

  • Communities of transaction
    • Improved marketing model
    • Users generate interest in products though reviews
  • Communities of interest
    • Connecting to people with simple interests
    • Support and feedback
    • Free content for websites
    • Networking for industry
  • Communities of fantasy
    • Anonymity
    • Escapism
  • Communities of relationship
    • Social networking
    • Dating sites
    • Meeting people and staying in touch

Facebook for Business

  • Facebook Connect, more relevant to users, highly targetted
  • Facebook Ads
    • Promotes your page
    • Like button increases influence
    • Analytics on ad performance

Successful Pages

  • Build a large fan base to receive updates
  • Provide unique/exclusive content
  • Regular updates, relevant not trivial
  • Quality information
  • Encourage people to share links to your page/site
  • At 25 links you can set a custom URL for your page

Twitter for Business

  • Limited in terms of post content
  • Better for targeting users outside of your current following
  • Twitter API to show feed on your website
  • Search widget shows tweets relating to a search term

Youtube for Business

  • Good for tutorials/guides – feature highly in Google search
  • Embed videos on your website

Revenue Streams

By | February 26, 2012


  • Is the success of your site measured by revenue generation?
  • Higher priced products pay more for advertising
  • Targeted ads are relevant to the context of your site
  • Pages should be designed with standard ad spaces accounted for
  • IAB sets voluntary guidelines for online advertising standards, including suggested file sizes
  • Inventory – available ad spaces on your site with placements for each template

Types of Advertising

  • None – eCommerce sites may wish to focus on their own products, may not be appropriate for public services websites
  • Values Added – contextual ads, visible yet discrete and mainly used for extra income
  • Ads as Main Income – contextual ads, highly visible but shouldn’t affect usability
  • Aggressive – pop-ups, pop-unders, overlays etc.

Advertising Networks

Advertising Pricing Models

  • CPM – cost per thousand (milli) impressions, varied by market forces and position on page
  • CPC – cost per click, varied by market forces
  • ECPM – effective cost per click, comparison between CPM and CPC (e.g. if a 20p ad is displayed 1000 times ECPM would be £2)
  • Tenancy – flat rate agreed between publisher and advertiser, not determined by impressions or clicks although these could be used as a guide
  • CPS – cost per sale, also known as revenue sharing (affiliate sales)

Ad Management Software

  • For larger websites, manages ad placement for multiple advertisers
  • Favours advertisers who are paying the most money

Affliate Schemes


  • Users pay for access to content on a yearly/monthly basis
  • Includes magazines, educational resources, web apps etc.
  • ‘Hard Pay Wall’ – no content is accessible without payment
  • ‘Soft Pay Wall’ – some content is available free without subscription


  • Initially providing product/service for free, with premium version being offered alongside
  • Encourages users to upgrade and pay for premium model and builds popularity
  • Free version should be useful on its own, not just a promotional tool
  • Expect between 2-5% of users to upgrade to premium version
  • Can be subsidised by advertising
  • Generally useful for digital products e.g. software, online services