This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Table of Contents
Introduction
Part 1: Responsive Web Design (RWD) 101
A Fluid Foundation
The penetration of Laptop/Desktop ownership is the same today as it was in 2007. By the end of 2013, it’s predicted more people will be browsing the web on mobile devices. Responsive web design addresses this trend. - Read: Ethan Marcotte’s article on Responsive Web Design: http://alistapart.com A fluid foundation honors proportions by creating percentage-based grids instead of fixed-width grids. Percentages are equal to the target divided by a context. Code example demonstrating the difference between a fixed-width layout and a fluid grid system.IE Rounding and the Semantic Grid System
Modern web browsers are getting better at handling percentages like 33.3%. Older versions of Internet Explorer tend to round up and cause columns to wrap unnaturally. Understanding rounding techniques helps create more consistent fluid designs. Some grid systems begin to “lie” to you semantically as the width of the browser gets smaller and smaller. Semantic grid systems always describe the layout accurately.Flexible Content
Once we have a grid which is based on proportions, the content must also respond. Adding responsive CSS to elements like images can quickly create responsive content. Code example demonstrating responsive image content within the flexible grid system. Responsive video can utilize the same technique as responsive images. However, iframes can introduce some issues. Using intrinsic ratios, a responsive container can be built to enable a more responsive iframe.Media Queries
When the content and the design are no longer working in harmony, a larger shift in layout may be necessary. Media queries give developers the flexibility to add/override CSS based on media type or media feature. Two approaches for applying media queries are additive and subtractive. With additive, you design for the smallest resolution and add media queries for larger displays. Subtractive begins with the largest displays and add media queries for the smaller viewports. Both additive CSS versus subtractive CSS have pros and cons. Code example using media queries and the media query bookmarklet.Other RWD Considerations
A fluid foundation, flexible content, and media queries are all heavily driven by CSS and the building blocks for any responsive web design. There are other considerations, however. These include touch/target areas, hover states, contrast, and readability.
Part 2: RWD Process
A Myth about Process
It’s often thought each client deliverable needs to look more like a final end-product than the previous one. What’s better is to deliver organized and prioritized content that functions across multiple resolutions. Deliverables are better categorized as Research, Content, Priority, Style, and Functional. Today, what is often a functional deliverable should be shifted into the priority and style categories.Content Priority Prototype
A content priority prototype replaces the traditional wireframe. It’s created in HTML and uses as much real content as possible. Markup is generated by the content/UX people. This layer of semantics that’s often lost in design-driven markupStyle Prototype
Style prototypes are very fast to build, use accurate web typography and easily show web interactions. Clients preview these prototypes in a browser of their choice. This helps set style expectations for legacy browser support. Priority becomes critical with small displays. The priority becomes critical with small displays.
Part 3: Applying RWD Styles
The Basic Structure
Applying responsive style begins with the viewport <meta> tag. From there style sheets are loaded ranging from a base set of styles (base.css), to media queries (mq.css), to legacy browser support (nomq.css).CSS files (using Sass)
Example of a base.css file that’s using the Sass CSS preprocessor. It contains viewport information, Sass partials for a CSS reset file, smallest display resolution, and a media query for the print CSS. MQ.css begins to load the styles based on the width of the device. Sass partials can be used to dynamically construct mq.css. NOMQ.css handles older versions of Internet Explorer that don’t support media queries. They include all styling rules without media query wrappers. Using a CSS preprocessor like Sass makes maintaining multiple CSS files easier.Implementing RWD Styles
Practical example of this structure on Ben Callahan’s website. Looking at the example files included in the course repository, the CSS structure has been recreated without the use of Sass or any other CSS preprocessor.Using EM-Based Media Queries
An em-based approach to media queries allows for a more proportional measurement and layout that adjust based on font-size.RWD Patterns: Navigation
Responsive web design still poses many challenges including complex navigation and tabular data. Looking at how others are handling these challenges begins to outline emerging patterns in responsive design. First, look at navigation.RWD Patterns: Tables and Images
Designing responsive table is often driven by the type of data you are representing. Techniques include scrolling columns, repositioning headers, and toggling column visibility. Images add both responsive display and bandwidth challenges. There are varying techniques but not a one-size-fits-all solution. The HTML element may be the answer. Until supported, using a polyfill like Picturefill or other solution is suggested. Images add both responsive display and bandwidth challenges. There are varying techniques but not a one-size-fits-all solution. The HTML <picture> element may be the answer. Until supported, using a polyfill like Picturefill or other solution is suggested.RWD Patterns: Off-Canvas Layouts
Off-canvas layouts use the space outside a browser’s viewport to hide secondary elements until needed. Animation help users understand where the content originate from as it transitions on and off screen A look at the code of an off-canvas implementation.
Part 4: RWD Retrofitting
From Fixed to Fluid
Responsive web design doesn’t mean starting from scratch with a web presence. Retrofitting can be a fast, low-risk approach for creating better responsive experiences for existing websites. - Techniques: http://github.com/bencallahan/rwd-retrofitting/Retrofitting Twitter.com
Ben gives a demonstration of retrofitting Twitter.com. Using the Chrome developer tool, Ben adds some responsiveness to the design. Adding responsive design to Twitter.com was done using the simple equation: target / context = result.Retrofitting Images
One of the biggest issues with images can be content management systems that write width/height attributes or inline styles. Finding ways to override this functionality is the key to retrofitting images. Be sure to verify browser compatibility with any inline image style techniques. Background images have responsive considerations too. One of the main techniques is to prevent the loading or requesting of backgrounds.Retrofitting Tables
Retrofitting tables can be extremely difficult, but possible. Ben demonstrates how to style table headers and cells to add a responsive flow to an otherwise ridged design.Retrofitting Media Queries
Media queries in responsive designs typically start typically use a smallest-resolution-first approach. When retrofitting, the approach of small resolution, capped is often applied. This uses the original CSS for the larger viewports and a mobile-first CSS for the small viewports.Client Interaction
Answering some simple questions can help determine if a retrofitting project is right. Remember that retrofitting is a step in the right direction, but not a final solution. More fun with retrofitting.
Part 5: JS to the Rescue
Media Queries in JavaScript
Use polyfills to help add support for media queries in legacy browsers - respond.js: http://github.com/scottjehl/Respond - css3-mediaqueries.js: http://code.google.com/p/css3-mediaqueries-js/ The matchMedia method in the CSS Object Model can be helpful to change the functionality of a website based on the width. Like media queries, polyfills may be required to add support. - matchMedia.js: https://github.com/paulirish/matchMedia.js/ - Harvey: http://github.com/harvesthq/harvey/ - mediaCheck: http://github.com/sparkbox/mediaCheck/Conditional Loading
Loading content conditionally is a technique to change the amount of content loading for different resolutions. Determining what a user wants to see based on their resolution is not always a good practice though and should be carefully considered. Earlier, we implemented responsive images using Picturefill. This is an example of JavaScript rescuing responsive design. eCSSential is another technique that will only load the necessary CSS. FitText is a jQuery plugin that inflates your web type to fill the width of a parent element. Responsive video can easily be achieved with FitVids.js.
Part 6: Lessons Learned
Pricing
Understanding the cost associated with responsive web design is crucial to accurately setting client expectations and budgets. Ben gives some helpful pricing percentages based on his experience.Prioritization
Prioritizing content and functionality leads to better responsive design. Prioritizing doesn’t mean restricting. It’s putting the most important mobile content where it’s needed.Testing, Consistency, and Experimentation
You must test on real devices. You should also be developing in a Webkit browser since this makes up a large portion of the market share. Consistent experiences across different resolutions will lead to added user familiarity. Get into the browser quickly because that’s where the experimentation occurs.