Evolution of the Web Design

The Evolution of Web Design

Overview

Since the first websites in the early 1990’s, designers have been experimenting with the way websites look. Early sites were entirely text-based, with minimal images and no real layout to speak of other than headings and paragraphs. However, the industry progressed, eventually bringing us table-based designs, then Flash, and finally CSS-based designs.

Learning Objectives

This article covers the brief history of the different eras of web design, including a handful of examples of each type of design.

Assignment

* Review the material listed below and learn how the Web has evolved. Also, consider and learn about how Web standards has played a role in the evolutionary process.
* Listen to the podcast interview [display_podcast] with Brent Norris, Web designer

The first web pages

In August 1991, Tim Berners-Lee published the first website, a simple, text-based page with a few links. A copy from 1992 of the original page still exists online. It had a dozen or so links, and simply served to tell people what the World Wide Web was all about.

Subsequent pages were similar, in that they were entirely text-based and had a single-column design with inline links. Initial versions of HTML (HyperText Markup Language) only allowed for very basic content structure: headings (h1>, h2>, etc.), paragraphs (

), and links (a>). Subsequent versions of HTML allowed the addition of images (img>) to pages, and eventually support for tables (table>) was added.

World Wide Web Consortium is formed

In 1994, the World Wide Web Consortium (W3C) was established, and they set HTML as the standard for marking up web pages. This discouraged any single company from building a proprietary browser and programming language, which could have had a detrimental effect on the web as a whole. The W3C continues to set standards for open web markup and programming languages (such as JavaScript).

Examples: The first web page (1992)

Yahoo! (1996)

Altavista (1996)

From 1993 to 1996: The web is a boring place for designers

Trends: Plain text and blue underlined links.
Mosaic was the first web browser to display images inline with text. It could support gifs and webforms, which was a huge step forward for that time. Design wasn’t very elaborate due to browser constraint and limited bandwidth, so websites were pretty much designed by programmers and nerds, not by designers.
Websites at that time look quite boring: simple text, links and a few small images. However, keep in mind that there was only a few hundreds websites until the end of 1993.

From 1995 to 1998: browsers war

Trends: “Optimized for” buttons, animated gifs, blinking text.
In the middle of the 90s, Netscape was the leading web browser, but it was quickly competed by Internet Explorer, the browsers war was on. At that time, layouts started to get a little more complex with the use of tables or frames. Animated gifs were used to create cool buttons and javascript was slowly starting to appear on websites. For a live example of a 1996 website, take a look at Jacob Nielsen’s website.

Table-based designs

Table-based layouts gave web designers more options for creating websites. The original table markup in HTML was meant for displaying tabular data, but designers quickly realized they could utilize it to give structure to their designs, and create more complicated, multi-column layouts than HTML was originally capable of.
Table-based designs grew in complexity, incorporating sliced-up background images, often giving the illusion of a simpler structure than the actual table layout.

Design over Structure

This era of web layouts paid little attention to semantics and web accessibility, often opting for aesthetics over good markup structure.

This was the same era where Spacer GIFs were popularized to control whitespace of web layouts. Some major companies even educated designers about the Spacer GIF; see Introducing the spacer GIF for use in HTML tables on Microsoft.com.

The development of the first WYSIWYG web design applications, all of which used table-based layouts, increased the use of tables. In addition, some of those programs created tables so complex that many designers would never have created them from scratch (such as tables with rows only 1-pixel high and hundreds of cells). Designers had to rely on tables if they wanted to create designs that were even mildly complex (such as multi-column designs).

Examples:
W3C (1998)

From 1998 to 2000: Designers get serious about creating websites

Trends: Frames, rigid layouts with tables, gif image menus with hover effects,…
Web development tools like Front Page, Dreamweaver, GoLive start to get more popular, giving to more people the access to web pages creation. Designers were getting more offers for website creation and had to improve their skills in that field. Some people also picked up the Flash technology, but even though some people had great websites with it, it lead most of the time to annoying intros. Websites of that period still look quite square, based most of the time on HTML tables and sliced images.


“A List Apart” website in 1996

Yahoo! (2002)

Altavista (2002)

Flash-based web designs

Flash (originally known as FutureSplash Animator, then Macromedia Flash, and currently as Adobe Flash) was developed in 1996. It started with very basic tools and a timeline, and progressed to have powerful tools to develop entire sites. Flash presented a ton of options beyond what was possible with HTML.

Macromedia Shockwave

Although before Flash, there was Macromedia Shockwave (later Adobe Shockwave). Shockwave was used to create menus and other multimedia content for CD-ROMs. Shockwave files were large, and while broadband internet has made it possible to play Shockwave files online, when the standard internet connection was dial-up, Shockwave files were impractical. In contrast, Flash movies were smaller and more practical for using online.

From 2000 to 2004: the rise of web standards

Trends: transparency, corporate websites standardization,…
The Internet bubble’s burst of 2000 probably stopped the investors for a while, but it didn’t stop the W3C to develop web standards and designers to promote it. Tableless designs began to spread and designers learned a constantly evolving CSS technology. Some hacks are also allowing to get png transparency and CMS start to gain popularity among web designers.


A 2003 design from CSS Zen Garden

From 2004 to 2007: the era of Web 2.0

Trends: Glossy buttons, shiny colors, gradients, widgets, rounded corners,…

Popularized by Tim O’Reilly, the expression web 2.0 is used to talk about the new type of websites that were more community oriented. Websites with bold typography, rounded corners and shiny gradients spread at the speed of light (almost). The websites get more functionalities and need better user interfaces to be simple to use. Widgets are used everywhere, on blogs to integrate social networks, or on social networks to integrate external feeds or content.


Carbonmade’s homepage in 2006

The advantage of Flash

HTML sites were very limited in their design options, especially when built with early versions of HTML. To create complex designs, you often had to create crazy table structures and/or resort to using spacer images (as some WYSIWYG web design programs did).
Flash made it possible to create complex and interactive sites with animated features.
Examples:
Note: These are more recent Flash design examples.

Dynamic HTML (DHTML)

Around the same time as the introduction of Flash to the scene of web design (late 1990?s – early 2000?s), the popularization of DHTML techniques, which consisted of several web technologies such as JavaScript and sometimes server-side scripting, for creating interactive/animated page elements were also the rage.
During this time, with the inception of Flash and the popularity of DHTML, the concept of interactive web pages that allow users to not only read static content, but also to interact with web content, began.

3DML

3DML is a little-known web design language for creating three-dimensional websites. Invented in 1996 by Michael Powers, 3DML files are actually written in a type of non-valid XML.

Flatland Rover is an independently-developed 3DML browser, though there were also plugins available for Internet Explorer, Netscape Navigator, the AOL browser, and Opera, but since development stopped in 2005, there was no plugin available for Firefox.
There are sites still available online that were built on 3DML, but without the browser or plugins, they’re not viewable. 3DML was used to build worlds or scenes called “Spots”. What really gave 3DML an edge was that it was faster than most other languages that let you build 3D simulations (like Flash, which also required you to have access to the Flash desktop application to create and edit Flash content) and had much smaller file sizes.

CSS-Based Design

CSS-based designs started gaining in popularity after the dotcom boom in the early 2000?s. While CSS had been available long before then, there was limited support for it in major browsers and many designers were unfamiliar with it (and even intimidated by it).
CSS-based designs have many advantages over table-based or Flash designs. The first is that it separates design elements from content, which ultimately meant that there would be greater distinction from the visual aspect of a web layout and its content. CSS is also a best practice for laying out a web page, where table-based layouts are not. It also reduced markup clutter and made for cleaner and semantic web layouts. CSS also makes it easier to maintain sites, as the content and design elements are separated. You can change the entire look of a CSS-based site without ever having to touch the content. The document sizes of CSS designs are generally smaller than table-based designs too, which translated to an improvement in page response times. Although there would be an initial bandwidth hit when first downloading the stylesheets of a website you’ve never visited before, CSS is cached by the user’s browser (by default) so that subsequent page views would be faster-loading.

Examples:
W3C (2003)

W3C (2009)

Yahoo! (2009)

Altavista (2009)

From 2008 to now: moving to other devices

Trends: mobile web apps, air apps, grid-based designs.
Out in 2007, the iPhone definitely gave a strong push to mobile web design. Many websites create mobile websites optimized for it and created apps. Big social networks create widgets to go on your blog and websites create widgets to go on social networks. In terms of design, good typography and grid-based designs are gaining ground.


Facebook on the iPhone

Leave a Reply