Read: Chapter 12, 14, 17, and 18
Complete Code review for 12, 14, and 17.
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize!
Start Process Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic.
– Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.
What are you planning on developing??
Even the Cursor can change
Lists are important for drop down menus:
– Drop, example. JS Basics.
– Can do it in CSS as well
– Pick your poison
The power of “Z”. Download code – DEMO
What “Z” can do for you
2 column, and 3 column layout.
@import. + Layout example
But, when presented as a media rule: @media – used for different purposes:
– Media Rules
– More Media info
Which leads to….
– Can also import fonts
– Can also use Google Fonts
How it works
Next Week: Favicons, AWD, RWD, M-sites, image roll-overs, Grids.
PROCESS + PROTOTYPING
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches
– Anticipating end-user scenarios: Example, Example 2 and a quick Usability Map
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis
UX diagram examples
-Generating schematic wireframes for key interfaces and interactions:
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype
With Annotations 2
Deliverables: Interface in JPG
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle (END of documentation)
DEVELOPMENT (Actually building your site):
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site
Studio 08: More CSS + Drop downs
HOMEWORK (Show next week):
– Make sure you understand the “Z-index”. Try either example.
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)
IN CLASS: COMPLETE THE FOLLOWING
UX – Think about how users will interact with your site.
Create a preliminary user scenario AND/OR an Experience Map.
Create a Content Inventory and Preliminary Site Map (NO WIREFRAMES, YET)
Documentation due 11/14/17
Review at the END OF CLASS