Responsive design
-
Upload
hock-leng-puah -
Category
Technology
-
view
499 -
download
2
description
Transcript of Responsive design
Responsive Design
Summary
What is Responsive Web Design?
• Responsive websites respond to their environment.
• These web sites provide optimal experience for their users regardless of access devices.
1. SCOPINGProcess
Context of Use
Context is about the environment and conditions of usage, including distractions, multitasking, motion, lighting conditions and poor connectivity
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.
Eg: Use geo location
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.
Simplify Existing Functionality
• Make sure your interactions work smoothly on smaller screens and retain their context.
Rethink Potentially Awkward Interactions
• Some UI choices that make great sense on a desktop simply fall flat on a mobile screen – mouse hovering!
2. WIREFRAMING: GRID STRUCTURES AND LAYOUTS
Process
Grid structure
• Define the grid structure for 3 pages for the screen widths 1024px (Desktop), 768px (iPad portrait), 320px (iPhone portrait)
Desktop Tablet Mobile
DesktopTabletMobile
Navigation
Desktop Tablet Mobile
http://ignaty.com/
Desktop
Tablet
Mobile
http://ilovedust.com/
Desktop
Tablet
Mobile
http://snatz.com/
Desktop
Tablet
Mobile
https://corporate.target.com/
Desktop
Tablet
Mobile
Listings
http://designshack.net/tutorialexamples/responsivegallery/index.html
Desktop
TabletMobile
http://ilovedust.com/
Desktop
Tablet
Mobile
http://ignaty.com/
Desktop
TabletMobile
Scroller
http://snatz.com/
Desktop
TabletMobile
Footer
https://corporate.target.com/
Desktop
Tablet
Mobile
Forms
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.
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.
3. EXAMPLESResponsive web design
http://ilovedust.com/
http://snatz.com/
bostonglobe.com
corporate.target.com
RESOURCESResponsive Web Design
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
Examples
• http://www.mobify.com/blog/70-stunning-responsive-sites-for-your-inspiration/