Shorticals

Responsive Web Design break points

MrQwest has been having a think about breakpoints in responsive web designand rightly points out that the break points should be set to the layout.

The initial thoughts about break points were to set them between three distinct devices - smart phone, tablet and desktop and that currently sums up our screen use but with more devices approaching market those boundaries are becoming very vague. In principle it’s not a bad starting point but you can do better. Traditionally layouts for print were laid out according to the size of sheet you would be printing on - which is pretty much the same as web design up till 2010. But I believe there is something we can use from print to help us decide the breakpoints in web layouts.

Line lengths on the old days (1990s) were generally set at 80 characters. Good reason for this - the eye scans a line of text then goes diagonally back to the next line down. If the line length is too long you loose the beginning of the next line and have to search for it thus interrupting your rhythm and the flow. Newspaper columns turned this into an art form with thin columns and justified text. The wider the column the more you need to open the leading (Showing my age and background here) - open the line height. This helps the flow and of course a lot depends on the typefaces used. Fractional width fonts flow much better than monospaced fonts which also make for better flow and easier reading.

This means you layout grid could be set to a maximum measure of 80 character widths and contract down to the small screen size minimum - and yes here is where you would use a defined pixel width currently 360px screens ok (until we get smart watches with browsers…)

Recently I changed the typeface of my headings to a slab face which is striking but that made the headings longer. One particular heading has a 16 letter word in it and with the new slab face it over runs the column measure. I could break the word by hyphenating it but it would be a faux pas as the word, a name, is often spelt as incorrectly as two words - and I use it a lot. I am still thinking about this one a I write.

So what is an 80 Character width? In monospaced fonts this is easier to work out than with fractional width fonts which depends more on the typeface used. Therefore I will use Courier New, a well distributed and standardised monospaced font to work out some column widths. These only need to be approximate as we would set the column widths in ems and the typeface will therefore determine the layout size. 80 characters at 12pt is 574px wide and my recommendation is that no column goes wider than that for large bodies of type. You should judge it by eye though as choice of typeface is paramount in this decision.

I will do some experiments and put together an article on this thought soon.

UPDATE - 25th Jan 2012

Following MrQwests comment I did a bit more research and found that Samuel Morse (1791-1872) did some calculations for the frequency of letters in the English language so that he could assign the most used to the shortest codes in his Morse code. Brilliantly he took a great short cut and counted the letters in sets of printers type! Great short cut but ultimatly flawed - suppose some were being used or were missing.

Here they are:

E	12,000

T	9,000

A, I, N, O, S	8,000

H	6,400

R	6,200

D	4,400

L	4,000

U	3,400

C, M	3,000

F	2,500

W, Y	2,000

G, P	1,700

B	1,600

V	1,200

K	800

Q	500

J, X	400

Z	200

However a better set of numbers has been produced by the Oxford Dictionary for the frequency of letters in English vocabulary. They did an analysis of the letters occurring in the words listed in the main entries of the Concise Oxford Dictionary (11th edition revised, 2004):

E	11.16%	56.88

A	8.50%	43.31

R	7.58%	38.64

I	7.54%	38.45

O	7.16%	36.51

T	6.95%	35.43

N	6.65%	33.92

S	5.74%	29.23

L	5.49%	27.98

C	4.54%	23.13

U	3.63%	18.51

D	3.38%	17.25

P	3.17%	16.14

M	3.01%	15.36

H	3.00%	15.31

G	2.47%	12.59

B	2.07%	10.56

F	1.81%	9.24

Y	1.78%	9.06

W	1.29%	6.57

K	1.10%	5.61

V	1.01%	5.13

X	0.29%	1.48

Z	0.27%	1.39

J	0.20%	1

Q	0.20%	-1

So rounding the % down we get the following string to make our measure:
EEEEEEEEEEEAAAAAAAARRRRRRRRIIIIIIIIOOOOOOOTTTTTTTNNNNNNNSSSSSSLLLLLCCCCCUUUUDDDPPPMMMHHHGGBBFFYYWKVX
Thats gives us 100 letters - and in lower case
eeeeeeeeeeeaaaaaaaarrrrrrrriiiiiiiioooooootttttttnnnnnnnsssssslllllcccccuuuudddpppmmmhhhggbbffyywkvx

So for our readable measure of 80 characters we can use this string:
eeeeeeeeeeeaaaaaaaarrrrrrrriiiiiiiioooooootttttttnnnnnnnsssssslllllcccccuuuudddp