08 Responsive Web Design

Posted on by

Week 8
10/22

Responsive Design. The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. Activity: Use media queries to target different devices.

Homework

1) For the class: Redesign the midterm to be responsive to each of these devices. 2) For the final: Develop a proposal for your final project. Read chapter 12. Due: The following week.

Materials

Additional materials for this unit can be found by following these links:

Goals

The goals of this unit are to:

  • Incorporate media queries into web design.
  • To design around the challenges that media queries create when layout out a page across dissimilar devices.

Outcomes

At the end of this unit, students will have:

  • Been prepared for a much more expansive web of the future
  • Incorporated media queries as the basis for future-proofing their own designs.
  • used the various layout strategies that CSS offers in conjunction with media queries.
  • Applied these skills to their Portfolio site.

Step-by-Step

15 Review homework and answer questions.
40 media queries
20 practice: media queries
10 break
70 Hands on in class: making the portfolio responsive

Talking Points

Topics covered in the reading:

Chapter 12: Style Sheets for Mobile to Desktop

  1. Mobile Strategies and Considerations 328
  2. Understanding and Implementing Media Queries 333
  3. Building a Page that Adapts with Media Queries 340

Current Practices

Responsive Web Design is all over the web. In its short existence, no big site has not been redesigned to take advantage of it, and many do it very well:

  • 39 Box Shadows for Chrome
  • This Is Responsive
  • Mule Design Holiday Party
  • Conservation Community
  • Caava Design
  • Dangers of Fracking
  • Frank Chimero
  • Blood, the Branding Agency
  • Women and Tech
  • Jeremy Holmes Studio
  • Adobe HTML
  • Disney
  • Edita’s Casting
  • Rich Brown
  • Etch

    News and External Resources

    Inspirational Links to help you explore in preparation for the final.

    1. Smashing Magazine’s Mobile Content Strategy article.
    2. Google’s Friendly Mobile Test. Does your site pass?
    3. Google’s Page Speed Test. This test (and recommendations on how to fix the problems) are a great way to make sure your site is as good as it can be.

    Definitions

    These are the terms that participants should be familiar with during this unit:

    Responsive Web Design article from Wikipedia

    Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).[1][2][3]

    Elements of Responsive Web Design

    A site designed with RWD[1][4] uses CSS3 media queries[3][5][6], an extension of the @media rule[7], to adapt the layout to the viewing environment—along with fluid proportion-based grids[8] and flexible images:[9][10][11].

    • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
    • The fluid grid concept calls for page element sizing to be in relative units like percentages or EMs, rather than absolute units like pixels or points.[8]
    • Flexible images are also sized in relative units, such as to prevent them from displaying outside their containing element.[9]

    Related Concepts

    Progressive Enhancement vs. Graceful Degradation

    “Progressive Enhancement” and “Graceful Degradation” (strategies for when a new site design is being considered) are related concepts that predated RWD: scripting (and required host features) are never a given and some browsers of basic or older mobile phones do not understand media queries, so the recommended practice has always been to create a basic web site and then enhance it—rather than try “graceful degradation” to make a complex, heavy site work for the most basic browsers.[12][13][14][15].

    Confusion and Issues with Unobtrusive JavaScript

    Though, in general and particularly with regard to scripting as style sheets are inherently graceful in their degradation, progressive enhancement is preferred over graceful degradation, the strategies are not mutually exclusive. The term “Unobtrusive JavaScript” describes the use of progressive enhancement for all occasions (for example, intrinsic event handler attributes are seen as “obtrusive”), but many contexts (particularly mobile where scripted enhancements must be simple and lightweight and need to initialize quickly) call for an intelligent mix of the two. Some operations (e.g. attaching a load listener) may not need to be “unobtrusive” and may be made more slower and more complicated for no good reason.

    Browser Sniffing vs. Feature Detection

    Browser detection and mobile device detection are completely unreliable (see Browser sniffing) ways to determine whether Javascript and certain HTML and CSS features are supported [16]. Feature detection and testing are the preferred methods and such cross-browser scripting techniques can be used to effect progressive enhancement. A JavaScript library is not required to use, and may in fact inhibit, feature detection and testing. The typical library attempts to detect (and correct as they see it) a wide range of features, adding enough additional script to render other time and space-saving measures moot (i.e. documents can end up taking longer to download and initialize, despite original good intentions).

    “Mobile First” Layout and Alternatives

    “Mobile First” refers to layouts that are optimized for very small screens (which is unlikely to be optimal for most mobile devices in use today) and then enhanced for larger screens with media queries (and sometimes scripting). Traditionally, Websites have been written for the desktop first and then slimmed down for smaller screens. The reasons for this include the standard “handheld” media type, which is used to override rules that are less than ideal (e.g. large background graphics, multi-column layouts) for very small screens. Media queries came several years later and are not supported by IE 8 and under.

    Conditional Comments

    Conditional Comments may be used to turn “Mobile First” layouts into something more appropriate for legacy IE versions and modes (8 and under and equivalent compatibility modes). This is far preferable to trying to simulate media queries with script as layout should not rely on scripting (or the features required for such a simulation). However, there is a problem with this approach as non-IE browsers that do not support media queries will render the “mobile” layout.

    Example:

    
<link type="text/css" rel="stylesheet" href="/css/handheld.css" media="all">

<!--[if lt IE 9]>

<link rel="stylesheet" type="text/css" href="/css/desktop.css" media="screen">

<![endif]-->

<link type="text/css" rel="stylesheet" href="/css/desktop.css" media="screen and (min-device-width:40em)">

    Handheld Media Type

    Many older and lesser mobile devices do not support media queries, but a significant number support “handheld” media style sheets (and have since the early part of the century), which eliminates the need to design for “Mobile First” and then add additional CSS for legacy IE versions.

    Example:

    
<link type="text/css" rel="stylesheet" href="/css/desktop.css" media="all">

<link type="text/css" rel="stylesheet" href="/css/handheld.css" media="screen and (max-device-width:40em)">

<link type="text/css" rel="stylesheet" media="handheld" href="/css/handheld.css">

    Challenges, and Other Approaches

    Luke Wroblewski has summarized some of the RWD and mobile design challenges, and created a catalog of multi-device layout patterns.[17][18][19][20] He suggests that, compared with a simple RWD approach, Device Experience or RESS (Responsive Web Design with Server Side Components) approaches can provide a user experience that is better optimized for mobile devices.[19] Server-side implementation of dynamic stylesheet languages like Sass can be part of such an approach. Unfortunately, such techniques are hobbled by server-side browser sniffing.

    One problem for RWD is that banner advertisements and videos are not fluid.[21] However search advertising and (banner) display advertising support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices. Different landing page URLs can be used for different platforms,[22] or Javascript can be used to display different ad variants on a page.[23][18] Unfortunately, this approach requires browser sniffing at some point.

    History

    Ethan Marcotte coined the term Responsive Web Design (RWD) in his article in A List Apart.[1] He describes the theory and practice of responsive web design in his brief 2011 book on the subject.[24] Responsive Design was listed as #2 in Top Web Design Trends for 2012 by .net magazine[25] (Progressive Enhancement was #1). They also listed 20 of Ethan Marcotte’s favorite responsive sites.[2]

    External links

    References

    1. ^ a b c Marcotte, Ethan (May 25, 2010). “Responsive Web Design”. A List Apart. http://www.alistapart.com/articles/responsive-web-design/. 
    2. ^ a b “Ethan Marcotte’s 20 favourite responsive sites”. .net magazine. October 11, 2011. http://www.netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites. 
    3. ^ a b Gillenwater, Zoe Mickley (Dec. 15, 2010). “Examples of flexible layouts with CSS3 media queries”. http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/. 
    4. ^ Pettit, Zoe Nick (Aug. 8, 2012). “Beginner’s Guide to Responsive Web Design”. TeamTreehouse.com blog. http://teamtreehouse.com/blog/beginners-guide-to-responsive-web-design. 
    5. ^ Gillenwater, Zoe Mickley (Oct. 21, 2011). “Crafting quality media queries”. http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/. 
    6. ^ “Responsive design—harnessing the power of media queries”. Google Webmaster Central. Apr. 30, 2012. http://googlewebmastercentral.blogspot.jp/2012/04/responsive-design-harnessing-power-of.html. 
    7. ^ W3C @media rule
    8. ^ a b Marcotte, Ethan (March 3, 2009). “Fluid Grids”. A List Apart. http://www.alistapart.com/articles/fluidgrids/. 
    9. ^ a b Marcotte, Ethan (June 7, 2011). “Fluid images”. A List Apart. http://www.alistapart.com/articles/fluid-images/. 
    10. ^ “Adaptive Images”. http://adaptive-images.com/. 
    11. ^ Jacobs, Denise (August 23, 2011). “21 top tools for responsive web design”. .net Magazine. http://www.netmagazine.com/features/21-top-tools-responsive-web-design. 
    12. ^ Wroblewski, Luke (November 3, 2009). “Mobile First”. http://www.lukew.com/ff/entry.asp?933. 
    13. ^ Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. ISBN 978-0-596-80778-8. 
    14. ^ “Graceful degradation versus progressive enhancement”. February 3, 2009. http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/. 
    15. ^ Designing with Progressive Enhancement. March 1, 2010. ISBN 978-0-321-65888-3. 
    16. ^ http://jibbering.com/faq/notes/detect-browser/
    17. ^ Wroblewski, Luke (May 17, 2011). “Mobilism: jQuery Mobile”. http://www.lukew.com/ff/entry.asp?1330. 
    18. ^ a b Wroblewski, Luke (February 6, 2012). “Rolling Up Our Responsive Sleeves”. http://www.lukew.com/ff/entry.asp?1494. 
    19. ^ a b Wroblewski, Luke (February 29, 2012). “Responsive Design … or RESS”. http://www.lukew.com/ff/entry.asp?1509. 
    20. ^ Wroblewski, Luke (March 14, 2012). “Multi-Device Layout Patterns”. http://www.lukew.com/ff/entry.asp?1514. 
    21. ^ Snyder, Matthew; Koren, Etai (Apr. 30, 2012). “The state of responsive advertising: the publishers’ perspective”. .net Magazine. http://www.netmagazine.com/features/state-responsive-advertising-publishers-perspective. 
    22. ^ Google AdWords Targeting (Device Platform Targeting)
    23. ^ JavaScript and Responsive Web Design Google Developers
    24. ^ Marcotte, Ethan (2011). Responsive Web Design. p. 143. ISBN 978-0-9844425-7-7. http://www.abookapart.com/products/responsive-web-design. 
    25. ^ “15 top web design and development trends for 2012”. .net magazine. January 9, 2012. http://www.netmagazine.com/features/15-top-web-design-and-development-trends-2012.