Standard	Width		Height	DAR	DAR	Pixels
QQVGA (portrait mode)	120	×	160	3:4	0.750	19,200
Apple II HiRes (6 color) and Apple IIe Double HiRes (16 color), grouping subpixels	140	×	192	35:48	0.729	26,880
QQVGA	160	×	120	4:3	1.333	19,200
Nintendo Game Boy, Game Boy Color	160	×	144	10:9	1.111	23,040
Palm (PDA) LoRES	160	×	160	1:1	1.0	25,600
VIC-II multicolor, IBM PCjr 16-color	160	×	200	4:5	0.8	32,000
HQVGA (portrait mode)	160	×	240	2:3	0.667	38,400
Acorn BBC 20 column modes	160	×	256	5:8	0.625	40,960
Nokia Series 60 smartphones (Nokia 7650, plus First and Second Edition models only)	176	×	208	11:13	0.846	36,608
Older Java MIDP devices like Sony Ericsson K600.	176	×	220	4:5	0.8	38,720
Nokia 5500 Sport	208	×	208	1:1	1.0	43,264
UIQ 2.x based smartphones	208	×	320	13:20	0.65	66,560
HQVGA, Nintendo Game Boy Advance	240	×	160	3:2	1.5	38,400
QVGA (portrait mode)	240	×	320	3:4	0.75	76,800
Apple iPod Nano 5G (portrait mode)	240	x	376	0.64:1	0.64	120,320
HVGA (portrait mode)	240	×	640	3:8	0.375	153,600
TMS9918 Modes 1 (e.g. TI-99/4a) and 2, ZX Spectrum, MSX, Nintendo DS (each screen)	256	×	192	4:3	1.333	49,152
Elektronika BK	256	×	256	1:1	1.0	65,536
Apple II HiRes (1 bit per pixel)	280	×	192	35:24	1.458	53,760
Atari 400/800	320	×	192	5:3	1.667	61,440
CGA 4-color, Atari ST 16 color, Commodore 64 VIC-II Hires, Amiga OCS NTSC Lowres, Apple IIGS LoRes, MCGA	320	×	200	8:5	1.6	64,000
QVGA	320	×	240	4:3	1.333	76,800
Acorn BBC 40 column modes, Amiga OCS PAL Lowres	320	×	256	5:4	1.25	81,920
Palm (PDA) HiRES	320	×	320	1:1	1.0	102,400
HVGA (portrait), Palm (PDA) HiRES+	320	×	480	2:3	0.667	153,600
Nokia Series 60 smartphones (E60, E70, N80, N90)	352	×	416	11:13	0.846	146,432
WQVGA (common on Windows Mobile 6 handsets)	400	×	240	5:3	1.667	96,000
Quarter SVGA (no official name, selectable in some PC shooters)	400	×	300	4:3	1.333	120,000
WQVGA	432	×	240	9:5	1.8	103,680
Sony PlayStation Portable, Zune HD	480	×	272	30:17	1.765	130,560
HVGA, Apple iPhone	480	×	320	3:2	1.5	153,600
Elektronika BK	512	×	256	2:1	2.0	131,072
Black & white Macintosh (9″)	512	×	342	3:2	1.5	175,104
Macintosh LC (12″)/Color Classic (also selectable in many PC shooters)	512	×	384	4:3	1.333	196,608
Apple IIe Double Hires (1 bit per pixel)	560	×	192	35:12	2.917	107,520
(unnamed)	600	×	480	5:4	1.25	288,000
Atari ST 4 color, CGA mono, Amiga OCS NTSC Hires, Apple IIGS HiRes, Nokia Series 80 smartphones	640	×	200	16:5	3.2	128,000
HVGA, Handheld PC	640	×	240	8:3	2.667	153,600
Acorn BBC 80 column modes, Amiga OCS PAL Hires	640	×	256	5:2	2.5	163,840
Nokia Series 90 smartphones (7700, 7710)	640	×	320	2:1	2.0	204,800
EGA	640	×	350	64:35	1.829	224,000
nHD [2]	640	×	360	16:9	1.778	230,400
Atari ST mono, Amiga OCS NTSC Hires interlaced	640	×	400	8:5	1.6	256,000
VGA, MCGA (in monochome), Sun-1 color	640	×	480	4:3	1.333	307,200
Amiga OCS PAL Hires interlaced	640	×	512	5:4	1.25	327,680
HGC	720	×	348	60:29	2.069	250,560
MDA	720	×	350	72:35	2.057	252,000
Apple Lisa	720	×	364	180:91	1.978	262,080
WVGA	768	×	480	16:10	1.6	368,640
Nokia E90 Communicator	800	×	352	25:11	2.273	281,600
WGA or WVGA, HTC Touch HD, HTC Touch Diamond 2, ASUS Eee PC 700 and 701 series	800	×	480	5:3	1.667	384,000
SVGA	800	×	600	4:3	1.333	480,000
Apple Macintosh Half Megapixel[3]	832	×	624	4:3	1.333	519,168
WVGA	856	×	480	~16:9	1.783	410,880
QHD[4], Quarter FHD (AACS ICT)	960	×	540	16:9	1.778	518,400
(unnamed, selectable in some first/third-person shooters)	960	×	720	4:3	1.333	691,200
WSVGA	1024	×	576	16:9	1.778	589,824
ASUS Eee PC 900, 901, 1000 series, MSI Wind and the HP 2133	1024	×	600	128:75	1.707	614,400
(unnamed)	1024	×	640	16:10	1.6	655,360
XGA	1024	×	768	4:3	1.333	786,432
Sun-1 monochrome	1024	×	800	32:25	1.28	819,200
Network Computing Devices	1024	×	1024	1:1	1.0	1,048,576
NeXT MegaPixel Display	1120	×	832	35:26	1.346	931,840
(unnamed)	1152	×	720	16:10	1.6	829,440
Apple PowerBook G4 (original Titanium version)	1152	×	768	3:2	1.5	884,736
XGA+[5]	1152	×	864	4:3	1.333	995,328
Sun-2 Prime Monochrome or Color Video, also common in Sun-3 and Sun-4 workstations	1152	×	900	32:25	1.28	1,036,800
WXGA, min.	1280	×	720	16:9	1.778	921,600
WXGA, avg., BrightView	1280	×	768	5:3	1.667	983,040
WXGA, avg.	1280	×	800	16:10	1.6	1,024,000
Apple PowerBook G4	1280	×	854	~3:2	1.499	1,093,120
SXGA-	1280	×	960	4:3	1.333	1,228,800
SXGA	1280	×	1024	5:4	1.25	1,310,720
WXGA, max. (standardized HDTV 720p/1080i displays)	1366	×	768	~16:9	1.779	1,049,088
SXGA+	1400	×	1050	4:3	1.333	1,470,000
WXGA+	1440	×	900	16:10	1.6	1,296,000
Apple PowerBook G4	1440	×	960	3:2	1.5	1,382,400
(unnamed)	1440	×	1024	45:32	1.406	1,474,560
(unnamed)	1440	×	1080	4:3	1.333	1,555,200
Sony VAIO P series	1600	×	768	25:12	2.083	1,228,800
900p	1600	×	900	16:9	1.778	1,440,000
WSXGA	1600	×	1024	25:16	1.5625	1,638,400
UXGA	1600	×	1200	4:3	1.333	1,920,000
WSXGA+	1680	×	1050	16:10	1.6	1,764,000
(unnamed; supported by some GPUs, monitors, and games)	1792	×	1344	4:3	1.333	2,408,448
(unnamed; supported by some GPUs, monitors, and games)	1800	×	1440	5:4	1.25	2,592,000
(unnamed; supported by some GPUs, monitors, and games)	1856	×	1392	4:3	1.333	2,583,552
1080p	1920	×	1080	16:9	1.778	2,073,600
WUXGA	1920	×	1200	16:10	1.6	2,304,000
TXGA	1920	×	1400	48:35	1.371	2,688,000
(unnamed; supported by some GPUs, monitors, and games)	1920	×	1440	4:3	1.333	2,764,800
QWXGA	2048	×	1152	16:9	1.778	2,359,296
QXGA	2048	×	1536	4:3	1.333	3,145,728
(unnamed; maximum resolution of the Sony GDM-FW900 and Hewlett Packard A7217A)	2304	×	1440	16:10	1.6	3,317,760
WQHD (Dell UltraSharp U2711, Apple iMac)	2560	×	1440	16:9	1.778	3,686,400
WQXGA	2560	×	1600	16:10	1.6	4,096,000
(unnamed; the maximum 4:3 resolution of CRT displays. Supported by the Viewsonic P225f and some graphics cards)	2560	×	1920	4:3	1.333	4,915,200
QSXGA	2560	×	2048	5:4	1.25	5,242,880
QSXGA+	2800	×	2100	4:3	1.333	5,880,000
WQSXGA	3200	×	2048	25:16	1.5625	6,553,600
QUXGA	3200	×	2400	4:3	1.333	7,680,000
QFHD	3840	×	2160	16:9	1.778	8,294,400
WQUXGA	3840	×	2400	16:10	1.6	9,216,000
4K	4096	×	2304	16:9	1.778	9,437,184
HXGA	4096	×	3072	4:3	1.333	12,582,912
WHXGA	5120	×	3200	16:10	1.6	16,384,000
HSXGA	5120	×	4096	5:4	1.25	20,971,520
WHSXGA	6400	×	4096	25:16	1.5625	26,214,400
HUXGA	6400	×	4800	4:3	1.333	30,720,000
Super Hi-Vision	7680	×	4320	16:9	1.778	33,177,600
WHUXGA	7680	×	4800	16:10	1.6	36,864,000

Five common aspect ratios

from http://en.wikipedia.org/wiki/List_of_common_resolutions
]]> http://savonge.wordpress.com/2010/04/06/common-screen-sizes-and-proportions-2/feed/ 0 savonge ↓ ↓ ↓ ↓ ↓ 4:3 3:2 16:9 1.85:1 2.39:1 http://savonge.wordpress.com/2010/04/06/about-liquid-layouts/ http://savonge.wordpress.com/2010/04/06/about-liquid-layouts/#comments Tue, 06 Apr 2010 11:29:55 +0000 savonge http://savonge.wordpress.com/?p=199 ]]>

<body>
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</body>

#col1
{
	float: left;
	width: 48%;
	margin-left: 3%;
}

#col2
{
	float: left;
	width: 20%;
	margin-left: 3%; }

#col3
{
	float: left;
	width: 20%;
	margin-left: 3%;
}

<body>
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</body>

#col1
{
	float: left;
	width: 48%;
	margin-left: 3%;
	display: inline;
}

#col2
{
	float: left;
	width: 20%;
	margin-left: 3%;
}

#col3
{
	float: left;
	width: 20%;
	margin-left: 3%;
}

<body>
<div id="header"></div>
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div id="footer"></div>
</body>

#header
{
	margin-bottom: 10px;
}

#col1
{
	float: left;
	width: 48%;
	margin-left: 3%;
	display: inline;
}

#col2
{
	float: left;
	width: 20%;
	margin-left: 3%;
}

#col3
{
	float: left;
	width: 20%;
	margin-left: 3%;
}

#footer
{
	clear: both;
}

h2, p
{
	margin-left: 7px;
	margin-right: 7px;
}

#col1 h2, #col1 p
{
	margin-left: 7px;
	margin-right: 7px;
}

from  http://www.maxdesign.com.au/articles/liquid/

The notion of canons, or laws of form, of book page construction was popularized by Jan Tschichold in the mid to late twentieth century, based on the work of J. A. van de Graaf, Raúl M. Rosarivo, Hans Kayser, and others.[1] Tschichold wrote:Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life and applied.[2] Kayser’s 1946 Ein harmonikaler Teilungskanon[3] had earlier used the term canon in this context.

Typographers and book designers apply these principles to this day, with variations related to the availability of standardizedpaper sizes, and the diverse types of commercially printed books.

The Van de Graaf canon

The Van de Graaf canon is a historical reconstruction of a method that may have been used in book design to divide a page in pleasing proportions.[5] This canon is also known as the “secret canon” used in many medieval manuscripts and incunabula.

The geometrical solution of the construction of Van de Graaf’s canon, which works for any page width:height ratio, enables the book designer to position the text body in a specific area of the page. Using the canon, the proportions are maintained while creating pleasing and functional margins of size 1/9 and 2/9 of the page size.[6] The resulting inside margin is one-half of the outside margin, and of proportions 2:3:4:6 (inner:top:outer:bottom) when the page proportion is 2:3 (more generally 1:R:2:2R for page proportion 1:R). This method was discovered by Van de Graaf, and used by Tschichold and other contemporary designers; they speculate that it may be older.[7]

The page proportions vary, but most commonly used is the 2:3 proportion. Tschichold writes “For purposes of better comparison I have based his figure on a page proportion of 2:3, which Van de Graaf does not use.”[8] In this canon the text area and page size are of same proportions, and the height of the text area equals the page width. This canon was popularized by Jan Tschichold in his book The Form of the Book.[1]

Robert Bringhurst, in his The Elements of Typographic Style, asserts that the proportions that are useful for the shapes of pages are equally useful in shaping and positioning the textblock. This was often the case in medieval books, although later on in the Renaissance, typographers preferred to apply a more polyphonic page in which the proportions of page and textblock would differ.

Golden Canon

Tschichold’s “golden canon of page construction”[1] is based on simple integer ratios, equivalent to Rosarivo’s “typographical divine proportion.”[10]

Interpretation of Rosarivo

Raúl Rosarivo analyzed Renaissance books with the help of a drafting compass and a ruler, and concluded in his Divina proporción tipográfica (“Typographical Divine Proportion”, first published in 1947) that Gutenberg, Peter Schöffer, Nicolaus Jenson and others had applied the golden canon of page construction in their works.[11] According to Rosarivo, his work and assertion that Gutenberg used the “golden number” 2:3, or “secret number” as he called it, to establish the harmonic relationships between the diverse parts of a work,[12] was analyzed by experts at the Gutenberg Museum and re-published in the Gutenberg-Jahrbuch, its official magazine.[13] Ros Vicente points out that Rosarivo “demonstrates that Gutenberg had a module different from the well-known one of Luca Paccioli” (the golden ratio).[13]

Tschichold also interprets Rosarivo’s golden number as 2:3, saying:

In figure 5 the height of the type area equals the width of the page: using a page proportion of 2:3, a condition for this canon, we get one-ninth of the paper width for the inner margin, two-ninths for the outer or fore-edge margin, one-ninth of the paper height for the top, and two-ninths for the bottom margin. Type area and paper size are of equal proportions. … What I uncovered as the canon of the manuscript writers, Raul Rosarivo proved to have been Gutenberg’s canon as well. He finds the size and position of the type area by dividing the page diagonal into ninths.[8]

The figures he refers to are reproduced in combination here.

Tschichold and the golden section

Building on Rosarivo’s work, contemporary experts in book design such as Tschichold andRichard Hendel assert as well that the page proportion of the golden section (21:34) has been used in book design, in manuscripts, and incunabula, mostly in those produced between 1550 and 1770. Hendel writes that since Gutenberg’s time, books have been most often printed in an upright position, that conform loosely, if not precisely, to the golden ratio.^[15]

These page proportions based on the golden section or golden ratio, are usually described through its convergents such as 2:3, 5:8, and 21:34.

Tschichold says that common ratios for page proportion used in book design include as 2:3, 1:√3, and the golden section. The image with circular arcs depicts the proportions in a medieval manuscript, that according to Tschichold feature a “Page proportion 2:3. Margin proportions 1:1:2:3. Text area in accord with the Golden Section. The lower outer corner of the text area is fixed by a diagonal as well.”^[16] By accord with the golden section, he does not mean exactly equal to, which would conflict with the stated proportions.

Tschichold refers to a construction equivalent to van de Graaf’s or Rosarivo’s with a 2:3 page ratio as “the Golden Canon of book page construction as it was used during late Gothic times by the finest of scribes.” For the canon with the arc construction, which yields a text area ratio closer to the golden ratio, he says “I abstracted from manuscripts that are older yet. While beautiful, it would hardly be useful today.”^[17]

Of the different page proportions that such a canon can be applied to, he says “Book pages come in many proportions, i.e., relationships between width and height. Everybody knows, at least from hearsay, the proportion of the Golden Section, exactly 1:1.618. A ratio of 5:8 is no more than an approximation of the Golden Section. It would be difficult to maintain the same opinion about a ratio of 2:3.”^[18]

And he expresses a preference for certain ratios over others: “The geometrically definable irrational page proportions like 1:1.618 ( Golden Section), 1:√2, 1:√3, 1:√5, 1:1.538, and the simple rational proportions of 1:2, 2:3, 5:8 and 5:9 I call clear, intentional and definite. All others are unclear and accidental ratios. The difference between a clear and an unclear ratio, though frequently slight, is noticeable. … Many books show none of the clear proportions, but accidental ones.”^[19]

John Man’s quoted Gutenberg page sizes are in a proportion not very close to the golden ratio,^[14] but Rosarivo’s or van de Graaf’s construction is applied by Tschichold to make a pleasing text area on pages of arbitrary proportions, even such accidental ones.

Current Application

Richard Hendel, associate director of the University of North Carolina Press, describes book design as craft with its own traditions and a relative small body of accepted rules.^[20]The dust cover of his book, On Book Design, features the Van de Graaf canon.

Christopher Burke, in his book on German typographer Paul Renner, creator of the Futuratypeface, described his views about page proportions:

Renner still championed the traditional proportions of margins, with the largest at the bottom of a page, ‘because we hold the book by the lower margin when we take it in the hand and read it’. This indicates that he envisioned a small book, perhaps a novel, as his imagined model. Yet he struck a pragmatic note by adding that the traditional rule for margin proportions cannot be followed as a doctrine: for example, wide margins for pocket books would be counter-productive. Similarly, he refuted the notion that the type area must have the same proportions as the page: he preferred to trust visual judgment in assessing the placement of the type area on the page, instead of following a pre-determined doctrine.^[21]

Bringhurst describes a book page as a tangible proportion, which together with the textblock produce an antiphonalgeometry, which has the capability to bound the reader to the book, or conversely put the reader’s nerve on edge or drive the reader away.^[22]

1. ^ ^{a b c} Tschichold, Jan, The Form of the Book. p.46, Hartley & Marks (1991), ISBN 0-88179-116-4.excerpt online at [1].
2. ^ As cited in Hendel, Richard. On Book Design, p.7
3. ^ Hans Kayser, Ein harmonikaler Teilungskanon: Analyse einer geometrischen Figur im Bauhüttenbuch Villard de Honnecourt (A canon for harmonious page division: analysis of a geometric figure in Bauhaus book of Villard de Honnecourt). Zurich: Occident-Verlag, 1946. cited by web page loaded 2006-09-11 Writings on Villard de Honnecourt, 1900-1949 “An article-length (p. 32) attempt to demonstrate the use of Pythagorian musical proportion as the basis for the geometry in three of Villard’s figures: fol. 18r, two figures at the bottom; and fol. 19r, rightmost figure in the second row from the top. While the geometric design itself is unquestionably that generated from the Pythagorian monochord, Kayser does not convince the reader that Villard understood its musical basis. Kayser apparently worked from photographs of the original folios, and the significance of Kayser’s claim may be summarized in his own admission (p.30) that Villard’s geometry does not match that of the Pythagorean design when correctly drawn.”
4. ^ Egger, Willi. “Help! The Typesetting Area” (PDF). De Nederlandstalige TeX Gebruikersgroep. Retrieved 2008-03-16.
5. ^ Van de Graaf, J. A. , Nieuwe berekening voor de vormgeving. (1946) (as cited by Tschichold and others; original not examined)
6. ^ Tschichold, Jan, The Form of the Book. pp.28,37,48,51,58,61,138,167,174, Hartley & Marks (1991),ISBN 0-88179-116-4.
7. ^ Hurlburt, Allen, Grid: A Modular System for the Design and Production of Newspapers, Magazines, and Books, p.71, John Wiley and Sons (1982) ISBN 0-471-28923-X
8. ^ ^{a b c} Tschichold , The Form of the Book p.45
9. ^ Bringhurst, The Elements of Typographic Style, p.163
10. ^ Rosarivo, Raúl M., Divina proporción tipográfica, La Plata, Argentina (1953). Previous editions: 1948 and 1947. Brief discussion about his work, is available online in Spanish [2]
11. ^ Carreras, Fabián, “Rosarivo 1903 – 2003″. Retrieved 2008-03-16.
12. ^ Rosarivo, Raúl M., Divina proporción tipográfica, La Plata, Argentina, “[...] el número de oro o número clave en que Gutenberg se basó para establecer las relaciones armónicas que guardan las diversas partes de una obra”
13. ^ ^{a b} Ros, Vicente, Infodiversidad. Ral Mario Rosarivo o el amor al libro, Sociedad de Investigaciones Bibilotecológicas, Argentina Vol. 7 (2004) Available online (Spanish) (PDF)
14. ^ ^{a b} Man, John, Gutenberg: How One Man Remade the World with Word (2002) pp.166–67, Wiley,ISBN 0-471-21823-5. “The half-folio page (30.7 x 44.5 cm) was made up of two rectangles — the whole page and its text area — based on the so called ‘golden section’, which specifies a crucial relationship between short and long sides, and produces an irrational number, as pi is, but is a ratio of about 5:8 (footnote: The ratio is 0.618…. ad infcommonly rounded to 0.625)”
15. ^ Hendel, Richard, On Book Design, p.34, Yale University Press (1998), ISBN 0-300-07570-7
16. ^ Tschichold , The Form of the Book, p.43 Fig 4. “Framework of ideal proportions in a medieval manuscript without multiple columns. Determined by Jan Tschichold 1953. Page proportion 2:3. margin proportions 1:1:2:3, Text area proportioned in the Golden Section. The lower outer corner of the text area is fixed by a diagonal as well.” (in the Dutch version, “letterveld volgens de Gulden Snede” — text area in accord with the Golden Section)
17. ^ Tschichold , The Form of the Book p.44
18. ^ Tschichold , The Form of the Book, p.37
19. ^ Tschichold , The Form of the Book pp.37–38
20. ^ Hendel, Richard, On Book Design pp.1–5
21. ^ Christopher, Burke, Paul Renner: The Art of Typography, Princeton Architectural Press, 1999, ISBN 1-56898-158-9
22. ^ Bringhurst, The elements of typographic style (1999), p.145

What is Gutter in Grid Design?

Gutter is the blank space that separates rows and columns in screen. Almost every web site is made of more than one column. The space between those columns is called “the gutter”.

So why is the size of the gutter important in web design or design in general?

I think that the space between the columns is extremely important and it can contribute for better reading, more elegant design and the harmony between grids (columns).

We (me included) almost every time ignore the gutter size. Usually we put 10px without thinking or if you have more designer “taste” you will try to adjust it manually and stop when “looks good”.

There is practically no (or very little) documentation about this problem on the web or in many typography or grid design books.

So I tried to resolve this problem.

First logical thing is that the size of the gutter should be bigger than one blank space of one letter. So the eye won’t jump to the next column.
But this space shouldn’t be too large to create the sensation of “empty hole” between grids.

I often ask myself why the site The Grid System looks so damn good. I keep turning back just to enjoy the view. I also love BBC and NY Times.

Every time when I tried to find the formula for the perfect gutter I finished with dead end. But last week when I made some experiments with the leading for Better Web Readability Project I find out that the perfect leading for my 16px gridlines was 1.625 very close to the golden proportion 1.618. I must say in the past I was very skeptic about this number.

Now I think inside that number is hidden the mathematical formula for beauty.

So I wanted to take the horizontal size of one letter and multiply the golden proportion. So what lowercase letter can we take that can represent all the letters? I think that the letter ”o” has the optimal form and is the best letter for this experiment.

Attention! Not all fonts have the same letter “o”. Different fonts have different horizontal size. Let’s try with Arial and calculate how many horizontal pixels it has.

This is the letter “o” 12px Arial zoomed 3200% so if you count the colored pixels you can see that are 8. So the horizontal size is 8px multiplied with 1,618 equals 12,944 or 13px.

So if you have 12px Arial the best size for the gutter is 13px. But this is just for Arial. For Lucida sans Unicode the size of the o is 9px so the gutter is 9 X 1,618 = 14,562 so you can choose between 14 or 15 px.

If you have bigger font you will have more pixel and bigger gutter.

All the sites I named before almost perfectly match this calculation. They all have beautiful grid system.

I called this rule O-rule.

“Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe exhibit mathematical properties, from the smallest seashell to the biggest whirlpool galaxies. In fact, one of the greatest ancient philosophers, Aristotle, said: “The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”

Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But ithas not been exploited much for website design. This is probably because many of us regard mathematics as being antithetical to creativity. On the contrary, mathematics can be a tool to produce creative designs. That said, you don’t have to rely on math for every design. The point is that you should regard it as your friend, not a foe. For illustrative purposes, we created a couple of web designs that present mathematical principles discussed in this article. We are also giving away a couple of PSDs that you can use right away in your next design.

Layouts featured in this post were created specifically for the purpose of this article. During the design process we made sure that all of the designs shown in this article are essentially mathematical in nature; that is, they exhibit order, symmetry and limitation. We also have followed the Web design algorithm in this process — the designs have distinct themes, styles and elements. To keep things simple and clear, we tried to stick to minimalist designs and also preferred single-page layouts. Obviously, examples in this article are supposed to serve as a simple foundation for your designs and not as the finished designs.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Golden Ratio and Golden Rectangle

The golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. If the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one, then the quantities are said to have a golden ratio.

We already published a very detailed article “Applying Divine Proportion To Web Design” that explains how to use the golden ratio in Web design. In today’s article, we’ll look at how to use golden rectangles in Web design. A golden rectangle is one whose side lengths have the golden ratio 1:(one-to-phi); that is, 1:1.618.

The construction of a golden rectangle is very easy and straightforward. First, construct a simple square. Then draw a line from the midpoint of one side of the square to an opposite corner and use that line as the radius to draw an arc that defines the height of the rectangle. Finally, complete the golden rectangle and you are done.

A method to construct a golden rectangle. The square is outlined in red. The resulting dimensions are in the ratio 1:Phi, the golden ratio.

As an example, consider the minimalist design below. It has six golden rectangles in it, three rectangles per line. The rectangles have the dimensions of 299 x 185 pixels. Thus, the sides of these rectangles adhere approximately to the golden ratio; that is, 299/185 = 1.616. Notice how the large amount of white space surrounding Golden rectangles creates a calm and simple atmosphere in which the navigation options can breathe and serve their purpose. Although the layout uses only few colors and all blocks are positioned very similarly, the navigation options are obvious.

Large view

However, it may be quite difficult to add a new Golden block while keeping the consistency of the design. Probably the only reasonable design solution here would be to add the block on the third line and use the rest of the horizontal space for other, more or less prominent features (if necessary). You can click on the image below to see the enlarged version.

Large view

Possible Applications

The golden rectangle design is well suited for photo galleries, portfolios and product-oriented websites. The golden rectangles can also be arranged in other mathematically sound ways to generate beautiful designs. In particular, you may want to use them for blocks that display images or ads in your sidebar. Of course, the pure collection of golden rectangles doesn’t make for a professional, nice-looking design. You also need to work closely with grids, alignment, proximity and emphasis to achieve the main goals of your design. For instance, an interesting design solution would be a CSS/jQuery-based fluid grid design based on golden rectangles, however we do not cover this technique in this article.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Golden Ratio and Golden Rectangle. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Fibonacci Design

As the name says, Fibonacci designs are designs based on the Fibonacci sequence of numbers. By definition, the first two Fibonacci numbers are 0 and 1, and each remaining number is the sum of the previous two. Some sources omit the initial 0, instead beginning the sequence with two 1s. So the first two Fibonacci numbers are given, and each remaining number is the sum of the previous two. The higher the Fibonacci sequence gets, the closer its numbers relate to each other according to the Golden Ratio. A Fibonacci sequence goes like this:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

In music, Fibonacci numbers are sometimes used to determine tunings, and in visual art to determine the length or size of content and formal elements. Jürgen Schmidhuber his methodology for Fibonacci-based designs on his blog. However, if you examine the design he created, you are likely to find it rigid and a bit difficult to read and navigate. Indeed, you need to get a bit creative with math rather than following the rules blindly — maths gives us a guide that we can apply, however it’s rather about implementing sites with maths than implementing maths with our designs.

Approximate and true golden spirals. The green spiral is made from quarter-circles tangent to the interior of each square, while the red spiral is a Golden Spiral, a special type of logarithmic spiral. Overlapping portions appear yellow. The length of the side of one square divided by that of the next smaller square is the Golden ratio. Source

The main idea behind such designs is to use Fibonacci when deciding on the dimensions for content area or sidebar. Both Golden ratio and Fibonacci let designers rely on sound, common ratios for page containers or blocks within page containers.

In general, layouts are quite easy to build using the Fibonacci sequence. You pick a certain base width first — for instance, 90px. Then, when determining the size of your containers, you multiply the base width with the numbers from the Fibonacci series. Depending on the calculations you get, you need to use them for your page blocks. Let’s take a look at an example. Below is a minimalist typography blog based on Fibonacci Web design.

Large view

You can see that the page is divided into three columns. Each column corresponds to a Fibonacci number. For this design, we used a base width of 90 pixels. This base width is then multiplied by a Fibonacci number to get the total width for a particular column. For example, the first column has a width of 180 pixels (90 x 2); the second column has a width of 270 pixels (90 x 3); and the third column has a width of 720 pixels (90 x 8). The font size also corresponds to a Fibonacci number. The blog heading has a size of 55px; the article’s heading is 34px; and the content is 21px.

The downside of layouts based on the Fibonacci sequence is that it’s difficult to use it if you are given certain fixed width layout dimensions (e.g. 1000px). In this situation it’s easier to use the Golden ratio, as you would simply multiply 1000px with 0.618 and get 618px which would be the ideal width for your content block. However, if you try to achieve the same result with the Fibonacci sequence itself, you first need to figure out the sequence to the 1000 range.

According to the Fibonacci sequence calculator, the sequence would be ...,610, 987, 1597.... Indeed, 987 is a good fit and you can start picking the widths for smaller blocks using the previous numbers in the sequence. But if your fixed width layout is smaller or lager, you would need to use some approximate values which would again result in pure guessing. The problem may also occur in liquid or elastic designs to some extent, but you have much more design freedom there.

Possible Applications

A Fibonacci design is best suited to blogs and magazine layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, notice that you need to be creative when using Fibonacci sequence in your designs, otherwise your designs will turn out to be too rigid and hence difficult to use and navigate.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Fibonacci sequence. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Five Elements, Or Kundli Design

Another interesting layout technique comes from the Indian horoscopes which are also called Kundli. Basically, a Kundli is a very simple figure can be made in just three steps. Draw a square, and then cross the two diagonals. Join the mid-points on each side of the square to get the Kundli figure. You’ll notice four right-angle rhomboids in the figure. These are the basis for our Web design.

The design below, then, is based on the Kundli geometric layout. You’ll notice that the chakras in the design also have mathematical properties.

Large view

This is a single-page layout. Clicking on an element reveals more information about it, as shown in the figure below. You could also include some simple jQuery animations or jQuery tooltips that would reveal more information on demand. A further step would be a sliding web page where animation is used to display different content blocks; you may also want to change the background images of the single content areas to make them a bit more distinctive.

In the following figure, you can see that our design is just a simple three-column layout: a header, three columns and a footer. Not complex at all.

Possible Applications

This design is best for displaying product information and portfolios. You can spice it up with JavaScript animation frameworks. For example, you can apply color transformations to the chakras by using Raphael library, or you can add freestyle animations using  jsAnim library. You can have a tree sprout when the user clicks on the Earth element, or you can show sea creatures swimming in the water element. The sky is the limit when it comes to animation using these JavaScript libraries.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Kundli design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Sine Wave Design

When it comes to mathmatics, you do not need to stick to well-known Golden Ratio or Fibonacci sequence. You can also experiment with formulas from physics, chemistry and other sciences by using more general formulas and values in your designs.

For instance, let’s consider the sine wave, or sinusoid, a mathematical function that describes a smooth repetitive oscillation. We used a simple sine wave pattern as the basis for a simple and original Web design and create a single-page layout. Of course, you can use the same approach for other designs such as graphics or infographics.

Large view

The layout is again very simple, consisting of a header, five columns and a footer. You can use a jQuery tooltip to make the design more interactive.

Possible Applications

This wave pattern occurs often in nature, including ocean waves, sound waves, and light waves. Also, a rough sinusoidal pattern can be seen in plotting average daily temperatures for each day of the year, although the graph may resemble an inverted cosine wave. You can also use it to display a timeline of events. It could even be developed to include horizontal navigation. You can make it more interactive with the jQuery highlighter plug-in, which highlights each element (i.e. DIV) so that the user can focus on the content.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Sine Wave design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Other Techniques

Rule of Thirds
This rule states that an image should be imagined to be divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. It can also be expressed as a simplified mathematical approach that divides any layout into thirds, left to right and top to bottom.

Musical Logic
The rhythmic or thematic structure of musical compositions can be applied to distances between elements in a layout, like ABA, ABAC, etc. Learn more about music and mathematics in this Wikipedia article.

Useful Links and Resources

Wikipedia articles

• Sacred Geometry
• Proportion
• Canons of Page Construction

Articles

• Mathematics in Art and Architecture
• Design and Divine Proportion
• Create Awesome Geometrical Designs, Myoats
• Photographer Loves Math, Graphs Her Images
• Typograph: Scale and Rhythm
• Michael Paunker – Art and Math

Books

• Geometry of Design
• Euclid’s Elements
• Mathematics in Nature

We hope you’ve enjoyed this article on mathematics and Web design. Hopefully you now see mathematics not as a hindrance to creativity, but as a friend. Embrace it!

(Este artículo está disponible en español)

News websites have been with us for about a decade, and editors and designers still struggle with many unanswered questions: Is homepage layout effective? … What effect do blurbs on the homepage have compared to headlines? … When is multimedia appropriate? … Are ads placed where they will be seen by the audience?

The Eyetrack III research released by The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools could help answer those questions and more. Eyetracking research like this won’t provide THE answer to those questions. But combined with other site metrics already used by news website managers — usability testing, focus groups, log analysis — the Eyetrack III findings could provide some direction for improving news websites.

In Eyetrack III, we observed 46 people for one hour as their eyes followed mock news websites and real multimedia content. In this article we’ll provide an overview of what we observed. You can dive into detailed Eyetrack III findings and observations on this website — use the navigation at the top and left of this page — at any time. If you don’t know what eyetracking is, get oriented by reading the Eyetrack III FAQ.

Let’s get to the key results of the study, but first, a quick comment on what this study is and is not: It is a preliminary study of several dozen people conducted in San Francisco. It is notan exhaustive exploration that we can extrapolate to the larger population. It is a mix of “findings” based on controlled variables, and “observations” where testing was not as tightly controlled. The researchers went “wide,” not “deep” — covering a lot of ground in terms of website design and multimedia factors. We hope that Eyetrack III is not seen as an end in itself, but rather as the beginning of a wave of eyetracking research that will benefit the news industry. OK, let’s begin. …

At the core: Homepage layout

While testing our participants’ eye movements across several news homepage designs, Eyetrack III researchers noticed a common pattern: The eyes most often fixated first in the upper left of the page, then hovered in that area before going left to right. Only after perusing the top portion of the page for some time did their eyes explore further down the page.

Depending on page layout, of course, this pattern can vary. The image above is a simplistic representation of the most common eye-movement pattern we noticed across multiple homepage designs. (In other words, don’t take what you see above too seriously.)

Now also consider another Eyetrack observation: Dominant headlines most often draw the eye first upon entering the page — especially when they are in the upper left, and most often (but not always) when in the upper right. Photographs, contrary to what you might expect (and contrary to findings of 1990 Poynter eyetracking research on print newspapers), aren’t typically the entry point to a homepage. Text rules on the PC screen — both in order viewed and in overall time spent looking at it.

A quick review of 25 large news websites – here’s a list of them — reveals that 20 of them place the dominant homepage image in the upper left. (Most news sites have a consistent page design from day to day; they don’t often vary the layout as a print newspaper would.)

We observed that with news homepages, readers’ instincts are to first look at the flag/logo and top headlines in the upper left. The graphic below shows the zones of importance we formulated from the Eyetrack data. While each site is different, you might look at your own website and see what content you have in which zones.

[Read more on what Eyetrack III says about homepage layout here.]

Want people to read, not scan? Consider small type

The Eyetrack III researchers discovered something important when testing headline and type size on homepages: Smaller type encourages focused viewing behavior (that is, reading the words), while larger type promotes lighter scanning. In general, our testing found that people spent more time focused on small type than large type. Larger type resulted in more scanning of the page — fewer words overall were fixated on — as people looked around for words or phrases that captured their attention.

This was especially the case when we looked at headline size on homepages. Larger headlines encouraged scanning more than smaller ones.

(Note: We are not advocating that you run out and reduce the size of your font across the board. You should make sure that people can read the font size you select in order to achieve the appropriate balance.)

Particularly interesting was people’s behavior when there were headlines and blurbs used on homepages. Eyetrack III test participants tended to view both the headline and blurb when the headline was bold and the same size as blurb text and immediately preceded the blurb on the same line.

With a headline larger than the blurb and on a separate line, people tended to view the headlines and skip the blurbs; they scanned the headlines throughout the page more than the group that looked at the smaller headlines.

Researchers believe that it is the contrast in type size that accounts for this behavior, as well as the type size itself. When a headline is larger than its accompanying blurb text, it’s perceived as the important element of the headline-blurb block — so people appear to decide that viewing the headline is sufficient and they skip the blurb.

Underlined headlines discouraged testers from viewing blurbs on the homepage:

This may be related to a phenomenon that we noted throughout the testing: visual breaks — like a line or rule — discouraged people from looking at items beyond the break, like a blurb. (This also affects ads, which we address below.)

When we look at news websites, we find that the vast majority of them (22 out of 25) use blurbs to accompany headlines on their homepages. It’s the rare ones that use only headlines: CNN.com, NYPost.com, and ProJo.com. In terms of headline size, we observed about an even split between using larger type size for headlines vs. smaller type.

We found that 12 out of 22 news sites that use blurbs on their homepage put rules under their headlines.

[Read more on what Eyetrack III says about type and blurbs here andhere.]

Partial viewing of headlines, blurbs found to be common

We found that when people look at blurbs under headlines on news homepages, they often only look at the left one-third of the blurb. In other words, most people just look at the first couple of words — and only read on if they are engaged by those words.

Here’s a heatmap of a blurb demonstrating this. (A heatmap is an aggregate view of all the eye fixations of our test subjects. Below, the orange area was viewed the most, the blue areas the least.)

With a list of headlines on a homepage, we can see where people looked with eyetracking — and again, most often it’s the left sides of the headlines. People typically scan down a list of headlines, and often don’t view entire headlines. If the first words engage them, they seem likely to read on. On average, a headline has less than a second of a site visitor’s attention.

For headlines — especially longer ones — it would appear that the first couple of words need to be real attention-grabbers if you want to capture eyes.

The same goes for blurbs — perhaps even more so. Our findings about blurbs suggest that not only should they be kept short, but the first couple of words need to grab the viewer’s attention.

On the 25 news websites we reviewed, there’s considerable variety in blurbs. Average blurb length varies from a low of about 10 words to a high of 25, with most sites coming in around 17.

[Read more on what Eyetrack III says about blurbs here.]

What creates “hot spots”?

In Eyetrack III, we tested several homepage designs, watching where on the page people looked. As you would expect, lower parts of the page — especially areas you have to scroll to view — receive modest viewing. But that doesn’t mean you can’t get people to look at content low on a scrolling page.

On a couple of our test homepages, we found “hot spots” for some stories. Perhaps because our testing took place in San Francisco, research subjects were drawn to one story about the site “Craig’s List” (a local online community popular since its inception in 1995). The headline for that story had an inordinate number of eye fixations compared to surrounding content, even though it was below the first visible screen of the page. We observed a similarly high number of eye fixations on a headline about clothing maker FCUK, which was placed far down on a page with a long list of headlines and blurbs.

We think this spells good news for those websites with homepages that extend well beyond the initial screen view. Eyetrack III found that people do typically look beyond the first screen. What happens, however, is thattheir eyes typically scan lower portions of the page seeking something to grab their attention. Their eyes may fixate on an interesting headline or a stand-out word, but not on other content. Again, this points to the necessity of sharp headline writing.

[Read more on what Eyetrack III says about homepage design here andhere.]

Where’s your navigation?

While testing several homepage designs, we varied the placement of a navigation element: top (under the flag or logo), left column, and right column.

Navigation placed at the top of a homepage performed best – that is, it was seen by the highest percentage of test subjects and looked at for the longest duration. In a survey of 25 top news sites, we found 11 that used top position navigation. The other 14 used left navigation. Seven of the 25 used left and top navigation elements. None of the 25 sites we surveyed used right side navigation. It’s rare, but you can find right navigation in the news website world.

It might surprise you to learn that in our testing we observed better usage (more eye fixations and longer viewing duration) with right-column navigation than left. While this might have been the novelty factor at play — people aren’t used to seeing right-side navigation — it may indicate that there’s no reason not to put navigation on the right side of the page and use the left column for editorial content or ads.

[Read more on what Eyetrack III says about navigation here.]

What about article layout, writing style?

Eyetrack III results suggests various characteristics of article writing and layout can affect a reader’s viewing behavior.

For example, let’s take average paragraph length. Most news sites run articles with medium-length paragraphs — somewhere (loosely) around 45-50 words, or two or three sentences. In a survey of 25 top news sites, however, we did find seven that routinely edited articles to make paragraphs shorter — often only one sentence per paragraph.

Shorter paragraphs performed better in Eyetrack III research than longer ones.Our data revealed that stories with short paragraphs received twice as many overall eye fixations as those with longer paragraphs. The longer paragraph format seems to discourage viewing.

Most news website article pages present stories in a single column of text, but a handful of sites — like IHT.com and TheHerald.co.uk — mimic newspaper layout and present articles in two or three side-by-side columns. Is this as readable as the traditional (for the Web) one-column article format?

Eyetrack III results showed that the standard one-column format performed better in terms of number of eye fixations – in other words, people viewed more. However, bear in mind that habit may have affected this outcome. Since most people are accustomed to one-column Web articles, the surprise of seeing three-column type might have affected their eye behavior.

What about photos on article pages? It might surprise you that our test subjects typically looked at text elements before their eyes landed on an accompanying photo, just like on homepages. As noted earlier, the reverse behavior (photos first) occurred in previous print eyetracking studies.

Finally, there’s the use of summary descriptions (extended deck headlines, paragraph length) leading into articles. These were popular with our participants. When our testers encountered a story with a boldface introductory paragraph, 95 percent of them viewed all or part of it.

When people viewed an introductory paragraph for between 5 and 10 seconds — as was often the case — their average reading behavior of the rest of the article was about the same as when they viewed articles without a summary paragraph. The summary paragraph made no difference in terms of how much of the story was consumed.

Just over 20 percent of the leading news websites regularly use summary paragraphs with articles.

[Read more on what Eyetrack III says about article layout here.]

Advertising

Eyetrack III tested a variety of ad placements and formats across our various hompages and article-level pages.

The first thing we noticed is that people often ignore ads, but that depends a lot on placement. When they do gaze at an ad, it’s usually for only 0.5 to 1.5 seconds. Good placement and the right format can improve those figures.

We found that ads in the top and left portions of a homepage received the most eye fixations. Right side ads didn’t do as well, and ads at the bottom of the page were seen, typically, by only a small percentage of people.

Close proximity to popular editorial content really helped ads get seen. We noticed that when an ad was separated from editorial matter by either white space or a rule, the ad received fewer fixations than when there was no such barrier. Ads close to top-of-the-page headlines did well. A banner ad above the homepage flag didn’t draw as many fixations as an ad that was below the flag and above editorial content.

Text ads were viewed most intently, of all the types we tested. On our test pages, text ads got an average eye duration time of nearly 7 seconds; the best display-type ad got only 1.6 seconds, on average.

Size matters. Bigger ads had a better chance of being seen. Small ads on the right side of homepages typically were seen by only one-third of our testers; the rest never once cast an eye on them. On article pages, “half-page” ads were the most intensely viewed by our test subjects. Yet, they were only seen 38 percent of the time; most people never looked at them. Article ads that got seen the most were ones inset into article text. “Skyscraper” ads (thin verticals running in the left or right column) came in third place.

Reviewing 25 leading news websites, we discovered that there’s a preponderance of small banner ads on homepages. And it’s exceedingly common to find ads in the right column of news homepages. About half of the 25 sites we reviewed inset ads into article text.

[Read more on what Eyetrack III says about advertising here.]

Larger online images hold the eye longer than smaller images

News homepages typically use templates, many of which employ a predetermined size for a main image. Although the value of using a template-driven design can (and should) be debated, what we learned about photo size in Eyetrack III may be helpful to those who are wondering just how big a spot to leave for images.

Although we learned that most of our test participants did not look at images first, we also observed that images received a significant number of eye fixations. We also learned that the bigger the image, the more time people took to look at it.

One of our test pages had a postage-stamp sized mug shot that was viewed by 10 percent of our participants. Compare that with an average-sized photo (about 230 pixels wide and deep) that drew gazes from about 70 percent.

We found that images that are at least 210 x 230 pixels in size were viewed by more than half of the testers. Our research also shows that clean, clear faces in images attract more eye fixations on homepages.

Article-level pages seem to follow suit. Again we found that the larger the image, the more users were drawn to it.

In reviewing 25 news websites, we found that about 20 percent routinely use small images on their homepages. Four out of five sites routinely place their homepage main photo in the upper left.

And here’s an interesting research tidbit: We noticed that people often clicked on photos — even though on our test pages that got them nowhere (and indeed, clicking on photos does nothing on many real news sites).

[Read more on what Eyetrack III says about images here.]

Text for facts; multimedia graphics for unfamiliar concepts

Overall, we observed that participants were more likely to correctly recall facts, names, and places when they were presented with that information in a text fomat. However new, unfamiliar, conceptual information was more accurately recalled when participants received it in a multimedia graphic format.

So what does this mean? While overall we did see a slight, although not statistically significant, increase in information recall from text stories, we should note that most of our recall questions were about facts, names, and places. Story information about processes or procedures seemed to be comprehended well when presented using animation and text. A step-by-step animation we tested supported this idea.

We also observed that most participants attended to only two forms of media at a time. For example, in one of our testing situations users were presented with audio, still images, and written captions. We observed that they directed their attention to the audio and images. Important information in the photo captions were not read by many.

The bottom line is that the best journalists working in multimedia environments know how to make good choices about the presentation of story information. As demonstrated in this research, some information is best conveyed by the use of good, descriptive writing. Other information is better explained graphically.

[Read more on what Eyetrack III says about multimedia comprehensionhere, and read additional general multimedia observations here.]