1. The Evolution of
Web Design
Module 1: The History and
the Future of the Web

2. Lesson Overview
 In this lesson, we will:
 Discuss the history and impact of the Web
 Understand and discuss the evolution of
Web design
 Discuss the history and impact of Web
technologies
 Use Web technologies to increase
productivity and enjoyment

3. Guiding Questions
1. How has the Web transformed your life?
2. What technologies make using the Web
more engaging and exciting on your
computer or a hand-held device?
3. Why do you think there is a need for the
W3C (World Wide Web Consortium)?

4. Development of the WWW
 Tim Berners-Lee
 Web developed at CERN (European
Organization for Nuclear Research)
 Web popularized the Internet

5. W3C (World Wide Web
Consortium)
 Established in 1994
 Tim Berners-Lee has served as the director
 Based at MIT

6. Browsers
 Allow users to view content on the Web
 Mosaic early cross-platform graphical
browsers
 Other early browsers include
WorldWideWeb, ViolaWWW, Midas, and
Samba
 Today’s browsers include Internet Explorer,
Firefox, Opera, Flock, Mozilla, and Safari

7. Browser Market Share
120
100
80 1995
1997
60
1999
40
2001
20 2003
0
Netscape IE Other

8. Web Site Design
 Plan
 Analyze
 Design
 Test and Refine

9. The First Generation of Web
Design
 Static pages
 Navigation hyperlinks
 Guest books
 Forms sent via e-mail
 Early examples
 http://www.dejavu.org/1994win.htm
 http://www.slac.stanford.edu/history/early
web/firstpages.shtml

10. The First Generation of Web
Design
 Non-compliance with standards by
browsers
 Limited by technology
 Small monochrome monitors
 Dial-up connectivity
 Slow Internet connection

11. Second Generation of Web
Design
 Onlinepresence for businesses was
essential
 Interactivity of the Web
 24-hour access
 Global reach
 Ability to present product information

12. Second Generation of Web
Design
 Intuitive, user-friendly navigation system
 Use of forms
 Focus on content
 Banners, frames, and tables
 Blinking text, hit counters, marquees
 “This site is best viewed in …”

13. Third Generation of Web
Design
 Sites designed to target specific audience
 Focus on content
 Intuitive, user-friendly navigation systems
 Use of forms, splash page, CSS, and
portals

14. Fourth Generation of Web
Design
 Web 2.0
 Participatory, interactive, and personalized
 Compliance with Web standards
 Consistent design for professional look
 Usability and accessibility issues
 Careful selection of typography

15. Fourth Generation of Web
Design
 Dynamically-generated content by the
user
 Content-authoring tools for editing
 Internet privacy
 Social networking, video sharing
 Rounded corners, subtle 3D effects
 Larger text

16. Fourth Generation of Web
Design
 Open Source
 File Sharing
 Freemium Business Model
 RSS Feeds
 Web Services

17. New Tools of Web 2.0
 Wikis
 Blogs
 Podcast(derived from iPod and
broadcast)

18. Practice
 Using http://www.dejavu.org/1994win.htm, a
first-generation Web site, compare its
characteristics to those of today’s sites.
 Using
http://slac.stanford.edu/history/earlyweb/first
pages.shtml, a first-generation Web
site, compare its characteristics to those of
today’s sites.
 How would you enhance their functionality?

19. Practice
 Usability and Accessibility Scavenger Hunt
 Refines search techniques
 Reinforces classroom instruction about the
Web design process
 Evolution of Well-known Corporate Web
Sites
 Using http://www.wakeuplater.com, select
three sites and note how they have
evolved.

20. Lesson Review
 During this lesson, you learned:
 The History and Impact of the Web
 The Evolution of Web Design
 The History and Impact of Web
Technologies