Responsive design
-
Upload
hock-leng-puah -
Category
Technology
-
view
499 -
download
2
description
Transcript of Responsive design
![Page 1: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/1.jpg)
Responsive Design
Summary
![Page 2: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/2.jpg)
What is Responsive Web Design?
• Responsive websites respond to their environment.
• These web sites provide optimal experience for their users regardless of access devices.
![Page 3: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/3.jpg)
1. SCOPINGProcess
![Page 4: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/4.jpg)
Context of Use
Context is about the environment and conditions of usage, including distractions, multitasking, motion, lighting conditions and poor connectivity
![Page 5: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/5.jpg)
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.
![Page 6: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/6.jpg)
Eg: Use geo location
![Page 7: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/7.jpg)
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.
![Page 8: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/8.jpg)
Simplify Existing Functionality
• Make sure your interactions work smoothly on smaller screens and retain their context.
![Page 9: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/9.jpg)
Rethink Potentially Awkward Interactions
• Some UI choices that make great sense on a desktop simply fall flat on a mobile screen – mouse hovering!
![Page 10: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/10.jpg)
2. WIREFRAMING: GRID STRUCTURES AND LAYOUTS
Process
![Page 11: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/11.jpg)
Grid structure
• Define the grid structure for 3 pages for the screen widths 1024px (Desktop), 768px (iPad portrait), 320px (iPhone portrait)
Desktop Tablet Mobile
![Page 12: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/12.jpg)
DesktopTabletMobile
![Page 13: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/13.jpg)
Navigation
Desktop Tablet Mobile
![Page 14: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/14.jpg)
http://ignaty.com/
Desktop
Tablet
Mobile
![Page 15: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/15.jpg)
http://ilovedust.com/
Desktop
Tablet
Mobile
![Page 16: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/16.jpg)
http://snatz.com/
Desktop
Tablet
Mobile
![Page 17: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/17.jpg)
https://corporate.target.com/
Desktop
Tablet
Mobile
![Page 18: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/18.jpg)
Listings
http://designshack.net/tutorialexamples/responsivegallery/index.html
Desktop
TabletMobile
![Page 19: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/19.jpg)
http://ilovedust.com/
Desktop
Tablet
Mobile
![Page 20: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/20.jpg)
http://ignaty.com/
Desktop
TabletMobile
![Page 21: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/21.jpg)
Scroller
![Page 22: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/22.jpg)
http://snatz.com/
Desktop
TabletMobile
![Page 23: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/23.jpg)
Footer
https://corporate.target.com/
Desktop
Tablet
Mobile
![Page 24: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/24.jpg)
Forms
![Page 25: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/25.jpg)
![Page 26: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/26.jpg)
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.
![Page 27: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/27.jpg)
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.
![Page 28: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/28.jpg)
3. EXAMPLESResponsive web design
![Page 29: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/29.jpg)
http://ilovedust.com/
![Page 30: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/30.jpg)
http://snatz.com/
![Page 31: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/31.jpg)
bostonglobe.com
![Page 32: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/32.jpg)
corporate.target.com
![Page 33: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/33.jpg)
RESOURCESResponsive Web Design
![Page 34: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/34.jpg)
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
![Page 35: Responsive design](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c7ceca4a79590b498b4607/html5/thumbnails/35.jpg)
Examples
• http://www.mobify.com/blog/70-stunning-responsive-sites-for-your-inspiration/