The devil is in the detail — the 404 error page

The devil is in the detail refers to an idiom to a catch or find a mysterious element hidden in the details. For me, this detail is the crafting of a website that goes beyond just its design.

When building a website for someone, it’s vital to get various things just right — from what technology you use to and how and where these technologies are stored. These bits are often not seen by the public, but in my opinion, it’s just as important to keep it orderly, up-to-date and maintained to ensure a website doesn’t stop working. Ultimately a website can look beautiful but if it’s not working then there’s little point in the beauty.

In the rare cases when a site does stop working, for instance, if a link has gone missing or a page moved,  I like to add a custom 404 Error page.

Incidentally, a 404 error (HTTP 404) relates to a code number used when the Hypertext Transfer Protocol or HTTP was developed back in 1989, and simply means a missing file.

I’ve collected together a few of the custom error pages I’ve created in the last few years, for a web designer, it’s a bit of fun. Yes, I don’t get out a lot.






Nomenclature of a URL

I was asked recently for some advice on how to migrate a domain. A migration is effectively taking all the files that display your website and moving them from one place to another. Often the reason for doing this is to move hosting providers or a transition from a development to a live phase (publishing to give it the traditional term).

In this conversation, I was explaining the nomenclature of a URL — the different parts of the website address and what they mean or do and I thought it would be useful for other people to attempt to explain it here in case you’re looking at migrating a website. So here goes.


The protocol is the first part of the address and defines whether your site is secure or not. http and https can both be used, however search engines such as Google will often penalise websites that don’t use the https protocol and so deny you the little padlock that appears in the browser. The worst-case scenario is that some visitors could get an unsafe message in their browser. The colon and two forward slashes are both parts of the protocol.


The hostname is a part of the address that proceeds your domain name and is not mandatory in the browser. This means with some websites you won’t see the www bit of the address. In the early life of the internet, it was essential to tell the computer and related network what type of host you were trying to access. Now a web server, which is what this particular hostname specifies, is more common.


A domain name is the part of the address that is obviously the bit you can customise and is unique to your product, brand or organisation. No two domains (provided they use the same top-level domain) can be the same. This means it is getting harder to find domains that haven’t already been registered. According to the latest figure from last year, there are 360 million registered domains worldwide.

Top-level domain or TLD

Also known as domain extensions they are used to help define the location of a website. For instance .com historically was associated with websites registered in the US. It’s much less relevant now considering there are over 1,500 domain name extensions and you can register what you like from wherever. Essentially domain registrars are running out of unique domain names to sell, hence adding more domain extension options.


The directory is a tricky one, essentially this part of the address by definition could be a directory, folder, category, tag, slug or many other things. It depends on the technology you are using to create your website as to what this might be.


The file is a bit easier as it is the only part of the address that does the exciting bit for web designers — displaying the lovingly crafted website that we spend hours building.


Finally, and again not a mandatory part of the address is the file extension. Modern browsers are much cleverer at working out what to load for themselves so you won’t always see this in the address. If it is there it’s often a clue to the type of technology used to build the site. I’ve written an article called What should I use to build a website? that helps define some of these.

So next time you visit a website, once the page has loaded, look at the address or click in the bar, and see if you have some of these parts. Hopefully, you’ll understand a little more about what they do.


What should I use to build a website?

I get asked this question from time-to-time, most recently by a student studying games development. Before that, it’s been from students at Bedford College, where I’ve been lecturing in graphic design and animation.

From time-to-time, I’ve run short courses on the practical side, mainly Photoshop and After Effects as an introduction to help students showcase their work. For design students, it’s essential to be able to present and promote their work and begin to develop their own unique self-brand. Australian Graphic designer, Christopher Doyle took this to the next level with his Personal Identity Guidelines project.

Ultimately the majority of the students will get full-time jobs, but before that happens there are degrees shows, they will meet potential clients or employers and then there is the pressure to become part of the established design industry. All these people need impressing and that is usually with a website. I will admit, with degrees shows it’s all about print — standing out from the crowd in a unique and clever way.

I digress, the point of my courses was to give students the practical knowledge to help them build an online portfolio. Before they even start to design anything though it’s essential to know what choices you have to do that building.

Here is my quick ready reckoner that I produced which covers the basics types of systems, the complexity and rough cost. This is by no means an exhaustive list but it helps define what is possible for a budget and skill level.

Type Platform Complexity Domain Hosting Annual cost*
Manual Code Difficult × × From £20
Software Dreamweaver Difficult × × £250
Adobe XD Medium × × £120
Online builder Wix Easy × £36
SquareSpace Easy × £120
Cargo Collective Easy × £65 Easy £36
System (CMS)
Drupal Difficult × × From £20
Joomla Medium × × From £20 Easy × × From £20

Personally, if you’re interested, I build using Due to my need to control every aspect of the development of a website. I’ve opted for this service as gives me ultimate control. It’s also really easy to use and this website and blog post have been created using the system.

*Annual cost is based on a basic subscription (for software) or service (hosting), which often has advertising you cannot control or disable. I would urge caution with this as advertising is often displayed from providers or in places that may conflict with your design, views or morals.

−− −−− ·−· ··· · −·−· −−− −·· ·

This week was half term and although I was working a few days I did take the day out to spend time with the family. We visited Milton Keynes Museum, a first for me and amazed by how hands-on the displays are. I especially enjoyed the section with all things related to telephony and spotted a hand out that explained Morse Code. Although it looked good I couldn’t resist making some tweaks when I got home so that the dots and dashes read in a more logical order.

PS — the post title spells out the words Morse Code.

morse code

What are the dimensions of a website?

website width

A fellow graphic designer recently asked for some advice. They wanted to know what width to design a website to then be handed to the developer to build from.

I replied with the simple answer that it’s a popularity contest, based on some technical information. So here goes my answer.

Essentially there are two types of websites — fixed width and stretched/full width (the later is often confused with responsive websites). Responsive essentially refers to the change of appearance of a website as it appears to respond differently depending on the device used.

Fixed width websites are just that — the developer has set default values for the width in pixels based on the visual. GOV.UK for instance uses a fixed width of 960 pixels for the main content.

Stretched or full width are sites that fill the browser width regardless of how you adjust your window, hence why sometimes people use the term responsive. You are simply seeing the responsive effect live as you change the browser window shape.

So based on these types what are the dimensions of a website?

There are millions of websites and there are hundreds of devices, screens and platforms. So ultimately its about which sizes are most popular.

To demonstrate this popularity using data from two million websites collect by StatCounter gives us the following winners.

Screen width
Maximum screen
height (Pixels)
Desktop market share.
Dec 2018 to Dec 2019
1366 768



























































Other Other



What better way to celebrate my lifelong love and affinity with typography than dedicating an entire year posting samples of my favourite fonts each Monday morning on Twitter.

I’ve always been interested in letterforms and sketches of experimental characters appear in my sketchbooks from a young age. It was’t until university that I was given the ability to express, discover and expand my knowledge with the help of my course tutor, Phil Gray — a truly dedicated follower of lettering. This dedication is clearly proven by his online cataloguing of found letterforms, currently sitting at 4,845 images on

Brutalist type

In the last few years I’ve been using various brutalist typefaces more and more in website development. Brutalist fonts are sans serif only (not twiddly ends), usually very simple geometric forms and, in my own exclusive opinion, the letter a must, I mean must, have no terminal (the bit that curls round over the top of the letter).

A slight caveat though — there’s no definitive opinion of what brutalist typefaces should be. Typeface resource icon, Jeremiah Shoaf of typewolf, can’t decide either.

TypeYear in a leap year

After defining what I loved about brutalist typefaces I started to catalogue my favourites. The most recent example is used here on my own website. The simple and beautiful Sofia Pro, designed by French typographer Olivier Gourmet in 2009 and distributed via his foundry Mostardesign.

I decided what’s the point of my catalogue if it’s not shared so that other type-nerds can enjoy it too?

With any typography sample though, you need a good sentence. I’ve always hated type samples that use a, b, c, d, e and so on, as this does’t demonstrate the typefaces characters in context. I much prefer using a piece of writing that elegantly uses sentences so you get a true feel of how the typefaces characters interact with each other.

The Chaos of English Pronunciation

For TypeYear I’ve picked a piece of work by the Dutch linguist, Gerard Nolst Trenité. In 1922 Trenité published The Chaos of English Pronunciation. A poem that contains about 800 of the most notorious irregularities of the English language and skilfully written with alternating feminine and masculine rhymes. Perfect for 53 weeks of samples. I hope you enjoy.

Top WordPress plugins

Both you and I have read a ton of blogs about the top five WordPress plugins, the ten best WordPress themes for your website and the mind-boggling 100 Best WordPress plugins as recommended by 1stdesigner? Personally, I stopped reading after 20 plugins.

I’ll make this simpler. I’ve been building websites since 1998 — with various legacy, dead and buried systems and software and a few that survive. Xara, Adobe’s PageMill 2.0, Dreamweaver, Microsoft’s FrontPage and shamefully QuarkXpress. In the last ten year’s I’ve been using WordPress and in that time have experimented with a wide variety of plugins and have slowly found my perfect five. Incidentally, these are all free plugins.

iThemes Security

An essential plugin that protects your WordPress install from hackers, spammers and pranksters. Used on over 900,000 sites and updated on a regular basis by the plugin developers, it protects my sites on a daily basis and occasionally when I’m bored I’ll have a read of the logs it generates to see how well it’s performing.

Simple CSS

It’s simple, and it’s for CSS. What else can I say? It’s light-weight plugin that is very stable and makes customising any website effortless. The plugin interface is white on black and with colour-coded classes and id’s you can easily spot if you’ve mistyped some styles. 90,000 people can’t be wrong.


It’s a good idea to backup your websites on a weekly basis and this plugin will make that process easy. All the processes can be automated — from what is backed-up, to where and how often. Setup takes five minutes and then just leave it to do its thing. Plus the default back-up time at 4am in the morning when I’m in bed means server load is minimised. 600,000 installs — that’s a lot of time saved, by a lot of people.


We all love Yoast. No one else can do Search Engine Optimisation better and although the interface keeps changing, new features are added or removed. Bye bye Google+, it’s reassuring to know that I don’t have to keep an eye on changes in SEO. Don’t be tempted by cheap knock-offs.

WP Fastest Cache

I’ve tried too many caching plugins over the years. Most of them break your site eventually by storing files in the wrong places or causing a higher-server load. I finally settled on this one. Don’t be put off by the plugin icon. It’s a lightweight plugin that will speed up your site instantly. All the features are listed in one place and easy to understand. What is deflating anyway? A million people can’t be wrong.

Told you it was short and simple. Good luck.



A thing used for tying or binding something tightly

Well that’s what the dictionary defines as a ligature. I know the term for a very different use and if you’ve never heard of the term before, to a type designer they are a key part of building a typeface.

When certain letters are sat next to each other they can often sit uncomfortably and overlap or merge in the wrong place. Especially with serif typefaces. A really good example of this is the f and i together, where the hook of the f clashes with the of the i, just like this:

fi ffi

Luckily type designers who respect their art create specifically designed characters for these letter pairings and those are ligatures.

Not all graphic or web designers use them and some design programmes don’t give you the option to allow the use of ligatures. Luckily the Adobe suite does.

Since 2012, after decided to go back into web designer after a break of ten years, everything with code had changed and ligatures could now be used within most browsers and with any typeface where the typographer has created them. So i’ve been using this in all my builds since then with some very elegant results.

 -moz-font-feature-settings:"liga=1, dlig=1"; 
 -moz-font-feature-settings:"liga", "dlig";
 -ms-font-feature-settings:"liga", "dlig"; 
 -o-font-feature-settings:"liga", "dlig"; 
 -webkit-font-feature-settings:"liga", "dlig"; 
 font-feature-settings:"liga", "dlig";