#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icon
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working?
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Apps
- How do I need to configure PhoneGap/Cordova?

# Going Responsive

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. The framework has a number of responsive widgets: responsive grids, reflow tables and column chooser tables, and sliding panels.

## RWD Basics

RWD has three key elements:

- CSS media queries, used to target styles to specific device characteristics such as screen width breakpoint or resolution.
- A fluid grid, that specifies elements and widgets in flexible units with the goal of making them flow to fill their containers.
- Flexible images and media, are also sized in relative units so they re-size to fit within their containers.

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 greater widths, media queries are used to float both containers to create a two column layout to take better advantage of the wider screen.

Since the content inside each container is designed to re-flow to fit its 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 greater widths.

## Progressive Enhancement

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.

## Responsive & Responsible

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 greater 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 `picture`element 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).

## Responsive in jQuery Mobile

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:

- Create a style override stylesheet and include it after the jQuery Mobile framework stylesheet. This will hold all your custom styles, tweaks to the default widgets and media queries.
- Start by writing the styles you want to see at the narrowest screen width (i.e. "mobile first"). These should be outside a media query. This mobile-first approach is efficient because you can lay down the core typography, colors and styles for mobile knowing that these tend to also be used for wider breakpoints.
- Choose the breakpoints based on your content, not a specific device. Since there are devices of every imaginable width, it's smarter to choose breakpoints based on how your content looks in your design system. As you re-size the window to greater widths, identify where your content hits a point where it could adapt to take advantage of a wider width.
- Write media queries' widths in ems, not pixels. This ensures the layout will adapt to font size changes in addition to screen widths. To calculate the width in ems, divide the target breakpoint in pixels (320px) by 16px (the default font size) to get the em-based width (20em).
- Use `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.
- To override framework styles only for smaller screens, use a `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.

## Putting it together

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, tweaks 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 }
    }