Responsive Web Design Thoughts

Introduction: The What!

What attracts me most to the "responsive" approach to web development is the underlying philosophy which is insanely rationalwith respect tomaximizing overall web usability and efficiency in the many areas of web development: content management, graphic/image design, page layout, styl sheets, programming, etc. It also embraces the ideals of least effort/ maximum output, reuse/repurposing, effective delivery, proper document structure, etc.

At its core, the responsive web design strategy is focused on knowing what device, network connection a person is using, as well as their environment/context when they access your content, and then delivering just what is needed (and no more) to fulfill this request for this person’s circumstance. So it is about adopting a more flexible, device-agnostic approach to designing for the web. Along with this, we need to recognize that the type and volume of content users interact with also needs to adjust as fluidly as the size and design of the site itself.

RWD is Context driven

  • What device/user agent is the person using?
  • What might the device reveal/indicate about the type of content the person is looking for on a site?
  • What the person using the device for? (not likely to be reading a book on a mobile phone)
  • What is the quality/speed of the network the person is using?
  • Powerful wireless network or week 3G phone signal? The latter slows way down when too much is thown at it. (W3C has a media query in the works for determining this, I've been told.)
  • What is the environment the person is in?
  • What might this environment reveal/indicate about the type of content the person is looking for?
  • Is person sitting at a café or on the move, i.e., in an airport?
  • Is the person in a light or dark space?

Short Demonstration: What RWD looks like

Southwest airlines example: site for desktop browser vs site for mobile phone

(Diana's attempt to work with this)

Approaches: Where do you start? Some say:

  • Mobile first: The limitations of these devices can help define what is most important both with regards to design and content
  • Content first: Not all the information is equally valuable for desktop and mobile devices.Web Content Strategies.
  • Progressive enhancement: Start from a basic, working level for all technologies, and then add more advanced functionality for new environments (replaces graceful degradation strategy)

In any event

  • Know youraudience. Who is visiting your site(s) and for what? Not all sites need to be adaptive!
  • Know possible examples of sites and strategies

Ethan Marcotte states that one needs three elements to make a site responsive:

  1. A flexible/fluid grid
  2. Responsive images
  3. Media queries (for determining device/media type, network connection, resolution, setting fonts, application in use, screen or print, orientation, color or B/W, device aspect H/W ratio, in motion?

[Where does the whole issue about content fit in here?? Seems to me like it is a major component to making a site responsive.]

Questions / Issues / Challenges: The How!

  • How does the web design/development lifecycle need to change to incorporate these ideas?
  • Redesign strategies --howdo we actually begin to implement this in our situation?
  • What are some smart (and fairly painless) incremental steps to update existing sites?
  • Should sites still strive to include/develop a “mobile-version”?
  • For an existing site, how might Google Analytics (or some form of site activity analysis) help determine what content gets delivered to what device?
  • Contentissues, what does it take to learn this? [Content Strategy for the Web, Kristina Halvorson]
  • Determining what content do you provide to your users?
  • How do you know what to provide at each % change?
  • As the page gets smaller, different content is shown to the user
  • How do you determine the nature/design/format for that information?
  • Some people wish to browse an entire site from a phones (not the majority, but many younger people may want to).
  • Often times, mobile/tablet designed pages have a subset of the features/design that a desktop site would have, but users may not want to lose the functionality (no Flash on iDevices).
  • Browser Issues
  • How does one deal with the @media issue in IE browsers? (other than telling everyone to use Chrome)
  • What options exist in current frameworks?
  • Wordpress, Drupal, Joomla, etc. Drupal Regions?
  • Larger Footprint and Performance?
  • This design strategy entails having all content available for each media type/device and using/changing the CSS to manipulate what displays on the device.

Resources

There are tools available that will help you test your responsive design across all popular screen resolutions (or devices) from one place.

  • mattkersley.com/responsive – You can use this tool to quickly test your site layout against standard screen widths (or breakpoints). The source code is available on Github and you can thus expand it as per your requirements.
  • quirktools.com/screenfly – This is my favorite tool for two reasons – it supports a much larger number of screen resolutions (including TVs) and second, Screenfly sends proper user agent strings while requesting web pages for different devices. Thus you get the best of both worlds (see notes).
  • responsinator.com – Another nicely-done tool to help you understand how your responsive site will look on the most popular devices in various orientations. It can replicate the iPhone, iPad, Kindle and Android smartphones.

Source:

Other examples/resources

Media queries

The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’

Media features

Width , height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid