Responsive Web Design

Ben 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

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.

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.

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.

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.

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.

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.

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 markup

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.

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).

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.

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.

An em-based approach to media queries allows for a more proportional measurement and layout that adjust based on font-size.

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.

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.

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.

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/

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.

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

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.

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.

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/

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.

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.

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.

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.

The Responsive Dip is a play on the Stages of Competence, but focused toward responsive design. It starts by having a responsive mindset. Web designers and developers must move beyond the technique and move the industry forward.