Introducing Responsive Web Design

838 views
768 views

Published on

This was an internal company presentation introducing the concept of responsive web design.

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

No Downloads
Views
Total views
838
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducing Responsive Web Design

  1. 1. The control which designers know in the print medium,and often desire in the web medium, is simply a functionof the limitation of the printed page. We should embracethe fact that the web doesn’t have the same constraints,and design for this flexibility. But first, we must “acceptthe ebb and flow of things.” —John Allsopp, “A Dao of Web Design”
  2. 2. The Ghost of Web The Ghost of WebDesign Past Design Present • Multiple formats and screen sizes• Fixed width sites • Browse anywhere: Home, office,• Desktop only browsing mobile• Design for the fold • Higher overall bandwidths• 56k—Bee-boop...screetch! • User responsiveness and participation
  3. 3. enterResponsiveWeb Design
  4. 4. or better yet,Fluid Web Design
  5. 5. The Basics of Responsive Web Design • Adapting the layout to suit different screen sizes, from widescreen desktops to tiny phones • Resizing images to suit the screen resolution • Serving up lower-bandwidth images to mobile devices • Simplifying page elements for mobile use • Hiding non-essential elements on smaller screens • Providing larger, finger-friendly links and buttons for mobile users • Detecting and responding to mobile features such as geolocation and device orientation.
  6. 6. foodsense.is Desktop > iPad • Side navigation items shift to top for iPad • Tabbed items under photo reduce in size • Recent tweet and other left side elements are removed
  7. 7. foodsense.is Desktop > iPhone/Mobile • Orients to a single column • Navigation reverts to text only • 4 buckets stack each other
  8. 8. cacaotour.com Desktop > iPad • Large image is removed to accommodate more important elements • Navigation shifts • Other home page elements reordered
  9. 9. cacaotour.com Desktop > iPhone/Mobile • Orients to a single column • Navigation stacks and is center on the home screen
  10. 10. bostonglobe.com Desktop > iPad • 3 columns down to 2, columns more even width • Navigation shifts • Ads and other support elements moved
  11. 11. bostonglobe.com Desktop > iPad • 3 columns down to 2, columns more even width • Navigation shifts • Ads and other support elements moved
  12. 12. bostonglobe.com Desktop > iPhone/Mobile • Orients to a single column • Navigation changed • Search feature reduced • Center column becomes main
  13. 13. bostonglobe.com Desktop > iPhone/Mobile • Don’t forget the orientation flip!
  14. 14. work in GRIDS• Start from wireframing stage • Think proportion and hierarchy: What elements should always be larger/bolder/• Helps to keep elements aligned and more attention then others sized correctly for transition into other formats • Helps the developers, speeds up development time through CSS

×