Responsive Webdesign
...
...
Why responsive webdesign?
How we do it (at the moment)
1. Content processing
2. Responsive prototype
3. Visual design
4. Testing
Processing content
• Gather real content
• Identify content types
• Determine importance
• Determine structure & pages
Responsive prototype
• Mobile first
• Focus on content
• Determine importance
• Loose unnecessary bits.
If you don’t need it on mobile you
probably don’t need it on desktop.
Responsive prototype
• Build real responsive layouts
• Test where content breaks
• Device agnostic
• Test on real devices
Responsive prototype
• HTML & CSS
• Reusable
Visual design
• Style tiles
• Refinement
Style Tiles
• Colors
• fonts
• Images
• Interface elements
• Overall mood of a website
Responsive Style Tiles
• Tangible
• Touchable
• HTML & CSS
• Reusable
Responsive Style Tiles
• Focus on typography
• Focus on readability
• Design for touch
Refinement
• Merge style tile and layouts
• Design components
• Design interactions, transitions
Designing in the browser
• Real webfonts
• Real constraints
• Real environment
Testing
• Real devices
• Real environments
• Real resolutions
• Real densities
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Responsive Design Methodology
Upcoming SlideShare
Loading in …5
×

Responsive Design Methodology

3,422 views

Published on

Responsive design is becoming increasingly important in modern (web)design. What's the best workflow to create a succesful online platform? We're not sure! But this is the one we use :)

Published in: Business, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,422
On SlideShare
0
From Embeds
0
Number of Embeds
993
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Responsive Design Methodology

  1. 1. Responsive Webdesign ... ...
  2. 2. Why responsive webdesign?
  3. 3. How we do it (at the moment)
  4. 4. 1. Content processing 2. Responsive prototype 3. Visual design 4. Testing
  5. 5. Processing content • Gather real content • Identify content types • Determine importance • Determine structure & pages
  6. 6. Responsive prototype • Mobile first • Focus on content • Determine importance • Loose unnecessary bits.
  7. 7. If you don’t need it on mobile you probably don’t need it on desktop.
  8. 8. Responsive prototype • Build real responsive layouts • Test where content breaks • Device agnostic • Test on real devices
  9. 9. Responsive prototype • HTML & CSS • Reusable
  10. 10. Visual design • Style tiles • Refinement
  11. 11. Style Tiles • Colors • fonts • Images • Interface elements • Overall mood of a website
  12. 12. Responsive Style Tiles • Tangible • Touchable • HTML & CSS • Reusable
  13. 13. Responsive Style Tiles • Focus on typography • Focus on readability • Design for touch
  14. 14. Refinement • Merge style tile and layouts • Design components • Design interactions, transitions
  15. 15. Designing in the browser • Real webfonts • Real constraints • Real environment
  16. 16. Testing • Real devices • Real environments • Real resolutions • Real densities

×