Responsive web design (RWD) is a design and technical approach that aims to adapt the layout and interaction of a site or app to work optimally across a wide range of device resolutions, screen densities and interaction modes with the same underlying codebase.
RWD has three key elements:
By creating all screen elements to be fluid and flexible, it allows the media queries to focus primarily on controlling layout rules for containers; the modules inside simply re-size to fit their containers.
A simple responsive example may be two stacked containers, each with flexible content or widgets inside. At wider widths, media queries are used to float both containers to create a two column layout to take better advantage of the wider screen width.
Since the content inside each container is designed to re-flow to fit it's parent, the media queries can focus just on the rules for making the columns stack or float, and to override or add styles only needed at wider widths.
In addition to these three core RWD principles, we advocate following progressive enhancement (PE) practices. This means always starting with semantic HTML which will work on any device, then unobtrusively layering in advanced CSS and JS only for capable browsers. This provides a solid foundation for the device-level optimizations that RWD provides and is how the jQuery Mobile library is built.
When working with RWD, it's very important to consider performance to ensure that you're not simply taking a heavy desktop site and shrinking it down to mobile screens. We recommend following a "mobile-first" approach to keep development focused on reducing bandwidth, server requests and optimizing source order.
When building a page, start by creating the lightest and most semantic HTML possible. Think about how the source order of the markup would work if you didn't have CSS or JS. Do not include code that is only needed for larger viewports and hide it at smaller widths. Instead, use AJAX to conditionally load these assets when larger screens are detected via JS.
When writing CSS for a responsive site or app, it's usually most efficient to write all the core typography and basic style elements outside of a media query to form the styles for the smallest devices, such as phones. This is a good approach because the majority of these core styles are usually also shared at wider widths, albeit in a different layout and it leverages the cascading power of CSS. Build up breakpoints using multiple min-width media queries to layer in additional style rules that should only apply above a certain screen width.
For images in your pages, we recommend starting with images sized for mobile screens in the markup. It doesn't make sense to serve a 1,000 pixel wide photo to a smartphone with a 480 pixel max resolution because this is a waste of bandwidth and memory. Instead, include an image targeted for a mobile size. Add a width: 100%; style rule to make images scale to the page or container, but not larger because this would look blurry.
For larger or higher resolution screens, there is a wide range of JS-based techniques and services to conditionally load a higher quality image. The forthcoming pictureelement will address the need to handle multiple image sources natively in HTML and can be used today with a polyfill script.
Always look for ways to limit the number of server requests on a page by concatenating files into a single request and always use minification and compression (gzip).
jQuery Mobile has always been designed to work within a responsive context and our docs and forms had a few responsive elements from the very start. All the widgets are built to be 100% flexible in width to fit easily inside any responsive layout system you choose to build.
Here is a checklist of RWD tips to keep in mind:
min-width breakpoints that build on top of the mobile styles. The first breakpoint applies layout adjustments on top of the standard mobile styles so these can be fairly lightweight. Additional min-width breakpoints can be added for even wider screens that each build on the previous breakpoint styles.max-width breakpoint instead. This allows you to constrain your style overrides to only apply below a certain screen width. Above this width, all the normal styles will apply so this is good for certain types of overrides.Here is a simple skeleton of a mobile-first stylesheet that starts with mobile-first styles, then builds up a responsive layout by adding two breakpoints:
/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
/* Stack the two content containers */
.main,
.sidebar { display:block; width:100%; }
/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
.main { float: left; width:60%; }
.sidebar { float: left; width:40%; }
}
/* Second breakpoint at 800px */
/* Adjusts column proportions, tweak base H1 */
@media all and (min-width: 50em){
.main { width:70%; }
.sidebar { width:30%; }
/* You can also tweak any other styles in a breakpoint */
H1 { color: blue; font-size:1.2em }
}