Introduction to Web Design

1. Introduction to Web Design Multimedia Storytelling Fall 2013

2. HTML is born (1990) • HTML (HyperText Markup Language) is created • First standardized language programmers could use to communicate with web browsers • Tells browser what content should appear on a web page, and in what order the content should appear • Basic building blocks of a website, the structure

3. First website goes live (1991)

4. First website goes live (1991) • First browser introduced called “World Wide Web,” soon after changed to Nexus to avoid being confused with the Internet • Primary function was to provide information on the World Wide Web • Lightweight, optimized for slow internet connections • Design features were limited to bold, italicized and underlined text • Interactivity was limited to links that brought you to other pages • Images and media were not supported

5. Table design is introduced (1992)

6. Table design is introduced (1992) • Initially meant for displaying tabular data, similar to an Excel spreadsheet • Text could be divided into columns & rows • Designers began placing “spacer.gifs” inside the tables to create the illusion of white space • Downsides included extensive markup & visual inconsistency • Marked the beginning of a movement toward page structure

7. Early table design (Yahoo)

8. Later table design (AltaVista)

9. First picture published (1992)

10. W3C forms (1994) • W3C (World Wide Web Consortium) forms • Discourages companies from setting up competing browsers and programming languages, arguing that it would destroy the Web • Makes HTML the standard markup language for the World Wide Web • Establishes standards and goals for the future of web design • Acceptable programming languages must be approved by W3C

11. JS & Flash are introduced (1995) • JS (JavaScript) is introduced as the first interactive programming language on the web • Allowed the users to interact with the browser, control the browser, and even alter content displayed on the page • Flash animations were also introduced • Enabled designers to deliver rich content over browsers, creating motion, interactivity and a more visual, linear experience

12. Flash web page design sample

13. Frames are introduced (1996) • This was the first design element introduced after tables • Allowed designers to place two media elements side by side within the same browser window

14. Frames are introduced (1996)

15. CSS is introduced (1996) • CSS (Cascading Style Sheets) is introduced as the language describing the presentation/style/look of a website • Created to separate the content (HTML) from the presentation (layout, colors, fonts, etc.) • Made site-wide consistency easy • Made page reformatting easy • Downside was many browsers read the style sheets differently, creating visual inconsistency across different browsers

16. PHP 3 is released (1998) • PHP (first called “Personal Home Page”) is released, paving way for dynamic pages • Created a richer, more interactive experience • Allows user to change the interface behaviors with the click of a mouse or keyboard actions

17. PHP 3 is released (1998)

18. PHP web application sample

19. First 12 years in numbers • 1993: 10 million+ users / 600+ websites • 1996: 74 million+ users / 650,000+ websites • 1999: 279 million+ users / 2.2 million+ websites • 2003: 782 million+ users / 38 million+ websites

20. Web 2.0 movement (2003) • With the introduction of JS & PHP, a new web movement is born • Web 2.0 introduces the age of user-based information sites • Users interact & collaborate in a virtual community • Social networking sites • Blogs • Video sharing • Wikis

21. Web 2.0 highlights • 2003: Skype transfers its first spoken sentence from one user to another • “Tere, kassakuuled min?” (Estonian for “Hello, can you hear me?”) • 2004: Facebook gets its first non-founder to join • ArieHasit • 2005: First YouTube video is posted • “Me at the zoo” • 2006: First Tweet is written • “just setting up my twttr”

22. Mobile web comes along (2008) • First generation iPhone introduced late 2007 • Mobile web takes over • More people are accessing the Internet via phone than computer • Introduction of responsive design • Crafting sites & user interfaces that work across a wide range of devices • Flexible layouts that change based on the device

23. HTML 5 is introduced (2010) • 5th revision of the HTML standard • Main goal is to improve the language with support for the latest multimedia • Released in 2012 • Set to release new version in 2016

24. Present-day web design • Intro of HTML5 & CSS3 brought game-changing features • Multiple, full-page background images • Box & text shadows • Transparency • Beginning of the postmodern web design movement • Shifting from “less is more” to “less is a bore” • Reintroducing type & image elements used in traditional print design

25. “Form follows function” • “Form follows function” art theory • An object’s design should be based primarily upon its function • Introduced first by an architect during the modernist art movement in the late 19th century • Often applied to web design, and other industrial design fields • Web & UI designers are discovering their designs do allow for ornamentation, as long as the ornamentation serves a purpose & carries the intended message

26. 2013 Trends: Responsive design

27. 2013 Trends: Fixed headers

28. 2013 Trends: Photo backgrounds

29. 2013 Trends: CSS Transparency

30. 2013 Trends: Social media badges

31. 2013 Trends: Detailed illustrations

32. 2013 Trends: Infinite scrolling

33. 2013 Trends: Sliding panels

34. 2013 Trends: Fullscreen typography

35. 2013 Trends: Box shadows

36. 2013 Trends: Circular elements

37. So how do we make all that happen? • Learn how websites work • Research trends • Research the HTML, CSS, JS properties associated with those trends • Experiment

38. Web pages vs. websites • Web pages are HTML documents on the Internet, and any related style, script, and graphics files, often hyperlinked to other documents on the web • Websites are a collection of interconnected web pages, located on the same server, on the Internet

39. Main components of web pages • HTML • CSS (Cascading Style Sheets) • Interactive Programming • Audiovisual Content

40. HTML: Overview • Predominant markup language for all web pages that all browsers read to understand the site. • Considered the building blocks of a web page, and define the structure of the document. • Made up of tags that surround plain text, telling the browser how to display elements on a web page. • These tags carry properties, that further define how they should act and look.

41. HTML Structure: The Doctype

42. HTML Structure: The document tree

43. HTML Structure: Tags & tag rules • The basic building block of HTML structure • Composed of the name of the element, surrounded by angle brackets • Tags are always surrounded by angle brackets • Opening tags: < > • Closing tags: </> • Tags always come in pairs • Opening tag turns action on, closing tag turns it off • <head> </head> • <body> </body> • Tags can be nested inside of other tags • Inner tag must be closed before the outer tag • Tags have optional attributes that further tell the browser what to do, i.e. alignment, width, etc.

44. HTML Structure: Basic tags • <html> • <head> • <title> • <link> • <body> • <div> • <p> • <br> • <h1> - <h6> • <a> • <img> • <source>

45. CSS (Cascading style sheets) • Language that describes the presentation of a website. • Similar to the style sheets that newspapers and magazines use in InDesign • Define colors, fonts, positioning, etc.

46. CSS + HTML = BFFs • CSS is a style sheet language that controls the presentation of HTML documents • While HTML controls the structure of a web page, CSS controls the style/presentation • By separating structure & presentation, you can change how a page looks without affecting the underlying structure • HTML document links to an outside CSS document

47. Without CSS…

48. With CSS…

49. Without CSS…

50. With CSS…