The History of Web Design

Documents, Not Pages

Tim Berners-Lee’s HTML described what things were: a heading, a paragraph, a list, a link, an emphasis. How they appeared was left to the browser and, through it, to the reader, who might be on a text terminal, a workstation, or a screen reader. That was a deliberate choice about a publishing system meant to work everywhere, and it is the reason the early web looks uniform: black serif text on grey, blue underlined links, the browser’s defaults showing through.

Two things ended it. Mosaic added the inline image in 1993 (see Mosaic), which meant a page could carry graphics rather than link to them. Then Netscape, competing for users, began shipping presentational HTML of its own invention: <font> with faces and colours, <center>, background images, frames in Netscape 2.0, and <blink>. The blink element came out of an evening conversation in which Lou Montulli joked about it and an engineer implemented it overnight, which is roughly the level of deliberation the period applied to extending HTML. Microsoft answered with tags of its own, including <marquee>. Authors now had control over appearance and no standard way to exercise it, so pages were written for one browser and broke in the other (see The Browser Wars).

Tables and the Single-Pixel GIF

None of the new tags produced a layout. HTML had exactly one element that made a grid of cells with controllable widths, the table, intended for tabular data. Designers used it for everything: a page became a table, often several nested inside each other, with navigation in one cell and content in another.

The table alone was not precise enough, because a cell collapses to its content. The fix was a transparent GIF one pixel square, stretched with width and height attributes to hold a cell open to an exact size. Every commercial site of the late 1990s contained dozens of these, usually named spacer.gif or dot_clear.gif.

David Siegel’s Creating Killer Web Sites (1996) is the book that made the technique standard practice. It was the year’s best-selling internet book and was translated into ten languages, and it argued for what Siegel called third-generation sites, designed visually rather than assembled from whatever the technology made easy. It is also the book web-standards advocates spent the next decade arguing against, because the methods it taught produced pages whose meaning was buried in layout scaffolding: unreadable to a screen reader, unusable at another window size, and impossible to restyle without rebuilding.

CSS Arrives and Nobody Can Use It

Håkon Wium Lie proposed Cascading Style Sheets on 10 October 1994, working alongside Berners-Lee at CERN, with Bert Bos as co-author and co-creator. The idea addressed the problem directly: describe presentation once, separately, and let the document stay a document. CSS1 became a W3C Recommendation on 17 December 1996 and CSS2 on 12 May 1998.

Then nothing happened for four years. Internet Explorer 3 shipped partial CSS support in 1996; IE4 and the Netscape 4.x line added more, incompletely and with enough bugs to make it unusable for real work. A stylesheet that laid out correctly in one browser could produce an unreadable page in the other, so professional practice stayed on tables, where the bugs were at least familiar. The first browser with essentially complete CSS1 support was Internet Explorer 5 for Macintosh in March 2000, three and a half years after the specification was final.

This gap is the central fact of the period. The standard existed, the tooling did not, and an entire industry built its methods around the workaround instead.

The Standards Campaign

The Web Standards Project was founded in August 1998 by George Olsen, Glenn Davis and Jeffrey Zeldman as a coalition pressuring browser makers to implement HTML 4.01, CSS1 and ECMAScript properly. Its instrument was the Acid test, a deliberately hostile page that rendered correctly only if the browser followed the specification, later extended into Acid2 and Acid3. A test with a visibly wrong answer is harder to argue with than a specification document, and by 2001 the group could claim commitments from Microsoft, Netscape and Opera.

Persuading browser vendors was half the problem. The other half was persuading designers that a table-free page could look like anything. Dave Shea solved that in May 2003 with the CSS Zen Garden: one fixed HTML file, semantically marked up and never altered, plus a stylesheet from any designer who wanted to submit one. Five designs at launch became 218 by the tenth anniversary, all of them the same document. The demonstration is unusually complete, because the argument for separating content from presentation is abstract until you see the same content in two hundred presentations.

Zeldman had also co-launched A List Apart in 1998, the magazine that became the movement’s publication of record and, twelve years later, the venue for the article that named responsive design. His Designing with Web Standards followed in 2003 and turned the position into a professional methodology. The web-standards case won on the merits over roughly the next five years, helped by the arrival of browsers that could actually implement it.

The Flash Detour

Running in parallel, and for a while winning, was the option of not using HTML at all. Macromedia Flash gave designers a plugin canvas with real typography, animation, sound and pixel-exact positioning, none of which HTML could match, and by the early 2000s a large share of commercial and creative sites were built in it. It was also invisible to search engines, hostile to screen readers, unusable without a mouse, and a battery and security problem, and it ended when Apple refused to put it on the iPhone. That story is told separately in Dead End: Flash and the Plugin Web.

The Responsive Turn

By 2010 the assumption underneath every layout method, table or CSS, had quietly broken. Both assumed the designer knew roughly how wide the page would be. The convention had settled on a fixed canvas 960 pixels wide, centred in the window and sized for the desktop monitors of the period. Nathan Smith’s 960 Grid System, released in 2008, made it explicit: 960 divides evenly into 12, 16 or 24 columns, so a designer got a usable grid without fractional pixels, and a great many sites of the period are built on it.

Phones with real browsers destroyed that assumption. The first responses were bad: a separate mobile site on m.example.com, maintained in parallel and always out of date, or a desktop page the phone shrank to illegibility.

Ethan Marcotte published “Responsive Web Design” in A List Apart in May 2010, naming and combining three existing techniques into one method: fluid grids sized in percentages rather than pixels, images constrained to their container, and CSS3 media queries to change the layout at different viewport widths. The page stops being a fixed canvas and becomes something that adapts to whatever it is poured into. Luke Wroblewski’s mobile-first argument, that the small screen should be the design’s starting point rather than its degraded case, supplied the discipline to go with it.

Adoption was fast because the alternative was maintaining two sites forever. Mashable called 2013 the year of responsive web design, and Google’s 2015 ranking change in favour of mobile-friendly pages removed the remaining argument.

Layout, Finally

Responsive design was built on layout tools never intended for the job. Fluid grids were made of floated boxes, a CSS property designed to flow text around an image, and clearing floats correctly was a genre of blog post. Frameworks papered over it: Bootstrap, built by Mark Otto and Jacob Thornton at Twitter and released publicly on 19 August 2011, gave everyone a tested responsive grid plus a set of components, and made a great many sites look identical.

Proper layout arrived in two stages. Flexbox handled arrangement along one axis. CSS Grid, a two-dimensional system with named rows and columns, took a longer route. Bert Bos and colleagues had explored grid layout from the 1990s, but the version that shipped began with Phil Cupp at Microsoft, who adapted Silverlight’s layout model, put it in Internet Explorer 10 behind an -ms- prefix in 2011, and brought a draft specification to the W3C in 2012 as the first grid proposal with a working implementation behind it. Elika Etemad, Tab Atkins and Rossen Atanassov edited the specification into its final form. Igalia implemented it for Blink and WebKit from 2013, work commissioned by Bloomberg, which is how a terminal company paid for the layout system of two browser engines. Rachel Andrew and Jen Simmons taught it to designers.

It shipped in Firefox 52, Chrome 57 and Safari 10.1 within weeks of each other in March 2017, with full support across browsers by that October. The coordinated release mattered as much as the feature: designers had spent twenty years unable to rely on anything new, and this time a technique was usable everywhere almost immediately.

Twenty-three years after the web’s first page, it became possible to specify a page layout in the language meant for specifying page layouts.

Dead End: The Pixel-Perfect Page

The idea that ran through the table era, the Flash era and the 960-grid era was that a web page could be a fixed artefact, the way a printed page is: the designer decides the dimensions, and the reader receives them.

That was always false, and the industry spent two decades discovering it. Screen sizes varied from the start, users could resize windows and change font sizes, and the reader’s device was never knowable. Every technique built on the fixed-canvas assumption eventually broke against a device its authors had not imagined, and the breakages arrived in the same order each time: a new screen size, then a period of separate sites and shims, then a method that gave up on control.

What replaced it is a discipline of specifying constraints and relationships rather than positions, which is also what makes a page work for a screen reader, a text browser, a watch and a print stylesheet. The accessibility case and the multi-device case turned out to be the same case, made twice, twenty years apart (see The Accessibility Revolution in Computing, where the WCAG side of this is covered).

What the Discipline Became

Web design absorbed the standards argument and then largely stopped having it. Component frameworks and design systems moved the unit of design from the page to the reusable part, which is why sites converge on a recognisable sameness of card grids and sticky headers. The techniques that separate a good site from a bad one now have more to do with performance budgets, typography and restraint than with whether the layout is legal.

The one argument the standards movement did not settle is what the layout is for. A page can be technically excellent, responsive, accessible and fast, and still be built to obstruct the reader: consent dialogs designed to be refused only with effort, subscription flows that hide the exit, interfaces arranged so the profitable choice is the easy one. That is a design problem the specifications do not address, and it is where the interesting arguments moved.

📚 Sources

• CSS — Wikipedia — Håkon Wium Lie’s proposal of 10 October 1994 at CERN with Bert Bos as co-creator, CSS1 as a W3C Recommendation on 17 December 1996 and CSS2 on 12 May 1998, the incomplete and buggy support in IE3, IE4 and Netscape 4.x, and Internet Explorer 5 for Macintosh (March 2000) as the first browser with better than 99% CSS1 support
• Responsive web design — Wikipedia — Ethan Marcotte’s May 2010 A List Apart article, the three components of fluid grids, flexible images and CSS3 media queries, mobile-first and progressive enhancement, Mashable on 2013, and Google’s 2015 mobile-friendly ranking change
• CSS Zen Garden — Wikipedia — Dave Shea’s launch in May 2003, the single unaltered HTML file, five designs at launch and 218 by the tenth anniversary in 2013, Zeldman’s assessment, and The Zen of CSS Design (2005) with Molly Holzschlag
• Web Standards Project — Wikipedia — the August 1998 founding by George Olsen, Glenn Davis and Jeffrey Zeldman, the campaign for HTML 4.01, CSS1 and ECMAScript, the Acid1, Acid2 and Acid3 tests, the vendor commitments by 2001, and the closure announced on 1 March 2013
• Jeffrey Zeldman — Wikipedia — the 1998 co-founding of the Web Standards Project with Olsen and Davis and his time as project leader, the co-launch of A List Apart in 1998, and Designing with Web Standards (2003)
• Blink element — Wikipedia — Lou Montulli’s suggestion, the overnight implementation at Netscape, and the February 1996 trade in which Netscape’s <blink> and Microsoft’s <marquee> were both dropped from the standard
• “960.gs Framework” — The History of the Web — Nathan Smith’s 2008 release, the 12- and 16-column variants on a 960-pixel width, and its role in fixing the fixed-width convention
• Bootstrap (front-end framework) — Wikipedia — Mark Otto and Jacob Thornton at Twitter, the origin as an internal consistency tool, and the public 1.0 release on 19 August 2011
• “Creating Killer Websites” — The History of the Web — Siegel’s 1996 book, its argument for visual design over standards adherence, and the table-and-hack techniques it made mainstream
• Siegel, David: Creating Killer Web Sites: The Art of Third-Generation Site Design (1996) — Internet Archive — the book itself, including the single-pixel GIF technique
• “Shipping CSS Grid Layout in major browsers” — Igalia, 4 April 2017 — the near-simultaneous March 2017 releases in Firefox 52, Chrome 57, Safari 10.1 and Opera
• Simmons, Jen: “The Story of CSS Grid, from Its Creators” — A List Apart — Bert Bos’s 1990s grid work, Phil Cupp’s Silverlight-derived proposal shipped behind -ms- in Internet Explorer 10 in 2011 and taken to the W3C in 2012, the editors Elika Etemad, Tab Atkins and Rossen Atanassov, Igalia’s Blink and WebKit implementations from 2013 commissioned by Bloomberg, the Andrew and Simmons advocacy, and full browser support by October 2017