1 MIT 511- Web Design & Usability

2 Agenda Housekeeping Discussion of readings Webpage: Project labHtml hierarchy & CSS box model Web Usability & Accessibility Educational Website Redesign Project lab

3 HTML Document hierarchy

4 HTML tag Cheatsheet http://www.w3schools.com/tags/

5 CSS (Cascading Style Sheets)Source: (Lynch and Horton, 2011) Language for describing the presentation of Web pages, including colors, layout, and fonts. Source: W3C

6 CSS Box model

7 Peter Morville’s User Experience HoneycombWeb Usability Peter Morville’s User Experience Honeycomb

8 https://youtu.be/BEFgnYktC7UWeb Accessibility When building a website, follow: Principles of Accessible Design https://youtu.be/BEFgnYktC7U

9 Educational Website Redesign

10 Educational Website Redesign

11 1. Setting up the website Defining the siteCreating and saving a html page Setting up the main sections of the site Creating and saving CSS file.

12 2. Designing the header sectionExtracting assets from Photoshop Defining the background color Adding image and Alternative (Alt)-text (accessibility) Creating a div

13 3. Designing the navigation sectionDefining the background color Adding a navigation list/ CSS selector Adding links to the navigation list/CSS selector CSS transitions

14 4. Designing the content sectionAdding the image and Alternative (Alt)-text (accessibility) Creating a Div Adding text (Heading & Paragraph)

15 5. Designing the footer sectionDefining the background color Adding text (Hyperlinks) Creating a Div

16 Next class Read Rapid Elearning Authoring ToolDreamweaver Project Draft is due next class Oct 24th. Please have it at least 1-2 pages of your website redesign completed for feedback. Breakout session: share your website with peers and provide any suggestions before submission.