The document discusses embracing flexibility on the web unlike the constraints of print. It recommends designing for different screen sizes from widescreen desktops to mobile phones. Elements should resize and simplify for lower bandwidth mobile devices. Non-essential elements should be hidden on smaller screens and interfaces adapted with larger touch targets. The design should detect and respond to mobile features like location.

1. 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”

2. The Ghost of Web The Ghost of Web
Design 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. enter
Responsive
Web Design

4. or better yet,
Fluid Web Design

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. 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. foodsense.is
Desktop > iPhone/Mobile
• Orients to a single column
• Navigation reverts to text only
• 4 buckets stack each other

8. cacaotour.com
Desktop > iPad
• Large image is removed to accommodate
more important elements
• Navigation shifts
• Other home page elements reordered

9. cacaotour.com
Desktop > iPhone/Mobile
• Orients to a single column
• Navigation stacks and is center on
the home screen

10. bostonglobe.com
Desktop > iPad
• 3 columns down to 2, columns more even width
• Navigation shifts
• Ads and other support elements moved

11. bostonglobe.com
Desktop > iPad
• 3 columns down to 2, columns more even width
• Navigation shifts
• Ads and other support elements moved

12. bostonglobe.com
Desktop > iPhone/Mobile
• Orients to a single column
• Navigation changed
• Search feature reduced
• Center column becomes main

13. bostonglobe.com
Desktop > iPhone/Mobile
• Don’t forget the orientation
flip!

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