Responsive Web Design
This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Table of Contents
IntroductionBen describes a moment that changed his life. Receiving his first iPhone and coming to the realization the web is not fixed width. - Spark Box: https://seesparkbox.com - Download the course repository: https://github.com/sparkbox/Build-Responsively-Workshop
Part 1: Responsive Web Design (RWD) 101
A Fluid FoundationThe 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 SystemModern 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 ContentOnce 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 QueriesWhen 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 ConsiderationsA 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 ProcessIt’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 PrototypeA 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 markup
Style PrototypeStyle 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 StructureApplying 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 StylesPractical 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 QueriesAn em-based approach to media queries allows for a more proportional measurement and layout that adjust based on font-size.
RWD Patterns: NavigationResponsive 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 ImagesDesigning 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 LayoutsOff-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 FluidResponsive 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.comBen 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 ImagesOne 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 TablesRetrofitting 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 QueriesMedia 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 InteractionAnswering 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
Part 6: Lessons Learned
PricingUnderstanding 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.
PrioritizationPrioritizing 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 ExperimentationYou 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.