SimonCox.com

Version 6.5

relax with a cup of green tea

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

 

by | 16 Jan 2012 |

comments powered by Disqus

Shorticles

Caulking a website article

I wrote a little something for 12 devs -day 7

Read more about Caulking a website article...


Thoughts on IE browser upgrades

Quick post about IE browser upgrades.

Read more about Thoughts on IE browser upgrades...


Password security

Read more about Password security...


England Argentina

Read more about England Argentina...


Uploading images outside of Perch CMS default resource directory

Moving images outside of Perch default folder - how I did it...

Read more about Uploading images outside of Perch CMS default resource directory...


Responsive Web Design break points

CSS first-child and IE

Aperture tidy up

EE custom log-in page

EEUK11 tweets from

EEcms tip - transfering site to a new server

Card handling fee?

EEcms tip - looping urls

End July image roll

Content strategies of pages with no content

ExpressionEngine Assets - changing images

When Google+ gets on ifthisthenthat

Big take away from Insites Tour Brighton

Ethan Marcotte’s Responsive Web Design

Actimel - excellent example of bad marketing practice

8 Faces Magazine

Preventing deep linking

Hyphens, dashes, endashes and emdashes v underscores

Main articles

Using a CDN to help migrate your sites hosting

Using a CDN to help migrate your sites hosting, without having that DNS propagation wait

Moving a site to new hosting can be fraught with issues. Here is one technique that I find useful when moving to a website to a new hosting server.

Read more about Using a CDN to help migrate your sites hosting...


Halle Marchandise en bois

Halle Marchandise en bois, French meter gauge goods shed

A plaster model kit of a classic French wooden goods shed.

Read more about Halle Marchandise en bois...


Small Run Batch Deutz OO9 kit - part 2

Small Run Batch Deutz OO9 kit - part 2, Body work for the SRB001 Freelance DEUTZ Style 0-4-0DM

Completion of the SRB001 Freelance DEUTZ Style 0-4-0DM chassis including the running gear and motor withthe body work following.

Read more about Small Run Batch Deutz OO9 kit - part 2...


Small Run Batch Deutz OO9 kit

Small Run Batch Deutz OO9 kit, SRB001 Freelance DEUTZ Style 0-4-0DM

Stuart Brewer is a fellow GDNGRS member and is one of the most acomplished model makers I know - this is his first kit and my attempts at building it.

Read more about Small Run Batch Deutz OO9 kit...


Whitesands Quay first outing

Whitesands Quay first outing, Work in progress gets out the house

Whitesands Quay first outing gets it out of the house and sets some deadlines for me to work to.

Read more about Whitesands Quay first outing...