Evolution of Web Design

Evolution of Web Design

Web 1.0: 1991 to 2004

The First Web Page

From 1991 to 1996: Pure HTML, but with some twists

For a while, there was one web browser that let you use images (Mosaic), and  design options were limited due to bandwidth.The internet was simply page after page of text with links and the occasional small image. Designers weren’t really called upon to make web designs—usually programmers made the few aesthetic decisions there were to be made.

HTML, the language used to construct web pages, was at first very simple: it had tags for headers and paragraphs. Later, the <img> tag was added, then came support for tables. Designers seized upon the table as a means to start controlling site display, chopping their text and images up in all sorts of ways in order to achieve the intended effect. HTML, a structural language, was being used for presentation. This meant that people were using all sorts of hacks and shortcuts never intended by HTML’s makers. Web designers were opting for better display over accessibility. The spacer gif reigned supreme.

1995: The First Browser War begins

Netscape came onto the scene and started to dominate the web. Then Microsoft came up with Explorer, and the competition for the largest market share began. Designers had to start dealing with cross-platform issues: what was possible in one browser might not be in another and vice versa. Browser makers often concentrated on adding new features over fixing bugs, so their products were fussy and unstable. Some designers started adding “Best Viewed in Netscape” or “Best Viewed in Explorer” badges on their sites in hopes that users would heed the warning. Other practitioners felt all web sites should adhere to the W3C standards and started the “Viewable with any Browser” campaign.

1996: Flash joins the fray and we all discover the Skip Intro button. Oh, and the developers all start learning DHTML.

Flash came on the scene and overnight, the web seemed to change. Nearly every site now incorporated an annoying opening animation or insane rollover effects. Now, I don’t mean to give Flash a hard time: it is a powerful and flexible tool. But this flexibility came at a price: Flash sites were not indexable, meaning they were not search engine friendly. They were also not accessible: web readers for the blind could not parse a Flash file. The one thing Flash could really do is free designers form the strictures of table-based design, and they took to it like gangbusters.

Meanwhile, behind the scenes, DHTML was gaining in popularity. It isn’t a language unto itself like HTML, but a term for a group of technologies that are combined for dynamic web effects. Basically, it is HTML, JavaScript, and CSS used all together at once. It enables web designers and developers to create sites that change on the fly, respond to user input, and create animated effects. The advantage is sites using DHTML are fully indexable by search engines and web-reader friendly. The disadvantage is there is a learning curve—JavaScript isn’t the easiest thing to learn.

What all of this amounted to was that the web was no longer only solely static content. There were dynamic sites out there, and users could interact with them at will.

1997 to 2000: Designers buckle down

Sports Illustrated, circa 1998

Web development went mainstream with the introduction of tools like Dreamweaver and GoLive. Designers were starting to get more and more requests for web designs, and had to expand their skill sets. Businesses wanted to have “sticky” sites, sites that would attract and draw in the visitor, hopefully all the way to a culminating sale. The prevailing visual metaphors used by designers was that sites were actually “places:” in order to make people at home on the still-new internet, sites generally resembled the bookstores and such that they represented.

Sports Illustrated, circa 2002

Early 2000s: CSS comes into its own and standardization starts to seep in

CSS slowly began to gain popularity, and the W3C kept pushing for standards compliance. People like Jakob Nielsen started championing “usability.” Designers began to take serious advantage of tables-free design. They also started seeing the web as more of its own creature, with its own characteristics. Websites no longer needed to have an overarching metaphor: they could simply be services unto themselves. Lastly, the use of CMS (Content Management Systems) really calmed things down by making the use of templates widespread. The web was not nearly so wild anymore.

45 Royale, Web 2.0 Site Extraordinaire

Web 2.0: 2004 to 2007 to now

Web 2.0 is a term coined by Darcy DiNucci in 1999, and it generally refers to web applications and services that make it easy to share information, network, and collaborate. It speaks to how users, designers and builders use the web differently than they used to. Now, small teams use open-source technologies like PHP or Ruby on Rails to create standards-compliant loveliness, like Flickr, Facebook, and Basecamp. These sites can interact with the server without refreshing, creating a seamless user experience.

As for the Web 2.0 style, it places a focus on usability, interface, and readability. It also is characterized by the use of lots of soft gradients, large type, transparent backgrounds and rounded corners. Smooth, seamless websites! Instead of the internet being some data reliant upon browsers and desktop computers, it is a set of services that can be called up on a wide variety of devices. Designers have to be aware of these other platforms and design accordingly.

2008 to the Present: Interface Design moves on to other devices

The iPhone, which came out in 2007, definitely got designers thinking more about mobile web design. Lots of sites came up with their own mobile versions, still others created downloadable apps. Now we have the iPad getting people all excited about tablets: they’re going to save the magazine industry! They’re going to replace the laptop!

We’ll see what tablets will do soon, actually: the competition is heating up and that is when innovations are most likely to occur.

The Future of Web Design: Web 3.0

The internet is not going to change so much as it will saturate our lives—more and more devices will be sending and receiving information as we go through our days.

“The future of design will be the design of information instead of the design of interfaces, inserted between the user and the information.”

Florian T. Brody, Interaction Design, 1996

There will be computer chips in all sorts of things: clothes, home appliances, food cupboards…the internet will be everywhere. It will not be our all-seeing overlord, however: we have not found a way to create the artificial intelligence necessary for malevolent world domination. Not yet, anyway.

Some key terms for Web 3.0:

Semantic Web

This is a vision of the future web: instead of being a passive search engine, the internet would be a teachable, changing service that would learn to better and better serve you as an individual.

Ubiquitous Web

The internet will be a part of more and more appliances and devices. Look at the Kindle: the wireless connection is built in, there is no need to go online because you always are.


Articles used for this lesson:

The Evolution of Web Design
Design Reviver  |  Aug 7, 2009

The Evolution of Web Design
Cameron Chapman  |  November 28th, 2009

The Evolution of Corporate Web Sites
Richard MacManus  |  April 28, 2004

25 Examples of Web 2.0 and Traditional Design Rules Coming Together
Webdesigner Depot  |  September 3, 2009

Web 2.0
Wikipedia

The Next Big Thing: Ubiquitous Internet!
The Next Web  | January 3rd, 2008

Web 3.0
by Jeffrey Zeldman  |  January 16, 2006

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s