Your SlideShare is downloading. ×
0
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive design

587

Published on

Responsive design summary

Responsive design summary

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
587
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive Design Summary
  • 2. What is Responsive Web Design? • Responsive websites respond to their environment. • These web sites provide optimal experience for their users regardless of access devices.
  • 3. 1. SCOPING Process
  • 4. Context of Use Context is about the environment and conditions of usage, including distractions, multitasking, motion, lighting conditions and poor connectivity
  • 5. Mobile first • To focus on only the most important data and actions in your web application. You have to prioritize. • Consider capabilities offered to developers on Apple’s iPhone or Google’s Android platforms: – precise location information from GPS; – user orientation from a digital compass; – multi-touch input from one or more simultaneous gestures; – device positioning from an accelerometer; and many more.
  • 6. Eg: Use geo location
  • 7. Identify Device-specific Use Cases • Think about what visitors want most from your mobile website and consider how to make it easy for them to access.
  • 8. Simplify Existing Functionality • Make sure your interactions work smoothly on smaller screens and retain their context.
  • 9. Rethink Potentially Awkward Interactions • Some UI choices that make great sense on a desktop simply fall flat on a mobile screen – mouse hovering!
  • 10. 2. WIREFRAMING: GRID STRUCTURES AND LAYOUTS Process
  • 11. Grid structure • Define the grid structure for 3 pages for the screen widths 1024px (Desktop), 768px (iPad portrait), 320px (iPhone portrait) Desktop Tablet Mobile
  • 12. DesktopTabletMobile
  • 13. Navigation Desktop Tablet Mobile
  • 14. http://ignaty.com/ Desktop Tablet Mobile
  • 15. http://ilovedust.com/ Desktop Tablet Mobile
  • 16. http://snatz.com/ Desktop Tablet Mobile
  • 17. https://corporate.target.com/ Desktop Tablet Mobile
  • 18. Listings http://designshack.net/tutorialexamples/responsivegallery/index.html Desktop TabletMobile
  • 19. http://ilovedust.com/ Desktop Tablet Mobile
  • 20. http://ignaty.com/ Desktop TabletMobile
  • 21. Scroller
  • 22. http://snatz.com/ Desktop TabletMobile
  • 23. Footer https://corporate.target.com/ Desktop Tablet Mobile
  • 24. Forms
  • 25. Text • Don’t make users double tap or pinch your content. Instead, increase the font size to at least 16px. • You can also use a line height of 1.5 to allow for breathing room between text on content-rich pages.
  • 26. Buttons • Our fingers are much clumsier than a cursor, so bumping up the spacing between different touch targets will improve user accuracy. And, make those touch targets big! • Our fingertips typically require upwards of 44px to comfortably fit within a touch target so design for that.
  • 27. 3. EXAMPLES Responsive web design
  • 28. http://ilovedust.com/
  • 29. http://snatz.com/
  • 30. bostonglobe.com
  • 31. corporate.target.com
  • 32. RESOURCES Responsive Web Design
  • 33. Resources For designer: • http://webdesign.tutsplus.com/articles/design -theory/designing-for-a-responsive-web/ For developer: • http://alistapart.com/article/responsive-web- design • http://alistapart.com/article/fluidgrids
  • 34. Examples • http://www.mobify.com/blog/70-stunning- responsive-sites-for-your-inspiration/

×