Everything Else...  Comments Off on GuitarSpec
Sep 192012

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

 Everything Else...  Comments Off on Ampersand 2012
Jun 172012

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

.htaccess and other oddities

 Everything Else...  Comments Off on .htaccess and other oddities
Mar 102012


  • 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

 Everything Else...  Comments Off on Social Media
Mar 102012

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

 Everything Else...  Comments Off on Revenue Streams
Feb 262012


  • 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

Analytics and Competitor Research

 Everything Else...  Comments Off on Analytics and Competitor Research
Feb 162012

Google Analytics


  • Monitoring traffic and usage of your website
  • Which browsers are being used?
  • How did they find you?
  • Which pages are being viewed most?
  • How long users are spending on each page and the whole site

Other Features

  • Real-time to monthly reports
  • Keyword usage
  • Search box analysis
  • Filters to create custom reports
  • Site overlay report


  • Link with adwords
  • Set up monetary goals
  • Shows which ad placements provide the best outcomes
  • Campaign reports and e-mail alerts


  • Track sales by setting conversion goals
  • Times between initial visit and transaction
  • Cart abandonment analysis

Similar Services

Google Webmaster Tools

  • Gives tips on how to improve your site
  • Reports on your search engine performance
  • On-page SEO reports, which keywords from your site are most significant
  • E-mail alerts for malware
  • Highlights crawl errors (file not found etc.)
  • Displays warnings about meta description and title tags for each page
  • Option to upload an xml site map to ensure full site indexing
  • Exclude certain sub-links from appearing beneath Google results
  • Lower robot revisit rate, may be necessary in case of limited server performance

Split Testing

  • Google Webmaster Optimizer
  • Also called A/B testing
  • Shows 50% of users one version of a page whilst the other 50% see an alternative
  • Follows users to track conversion rates from each design variant
  • Process of refinement by discarding poorer designs and trying many different alterations
  • Multi-varient testing allows simultaneous combinations of elements and layouts to be analysed at the same time

Competitor Research

  • Use Google Keyword Tool to identify keyword strategies of competitors
  • Website grading tools e.g. Hubspot provide marketing reports (on-site and off-site SEO)
  • Heuristic evaluation (evaluating UI with regards to usability standards)


  • Free or premium service for site analysis and competitor research/comparison
  • Includes open site explorer
  • Competitive link finder, finds important inbound links on competitor sites

Google Alerts

  • Get e-mail alerts bout where your site is being to and who’s writing about it
  • Can also be used to follow web presence of competitor sites


 Everything Else...  Comments Off on eCommerce
Feb 112012
  • b-c – business to customer
  • b-b – business to business (extranets)
  • b-e – business to employee (intranets)

Types of eCommerce

  • Goods for delivery (amazon etc.)
  • Downloads (music, films, software)
  • Online banking
  • Services (web hosting, mail services etc.)

Conversion Rates

  • The percentage of users achieving the goal of the site
  • Opposite factor to bounce rate
  • Average is 2.3%, highest being ~9%
  • Can be improved by
    • quality content, targeted to user
    • trust and credibility
    • goal oriented design
    • A/B testing
    • User reviews/testimonials
    • usable/accessible design

eCommerce Content Management Systems

Other Solutions

  • eBay
    • Good marketing tool and point of sale
    • Wide reaching
    • High cost of selling
  • E-Junkie
    • ‘Buy now’ button cart service
    • Good for low volume sales
  • Affiliates
    • Selling your products on other websites
    • Referred sales via banner ads
    • Host site take a cut of the sale, usually ~10%
    • Good for SEO, inbound links
  • Voucher codes and price comparison sites

Cart Abandonment

  • Consider removing navigation/promotional elements from checkout pages
  • No hidden fees during checkout, be upfront with price
  • Don’t force membership, offer one-off purchase
  • Don’t ask for too much personal information
  • Build trust, show payment gateway logo and phone number
  • Progress indicator to show the length of the process
  • Postcode look-up, speeds up data entry
  • User friendly form submission, micro-copy describing field requirements, client side verification via jQuery
  • Offer separate billing/delivery addresses but don’t make users type them twice
  • Keep cart session alive for as long as possible
  • Gentle cross selling can be good but don’t overdo it
  • Provide a link back to the product, e.g. via thumbnail
  • Make it easy to edit the cart throughout

Payment gateways

  • Security and authentication are handled by the company
  • Customers are protected if transaction falls through
  • CMS will support connection to payment gateway
  • WorldPay, Sage Pay and Pay Point all require an internet merchant account where 10% is held back for six months
  • Typical fees 3-5% depending on volume

Web Marketing and SEO

 Everything Else...  Comments Off on Web Marketing and SEO
Feb 022012

Keyword Research and Web Copy Writing

  • Delicious – social bookmarking for keyword research
  • Start with primary keywords and make combinations based on them
  • Focus on niche terms specific to your market or industry
  • Wordtracker – online tool for developing keywords
  • 5-7% keyword density

Web Marketing and Sponsored Links


  • Pay per click advertising
  • Based on keywords
  • Targets specific users who are most likely to convert


  • Decided by how much money has been paid
  • Relevance to search terms
  • Good for small companies, no minimum spend
  • Set a daily spending limit
  • Choose how much you want to pay per click
  • Targets users based on keywords
  • Consider conversion rates and projected ROI

Keyword Research

  • Google Keywords Tool – shows data relating to keywords
  • Type root words into Google and and check auto-complete for suggestions
  • Target long tail search terms to begin with – less traffic but higher page rank
  • Keyword meta tag no longer used by major search engines
  • URLs should reflect website structure to aid search engine indexing

Off Site SEO

  • Inbound links are the most influential to search engine performance
  • Links from authoritative sites, related to your industry are best
  • One way, unprompted and unpaid links are considered the most important
  • Share buttons can encourage people to link to your site
  • Good content, incentives e.g. free downloads
  • Link exchange – swapping links with other related sites
  • Related advertising, from companies related to your industry, not competitors
  • Social media links/shares are increasingly important
  • Link directories e.g. Yahoo provide site reviews and listings that are trusted by search engines
  • Free directories are free-for-all and probably don’t help SEO
  • Niche directories are good for specific industry listings
  • Influencing anchor tag text for inbound links can help SEO e.g. providing html for share links

Google Places

  • good way to provide information about your business
  • Shows the physical location on Google Maps
  • Listed in search results

Article Marketing

  • Web masters write articles reviewing their sites with a link to the site
  • Increase page rank via inbound links and shared traffic
  • Self placed link, not as valuable

Guest Blogging

Press Releases

  • Services that send press releases to important blogs/publications/journalists
  • Links to the site

RSS Feeds

  • Updates are pushed to subscribers
  • Configure to show headline/links
  • Can be embedded into other websites

Viral Marketing

  • Creates widespread interest in a video or game instigated by the company
  • Creates a buzz around your brand
  • Can be seen by large volumes of people

E-mail Marketing

  • Don’t trick users into signing up – make it opt-in
  • Make newsletter content useful
  • Make it clear what users will get
  • Don’t buy e-mail addresses
  • Provide a web version of the e-mail
  • Must be designed using tables
  • Don’t rely on images as they may be removed
  • Test in different e-mail clients

Typography Example

 Everything Else...  Comments Off on Typography Example
Feb 012012
urbanoff homepage

Urbanoff Homepage

Good Points

  • Strong use of type as a graphic element for branding
  • Variation in weights and styles creates visual interest and distinction between elements
  • Use of drop-cap in introductory text draws attention and works well with serif font
  • Engraved appearance of header font and use of drop shadows create visual depth

Bad Points

  • Some poor contrast (blue on blue)
  • Banner image has no text to support accessibility
  • Perhaps used too many fonts instead of adapting a couple for different purposes

Content Strategy

 Everything Else...  Comments Off on Content Strategy
Jan 302012


  • Useful, enabling user to reach their goal
  • Unique, meaning that users have to visit your site to access it
  • Authoritative, written by and attributed to a credible source
  • Influences SEO, good content is favoured by search engines and attracts incoming links and social media

Content Planning

  • Should be updated regularly
  • Plan a schedule for adding new content
  • Out of date content can cause loss of page rank
  • Blogs are an easy way of generating new content

User Generated Content

  • Content that is produced by the users of a website
  • Allows people to publish and share information related to a particular subject
  • Oysters – paid contributors creating positive reviews to promote brands

Style and Tonality

  • Use of aesthetic elements
  • Consistent writing style
  • Meaning is generated through the type of content
  • Bringing elements together to make a distinguishable whole
  • Media Equation – People tend to treat media, such as computers, as real people and places
  • Style Guide – A collection of all stylistic elements (e.g. tone of voice, images, branding and layouts) that go together to make the visual style of a website or brand

Writing for the Web

  • Users are known to scan read webpages, rarely reading word for word
  • Using headlines helps people to scan and attracts attention
  • Find your audience and write for them
  • Use newspaper type structure: lead » 2nd most important » 3rd most…