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.
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="https://www.noupe.comjs/jquery-1.7.1.min.js"></script> <script src="https://www.noupe.comjs/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="https://www.noupe.comsushis.jpg"/> <h3> Some Sushis</h3></a></li> <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="https://www.noupe.compizza.jpg"/> <h3> A Pizza </h3></a></li> <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="https://www.noupe.comkebap.jpg"/> <h3> A Kebap</h3></a></li> <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="https://www.noupe.comburger.jpg"/> <h3> A Burger</h3></a></li> <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="https://www.noupe.comnems.jpg"/> <h3> Some Nems </h3></a></li> <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="https://www.noupe.comtradi.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="https://www.noupe.comrestau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p> 4 stars </p></a></li> <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="https://www.noupe.comrestau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li> <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="https://www.noupe.comrestau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li> <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="https://www.noupe.comrestau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li> <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="https://www.noupe.com 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="https://www.noupe.comrestau01.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="https://www.noupe.com01_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
Send Comment:
99 Comments:
Application development Toronto- IOS development for your business by our mobile App development team makes secure, scalable, and sustainable experience.
Good. But can we still publish jquery mobile-based app into google play store? As long days no upgrade in jquery mobile. Does jquery mobile 1.4.5 support the latest version of jquery like 3.4+
Jquery older version has some vulnerability
Kindly suggest
Thank You
Thats really cute but Ii must be describe about each syntax what it mean like in what case it works
good work
Hi Stephanie,
Great tutorial. I've downloaded the files, but when I click on any link, for a example, "Some sushis", the message "Error loading page appears". The links in the .html file doesn't work. Can you tell why?
I really like this tutorial very much and help me a lot to understand jquery mobile but after completing it how do i put in app store and in android market .
Hi..Which IDE we can use for JQuery ..?
How did you adapt it to wordpress :)
Great piece any chance it could be done as a wp plugin :)
Thanks a lot. Awesome tutorial. Download link does not work. Please check.
Awesome Tutorial Stéphanie! :) Just what I was looking for!
<3'd your work on your website. Keep it up!
Will definitely be in touch.
Cheers,
AK
Thx from Spain.
Great job from first line to last :)
One of the best example i have seen yet,
Hi!
Thanks Stéphanie for this great tutorial, amazing work! Since many people asked for it, I have written the server-side code for this application using Django and written a basic tutorial. You can find it here: The code is also in github using the templates done by Stéphanie. Enjoy!
Hello Stephanie,
I built a Jquery mobile application where I used only as you did data-transition attribute to link a html page to another one.The issue is that I faced some problems when i reach the page that I am linking to: the format is messed up. However if I add the rel="external" attribute to the anchor tag I reach the html page I want to go to with a good format. The problem is the last solution for the first problem creates another problem which is the data-transition attribute will be automatically disabled and a blank page shows up between the transition of my two html pages which is undesired.
So how could I make a transition without showing a blank page while maintaining a good format?
In the tutorial you didn't even used the relation attribute though you used html files linked together how did you make that happen?
Thank you a lot.
PS: By the way I searched for many solutions like adding functions in a jquery file: $(document).bind("mobileinit", function(){
$.mobile.defaultTransition = 'none';
});
Or changing in the css:
-webkit-backface-visibility:hidden;
All these solutions were useless
Hi Stephanie, i came across your tutorial looking for help on how to integrate the server side. I've been learning jquery mobile for a while now but i keep having problems with the server side.
Im creating a simple app just for practice, i hace a simple login form, then if the login is succesfull it shows a list of data asociated with that user.
I tried using php and some javascript, but i keep having problems with functions not being called at the right moment, or the page not refreshing to show dynamic data, or buttons not functioning correctly. I'm really frustrated since i cant find any usefull information on how to solve this issues. I see tons of questions on quora about preventing default behavior for forms (for the login section i'm trying to do)
I still dont know if i should use separate htmls for pages that load dynamic info or should stick to one page structure like your demo.
What tips can you give me about loading content via php? how to call functions?
Hi Stéphanie,
Can i use and edit the script to build a app for my own restaurante, or do u have copyright and some licences?
Hey..Great Tutorial !! Thank you !!
Very good ,useful and helpful tuto!
thans you.
Truly impressive and help tutorial for developers...
Thanks..
Pretty awesome tutorial. I was able to understand the code pretty easy with the explanations that you provided. Amazing what jQuery Mobile can do...
I am Tizen developer in India. This tutorial is really appreciable to start the jQuery Mobile development. Great Work..
HI Stéphanie,
Amazing work . really good tutorial for the starters, I Have created a PhoneGap application out of it :)
Just a query here , do i need to add the below code in all the pages like (choose_town.html,choose_restaurant.html) apart from index.html , or we just need to add this only once in index.html page and rest all the pages will automatically refer to the css/js loaded in index.html page.
Awesome tutorial. My first tutorial that I read when i started Jquery Mobile Development.
very interesting and clear tutorial
thank you
do you work as freelance?
We are using to add the numbers in the buttons but if we have to make it dynamic as in it changes according to the numbers of restaurants present what would you suggest I do...Need your suggestions!
Hi Stéphanie,
Awesome UI and Great Tutorial. Thanks for sharing with Community.
Brilliant thanks..
JQuery rocks! Thanks for sharing.
Hi Stéphanie,
Its ultimate good tutorial.
But one query, i many times searching but not found exact result.
Query : what is best way for jquery mobile html page creation ? single html page or multiple html page ?
i mean multiple pages (data-role="page") were in one html file ?
OR
we create separate html pages ?
* i hope you understand my query, please reply me its very helpful for everyone.
Hi Stephanie,
I just wanted to thank you for illustrating the capabilities of jquery and the work you put into this - it is a fantastic article. You are very talented.
- Matt
je n'ai jamais vu un plus grand développeur que toi.
tu m'apprends a coder.
tu es le meilleur et aussi tu es super gentil c'est plus même
merci pour tous!
Hi, Thank you for this tutorial , but the links not work , anyone can re-upload again.
Thanks
jQuery + jQuery Mobile + jQuery Template Plugin(or Knockout.js) + JSON
You have small amount of code. User download only what she or he wants and is easy to upgrade web page. On the we convert our web app to native app...
eve-star.co.uk/rest/
Have been assigned to convert a Jewellery e-commerce website into a standalone mobile site instead of using CSS3 Media Queries. This tutorial's gonna come handy in the process. Thank you!
Here you'll find scripts with free demo
Hi Stephanie,
I stumbled upon your app while searching for a jQuery Mobile cascading SELECT drop-down demo, but unfortunately, though useful, it did not serve my purpose. But hey, it will, if you can modify it to use SELECT cascading dropdowns and finish off the app in a single page :
1. Dropdown to select the food
2. Dropdown to select the town
3. Dropdown to select the restaurant
However, it will be more useful if the town dropdown contained only the list of towns which has the selected food at dropdown 1, and the restaurant dropdown contained only the list of restaurants which have the selected food at dropdown 1 and is located at the selected town at dropdown 2 (true and related cascading)
Hope you will do it. If not, I would be thankful if you can provide me links to other resources on how to use cascading dropdowns using jQuery Mobile, preferably linked to related database tables (in your example, it would be food, town and restaurant tables).
Thanks!
Hello, any way to dynamically grab the restaurant infoamtion...
Would i use Google Maps API?
or how would one get this info?
because it would be impossible to manually put in restaurants,
I want to know how to create on based off user location to see what is around them...
Any Ideas?
Thanks for your time...
Thanks
Hello,
Nice Tutorial. If i wanted to make a live app... How would i get all the restaurants information automatically? would I use Google maps API to connect the restaurants in Real Time?
Any suggestion on how to bring in the restaurants to the app without having to manually put them in would be great.
In other words is there a dynamic way to grab all the restaurant information and menu if that information is provided...?
Thanks,
Sebastian
thanks for your tutorial,,, but its offline,, can you make online tutorial,, like mysql database.. so i can fill other data..
overall thanks a lot h_n
Great job Stephanie....I am 3d cad designer. Web design is my hobby.
I would use jQuery Templates plugin and I will get data from server separately from the document(JSON data format).
Example:
Is easy to make changes and user download only part she(he) wants...
Great JOB.. excellent
Great work you little rock star! I am retrofitting your techniques over an existing Android application and it works as advertised, however, it's slow as hell! I suspect it has to do with sucking down the js/css/and images from my server. Any idea how those resources might be packaged in the Android APK and made available locally on the phone?
Peace,
Scott
Where is the link in github as I can't locate it and thatnks fo the heads up
For those asking for server side code: again, this is a tutorial shared with love to the community to show what can be done with jQueryMobile, not a "copy paste and use as it is app". If you have special developpement needs, I recommand that you contact a developper that will be able to do the work for you :)
Hello.
Your sample is great!
I am wondering one thing. IF choose_town.html doesn't static restaurant data, the other words, if it use the data from Server DB, How can I write it?
really cool site..
Thanks for the post, very good explanation. It will be also nice to have a backend admin with a database so the whole process is dynamic and easy to add restaurants.
Hi, really loved this, but having one problem.
I am using a slider (I had a settings page already before seeing this tutorial), but the slider doesn't work for some reason?
I can change the numbers with the box, but cannot move the slider left or right?
Any ideas?
Many thanks for this, just love it,
Malky
I think am just like Stephanie because am not too strong on server side scripting. Can any server side expert create a tutorial on this idea but fetching data from a database or from the cloud i.e restaurant adding new meals, maps marker or location.
Thanks for responding. I don't know much about making apps or coding. I just know with Snappii apps, I can see my work on my Ipod as I go along. How could I know what my app looks like when I'm working with iquery mobile? And how can I test it? Thanks.
How can I view the app on my devices as I go along? Is there any way to do that? (like I can do with Snappii apps)?
Yeah ... you're cool! :0)
Thanks
awesome!!!
hi,stephaniew you did a grt job and your tutorial is grt.i too learning mobile application(html5) iam a beginner.i hav a small doubt iam going to purchase new tap which one is better for practicising this mobile applications
i want to see how it works in my tab,thats the reason y i want to buy
What software have you used for the mobile wireframe?
Thanks for the post, very good explanation. It will be also nice to have a backend admin with a database so the whole process is dynamic and easy to add restaurants.
Very nice tutorial!
A question for the professionals around here:
> but creating a native app can be pretty expensive.
What percentage a solution like this would cost less than a native app?
How much a app like this would cost (in your country)?
Thanks!
Plz tel me... there is an error in jquery-1.7.1.min.js file....
Awsome.....
Hi , i have a cuestion ; i try to undestand the css code but tell me, you modify the ui original source using de css to create the effect of the button dont by together on the web browser ( padding) ?
Excellent Stuff Stephanie.. We need more people like you in this world !!
1 – on the restaurant page, you listen for pageinit event with “live”, why don’t just use “bind”, I do a test and if “live” is used, the event is call many times. in my test, I listen for a click on a button to make ajax call and, the ajax is call one more time each time I show the page (*)
=> it was done this way in the demos and in the documentation, I read that this it uses live instead of bind, to be able to attach events even when page is not created yet. With bind it seems to that the page and elements has to be already created in dom.
2 – why keep header tag in secondaries pages, heads won’t be load in the DOM (and that the reason why you put the script tag inside the header-div)
maybe for test page individually ? => Yes that's it, for debug reason and so that people in the tut can see each page indivudally
No sorry this is pure HTML CSS and JavaScript, I'm not a native developer :)
Stéph you're awesome....tnx
This article is simply awsome,which very childish way of explaination,that any body can understand.
Thanks for sharing ur hard work...........
Thanks for the great tuto.
Just 2 questions :
1 - on the restaurant page, you listen for pageinit event with "live", why don't just use "bind", I do a test and if "live" is used, the event is call many times.
in my test, I listen for a click on a button to make ajax call and, the ajax is call one more time each time I show the page (*)
2 - why keep header tag in secondaries pages, heads won't be load in the DOM (and that the reason why you put the script tag inside the header-div)
maybe for test page individually ?
Thanks again to share your knowledges
(* sorry if my english is impossible to understand, be sure I do my best ^^)
Great tutorial and nice looking.
I have included the github link
Pretty awesome!!! Thanks for sharing your hard work!
Please do you have the tutorial that uses this as a native app? Really looking for a step by step tutorial on a native app
Merci Stéphanie , c 'est clair et simple ....
Est-ce que tu as essayé avec un quelque en mvc ?
Cordialement
Have something in mind fora while and your tutorial really helps make it clear. Very exciting to see this work. It would be nice to have the server end for sure, e.g. PHP + MySQL...
Hi Stephanie,
nice web project, you really give a good start point.
I would like to ask you a question to see if you can help me with any tip, In the restaurant detail page I want to have another button that let share all I have in the screen with some, send this by email. But not sending this view as a link, i would like to send it as a picture, png or jpg, etc.. or as html email? any ideas or place where i can find more of this point?
Another think is if it's any way that once you rate the restaurant, the rating remain on place becuase on your sample after you rate the restaurant and go back one page the rate reset to the beginning, any idea about this one too?
again great job
Regards
Maykel
Great job Stephanie,
I've learnt a lot in my quest to develop mobile web apps.
I will be needing back end server scripting and intend to get a php expert to partner on my project.
Once again, thanks a lot.
Dunno if you're still around, but I was able to create this one:
Good tutorial.
I met one issue here, the "data-add-back-btn" is hiding, while refresh page.
Hum not for this one, I simply created some Illustrator quick wireframing vectors. I also tend to use a lot balsamiq mockups which is a great wireframing tool :)
Stephanie,
Thanks for such a great tutorial. I really liked your wireframe of the application. Was there a special tool you used to draw this out?
Thanks,
Russ
You might be right, but the other way is also true. Imagine that you do this app, not for an entire country, but just a small region. You got a car, you really, like really really, want to eat a huge peace of meat tonight. Since you got a car, you can easily change city, as long as it's not too far from your current location. So you might want to choose the meal, then the city ^^
As I said : this is "just" a demo, it was made for my students, to show them what can be done. It has to be adapted to each projet, as I also say : design for the target audience, and take context into account :)
Hye,im a fan of your writings. Greate tutorial, theres so much that i can learn from you.
Very nice demo, the Restaurant Picker has one major design flaw however: One should pick the city on the first and the desired plate on the second screen. Why? Because it is very likely that you change your mind on what you want to eat, but it is completely unlikely that you suddenly change the city where you currently are (and where hunger gets you). I mean hypersonic transportation and Star Trek-like beaming hasn't been invented yet...
Great tutorial, easy to follow. A good introduction to JQuery Mobile.
avazing tutorial..helped a lot to know abt html5.I tried the code bt it was not working...
Amazing tutorial Stéphanie... I didn't found the github repo. Please give me the link. Thanks! Keep the amazing job.
Well, the demo was intended to show the front side and CSS styling. For the "server" side it will depend : you could use PHP, but you could also use Python, or even ASP.Net. You could also imagine tu use this on a native app in a webview, storing data in the storage of the Phone and then would have to use JAVA to store data and JavaScript to make interraction. So "server side" would really depend on how and on which kind of device you would use the app.
Plus I'm a WebDesigner, front developper, HTML and CSS expert, not bad with JavaScript and jQuery, but I'm unfortunately not a server side PHP ninja (except with WordPress but that's not hardcore PHP).
I also put the code on github for this purpose : if anybody feels like to create a PHP, Python, JAVA server side code, just feel free to fork in the code. And drop me a mail, I'll update the master branch to add the server side :)
Strange, no 404 for my, maybe DNS problems or so ?
Great tutorial! Can you do one to involve steps for the back-end server side?
Thanks
must read for those who want to be good in mobile app! great work!
amazing work Stephanie helped me a lot.. was needing it.
and thankyou for putting it on github..
Thanks a lot for the feedbacks. I just put the whole app on github so that you can fork it in an easier way :
Excellent. Easy to adapt to wordpress. Nice Job. Thanks for sharing.
Very comprehensible tutorial. Thanks Stéphanie!
Very good tut, Thanks!
Fun, I'm making such a service (French) : closetofood.com
Merci Stéphanie pour ce superbe tuto, exactement ce qu'il me fallait pour attaquer mon premier site jQuery mobile. Thanks!
Well done Stéphanie!
It's really useful and easy to understand.
Thanks!
I was working on a restaurant app for a hackathon, it will be fun to implement this, this is the link to the app
Nice article, especially part 2.
Great Tut and beautiful web app design. Thanx very much.