Index
- CSS is NOT a magic bullet
- Dispelling a few myths of CSS...
- Dispelling a few myths of CSS...
- Dispelling a few myths of CSS...
- Dispelling a few myths of CSS...
- Dispelling a few myths of CSS...
- CSS as a TOOL
- Use CSS as a TOOL
- Use CSS as a TOOL
- Use CSS as a TOOL
- Independent control over design
- In 5 more years?
- The Design Process
- Blogger Redesign
- The old Blogger
- Everything changed in 2003...
- Old Blogger home
- New Blogger home
- Old Blogger registration
- New Blogger registration
- Phase 1: Discovery
- Phase 2: Deconstruction
- Phase 3: Registration flow
- Phase 4: Schematics
- Phase 5: Brand evolution
- Phase 6: Layout explorations
- Phase 6: Layout explorations
- Phase 6: Layout explorations
- Phase 7: Icon illustration
- Phase 6: Layout explorations
- Rejected comp
- Phase 8: Logical markup structure
- Resulting in:
- Phase 9: CSS!
- Floats are everywhere!
- Rest of the process...
- Zen: Golden Mean
- Golden Mean: The Process
- CSS earlier in the process?
- Favelets and Bookmarklets
- Browser Toolbars
- ADVANCED TECHNIQUES
- Double rollovers
- Double rollovers: The concept
- CSS Layout
- Basic Example
- Approach #1: Absolute positioning
- Positioning Context
- Absolute positioning on Wired News
- Absolute positioning on Wired News
- Absolute positioning on Wired News
- Absolute positioning on Wired News
- Absolute positioning:
- Approach #2: Floats
- Floats on Stopdesign
- Floats on Stopdesign
- Breaking out of “float mode”
- Floated CSS layouts have:
- Break it down
- Break it down
- Break it down
- Break it down
- Break it down
- Break it down
- MS header: opposing floats
- MS header: opposing floats
- MS header: opposing floats
- Column structure
- Column structure
- Column structure
- Column structure
- Faux columns
- Faux columns
- Faux columns
- Faux columns
- Components of Main column
- Components of Main column
- Components of Main column
- Components of Main column
- Closing off with the Footer
- Closing off with the Footer
- Sliding Doors
- Sliding Doors, Explained
- Sliding Doors, Explained
- Sliding Doors, Explained
- Sliding Doors, Explained
- Vertical Sliding Doors
- Dynamic Column Structure
- AP workshops page
- AP workshops page
- AP essay page
- AP essay page
- AP events page
- AP events page
- The technique:
- CSS for Adaptive Path’s structure
- Invent your own techniques
- Thank you!