Responsive Web Design

1,241 views

Published on

A quick start guide to responsive User interface design for cross platform compatibility.

Published in: Design

Responsive Web Design

  1. 1. ResponsiveWeb Design
  2. 2. What is ResponsiveWeb Design?
  3. 3. Devices
  4. 4. DevicesLarge + Medium + Small1600x1200 1200x1024 1024x768
  5. 5. DevicesLarge + Medium + Small800x600 800x480 768x1024
  6. 6. DevicesLarge + Medium + Small640x480 320x480 320x240
  7. 7. Single site for every screen
  8. 8. How it works?
  9. 9. Fixed width for Large & Medium
  10. 10. Fluid width for Small
  11. 11. Using mixed approachFixed + Fluid width
  12. 12. Flexible Images
  13. 13. andMedia Queries
  14. 14. Has anyone done itlike this?
  15. 15. 01Dropmark
  16. 16. 02Microsoft
  17. 17. How can i do it?Where do i start?
  18. 18. Preferable: Bootstraps12 Column Grid
  19. 19. UnderstandLayouts using Grid Structure
  20. 20. Example 1SkillShare
  21. 21. Example 1Skillshare
  22. 22. Example 2GitHub
  23. 23. Example 2GitHub
  24. 24. PrepareContent Prioritisation
  25. 25. Think inModules
  26. 26. Start withMobile
  27. 27. Prepare graphics forRetina Display
  28. 28. Design for Desktop using960px wide Grid
  29. 29. In a nutshellSynopsis● Top preference to a 12 Column Grid● Understand Layouts using Grid Structure● Get your Content Prioritisation right● Think in Modules● Start first with Mobile● Prepare graphics for Retina display● Use 960px wide grid as a default.... Hope this helps! Happy Designing! :)

×