The jQuery Mobile framework is a JavaScript library that you can use to easily create a mobile version of a website, converting existing web pages into touch-friendly websites and applications. The jQuery Mobile framework is arguably going to change the way mobile applications are accessed and distributed on mobile and tablet devices by allowing users to connect directly to touch-friendly applications through a web browser. There are other options for mobile development, but the difference with the approach that jQuery Mobile is taking is that they are targeting a large variety of mobile platforms.

The smartphone and tablet device adoption rate is skyrocketing, and the jQuery Mobile framework is helping developers meet the growing demand for mobile web experiences. Providing mobile web experiences requires a new set of skills from web developers and designers. In 2010, Nielsen projected that one in two Americans would have a smartphone (see Resources for a link to the blog), which is a huge increase compared to just one in 10 in 2008, and in June 2011, AMI-Partners forecasted that "tablet adoption among businesses with between 1 and 1,000 employees will grow by 1,000 percent by 2015" (see Resources for a link to the full forecast). With these increases in adoption rate, there will be a strong demand for web developers and designers who can create mobile web experiences. The jQuery Mobile framework is a great solution for creating mobile web experiences, as it increases the speed in which mobile websites can be produced and supports a wide variety of mobile platforms.

Pitfalls and solutions

The jQuery Mobile framework is a great solution for creating a mobile or tablet version of your web pages, but it completely relies on the content of a website to be appended with certain data-role attributes. In rare cases, it may not be possible to append these attributes to your HTML markup and can require you to create a separate mobile website. However, this article shows you how, with a little foresight and planning, it is possible to use a combination of the jQuery Mobile framework and Cascading Style Sheets version 3 (CSS3) media queries to create a responsive design and determine how the layout reacts to a user's device. The purpose is to create a single website that can dynamically respond to users' devices by displaying an appropriate layout for their screen resolution.

A responsive design is one that responds to a user's device based on its screen resolution. This means that regardless of whether a user is viewing a web page on a mobile, tablet, or desktop device, the design will respond to the device appropriately by displaying a specific layout based on that device's screen resolution. Although the jQuery Mobile framework provides a way to quickly and easily create a mobile version of a website, it does not currently (and most likely never will) provide an inherent way to dynamically respond to the user's device based on its screen resolution. In fact, the jQuery Mobile website states that the preexisting Media Query Helper Classes feature has been deprecated in beta and removed from the latest version. The framework's creators are actually recommending the use of CSS3 media queries, instead. With a combination of CSS3 media queries and the jQuery Mobile framework, it is possible to achieve a responsive design that accommodates mobile, tablet, and desktop environments. The framework documentation actually uses a combination of the jQuery Mobile framework and CSS3 media queries to achieve its own responsive design. The documentation is actually quite similar to the example that you will be creating in this article in the way that it reacts to different screen resolutions.

CSS has included device-related coding measures since version 2.1 through the use of media types. A common way to use media types is to define a separate style sheet for a desktop computer screen versus a style sheet for a printed version of the web page. CSS3 has taken the concept of device-related coding measures a step further with the introduction of media queries. Media queries can be used to determine the type of device that is interacting with your web page as well as allowing developers to determine the physical properties of the device that is viewing your web pages. Needless to say, media queries have become a popular way to deliver a device-specific style sheet, as you can see in Listing 1, which delivers a style sheet specific to mobile and tablet devices based on the screen resolution.

	
<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 799px)" 
  href="mobile-tablet.css" />

The media attribute in this example contains a media type value that is set to screen and a media query (which is enclosed in parentheses). This particular media query checks to see whether the screen resolution of the user's current device is less than or equal to 799px. If it is, this mobile/tablet style sheet is delivered; otherwise, this style sheet is not delivered. You can include multiple style sheet links within a single web page, each with its own media query to render your page differently based on as many different resolutions as you desire. The most common number of resolution-based style sheets that I've noticed seems to be three—one for mobile and tablet devices, one for lower-resolution desktop monitors, and one for higher-resolution desktop monitors. If you were to use the code from Listing 1, all devices that have a resolution smaller than 799px would use this style sheet, so this is a perfect example of how you could target mobile and tablet devices with one style sheet, and desktop computers with a different style sheet.

It's also possible to use multiple media queries directly within the CSS of a single style sheet. Listing 2 shows an example of a CSS class used for a set of navigation items, which you will create later in this article. When the device's screen resolution is 800px wide or more, the width of the navigation is set to 300px; when the screen resolution is 799px or less, the width of the navigation is set to 100%.

	
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
}

Another cool thing about media queries is that if you view a web page in a modern web browser that includes the CSS from Listing 2 paired with the associated HTML element, the web page will actually respond to the size of the browser, as well. Therefore, if the browser is set to a width of 799px or less, the navigation will be 100% in width; if the browser were sized to a width of 800px or greater, the navigation would be sized to 300px in width.

Back to top

Becoming responsive

Media queries are a sort of conditional statement that determine what CSS is applied to a web page. Together with the jQuery Mobile framework, you can create some powerful mobile websites while maintaining a stand-alone desktop layout. By itself, the jQuery Mobile framework can be used to quickly and easily create touch-friendly websites. The framework has a slew of components that make it easy to add buttons, toolbars, dialog boxes, list views, and much more. However, when it comes to handling web page layout, CSS is still the language to go to. Luckily, as covered earlier in this article, CSS3 has introduced media queries, which provide developers with the capability to change the web page layout based on the device resolution.

In combination with the jQuery Mobile framework, you can create some responsive layouts. For the purposes of this article, I use a simple example that includes a set of navigation items and a grid. The navigation items and grid will be laid out differently based on the screen resolution. The first thing you need to do before the jQuery Mobile framework will function in your web page is embed the JavaScript files and CSS associated with the jQuery Mobile framework (see Listing 3).

	
<link rel="stylesheet" 
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

The jQuery Mobile framework includes a listview component that you will use to display your navigation items. To create a list view, simply add a data-role attribute to your navigation list's ul element with a value of listview. The jQuery Mobile framework also includes a number of useful tools that allow you to create multiple-column grid layouts. In Listing 4, I've included a two-row grid with three columns, which is constructed by using a combination of the ui-grid-b, ui-block-a, and ui-bar classes. To learn more about the jQuery Mobile framework's available components, see Resources.

	
<div data-role="content">
    <ul id="nav" data-role="listview" data-inset="true">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>
    
    <div id="grid" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

Letters are appended to the end of some of the class names: These are theme-related letters that the jQuery Mobile framework uses to determine which theme is used to render the component. To learn more about theming with the jQuery Mobile framework, read the related article in Resources.

Now that you've created your web page, you can use CSS3 to create a responsive layout that dynamically adjusts based on the user's screen resolution. Doing so is simple: Simply use the media queries that you learned about earlier in this article to determine the screen resolution, and then write CSS that specifically addresses the different scenarios. Listing 5 uses a media query that checks for a screen resolution of 800px or more and another media query that checks for a screen resolution of 799px or less. The first media query floats the navigation to the left and floats the grid to the left, so that they position themselves next to each other to fill out the wider space that is available on a higher-resolution screen. The second media query doesn't have a float and sets the width of the navigation and the grid to 100%, which ultimately positions the navigation above the grid to accommodate smaller screen resolutions for devices such as smartphones and tablets.

	
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

Devices with a higher screen resolution will display a side-by-side layout similar to Figure 1.

Devices with a smaller screen resolution display a side-by-side layout similar to Figure 2.

Of course, this is an incredibly simple example, but it shows how easy it is to create a responsive layout using the jQuery Mobile framework and CSS3. The possibilities are exciting, and this is just a stepping stone to get you started. By adding a few simple data-role attributes to your HTML, you can create a mobile version of your web pages; by including the CSS3 media queries, you can allow your design to respond to the user's device based on the screen resolution. You can even alter the jQuery Mobile theme when someone views your web pages on a desktop computer so that the web page doesn't looks like a mobile web page at higher resolutions. All you need to do is check for a higher resolution with a media query, and then change the CSS for those jQuery Mobile components to essentially overwrite the default styles that create the theme.

Back to top

Conclusion

The purpose of responsive design is to display your data in the best layout possible to achieve user-friendly web pages. The combination of the jQuery Mobile framework and CSS3 can create a powerful set of layouts that you can use to respond to each user's device.

Back to top

Download

Information about download methods

Resources

Learn

• Read the full Nielsen projection, Smartphones to Overtake Feature Phones in U.S. by 2011.
  
  
• Read the full AMI-Partners forecast, REPORT: SMB Adoption of Tablet Computers to Increase by 1,000 Percent by 2015.
  
  
• Check out the current documentation for the jQuery Mobile framework.
  
  
• Find the full list of current button icons that the jQuery Mobile framework provides.
  
  
• Learn more about jQuery Mobile theming in Kris' article "Create custom jQuery mobile themes" (developerWorks, November 2011).
  
  
• Also read Kris' article "Use the jQuery Mobile API for fine-grained custom control" (developerWorks, January 2012) to learn how to extend jQuery Mobile by setting global options, hooking into interaction events, and working with exposed methods.
  
  
• In the developerWorks Mobile development zone, find how-to articles, evaluation code, and technical perspectives on a range of topics for mobile developers.
  
  
• Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics.
  
  
• Attend a free developerWorks Live! briefing to get up-to-speed quickly on IBM products and tools, as well as IT industry trends.
  
  

Get products and technologies

• Download and reference the jQuery Mobile JavaScript and CSS files.
  
  
• Evaluate IBM products in the way that suits you best: Download a product trial, try a product online, use a product in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement Service Oriented Architecture efficiently.
  
  

Discuss

• Get involved in the developerWorks community. Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.
  
  

About the author

Kris Hadlock has been a contract web developer and designer since 1996. He has worked on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software, and Fire Mountain Gems. He is the author of Ajax for Web Application Developers (Sams) and The ActionScript Migration Guide (New Riders) as well as a featured columnist and writer for numerous websites and design magazines, including Peachpit.com, InformIT.com, and Practical Web Design magazine. Kris is also the founder of www.studiosedition.com, a web design and software development studio specializing in fusion of form and function.

Rate this article

Comments

Back to top

Table of contents

• Pitfalls and solutions
• Becoming responsive
• Conclusion
• Download
• Resources
• About the author
• Comments

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers