Upload
glvsav37
View
1.017
Download
2
Embed Size (px)
DESCRIPTION
This was an internal company presentation introducing the concept of responsive web design.
Citation preview
The control which designers know in the print medium,
and often desire in the web medium, is simply a function
of the limitation of the printed page. We should embrace
the fact that the web doesn’t have the same constraints,
and design for this flexibility. But first, we must “accept
the ebb and flow of things.”
—John Allsopp, “A Dao of Web Design”
The Ghost of Web Design Past• Fixed width sites
• Desktop only browsing
• Design for the fold
• 56k—Bee-boop...screetch!
The Ghost of Web Design Present• Multiple formats and screen sizes
• Browse anywhere: Home, office, mobile
• Higher overall bandwidths
• User responsiveness and participation
ResponsiveWeb Design
enter
Fluid Web Design
or better yet,
• 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.
The Basics of Responsive Web Design
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
foodsense.is
Desktop > iPhone/Mobile
• Orients to a single column
• Navigation reverts to text only
• 4 buckets stack each other
cacaotour.com
Desktop > iPad
• Large image is removed to accommodate more important elements
• Navigation shifts
• Other home page elements reordered
Desktop > iPhone/Mobile
• Orients to a single column
• Navigation stacks and is center on the home screen
cacaotour.com
bostonglobe.com
Desktop > iPad
• 3 columns down to 2, columns more even width
• Navigation shifts
• Ads and other support elements moved
bostonglobe.com
Desktop > iPad
• 3 columns down to 2, columns more even width
• Navigation shifts
• Ads and other support elements moved
bostonglobe.com
Desktop > iPhone/Mobile
• Orients to a single column
• Navigation changed
• Search feature reduced
• Center column becomes main
bostonglobe.com
Desktop > iPhone/Mobile
• Don’t forget the orientation flip!
work in GRIDS• Start from wireframing stage • Think proportion and hierarchy: What
elements should always be larger/bolder/more attention then others
• Helps the developers, speeds up development time through CSS
• Helps to keep elements aligned and sized correctly for transition into other formats