What are the dimensions of a website?

/in /by

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
(Pixels)		 Maximum screen
height (Pixels)		 Desktop market share.
Dec 2018 to Dec 2019
(Percentage)
1366 768

24.19
1920

1080

19.89
1440

900

6.83
1536

864

6.09
1600

900

4.86
1280

800

3.66
1280

720

3.59
1280

1024

3.41
1024

768

3.34
1680

1050

2.53
360

640

2.05
2560

1440

1.9
1360

768

1.6
1920

1200

1.15
800

600

0.67
360

720

0.52
2048

1152

0.43
360

780

0.43
320

570

0.4
1093

615

0.35
Other Other

12.11

TypeYear

/in /by

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 www.thevisualdictionary.net

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

/in /by

We’ve all read a ton of blogs with eye-catching titles like the top fifty 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.

Essentially these plugins cover all the key areas needed when building a website — security, customisation, protection, optimisation and speed.

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.

BackWpUp

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.

Yoast

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

/in /by

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";