• Save
Responsive Design Methodology
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design Methodology

on

  • 2,347 views

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 :)

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 :)

Statistics

Views

Total Views
2,347
Views on SlideShare
1,373
Embed Views
974

Actions

Likes
4
Downloads
0
Comments
0

8 Embeds 974

http://wijs.be 932
http://cloud.feedly.com 27
http://www.schuirink.net 5
http://digg.com 3
http://www.nieuws.be 2
http://feeds.feedburner.com 2
https://twitter.com 2
http://reader.aol.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Methodology Presentation Transcript

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