The Evolution of Web Design

Nov 28 2009 by Cameron Chapman | 67 Comments

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.

The Evolution of Web Design

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

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 (<p>), 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)

The first web page (1992)

Yahoo! (1996)

Yahoo! (1996)

Altavista (1996)

Altavista (1996)

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.

Design over 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)

W3C (1998)

Yahoo! (2002)

Yahoo! (2002)

Altavista (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.

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.

Examples:

rw2

Dynamic HTML (DHTML)

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.

3DML

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 (2003)

W3C (2009)

W3C (2009)

Yahoo! (2009)

Yahoo! (2009)

Altavista (2009)

Altavista (2009)

The future?

Where is web design headed? Share your thoughts and join the discussion in the comments.

Related Content

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

67 Comments

Senthil Ramesh

November 28th, 2009

Yahoo Changed a lot from those days.

Design Informer

November 28th, 2009

Thanks for the history. Being reminded about tables and spacers, aaaaaaah! I used to hate those!

Dusan

November 28th, 2009

I wonder if today’s websites will look as grotesque in ten years time

jason

November 28th, 2009

Funny how yahoo had non-styled links across the board. FUNNY! Alta Vista… Logo looks terrible

Martin LeBlanc

November 28th, 2009

Notice how the look of links changed from #0000FF blue with underlining to a more dimmed blue with no underline. Links will probably always be blue but the underlining is not necessary in the future.

aron

November 28th, 2009

Senthil Ramesh: But, has it really? I dislike it as much now as 10 years ago :P

Waheed Akhtar

November 28th, 2009

Data collected and presented nicely. Sky is not the limit if you ask about the future of the web :)

Eric B.

November 28th, 2009

Wow. It is very interesting to see how web design has changed over the years. I remember back when I used tables for layouts.

Fortunately, I soon discovered that CSS existed.

kiedis

November 28th, 2009

it’s funny but google looked pretty much the same as it does now at first… big logo, search box and button in the middle of a page…sometimes simple is more

designfollow

November 28th, 2009

thank for this great info.

Jay

November 28th, 2009

It never ceases to amaze me just how young web design is. To think that just a few years ago sites weren’t designed with all the tools we utilize today, really just reminds me that a few years from now everything will be completely different.

Patrick

November 28th, 2009

It’s good to look back at how far we’ve all come. Unfortunately, about two-thirds of all the website design work we are doing in late 2009 is fixing junky code from 1999 and earlier, and bringing clients into the CSS and web standards world.

I’m excited about the future.

CyberFox

November 28th, 2009

HTML 5 and CSS 3 are the wave of the future!

dtbsz

November 28th, 2009

Yeah’ good old dial up connection days :D lol

expressions

November 28th, 2009

I doubt that today’s website will be looking similarly design mistakes years later. Mind you most of older sites are not as aesthetic because of
1) Lack of people who knew technology and design alike.
2) Lack of means (and I mean easy means) and free/paid goodies and brilliant adobe software.
3) Lack of competition.
May be I am wrong but its just my opinion.

Hector Jarquin

November 28th, 2009

I have to say that we have come a long way from the hyperlink playground into a more polished version of CSS and JS e.i jquery, ajax; which is what really allow us to create interfaces marvels. However we are far from an evolved internet it self. With the addition of HTML 5 the game will definitely change for the web design industry, and we will see a really evolved internet… until then as web designers: obsolete browser are the enemy and we have to keep fighting http://twitter.com/mossiwo/status/6001747244

J

November 28th, 2009

Flash Player will be the browser.

Webjohn01

November 28th, 2009

Hello Cameron!

It was a great article about the origin of web design that we are doing right now.

Keep up the good work.

More thanks!

Josh

November 29th, 2009

It’s funny to see this and realize that I have come across some of the older web design practices in my own work recently.

Yannis

November 29th, 2009

Does anyone else remember the web during the pre-google era? Those were the days (not)!

Autonomy

November 29th, 2009

@Eric B. – word. I still run into people who use tables to completely design sites and it is painful! Thank goodness for CSS. Also, there seems to be a movement to steer away from building websites entirely in Flash and I am glad to see designers are returning to utilizing their eye for visual aesthetics.

Jessica

November 29th, 2009

Great article. I love looking at http://www.archive.org from time to time to see the evolution of many popular websites.

Dev

November 29th, 2009

valign=”top”. I still remember that revelation.

Albert

November 29th, 2009

Wow, nice articel, thanks again. i think the web goes more interactive. i hope with less flash and more js and dynamic html. css3 is a good way, sad that IE is still not going that way.
more FF less IE will be the future aaaaand the future will be more and more mobile!

Katrina

November 29th, 2009

Great reminder of history :)
Although as bandwith is increasing and imagery is getting richer and richer, I can imagine full scale graphics and game like enviroments and interfaces in the near future.

Roberto

November 29th, 2009

It’s amazing how things have changed in a small period of time.

George Egonut

November 29th, 2009

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

Hee hee hee! That’s an understatement. Several years before CSS even became an option, I remember more job postings than not wanted designers who were REALLY good with tables.

Denise

November 29th, 2009

Was cleaning out the bookcase this week and found a guide to web design from 1997. Hot Wired’s (Wired Mag) Best of Web Design or something like that. I showed it to my cousin on Thanksgiving and we both had a laugh about how “awful” things looked back then as compared to now. Just wait another 12 years and we’ll be awed by how things are now.

Spiral Notes

November 30th, 2009

@ Roberto
Technology is changing at the small period of time. We don’t know till when this changes in the era of web design and the present that techniques and changes will occurs.

Anything doesn’t change, as long as you love to design, you love your work and you’re creative, whatever style you will use or in what kind of era will you adapt in web design as long as the people will love it! :)

Ashely Adams

November 30th, 2009

Very interesting…A comprehensive read…I wonder if it is possible to create a post of what the web would look like ten years down the line…The development is so meteoric and so evident that anything is possible…One of these days a technology may be invented that allows the computer system to align with the thought process of the designers and create a website without the designers having to move a finger…Thanks for sharing this..

Alex

November 30th, 2009

The easier the more perfect

Dennis

November 30th, 2009

Wondering what the future will bring. We’re certainly working on it!

Magentoua

November 30th, 2009

Great article! It was interesting to see the progress of web design from the beginning. Thanks!

Phil

November 30th, 2009

@Yannis: I remember when i had a bunch of papers filled with URL’s and would just visit the websites is wrote down.

I honestly dont think the web will change much. Ofc new CSS3/HTML5 will have some fancy buttons shadows and typo options. Possibly even all the fonts we want…

But design-wise, now that the “tech” guys have design skills. I feel pretty okay where we are usability wise.

digibomb

November 30th, 2009

not sure if it has been said already, but the future of web will be various, touch will be big, and obviously portability.

subske

November 30th, 2009

The thing that grabbed my attention in this post is the screen grab of the first web page by W3C. It really does demonstrate the limited layout control or lack of the original HTML markup had. Markup has come so far in a decade or two. Its great that not only web development but all areas of internet technology has come so far.

jon

November 30th, 2009

Great job at showing the contrast from 1992 to today!

However, I don’t know how you can show the evolution of Web Design & the Internet without Google coming into play. Weren’t they the first to pull back from squishing as many features into one landing page as possible? I’m sure they have influence more than just AltaVista’s 2009 website.

DenizDaver

November 30th, 2009

Great great article, thanks alot for sharing!

Matt Hunckler

November 30th, 2009

Wow. I forgot about Alta Vista.

As the web evolves, I think it’s going to allow for more customized experiences that are tailored to each user.

Kishore Mylavarapu

November 30th, 2009

Nice wrap up.
The future is almost with CSS.Because we can do miracles with CSS.
But one more thing we have to consider is..the mobile based websites will rock..

Olayinka Adetoye

November 30th, 2009

Great article, I recognize some of those oldies! It is amazing to see how much the concept of the world wide web has changed over the years, and I’m expecting a lot more changes to come. I think in 10 years, we will look back at today’s websites with as much awe at how lacking in creativity we are right now as we are about 10 years ago. I’m guessing the internet will feature a lot more multimedia, the concept of ‘web pages’ will be a thing of history and websites will become 3-dimensional and be more of ‘zones’ or ‘rooms’ than individual pages. Considering the fact that web development techniques have evolved with general computer technologies and innovations, live video chatting in chat ‘rooms’ and audible emails, video emails, virtual environments will be the norm. You would more likely walk through virtual stores on amazon looking at 3D renditions and panoramic views of items than flipping pages. We would probably be able to rotate items, stack items in a ‘shopping cart’ in an environment that’s a closer virtual emulation of real life than what we have today. And all hail whatever device is going to replace the currently unwieldy keyboard and mouse (our kids and grand kids will wonder in awe at how we got any work done with those!). I see voice recognition and biometrics playing a stronger role in authentication….. it’s hard to imagine it all, but I’m really looking forward to it!

Nicolas AUVINET

December 1st, 2009

I’ll send your great article to some clients ;)

Matthias

December 1st, 2009

The Altavista logo of 1996 looks like a captcha to me.

Dhirendra

December 1st, 2009

Great post, Thanks for sharing it.

Jon Crim

December 1st, 2009

W3C redesign = a breath of fresh air!

Gordon Stangler

December 1st, 2009

Personally, I believe that websites in the future will move to a combination of JavaScript and PHP to deliver personalized content, or content by IP location. With the advent of mobile objects that are internet capable, websites will change from being strict X by Y designs, and much more fluid.

Sandra Aponte Salazar

December 2nd, 2009

As a neophyte to Web design who is plowing into CSS, this article gives me a better appreciation for CSS. It is also intimidating: I am afraid that by the time I master CSS, we’ll be onto something else.

Azterik Media

December 2nd, 2009

Great article! I remember the days of table web design, still makes me eye twitch. Just seeing how far we have come in the last decade in terms of web development makes it almost impossible to predict what the future will bring. Thanks for the great post.

Rick Boretsky

December 2nd, 2009

who even knew Alta Vista still existed??

osuss

December 2nd, 2009

this is funny couple of years ago we didn’t even have internet now pretty much everything is on the internet so much work for us as web designer but hey you love it deal with it as I bet that as web design evolves so will be our customs and the way we do things on the net…..ahh and by the way tables are very useful you just have to know when and where to use them,..just, don’t repeat what others are saying…please BE DIFFERENT……..

Rosti The Snowman

December 3rd, 2009

I cant wait to see what web design will look like in 10 years time!

Justin Downey

December 3rd, 2009

The future of web design is upon us in the form of Web 2.0.

While the demise of tables and spacer GIFs are behind us, the future includes user-generated content, discussions, best practices and editorial.

Rob

December 4th, 2009

I remember using a command line to search at my college way back in the day and how we had at-length discussions about “hyperlinks” etc… Those were the days!

Faris Nasir

December 9th, 2009

reminds me the first time I opened yahoo on 2002, and how I thought it was so cool LOL

table-based design, yeah I still remember the ouch!’s of spacer gifs!

Careytech

December 9th, 2009

Thanks for the trip down memory lane. I do feel the evolution involves additional threads of development…

The evolving role of the CMS is equally important — from notepad, to Dreamweaver-like tools, to server-based CMS. …the increasing role of server-side technologies took us from DHTML to AJAX. …as CSS progressed and Xhtml opened new opportunities, it was the developer community that united to forfeit some backwards compatibility and build for the current/future standards.

All these things have interwoven over the past 15 years to evolve the web into its current sophisticated state.

Ben Stokes

December 30th, 2009

It is amazing how web design has come on over the years, I remember using tables . . .

Nice read, thanks

Yatindra Saxena

January 2nd, 2010

Hi very nice post. thanks for telling us the history.

Yatindra

Jeff Dickey

January 10th, 2010

What I like about “proper” Web design, then and now, is that anybody with a bit of common sense and some basic tools – often just a simple text editor – can create compelling, interesting sites. What I think the great value of HTML5 and CSS3 are going to prove to be is, keeping that spirit alive instead of devolving the Web into just a gaggle of proprietary Flash or Silverlight RIAs.

Paula

January 11th, 2010

Thanks for bringing up this interesting topic. Web design as all “fashion” becomes nostalgic after a while. I am really curious to see how the future will shape web design. For sure it will become technically easier and easier, which again will highlight more the design talent.

Arlington

January 30th, 2010

Great article! I remember when Yahoo was the big thing in the 90s. Thanks for posting.

Chris

March 31st, 2010

Nice article – It is amazing how web design has come on over the years. Just think what we will be doing in 10 years!

Ted Thompson

July 12th, 2010

Great article, that early Yahoo page brings back memories!

Jim

September 8th, 2010

I first saw this site falange not understand much but while I’m reading I found out how it improved a web and the history it .. thanks

Luis

October 2nd, 2010

Great article!

It’s been great to see with those screenshots how some major companies have evolved through the years. Even though I’ve been using the Internet since the mid’ 90′s, it’s surprising to see again how simple and ugly were the web pages then, with just underlined hypertext as links, and afterwards very few images too with those table-based structures.

I think there are some important mentions missing though, like the use of XML-based standards to generate documents from separated content and presentation (XSL), or the popularization of Javascript frameworks (JQuery, Mootools) that allow you with little code to perform huge changes in your layout, and animations.

Cheers!

Elliot Ross

January 22nd, 2011

wasn’t the thing about non-styled links so that users could set link colours using their browser? (back in the days before background colours came in)

Matt Cove

February 28th, 2011

Coming to web design in the last couple of years this is a great read. Thanks

Chris

July 1st, 2011

In the wake of Google +, I am willing to bet Google will have elite control over where web design and development is headed. Great examples used in this post.

Leave a Comment

Subscribe to the comments on this article.