In this lecture, we'll look at how tomake your Web designs look good on

any device.

In this lecture, you canexpect to:

Learn how to usemobile queries andCSS to adapt a two­column layout forsmartphones.Learn how to usemobile queries andCSS to adapt anavigation menu forsmartphones.Explore how toincorporate jQueryMobile into adaptivedesigns.Learn how to make amobile friendly imagegallery using jQueryand Photoswipe.

Creating A Responsive Layout

We're all adaptive creatures, and it's inour nature to streamline the "workflow"of adaptation. If you leave your house inthe morning unsure whether the day willget warmer or colder, do you take ajacket with you or an entire change ofclothes? Being able to dynamicallyrespond to conditions is important ineveryday life, and it's important in Webdesign.

As we touched on at the beginning ofLecture One, the ever increasingprevalence of smartphones and tablets ismaking it essential for Web designers toharness the skills to develop for thesedevices. But we don't need to startdoubling and tripling the workload ofevery project: we want to buildadaptation into the guts of our designs.

In this lecture, we'll learn how to construct Web layouts that are adaptiveto the devices they're being viewed on (also known as responsive Webdesign). We'll also learn how to create mobile applications using jQueryMobile. Soon you'll discover that designing with adaptation in mind is thekey to navigating the weather of today's Web design world!

Adapting With Media Queries

While some Web sites have separate desktop and mobile versions oftheir site (where the mobile version is hosted on a separate subdomain,like m.example.com), responsive design involves incorporating device­specific styling into one Web document, so that design adapts dependingon whether you're looking at the Web site on a desktop, an Android, oran iPad. You can add this device­specific styling in your CSS file usingmedia queries.

I'm sure you're aware that you can use different CSS style sheets forvarious media types, like print or screen. Media queries, similarly, allowyou to target specific devices by various properties, such as device width

CSS Layouts | Creating a Responsive Layout

Learn how to usejQuery Mobile to buildresponsive forms.

or screen resolution. That way, if you know, say, that most most mobilephones are under 480 pixels in width, you can create specific styles forthose devices.

To see media queries in action, let's create a simple layout that we canadapt for desktops and mobile phones. While there are many strategiesfor creating responsive layouts, a straightforward method is to create afluid grid for the desktop version, and then alter the CSS minimally formobile browsers.

Preparing Our Layout

For this layout, we're going to include the basics: a header, navigationmenu, main content section, and sidebar. We'll also stick an image inthere for good measure. Our HTML looks like this:

<div id="container"> <header> <h1>Responsive Layout</h1> </header>

<nav> <ul> <li><a href="">Archives</a></li> <li><a href="">About</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Hire Me</a></li> <li><a href="">Contact Me</a></li> <li><a href="">Colophon</a></li> </ul> </nav>

<div id="content"> [...] <img src="images/savannah.jpg" alt="Savannah, Georgia"/> [...] </div>

<div id="sidebar"> <h2>Sidebar</h2> [...] </div></div>

Now let's create the CSS for the desktop version of our site. (Note: I'mnot going to include all of the CSS for this site in the snippet below, justthe bit relevant to the layout.)

nav width: 100%; padding: 10px 0; border­top: 1px solid #aaa; border­bottom: 1px solid #aaa;

nav ul list­style­type: none;

position: relative; top: ­17px; padding: 0; border­bottom: 0;

nav ul li width: auto; float: left; margin­right: 30px; padding: 0; border­top: 0;

#content width: 70%; margin­right: 3%; float: left;

#sidebar width: 27%; float: left;

img float: right; margin­left: 3%; border: 1px solid #ccc;

What have we done here? We've created a horizontal navigation bar anda fluid two­column layout. Our image is floated within our content to theright. We've also specified some things that don't exist on this layout,such as top borders above our list items. This is to ensure that ourregular layout won't inherit styles from the phone version we're going tomake a little later—you'll see how this works when we explain the CSSfor the phone layout. On our desktop, the page looks like this:

Here's our responsive layout on a desktop with plenty of screen space.

This layout is great for a desktop, which has a lot of screen real estate.But for a mobile device, squeezing a horizontal navigation menu and twocolumns within 320 pixels or so makes the site quite difficult to read. Sowe have to change the layout for mobile devices by doing the following:

Change the horizontal navigation menu to a verticalone, preferably one in which the "buttons" are fatenough to be finger­friendly.

Change the two­column layout to a one­column: let'sdrop the sidebar below the main content section.

Our image is too big to float, and too big to fit,horizontally, within a mobile browser's window. Wehave to fix that.

First, we're going to add the following line within the head section of theHTML page:

<meta name="viewport" content="width=device­width; initial­scale=1.0">

What is this for? This line is to correct iPhone's attempt to rescale our

Hundreds of mobiledevices with different

specs present achallenge for

responsive designs.Focus on creatingmedia queries thatcapture the most

common specs, and tryto make your designs

flexible enough toadapt to outliers.

Web site. When displaying a site, iPhones (with the greatest ofintentions) "shrink" the site so that pages designed for desktops can fitinto iPhone's tiny screen. While this is great for sites not optimized formobile devices, we don't want the iPhone shrinking our page elements!So this line resets the scale to the actual size of the page elements.

Creating Media Queries

Next, we need to create the media query in our stylesheet. This can getcomplicated, as there are hundreds of mobile devices out there, each aspecific size and screen resolution. We could make a separate mediaquery for several common mobile devices, but the simplest strategywould be to create one media query that captures nearly allsmartphones, and make the layout flexible enough to adapt to all ofthem. So we're going to target our media queries to devices that are, atmaximum, 480 pixels wide. This targets most smartphones in portraitand landscape mode. (Note that we're excluding tablet devices here,such as the iPad. We would probably want to create a separate mediaquery for such devices. For simplicity's sake, we're sticking to mobilephones in this example.)

So, let's create our media query. You'll want to put this section of CSSafter the styles for your regular layout:

@media screen and (max­width: 480px) /* Smartphone Specific Styles */

Now, we're going to put all of the CSS targeted to smartphones withinthese brackets. Let's begin with the navigation menu:

nav padding: 0; border: 0;

nav ul li float: none; margin: 0; border­top: 1px solid #aaa; padding: 3% 0 3% 5%;

nav ul border­bottom: 1px solid #aaa; top: 0;

First, we've gotten rid of the borders on the top and bottom of thenavigation section, as well as the padding. Again: we're turning thehorizontal "bar" into a vertical series of "buttons." For the navigation listitems, we've added a top border to our navigation buttons, echoing thestyling we had for the horizontal bar. We've also set the float propertyto none, as we want the buttons to be below one another, rather thannext to one another. We've added some padding to fatten them up a bit.

Usingpercentages foryour widths,rather than

specificamounts, allowsyour design to

adapt to avariety of

potential devicescreens.

Finally, for the list itself, we've added a bottom border and readjustedthe positioning tweaks we had to do when it was a horizontal bar.

As you can see, we didn't want our regular layout to have the thingswe've added here (top borders and so forth), which is why we "pre­removed" those in our default CSS. When creating layouts with mediaqueries, it's very important to pay attention to how your styles cascadeand keep track of what styles might get inherited.

Now, let's move on to our two columns. We want our two columns to bestacked vertically, and we want each column to take up the width of themobile screen:

#content width: 100%;

#sidebar width: 100%; clear: both;

How simple was that? Note that we've kept the fluidity of the originallayout: since we're targeting a variety of smartphones, we don't want toset the column to a specific width. We want the layout to adapt to amyriad of possible device widths. So, we've just set the width at 100%.Also, we've cleared our floats by setting clear to both for the sidebar.

Finally, let's style our image:

img margin: 0 0 10px 0; max­width: 100%;

Besides setting a small bottom margin to our image, the only thing ofnote that we've done is set the max­width at 100%. That is so the size ofthe image does not exceed the width of the device screen, requiring theuser to scroll horizontally to view the entire image.

Now, let's see how our page looks in an iPhone:

jQuery Mobile is an interface framework thathelps your design hop seamlessly across

platforms.

You don't have toknow any JavaScript to

use jQuery Mobile'sinterface system: loadthe library into yourpage, and you canimplement all itsfeatures in your

markup.

And here's our layout on an iPhone, adapting smoothly to limited screen space.

Now, our page is easily readable on our mobile browser, and ournavigation menu is easy to manipulate with a thumb or finger! Note thatwe've only explored one method of creating a responsive layout andnavigation menu: there are many techniques for doing so, many of whichare more complicated than this. While our layout is rather simple, itshould take some of the mystery out of building a responsive layout, andyou should be ready to dive into more sophisticated techniques. Onegood place to start is with jQuery Mobile.

Creating Web Apps With JQuery Mobile

jQuery Mobile is an interfaceframework, built on top ofjQuery, designed to let youquickly create mobile Web apps.It includes UI widgets (such asbuttons, dialogs, navigationtoolbars, and mobile­optimizedform elements), and an Ajaxnavigation system that createsanimated page transitions.

It's designed to work beautifullywith all modern mobile devices,and degrades gracefully ondevices that don't support all ofthe fancy features. Best of all,

you don't have to write a lick ofJavaScript to enjoy the fruits of its interface system: all you have to dois load the library into your page, and mark up your HTML with specificdata­role attributes, identifying certain parts of the page as a header,footer, or a list of links. The jQuery Mobile framework does the rest.

Mobile Web VS. Native Mobile: What's In An App?

Before we go any further, let's take a moment for some importantdefinition clarification. The smartphone craze has made the word "app"so popular that it's spawned a catchphrase that doubles as a philosophy:whatever you want to do, well, "there's an app for that." But from adesigner's perspective—especially a layout designer concerned with CSSand responsiveness—what is an app?

In terms of software architecture, the answer is twofold. A nativemobile app is a program built to run independently on a mobile device'sspecific OS, no browser or online connection required. Meanwhile, amobile Web app runs through a browser, which means it can adapt to avariety of devices and needs some kind of Internet connection tofunction.

Simple enough, but the user experience of this distinction gets blurry.When we access Google Maps on our phones to find nearby Thairestaraunts, we don't need to think about what's being downloaded orhow Google might be accessing our phone's geolocation capabilites—wedon't really care whether we're "loading" Google Maps or "going" to aWeb site. We just want our phone to find the closest pad thai and tell usif it's good.

Remember: as designers first and foremost, our technical definitions areonly as important as how our visitors interact with our designs. What wewant to do is make our designs work for as many users as possible withthe most efficent amount of work on our end. That's where jQuery Mobilecomes in. It allows us as Web designers to take tools that we know well—HTML documents, CSS, and JavaScript—and use them to craft layoutexperiences that will adapt to a wide variety of different browsingdevices and take advantage of device functionality, all without worryingabout native device APIs or operating systems.

Let's sample the power and ease of the jQuery Mobile framework bycreating a simple mobile Web application that shows off a portfolio ofour best photography.

Setting Up A Basic JQuery Mobile App

First, let's set up the basic template for our application:

<!DOCTYPE html> <html> <head> <title>My Photography</title> <meta name="viewport" content="width=device­width, initial­scale=1"> <script

src="http://code.jquery.com/jquery­1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile­1.0a4.1.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile­1.0a4.1.min.css" /> </head> <body> [...] </body> </html>

This is a basic HTML5 document: notice in the header we've included thesame meta tag we used in the responsive design we made, which stopsiPhone from rescaling the page. The remaining lines in the head of ourdocument load up the jQuery and jQuery Mobile libraries, as well asjQuery Mobile's CSS. Save this HTML file in your site folder.

Next, let's build the body of our page:

<div data­role="page" id="intro"> <div data­role="header"> <h1>My Photography</h1> </div><!­­ /header ­­> <div data­role="content"> <h2>Welcome</h2> [...] </div><!­­ /content ­­>

<div data­role="footer"> <h4>&copy; 2012</h4> </div><!­­ /footer ­­></div><!­­ /page ­­>

<div data­role="page" id="About" data­add­back­btn="true"> <div data­role="header"> <h1>About Me</h1> </div><!­­ /header ­­>

<div data­role="content" > [...] </div><!­­ /content ­­>

<div data­role="footer"> <h4>&copy; 2012</h4> </div><!­­ /footer ­­> </div><!­­ /page ­­>

<div data­role="page" id="Gallery" data­add­back­btn="true"> <div data­role="header"> <h1>Portfolio</h1> </div><!­­ /header ­­>

<div data­role="content"> <div class="gallery"> [...] </div>

</div><!­­ /content ­­>

<div data­role="footer"> <h4>&copy; 2012</h4> </div><!­­ /footer ­­> </div><!­­ /page ­­>

<div data­role="page" id="Hire"> <div data­role="header"> <h1>Hire Me</h1> </div><!­­ /header ­­>

<div data­role="content"> <p>Contact me for a quote!</p> <form action="index.php" method="post"> [...] </form> </div><!­­ /content ­­></div><!­­ /page ­­>

We have several main divs here, each marked up with a data­roleattribute set as page. This allows us to code our entire site within oneHTML document, and jQuery Mobile treats each of these sections as aseparate page.

This is important to note, as the distinction can be somewhat confusing:we're going to call all of these pages separate pages, but unlike the Webpages you might be used to, these all live in the same HTML document.

jQuery Mobile loads up the first section by default, then we can link tothe other sections by building a button menu in this "intro" section:

<ul data­role="listview"> <li><a href="#About">About</a></li> <li><a href="#Gallery">Portfolio</a></li> <li><a href="#Hire" data­rel="dialog" data­transition="pop">Hire Me</a></li> </ul>

As we've marked up the list with a "listview" data role, jQuery stylesthese items as mobile friendly buttons with a right­side arrow. Theymake for a great looking menu. Our page, when loaded, now looks likethis:

Experiment withother jQuery

Mobiletransitionanimations(including

slides, fades,and flips) bychanging the

data­transition

attribute.

Thanks to jQuery's help, our page is looking good on this iPhone.

When you click a menu item, a subtle Ajax animation occurs betweenpages: you can set the style of any navigation animation through thedata­transition attribute. Notice the data­rel and data­transitionattributes in the last list item. Setting the data­rel attribute as"dialogue" makes that section appear as a dialog (instead of a standardpage), while the data­transition attribute sets the animation style:here, the dialog "pops" up when the link is clicked. We'll see what thatlooks like in a moment.

Let's examine the anatomy of each section. First, each page containsdivs with additional data­roles. Here we have headers, content areas,and footers. Marking these sections as such tells jQuery Mobile to stylethese sections a particular way: the headers and footers, you'll note inthe screenshot above, are styled with a dark gradient, with centeredwhite text.

The "intro" and "about" sections contain standard text content. The"portfolio" section contains a list of thumbnail images; each of theseimages links to a larger image. Let's look at a mobile friendly way toturn our portfolio section into an image gallery.

Making A Gallery With PhotoSwipe

We can turn this list of links into a mobile friendly image gallery usingPhotoSwipe, a JavaScript image gallery library that targets mobiledevices.

First, we need to download the PhotoSwipe ZIP file, decompress it, andmove it into our local site folder. Then we'll need to add some new CSSand JS files to our document head (not to be confused with the headerdiv). If needed, modify your file paths to access the JS and CSS files.

Add the following includes to your document head below your existingjQuery includes. Carefully note the version numbers we're using for this

example!

<link href="1.0.11/photoswipe.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="1.0.11/lib/simple­inheritance.min.js"></script><script type="text/javascript" src="1.0.11/lib/jquery.animate­enhanced.min.js"></script><script type="text/javascript" src="1.0.11/code­photoswipe­jQuery­1.0.11.min.js"></script>

Next, include this extra CSS in your document head:

<style type="text/css">div.gallery­row:after clear: both; content: "."; display: block; height: 0; visibility: hidden;div.gallery­item float: left; width: 33.333333%;div.gallery­item a display: block; margin: 5px; border: 1px solid #3c3c3c;div.gallery­item img display: block; width: 100%; height: auto;#Gallery1 .ui­content, #Gallery2 .ui­content overflow: hidden;</style>

This CSS makes sure our gallery looks the way we want it to look. Andthe next bit of code we'll add to the header makes it work!

<script type="text/javascript"> /* This example shows how to set up PhotoSwipe using jQuery Mobile */

$(document).ready(function() $('div.gallery­page').live('pageshow', function(e) // Re­initialize with the photos for the current page $("div.gallery a", e.target).photoSwipe();

return true; ) ); </script>

Important: the order in which all of this header code appears isessential. All four lines that load the PhotoSwipe scripts and CSS filesmust be kept together, followed by the extra CSS, then the script abovemust come immediately after them. Finally, all of this must take placeafter you load jQuery and jQuery Mobile.

For a look at what the full header should be, check out the example ofthis lecture and view the source code.

Now that we've got our header out of the way, we have to add someclass names to our markup. These class names function as hooks for thescript. Add a class name "gallery­page" to the page section that containsyour image gallery:

<div data­role="page" id="Gallery" data­add­back­btn="true" class="gallery­page">

And add a class name "gallery" to the div tag marking up the image list:

<div class="gallery">

Inside of this gallery div, we'll need to add some nested divs to sort outour rows and the items (the pictures themselves) in the rows:

<div class="gallery­row"> <div class="gallery­item"> [...] </div></div>

Now we have to take a closer look at that list of links in the gallery. Forthese links and images, we're going to use the same file structure foundin the PhotoSwipe example files: "images/full/###.jpg" for the full sizedimages, and "images/thumb/###.jpg" for the thumbnails.

Important: Because of how jQuery Mobile handles links to externalpages and images outside of its data­role driven framework, it isnecessary to add rel="external" to the <a> tag.

Here's the code:

<div class="gallery"> <div class="gallery­row"> <div class="gallery­item"> <a href="1.0.11/examples/images/full/010.jpg"" rel="external"><img src="1.0.11/examples/images/thumb/010.jpg"" alt="Image 010" /></a> </div>

[...] </div> [...] </div>

You'll need to repeat this code for every picture and every row. Referback to the example page to see how it should look when you're done.

Hint: If you don't have any images handy to use in testing PhotoSwipe,you can find some sample images in the examples/images folder insidethe PhotoSwipe folder.

Now, let's visit the portfolio page:

Here we have nine thumbnail images in our gallery, as seen on an iPhone.

Looking good! And clicking on a thumbnail begins a thumb­swipeableslideshow:

Swipe through those angels! Photoswipe and jQuery help us make ourimage gallery interactive.

Forms For Phones

Now that we've completed our image gallery, let's move on to the "HireMe" page. For this page, let's build a simple form where the user cansend a message to us and request a quote:

<form action="index.php" method="post"> <label for="email" class="ui­hidden­accessible">Email Address</label> <input type="text" name="email" id="email" value="" data­mini="true" placeholder="Email Address" /> <label for="message" class="ui­hidden­accessible">Message</label> <textarea cols="40" rows="8" name="message" id="message" data­mini="true" placeholder="Message"></textarea> <button type="submit" data­mini="true">Submit</button></form>

For the most part, this looks like a standard HTML form. But, let's note afew additional attributes. First, the ui­hidden­accessible class

You can use softwaresuch as PhoneGap to

essentially hides the label from view. While we still want to include thelabel for accessibility reasons, we don't need to show it when we'veincluded an adequate description in the "placeholder" attribute in the<input> tag. Also, there is also a data­mini attribute set to "true." Thistells jQuery Mobile to style the elements so they're optimized for verysmall screens.

When we click the "Hire Me" button on the main page, we can see thefollowing dialog pop up:

Now potential clients can hire you with their thumbs! Well, we'd need tomake the "Submit" button do something, but you can see how jQuerymakes it easy to build a form that works well on mobile devices.

While clicking the "Submit" button won't do anything but send you backto the main screen (as we haven't written a form­handling script for thisexample), you can still see how the form is mobile­optimized for smallscreens and finger­friendly.

Now that we've built this mobile Web app (or mobile site), we can viewit with any mobile device's browser. Or, if we wanted to turn this into anapplication that a user can download from the Apple app store or theAndroid market, you can deploy your application through PhoneGap,

package mobile Webapplications (or evenregular Web sites) as

native mobileapplications.

Learn how toimplement jQueryplugins into your site.Learn how to enhanceimage slideshows witha responsive slider.Learn how toincorporate a modaldialog.Learn how tocustomize tooltips.Learn how to make amobile friendlynavigation menu.

software designed to wrap your software into an application package thatcan be distributed to most all mobile markets.

External libraries like jQuery Mobile and Photoswipe take some of theunder­the­hood work out of responsive design, allowing you to focus onattractive and functional layouts. This is why we'll be taking a closer lookat jQuery in the next lecture. Getting a good grasp of these externallibraries, and getting in the habit of designing with media queries, willhelp your designs adapt to whatever device users might be browsingwith.

DiscussionShare your thoughts and opinions with your fellowstudents in the Discussion area.

ExerciseCreate responsive Web pages using techniques youhave learned in Lecture Two.