Responsive Design
Web design in the post-PSD era
Created by Natalie MacLees / @nataliemac
1959
“Talking about jazz is like dancing about architecture”
Thelonious Monk
?
Responsive Architecture
“Anything that’s fixed and unresponsive isn’t web design anymore…Responsive Web Design is web design, done right.”
Andrew Clarke
There are no experts
Tools
What is responsive?
Devices
“One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using…”
“…However, it does not mean that exactly the same information is available in exactly the same representation across all devices.”
W3C
Mobile First
Progressive Enhancement
Responsive Workflow
Three Phases
- Content, prioritization, and structure
- Develop-y design work
- Design-y development work
1. Identify tasks
2. Task-specific content
3. Group into pages
4. Priority Structure
5. Typography
6. Color Texture
7. Element Design
by Dan Mall
by Dan Mall
by Dan Mall
8. Module Design
9. Layouts
10. Interactivity
11. Review Refine
Challenges
Clients