BlogmyQuery – BMQ

With the growing number of screen resolutions, devices that support an internet connection (desktop computer, laptops, but also tablets, mobile, TVs, and even your fridge someday), flexibility and scalability has become more and more important for websites. With the new arrival of the Macbook Pro Retina, this went a step further and brought an HiDPI display that was unknown to the market. This means a whole new challenge for web designers who have to find new ways to handle and make images size more flexible to avoid blurry rasterized effects. In this article, we will see how the SVG-format can help us solve this challenge, using an everyday example of a website header with a clickable logo.

My personal roadmap to this project: What I wanted to achieve

From a UX / code point of view,  I wanted two things for my logo:

• Since it’s the logo of my brand, I wanted it to be clickable so that users can easily go back to the homepage
• I’m a nice girl and don’t want to penalize people with older browsers, so I wanted to provide some PNG-fallback for our older friends. If possible, the fallback should work without JavaScript.

Taking a look at these two things, I ran some tests, and found a few different code variants to achieve this result. They proved not equally successfull though. Following I’ll show you how good the alternatives will perform.

Here is a visual of what we will build:

You can see a demo here, or fork the code on github

You can take a look at this table to see the SVG support in browsers.

The SVG logo: what is this format, and how did I create it?

SVG stands for Scalable Vector Graphics. It is a markup language that enables us to create two-dimensional graphics that are fully scalable.  It is based on an XML syntax, so you can create and open a SVG file in a text editor. Don’t panic, you don’t need to be a hardcore developer to do so.  http://raphaeljs.com/ for example is a very nice library to generate SVG images in an easier way.

If you’re a designer, you can use your favorite design software to create SVG files. Illustrator and Inkscape will do the job nicely and even Fireworks has a little plugin http://fireworks.abeall.com/extensions/commands/Export/ for this task.

Save a SVG logo with Ilustrator using save as > svg inside the format dropdown

Just remember a few rules when creating a SVG logo:

• Don’t use complex illustrator gradients, only linear and radial ones
• Don’t use the photoshop effects provided in Illustrator
• Be careful and name layers and group layers
• Always merge shapes in the end when using pathfinder.
• Transform text into vectors shapes to make sure the result will work on devices that don’t have the font.

To sum it up : Keep your SVG drawing as simple as possible, export it, and test in different browsers to see the result.

For my example, I’m using a simple SVG-logo with no gradients and plain colors. (Many thanks to Geeks and the City for letting me kindly use their logo in this example. The logo is their property, I only use it for the example with their consent. You can re-use the code for your projects, but not the logo.)

1. The < object > embed solution

This is the historical solution to embed SVG in webpages. The big advantage of this method is that the fallback is easy to provide, you simple have to add the .png image in an img tag :

See demo

The code :

1
2
3
4
5
6
7
8
9

<a href="#" >
 
<object class="logo" data="logo.svg" width="186" height="235"&nbsp; type="image/svg+xml">
 
<img src="logo.png" width="186" height="235"&nbsp; alt="Logo Geeks and the City" />
 
</object>
 
</a>

Pros:

• The fallback is simple to provide
• The fallback does not rely on JavaScript

Cons :

• The link is not displayed on browsers that support SVG, you have to add a display:block to the link. Then the link is hidden “behindâ€� the SVG object, so you can’t click on the logo but around it
• Modern browsers with SVG support will download both files SVG and PNG

2. The <svg> tag solution with foreignObject as fallback

Since HTML5, you can use a  the new <svg> tag.  Remember when I said that SVG was a markup, you can simply copy the markup inside the SVG tag. All you have to do is open the .svg logo in a text editor, and copy paste the code.

In the foreignObject, we will include an img-tag with the .png fallback

See demo

The code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<a href="#svg_technique" >
 
<svg&nbsp; class="logo" width="186" height="235">
 
<g id="nyt_x5F_exporter_x5F_info">
 
</g>
 
<g id="nudged">
 
<path style="fill:none;stroke:#000000;stroke-miterlimit:10;" d="M46.397,121.92"/>
 
……
 
<foreignObject width="0" height="0" overflow="hidden">
 
<img src="logo.png" width="186" height="235"&nbsp; alt="Logo Geeks and the City" />
 
</foreignObject>
 
</svg>
 
</a>

Pros

• The link now works
• The fallback works without JavaScript activated

Cons :

• Due to the copy/pasting of the SVG code, this technique is not very flexible, especially for logos. Every time you change it, you have to upload the code
• Not all browsers implement the syntax correctly since it’s pretty new

3. The <img> solutions, with different fallbacks

A last way of embedding SVG files is to use the img-tag. Note that the tag was not created for this purpose, so you might encounter problems if you use many JavaScripts to modify your SVG object.

a. The <img> solution with JavaScript on error-fallback

Credits where due, I found this technique on Tavmjong Bah’s blog (a great read if you want to go deeper into the SVG manipulation techniques using JavaScripts). This solution suggests using the error handler to detect the SVG support, and replace the .svg by a .png logo when the browser does not support SVG and triggers and error.

See the demo

The code

1
2
3
4
5

<a href="#catching_error" >
 
<img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235"&nbsp; alt="Logo Geeks and the City" &nbsp;onerror="this.removeAttribute('onerror'); this.src='logo.png'" />
 
</a>

Pros

• The link works pretty well
• The code is very simple and we only need one img-tag

Cons

• The fallback relies on JavaScript and does not work if deactivated

b. The <img> solution with a CSS background fallback

For this technique, we will only provide the SVG image in the HTML, and instead use Modernizr to detect SVG support. If the SVG is supported, the script will add a .svg class to the html, if not, it will add a .no-svg.

See the demo

The HTML code

1
2
3
4
5

<a href="#modernizr_css_fallback" >
 
<img class="logo" src="logo.svg" width="186" height="235"&nbsp; alt="Logo Geeks and the City" />
 
</a>

The CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/*** specific for fallbacks **/
 
#modernizr_css_fallback img.logo {
 
display:none;
 
}
 
#modernizr_css_fallback a{
 
display:block;
 
width:186px;
 
height:235px;
 
background-image: url(logo.png);
 
background-color:transparent;
 
text-indent:-999px;
 
color:transparent;
 
margin:0 auto;
 
}
 
.svg #modernizr_css_fallback img.logo {
 
display:block;
 
}
 
.svg #modernizr_css_fallback a{
 
background: none;
 
}

This one gets a little tricky, let’s explain it. In order to make this work without JS activated, we will not use the .no-svg class. First we will hide the image for one simple reason: Internet explorer 8 and browsers that don’t support SVG will otherwise display the title of the img. If we put the background on the img-tag, we will see both the background, and the alt-attribute displayed above.

Internet explorer shows the alt-tag on top of the background

Instead, we hide the image, and put the background PNG-file in the a-tag.

Now, if SVG is supported, we get the .svg class in the html-tag, and do it all the way around: We display the img-tag, with the SVG in it, and hide the CSS background of the a-tag.

Pros:

• The link works
• The fallback works without JavaScript

Cons:

• Not really a con, but we have to cheat and apply the background to the a-tag
• If JavaScript is deactivated, browsers that do support SVG will get the PNG-fallback.

c. The <img> method with modernizR SVG detection to provide data-fallback fallback

In this method, we will use the new HTML5 data-attributes to provide the fallback file, coupled with modernizr to swap the image for browsers that do not support SVG.

See demo

The HTML code:

1
2
3
4
5

<a href="#img_modernizr_js_remplacement_bis" >
 
<img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235" data-fallback="logo.png"&nbsp; alt="Logo Geeks and the City" />
 
</a>

The JavaScript code:

1
2
3
4
5
6
7
8
9
10
11

window.onload = function(){
 
if(!Modernizr.svg) {
 
var imgs = $('img[data-fallback]');
 
imgs.attr('src', imgs.data('fallback'));
 
}
 
}

Using modernizr, we detect the SVG-support. If the SVG is not supported, we replace our logo with a .png one, using JavaScript.

Pros

• The link works
• The code is simple and clear

Cons

• The fallback relies on JavaScript and does not work if it is deactivated

d. The <img> method with JavaScript and < noscript > as fallback

Once again, we use the image-tag, but this time, we will provide a noscript-tag with the .png-image in it, in case JavaScript is deactivated.

See demo

The HTML code:

1
2
3
4
5

<a href="#img_modernizr_js_remplacement_nojs">
 
<noscript><img class="logo" src="logo.png" alt="A sample SVG button." width="186" height="235" alt="Logo Geeks and the City" /></noscript>
 
</a>

The JavaScript code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

window.onload = function(){
 
if(Modernizr.svg) {
 
$('#img_modernizr_js_remplacement_nojs .header a').html('<img src="logo.svg" width="186" height="235" alt="Logo Geeks and the City"/>');
 
}
 
else {
 
$('#img_modernizr_js_remplacement_nojs .header a').html('<img src="logo.png" width="186" height="235" alt="Logo Geeks and the City">');
 
}
 
}

We detect SVG-support, swap the image for the SVG-logo if supported, and the PNG if not.

Pros

• The link works
• Works with JavaScript desactivated

Cons

• If JavaScript is deactivated, browsers that support SVG will display the noscript PNG-fallback.

Going further: font-icon and htaccess-trick for the road

In this article, I did not mention the font-icon embedding-technique. You can see the Icon Fonts are Awesome page to have a little demo, and find a nice list of icons here. I did not use this technique, because I thought it was not very appropriate and creating a font just for a simple logo was maybe “too muchâ€�.  Also, logos should be images (in the wild sense, I include SVGs into images here), so using a font-icon for a logo on a website was not a solution in my opinion.

Also note that you might have to declare the SVG-format in the .htaccess so that the server delivers the correct header. You can do so by adding this to the .htaccess:

1
2
3

AddType image/svg+xml svg svgz
 
AddEncoding gzip svgz

More on SVG-usage from around the web:

• Using SVG graphics today
• An SVG Button Test Page
• Resolution Independence With SVG

Conclusion

In this article, we saw different techniques to embed a SVG-logo, with a link back to the homepage of the site. I’m not telling you that one method is better than the other, you will have to choose. At the moment, I’m using the last solution on the live website I did this research for, but that’s just personal preferences. There must also be other solutions to achieve this and I would be glad to hear about how you manage this challenge, so don’t hesitate to share your results in the comments! So, will you try to use some SVG logos on your website soon? What is your favorite technique?

(dpe)

I see more and more devices that have a pixel ratio bigger than 1.5, even 2. My Galaxy Nexus for example has a pixel ratio of 2 and so do the latest versions of the iPhone and iPad. Retina display seems to be the next evolution and next challenge for us as designers.

Native mobile app designers have already learned how to take advantage of those devices with high pixel ratios to display bigger images with better quality, so as to enhance user experience. They are used to creating the images in both normal and retina @2x sizes for the iPhone, and creating 4 sets of drawables in 4 different sizes for Android devices.

With the iPad 3 also having retina display, it is definitively something that will be harder to avoid from now on. In this article, you will see how to use some CSS3 tricks in the field of image replacement to serve images with better quality to those high resolution devices.

Story Behind the Code

It all began when I was creating a jQuery Mobile application for the iPhone. The idea was to make a full HTML5 jQueryMobile app, and to embed it in a “native shell�, using Phonegap.

For this application, I created a bottom tab-bar that was imitating the native iOS tab-bar, and also a header with a logo image in it. Both the header and footer were HTML elements that used image replacement techniques to display the icons and logo.

When I tested the application on the iPhone 4S, I saw that the logo and the icons were highly rasterized and looked pretty ugly.

The Demo

I re-created a fake application page similar to the iOS native style so you can see what is going on. Whether you have a retina device or not, you can test it here with your phone. You can see the demo here. You can also download the code here.

As I said, if you load the page on a non retina device, it will look good. If you load it on a retina device, the images get rasterized.

This is due to the pixel ratio being 2, so the image is multiplied by two and stretched by the device, creating this unclean rendering. Here are some screenshots of the demo on iPad 3, iPhone 4 and Galaxy Nexus with the images being rasterized:

Galaxy Nexus:

iPhone 4:

iPad 3:

CSS Image Replacement Techniques

In this demo, I used different techniques for replacing images that will have varying consequences when we will want to change for retina images.

The first image we replace is in the logo, being sure to only set the height of the element. The HTML looks like this:

<div class="ui-header"> <h1> My logo </h1></div>

The CSS like this:

.ui-header h1{

color:#fff;

display: block;

outline: 0 none !important;

overflow: hidden;

margin:0;

text-align: center;

text-overflow: ellipsis;

white-space: nowrap;

text-indent:-9999px;

background:url(img/logo.png) no-repeat center center;

height:33px;

}

Again, what’s important here is that we give it height, but no width.

The second technique is to use the delete button. We want to keep the text for this one, so we will add the icon in the :before pseudo class. The HTML looks like this :

<p> <a href="#"> Delete item </a> </p>

And the CSS code like this:

.delete:before{

content: " ";

display:block;

width:20px;

height:20px;

position:absolute;

left:6px;

background:url(img/delete.png) no-repeat;

}

Note that in this case, we gave the element both a width and a height but no padding.

The next element to which we want to add an icon is the download button. The HTML looks like this:

<p> <a href="#"> Download </a></p>

And the CSS like this:

.download {

background:rgb(222, 227, 232) url(img/nuage.png) no-repeat 8px 6px;

border:1px solid rgb(199, 206, 212);

padding: 25px 0 25px 120px;

font-size:20px;

color:rgb(144, 160, 176);

text-shadow: 0 1px 1px rgb(239, 242, 245);

}

This is what we will call the third technique: assigning some padding, but no height or width. You will understand why below.

For the footer however, we also assign a width and height for the element, padding too. The HTML:

<a class="bubble button" href="#"> bubble </a>

The CSS:

.ui-footer .button{

background-color:rgba(187, 185, 185, 0.2);

border:1px solid rgb(22, 22, 22);

box-shadow: 0px 1px 2px rgba(22, 22, 22, 0.5) inset ;

text-indent:-9999px;

padding:10px 15px;

width:40px;

height:40px;

background-position: center center;

background-repeat:no-repeat;

margin: 0 5px;

}

.bubble{

background-image:url(img/bubble.png);

}

At this point we have different case scenarios for the image replacement that will load non retina images for all devices, for now.

Media Queries Pixel-Ratio to the Rescue

The next idea was then to find a solution to make those devices load better quality images. I remembered the media query device-pixel-ratio (vendor prefix needed). I never used it before, and decided to give it a try. You will need some vendor prefixes here (Mozilla is the strangest one).

The idea was pretty simple: I decided to try to serve those devices an image that would have twice the size of the desktop one. I chose a @2x notation for the retina image because I’m used to doing so when I create images for native iOS apps. I ended up doing something like this:

@media only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (min-device-pixel-ratio: 2) {

#myelement{

background:url(myicon@2x.png) no-repeat;

}

}

You would think that this works good. True, the retina image is loaded, but the problem is that the image is now twice the size. Still not displaying properly. Here is what it looked like on my Galaxy: the icons are nice and sharp, but not quite right.

Background-Size Property Lends a Hand

Now that we have the high resolution images loading, we need to ensure they are the right size. To do this, we will use the super useful CSS3 background-size property that is actually able to resize backgrounds as needed. You can either use pixel properties for width first then height, use percentages, or set the value to “auto�.

It’s simple to see it in the code. (Note that I used the id #retina for the demo purpose to only target the second part of the demo, but you can of course omit it in your code)

For the header button you remember that we did set the height but not the width, to do the trick here, we will then set the background height to the same value (we can leave the width at auto).

#retina .ui-header h1{

background:url(img/logo@2x.png) no-repeat center center;

-webkit-background-size: auto 33px ;

-moz-background-size: auto 33px ;

background-size: auto 33px ;

}

For the delete button technique it’s a bit easier, since we did set both width and height AND since it has no padding, we can set the value to 100% for each, meaning that the icon will use the whole container space:

#retina .delete:before{

background:url(img/delete@2x.png) no-repeat;

-webkit-background-size: 100%  100% ;

-moz-background-size: 100%  100% ;

background-size: 100%  100% ;

}

For the download button, it gets trickier. Since we did not give it any width or height, we will then have to set the exact sizes of the non retina image for this one:

#retina .download {

background:rgb(222, 227, 232) url(img/nuage@2x.png) no-repeat 8px 6px;

-webkit-background-size: 70px 68px ;

-moz-background-size: 70px 68px ;

background-size: 70px 68px ;

}

For the footer icons, we did set width and height, but the element has some padding. So here we will have to set at least one of the two values to make it work:

#retina .bubble{

background-image:url(img/bubble@2x.png);

}

#retina .loupe{

background-image:url(img/loupe@2x.png);

}

#retina .folder{

background-image:url(img/folder@2x.png);

}

#retina .ui-footer .button{

-webkit-background-size: 40px auto ;

-moz-background-size: 40px auto ;

background-size: 40px auto ;

}

And this is what it now looks like:

What About HTML Images?

I only base this article on the CSS images, but of course there are also images directly in the HTML. For this, you will have to take a look at some responsive image techniques. So far I tested retina.js and have to admit that it’s pretty simple to use, you just have to put a @2x image in the same folder as the normal one and include the script. There is also the Retina Images plugin that seems to do the same job, but needs more server side configuration.

Limitations and Conclusion

As you can see, each case is different and you will have to play with the background-size values to get exactly what you want. The other limitation would be browsers downloading two images for this hack: first the normal, then the retina. I’m not an expert in this particular domain and did not run tests for the demo so if you want to, feel free to do and you can post the results I’m curious to know the browser used and if the images are downloaded twice.

The techniques used in this article are based on a lot of CSS3 code, so might not be supported by all browsers. Also, having to create all the images in two sizes can be hard for maintaining the code, and take more space on the server side. So you will have to think carefully before you use such techniques. Forcing devices to load images twice the size, and then to resize them can also be bandwidth consuming.

In conclusion, I would advise that even though this is a good technique for creating sleek pixel perfect nice interface for devices that support it, there are considerations to be made before using such a technique. Naturally, this won’t be the solution for everyone.

Going further

If you are interested in displaying nice icons without having to create the files twice, you also can take a look at the iconic font technique and at SVG images. There is also this article you can look to, but here again, this is not widely supported.

(Credits for the monochromatic icon set)

(rb)

With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc).

All of this figures in to a higher price tag for the app development. Another solution for developers is then to create something called web-apps: HTML CSS apps, which users can access from their browsers. They are cross-platform, and cross device.

The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps. jQuery Mobile is a framework based on jQuery that enables web designers to create web-apps that are optimized for use on a mobile device (Smartphone and tablets). The framework is touch optimized, uses responsive layout so that elements will automatically adapt on different device sizes, and supports a range of different platforms and devices.

In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool.

Before we start, you might want to download the files, or see a demo, or flash the qrcode for a direct demo on your mobile :

The Concept of the Mini App: Restaurant Picker

We will create an application that will enable the user to choose a restaurant based on what they want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. The jQuery Mobile mini app we’re creating will be called “Restaurant Pickerâ€�.

Please note that this is only the front development, you will of course need a server and a database if you want to create a real app. Also note that jQuery Mobile uses Ajax navigation, so you’ll need to put the files either on a local server (xampp, mamp, etc) or on a real server to make the demo work properly.

Wireframing Our Application.

In order to see where we are going, we will first draw some wireframes to see what each screen of the app will look like.

Home Screen : Choose a Plate

On the first screen we will put the logo of our application. We will then give the user a choice between different plates. Each choice comes with an image illustrating the plate, and each is a link that will lead to the second page where the user can choose the town.

Choose a Town

On the second screen, the user can choose the town where they want to eat. The towns are displayed in a list of clickable items. Beside each town there is a bubble that gives the user the number of restaurants available for the chosen plate in this town.

Since the list of towns can be pretty long, we will provide a filter so that the user can quickly search for a town at the end of the list. The title bar will use the branding of the application, and a “back� button that user can click to go back to the previous step.

When the user clicks on a town, they are lead to the page where they can choose a restaurant.

Choose a Restaurant

The user can now choose in which restaurant he wants to eat. The application displays a list of restaurant with a little image, the name, and the number of rating stars the previous users gave to this restaurant.

The title bar will use the branding of the application, and a “back� button that user can click to go back to previous step. The user can then click on a specific restaurant, to see the details.

Restaurant Details

The restaurant’s details view is composed of three parts: restaurant details, contact details, and the establishment’s user rating.

The restaurant details will display a short description of the restaurant, some plates, a picture and a link to their website if they have one.

The contact details will display the address of the restaurant, and an image of a Google map that will locate the restaurant in the town. A link enables the user to open Google maps (either using the browser or the Google map app if available depending on the device) to locate the restaurant on the map. Another link will dial the restaurant phone number directly on the mobile device so that user can place a reservation.

The last part of this view is a select box, where the user can rate the restaurant.

Building the web-application base

Now that we’ve see the direction that we are heading, we can begin digging a little bit into the code.

Some jQuery Mobile Basics

First let’s take a look at what the header of our first HTML page will look like :

<!DOCTYPE HTML>

<HTML>

<head>

<meta charset="UTF-8">

<title>Restaurant Picker</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" />

<link rel="stylesheet" href="jquery.mobile-1.0.1.CSS" />

<script src="js/jquery-1.7.1.min.js"></script>

<script src="js/jquery.mobile-1.0.1.min.js"></script>

</head>

The first thing to notice is the “new� HTML5 doctype. jQuery Mobile makes a heavy use of the data- HTML5 attribute to add some elements in the DOM to style the page, so we will need an HTML5 doctype to make it all work nicely.

The second thing to notice is the meta name=viewport tag. We will use this meta tag to gain better control of our viewport. Without this tag, the browser will squeeze our layout in the whole page, and it will look ugly and very tiny. With width=device-width we will use our device width, making the app fit the whole size of the device without being squeezed. The initial-scale property controls the zoom level when the page is first loaded and we will set it to 1, meaning no zoom in or out when page is loaded.

Then we will call our CSS files. In older jQuery Mobile versions the CSS was in one file, but in the newer version they made a distinction between the structure and the actual design (colors, gradients etc) which makes it easier to create custom styles.

We then need to load our jQuery, and jQuery Mobile JavaScript code at the end, since it needs the jQuery library to work.

What You’d Like to Eat: First Page

Now let’s take a look at the HTML code of our first page, in this exercise we will call this page index.HTML

<body>

<div data-role="page" id="home" data-theme="c">

<div data-role="content">

<div id="branding">

<h1>Restaurant Picker </h1>

</div>

<div class="choice_list">

<h1> What would you'd like to eat? </h1>

<ul data-role="listview" data-inset="true" >

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some Sushis</h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="pizza.jpg"/> <h3> A Pizza </h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="kebap.jpg"/> <h3> A Kebap</h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="burger.jpg"/> <h3> A Burger</h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some Nems </h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="tradi.jpg"/> <h3> Something more traditional</h3></a></li>

</ul>

</div>

</div>

</div><!-- /page -->

</body>

</HTML>

jQuery Mobile makes the distinction between HTML documents and pages. A jQuery Mobile app can be composed of one HTML document with multiple pages in it, using the data-role=“page� attribute each page is linked using anchors; or of many documents, each one having its own data-role=�page� linked using “normal� links. In our case, we will go for creating one HTML document per page.

So first we will open our body, and create our page using <div data-role=”page” id=”home” data-theme=”c”>

We will then open a content division, in which we put the branding of the app, and our first title followed by the list of different plates.

To create a jQuery Mobile list, we will put the data-role=”listview” attribute on our <ul> element. data-inset=”true” is here to style the list as an inset list (with rounded corners and padding around it).

Each list element <li> that contains an <a href> link will be automatically converted in a link list item by jQuery Mobile. To add the image, we simply add an image inside our < a href> link, and jQuery Mobile will do the work for us: it will display it on the left part of the list. Pretty easy.

The data-transition=”slidedown” creates the transition between two pages. You can find more transitions in the official documentation.

Here is what our first page looks like:

In Which Town Do You Want To Eat: Second Page

We will name the second page choose_town.HTML . Here is the HTML code, explanation of the tricky parts follows. Note that the header won’t change.

<body>

<div id="choisir_ville" data-role="page" data-add-back-btn="true">

<div data-role="header">

<h1> Restaurant Picker</h1>

</div>

<div data-role="content">

<div class="choice_list">

<h1> In which town do you want to eat? </h1>

<ul data-role="listview" data-inset="true" data-filter="true" >

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Amiens <span > 3 </span></a> </li>

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bastia <span > 2 </span></a> </li>

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li>

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bordeaux <span class="ui-li-count" > 1</span></a> </li>

…

</ul>

</div>

</div>

</div><!-- /page -->

</body>

We changed the id, so that jQuery Mobile can understand that this is another page. Notice that we used the data-add-back-btn=”true” on the page div, this will enable the Ajax back navigation and automatically add a back button to our title bar.

To create our title bar, we will create a div element, with the data-role=”header”.

To add a filter to our list, we will simply put data-filter=”true” on the ul element defining the list. Note that this is a filter that will filter the items of the list, and is not a search bar.

The last trick will be creating the little bubbles on the right of list elements, and we will do that by creating a span with the class and the numbers in it. And here is how the second page will look:

Choose a Restaurant: Third Page

We will name this page choose_restaurant.HTML and below is what the HTML code will look like.

<body>

<div id="choisir_restau" data-role="page" data-add-back-btn="true">

<div data-role="header">

<h1> Restaurant Picker</h1>

</div>

<div data-role="content">

<div class="choice_list">

<h1> Please choose a restaurant.</h1>

<ul data-role="listview" data-inset="true" >

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p> 4 stars </p></a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <p> 2 stars </p> </a></li>

</ul>

</div>

</div>

</div><!-- /page -->

</body>

This page is pretty similar to the first one, except for the title bar and the notation of the customer. We already saw how to create a title bar in previous section. For the customer rating, we add a p element with two classes: .classement is mutual to all the elements and will enable us to style this element with little stars, and then we use the class .one, .two, .three and .four to make the distinction between how many stars the customers gave to the restaurant. We will later in the article see how to style this in a nice way, but for the moment, we’ll leave it plain text.

Here is our third page:

Restaurant Details: Fourth Page

This page called restaurant.HTML is the trickiest of all, mainly because it has lots of elements on it. We will split the code in three parts: the restaurant description, the contact details, and the user rating. Here is our full HTML code.

<body>
<div id="restau" data-role="page" data-add-back-btn="true">

	<div data-role="header">
		<h1> Restaurant Picker</h1>
	</div> 

	<div data-role="content">
	<div class="ui-grid-a" id="restau_infos">
		<div class="ui-block-a">
		<h1> Le Mouffetard</h1>
		<p><strong>  Restaurant bar in the center of Strasbourg</strong></p>
		<p> On the menu: </p>
			<ul>
				<li> Milkshake with chocolat</li>
				<li> Planchettes </li>
				<li> Leek pie </li>
			</ul>
		</div>
		<div class="ui-block-b">
		<p><img src="restau01.jpg" alt="jeannette photo"/></p>
		<p><a href="http://www.google.fr" rel="external" data-role="button"> See our website</a></p>
		</div>
	</div><!-- /grid-a -->
	<hr/>

	<div class="ui-grid-a" id="contact_infos">
		<div class="ui-block-a">
		<h2> Contact us</h2>
		<p>30 Rue des Tonneliers</p>
		<p> 67000 Strasbourg	</p>
		</div>
		<div class="ui-block-b">
		<img src="01_maps.jpg" alt="plan jeanette"/>
		</div>
	</div><!-- /grid-a -->
	<div id="contact_buttons">
		<a href="http://maps.google.fr/maps?q=jeannette+et+les+cycleux&hl=fr&sll=46.75984,1.738281&sspn=10.221882,18.764648&hq=jeannette+et+les+cycleux&t=m&z=13&iwloc=A" data-role="button" data-icon="maps"> Find us on Google Maps </a>
		<a href="tel:0388161072"  data-role="button" data-icon="tel"> Call us </a>
	</div>
	<hr/>

	<div id="notation">
	<form>
	<label for="select-choice-0" class="select"><h2> User rating </h2></label>
		<select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" >
		   <option value="one" class="one"> Not good at all </option>
		   <option value="two" class="two">Average </option>
		   <option value="three" class="three">Pretty good </option>
		   <option value="four" class="four"> Excellent </option>
		</select>
	</form>
	</div>
	</div>

</div><!-- /page -->
</body>

For the restaurant details, we used the build in two column elements of jQuery Mobile. To create a two column block, we create a block with two child blocks. To create a nice button for the website, we added the data-role=”button” to the a href element, and a rel=”external” so that jQuery Mobile knows that Ajax should not used to open this link, but that this is an external link.

For the contact details, we once again used the two column trick. What’s to emphasize here are the buttons. The data-icon=”maps” and data-icon=”tel” will enable us to add custom icons to those buttons.

The interesting part about adding a GoogleMap link, is that some mobiles will be able to detect it, and will ask the user if they want to open them using the browser; if the Google maps app is installed on the device. The other interesting part is the href=tel:0388161072 protocol. This won’t work on a classic browser, but Smartphones will be able to open this link in the phone dial box, to directly call the number.

The last part is the user rating. For this we will use a simple select menu. The data-native-menu=”false” enables us to style the select using jQuery Mobile, so that we will be able to add some nice stars here too. Here again you will notice that we added the one, two, three, four class for further styling.

And here we have a fully functional jQuery Mobile webapp. But this app looks very “JqueryMobile-like�, so we now have to give it a little more styling to make it look nicer.

Next up on Page Two: Adding Some Style

The tutorial is not quite finished yet! There is more to learn over on page two.