Hilary Murfin

Artist and textile designer, Hilary Murfin needed a new website to showcase a series of new work for an upcoming exhibition. A simple, interactive and easy to use site was needed with big bold typography.

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

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
(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