1. MIT 511- Web Design & Usability

2. Agenda Housekeeping Discussion of readings Webpage: Project lab
Html 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 Honeycomb
Web Usability
Peter Morville’s User Experience Honeycomb

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

9. Educational Website Redesign

10. Educational Website Redesign

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

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

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

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

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

16. Next class Read Rapid Elearning Authoring Tool
Dreamweaver 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.