| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

The Evolution of Web Design

Page history last edited by Enoriega@cpp.edu 8 years, 11 months ago


Birth of the World Wide Web

 

The World Wide Web was invented by Tim Berners-Lee in 1989 as a way to facilitate communication among scientists. Berners-Lee was a computer scientist at CERN, the European Particle Physics Laboratory, in Geneva, Switzerland, when he wrote the specifications for uniform resource locators (URLs), hypertext transfer protocol (HTTP), and a very basic hypertext markup language (HTML). In 1991 he published the first website as an explanation and demonstration of the World Wide Web and how it would work. ("Longer bio for Tim Berners-Lee", 2015). The image below is a screenshot of the first Web page ("World Wide Web", 1992).

Because most Internet connections in the early 1990s were over phone lines with modems that had very slow data transfer rates, early websites consisted of single-column pages of text and hyperlinks to other documents. HTML was used mainly to format headings, paragraphs, lists, and hyperlinks.

 

In 1993, Marc Andreessen headed a team of programmers at the National Center for Supercomputing Applications (NCSA) at the University of Illinois that developed Mosaic, a graphical browser that popularized the World Wide Web. Within eighteen months, more than a million people were using Mosaic to navigate the World Wide Web more easily. Mosaic allowed programmers to add video, sound, and images to hypertext pages. Netscape and Firefox were the later versions of Mosaic (Anderson, 2012; National Science Foundation, n.d.).

The World Wide Web Consortium (W3C) was founded in 1994 to develop Web standards for HTML and other coding languages.

 

The Early Years of Web Design

 

Tables

 

The next phase of web design was the use of tables to format content on the page. Early HTML was not good at controlling formatting of the page itself; it was designed to format documents and hyperlinks. To position items on the page or in a column format, web designers needed tables. This was a cumbersome process, was not easily updated, and was very slow to load in a web browser. Websites using tables were still mostly text and links. A few small images might be included as in the 1996 Yahoo website pictured below but they increased the time it took to load the page.

Flash and JavaScript

 

In 1996, with the appearance of Macromedia (later Adobe) Flash and JavaScript, the Web entered a new era of interactivity. Web pages were no longer merely static text, hyperlinks, and images. Now it was possible to manipulate images and document content. JavaScript did not require extensive programming knowledge and could be inserted in the HTML on the Web page. Sophisticated user interfaces and typography were added to the Web programmer's design solutions. However, the new technologies brought their own problems. The latest version of the Flash Player was required for Flash to run and there were frequent crashes. Web pages began to appear with gratuitous moving or blinking images which annoyed users and caused Web pages to crash or load slowly but these early attempts at animation and interactivity would now drive Web design (Chapman, 2009).

 

CSS

 

In 1998, Cascading Style Sheets first appeared but several years passed before CSS became popular with Web designers. They continued to use complex table-based or Flash designs for their page layouts because there was limited support for CSS from most browsers.


CSS made it possible to separate the content from the style elements on the page. By removing style elements from the HTML, it is easier to markup the semantic elements of the content. The resulting HTML is cleaner and easier to edit. CSS makes it easier to update and even completely change the look of a website because the semantic markup of the content (paragraphs, headings, columns, etc.) remains untouched. The new style sheet changes how each HTML element is displayed without the need to rework the content. CSS Zen Garden has examples of how this works. Each webpage has the identical content and HTML. The only thing that has changed on each site is the CSS.


In 2010 the newest HTML and CSS specifications, HTML5 and CSS3 were released. These new versions coupled with JavaScript permit designers to create animations and other interactive experiences that can be played in the browser rather than requiring a separate application such as a Flash player that must be downloaded and updated frequently. Content will also be more accessible on mobile devices.

Mobile Web and Responsive Design

 

Web design entered a new phase with the increasing use of smart phones and tablet computers. The need to provide content to users without a large screen led to mobile versions of websites, usually with stripped-down content. The same problems that plagued designers in the early days of providing accessible content to persons with disabilities reappeared: in trying to make content easier to access, smartphone users lost some of the content on the full-screen website. Because it is estimated that up to 25% of Web users primarily or exclusively use a phone to access the Web, the latest trend in Web design is responsive design. Instead of scaling down content for smaller devices, websites are designed to present all the content to users regardless of the device being used. Other features may be added as enhancements but the basic content is available to all users (Lawson, 2012).

 

 

 

 

3D Graphics

 

Implementing 3D graphics in web design has historically been difficult, timely and costly.  Specialized software was needed to properly execute the level of detail and programming needed.  With the advent of Application Programming Interfaces (APIs) such as WebGL, this has started to change.

The Khronos Group started a WebGL Working Group in 2011 to help develop an API to create 2D and 3D graphics rendered in most web browsers (usually at least partially supported) using a DOM-compatible language such as JavaScript or Java (“WebGL - OpenGL ES 2.0 for the Web,” n.d.).  
This is beneficial because it, “enables web browsers to show 3D scene and models more smoothly with the help of the system’s graphics card . . . By using WebGL, the efficient graphics rendering no longer depends on the local 3D software . . . users can be easily immersed themselves in the virtual casting environment (Sun, Zhang, Liao, Chen, & Zhou, 2015).  However, due to the steep learning curve, usually only experienced programmers attempt to utilize this API.  As with any technology, it will yet to be seen how well this is integrated into web design.

Experiments of WebGL are available to view/interact with at Chrome Experiments.  Two interesting examples are life is short, using interactive storytelling and Cube Runner, a game that is navigable by mouse.

 

 


 

 

References

 

Anderson, C. (2012, April 24). The man who makes the future: Wired icon Mark Andreessen. Wired. Retrieved from http://www.wired.com/2012/04/ff_andreessen/all/

 

Chapman, C. (2009, November 28). The evolution of web design [Web log post]. Retrieved from http://sixrevisions.com/web_design/the-evolution-of-web-design  

 

Cube Runner. (n.d.). Retrieved April 21, 2015, from http://www.game5.com.de/cuberunner/index.html

 

The evolution of web design. (n.d.) [Info graphic]. Retrieved from http://www.pushpatechnologies.com/news.php

 

Lawson, B. (2012, April 19). Why we shouldn't make separate mobile websites. Smashing Magazine. Retrieved from http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/

 

Life is short - NFB and ARTE. (n.d.). Retrieved April 21, 2015, from http://interactivehaiku.com/lifeisshort/

 

Longer bio for Tim Berners-Lee. (2015). Retrieved from http://www.w3.org/People/Berners-Lee/Longer.html

 

National Science Foundation. (n.d.) Mosaic: The original browser. The Internet: Changing the way we communicate. Retrieved from https://www.nsf.gov/about/history/nsf0050/internet/mosaic.htm(2015).

 

PBS. (2012, September 20). The art of web design [Video file]. Retrieved from https://www.youtube.com/watch?v=3iVVM_DgWY4

 

Sun, F., Zhang, Z., Liao, D., Chen, T., & Zhou, J. (2015). A lightweight and cross-platform Web3D system for casting process based on virtual reality technology using WebGL. The International Journal of Advanced Manufacturing Technology, 1–16. http://doi.org/10.1007/s00170-015-7050-1

 

WebGL - OpenGL ES 2.0 for the Web. (n.d.). Retrieved April 21, 2015, from https://www.khronos.org/webgl/

 

World Wide Web (1992). Retrieved from http://info.cern.ch/hypertext/WWW/TheProject.html

 

Yahoo! (1996). {Screenshot]. Retrieved from http://angelodesignz.com/evolations.html

 

Comments (0)

You don't have permission to comment on this page.