Create an iPhone Optimised Website using jQTouch
Recently I have been digging deeper into the world of web development for mobile devices. In particular for mobile Safari which is the browser that the iPhone and iPod Touch uses. I have recently been working on a redesign of my main freelancing website and I’ve decided that I’d like an iPhone-friendly version and so I have chosen to create a tutorial out of developing my own iPhone optimised website.
This tutorial isn’t going to walk you through every single path you could take, but simply the path I decided to take. But it will give you a clearer insight on how to approach web development for Mobile Safari.
In this tutorial we’ll be using jQTouch which is a jQuery plugin for mobile web development on the iPhone and iPod Touch. You’ll be needing the framework so grab your copy here.
References for further reading will be posted at the bottom of this post.
So, get a webkit browser (Chrome/Safari) at the ready and your trusty iPhone or iPod Touch if you own one and get ready to create an iPhone optimised version of your website. Or in this case, my website.
The HTML Structure
Create a new HTML document (index.html) containing a simple HTML, Head, Body structure.
Add the following inside <head></head>.
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
What have we just done?
We have used the viewport meta key to help improve the presentation of content displayed in Mobile Safari. Initial-scale is the scale that the content is viewed at when the user first visits the page and maximum-scale and minimum-scale are the scales that determine how much the user can zoom in/out on content. Because all of these values are 1 in our code the user is unable to zoom in/out on the content which is what we want. Or at least, what I want. There is also user-scalable which determines whether the user can zoom in and out on content. The default is yes and so because I don’t want my users to be able to zoom in, i’ve set it to no.
apple-mobile-web-app-capable sets whether the site can run in full-screen mode and apple-mobile-web-app-status-bar-style simply sets the style of a status bar for a Mobile Safari web app.
The HTML Structure continued…
Now that the basic device/content rules are set up we can get on with developing the optimised website. It’s time to link to our CSS and Javascript Files. Reference to the jQTouch stylesheet (full or min) and also link to your main stylesheet that will contain the sites styles.
<link rel="stylesheet" href="assets/jqtouch/jqtouch.css" type="text/css" media="screen" /></div> <link rel="stylesheet" href="assets/css/main.css" type="text/css" media="screen" /></div>
Now we want to add references to the needed Javascript Files. From the jQTouch you want to link to jquery1.3.2.min.js and jqtouch.js. In your own javascript directory you want to create a file called global.js. In the end these are the links we’ll have.
<script type="text/javascript" src="assets/jqtouch/jquery.1.3.2.min.js"></script></div> <script type="text/javascript" src="assets/jqtouch/jqtouch.js"></script> <script type="text/javascript" src="assets/js/global.js"></script>
That’s the header section complete, for now.
Initialize jQTouch
Go back to your global.js file and insert the following:
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: true,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: []
icon: Sets the home screen icon for the application
addGlossToIcon: glossy button effect on icon
startupScreen: Pass a string path to a 320px x 460px startup screen for full screen apps.
statusBar: ‘default’ – Styles the status bar when running as a fullscreen app.
preloadImages: Pass an array of image paths to load them before page loads. Ex: ['images/link_over.png', 'images/link_select.png']
Creating the Content
Add the following after the opening body tag. This will be the content that is displayed on the first page the user sees. Effectively, our homepage. jQTouch will treat each div id on our page as it’s own separate page of content. So #portfolio will be it’s own page, so will #contact and so on and so forth.
<div id="home" class="current page"> <h1><a href="/" id="logo">Freelance Web Design</a></h1> <h2>Matthew Leak is an Interactive Web Designer with a passion for simplicity</h2> <ul class="links"> <li><a href="#about">About Me</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Get in Touch</a></li> <li><a href="http://twitter.com/matthewleak" target="_blank">Twitter</a></li> </ul> <!-- #home close --> </div>
Styling the Content
Open up main.css add the following CSS:
body {
background-color: #f7f9f9;
}
#logo{
background: url('../img/matthewleak-logo.png') no-repeat;
height: 0;
width: 0;
padding: 110px 0 0 110px;
display: block;
overflow: hidden;
margin: 30px auto;
}
h2{
color: #282829;
font-family: Times New Roman, serif;
font-size: 13px;
font-weight: normal;
letter-spacing: 2px;
line-height: 21px;
margin: 30px 15px;
text-align: center;
text-shadow: 1px 1px 0px #fff;
text-transform: uppercase;
}
#home ul.links{
margin: 0 15px 30px 15px;
}
#home ul.links li{
background: url('../img/arrow.png') right center no-repeat;
border-bottom: 1px dotted #bababa;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
letter-spacing: 2px;
list-style: none;
text-transform: uppercase;
width: 100%;
padding: 20px 0 20px 0;
}
#home ul.links li a{
color: #282829;
font-weight: bold;
text-decoration: none;
padding: 0 100px 0 0;
}
Here we changed our background colour to a faint grey and styled the logo. Because we have no keyword text on the page I have wrapped Freelance Web Design inside the Logo ID which is inside h1 tags so those search engine spiders can suck on all it’s yummyness.
Next we styled the h2 tags which is the intro paragraph and the first bit of text that the users sees upon landing on this page. So, with that in mind I’ve used a nice crisp serif font and increased the letter spacing for better visibility.
Next we created the navigation links. We created an unordered list (ul) containing the links inside li tags. To show Mobile Safari users that these are in fact links and will take them to further content, I have added arrows at the end of each list-item with a background position of right center.
Creating more Content/Pages
After #home, insert the following markup in your HTML document.
<div id="about" class="page"> <div class="toolbar"> <a class="back revealme" href="#home">← Tap to go back</a> </div> <h3>About Me</h3> <p> I'm Matthew Leak. A freelance web designer and developer in Manchester, UK with a passion for simple, interactive web design. I am experienced and have been working professionally in the world of freelancing for around 3 years and I've had the pleasure of working with some exciting people; both clients and colleagues. I'm also a huge fan of underground house music too. </p> <h3>What I do</h3> <ul class="skills"> <li>Bespoke Website Design</li> <li>Standards Compliant XHTML/CSS</li> <li>Wordpress Design & Development</li> <li>iPhone / Mobile Sites - <em>Like this one!</em></li> </ul> <!-- #about close --> </div>
Now straight away in this Div ID you can see that there’s something different. There’s a toolbar. This is basically a bar that will be at the top of the optimised website that will take the user back to the main page (#home).
Add some styling to #about
There isn’t really that much to style here. The only things that need styling are the toolbar and the content.
#about h3{
color: #282829;
font-family: Times New Roman, serif;
font-size: 16px;
font-weight: normal;
letter-spacing: 2px;
margin: 30px 15px 0 15px;
text-shadow: 1px 1px 0px #fff;
border-bottom: 1px dotted #282829;
padding: 0 0 5px 0;
display: block;
text-transform: uppercase;
}
#about .toolbar a{
background: black;
color: white;
display: block;
font-family: Times New Roman, Serif;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
padding: 15px 10px;
}
#about ul.contactme,p{
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #282829;
line-height: 23px;
margin: 15px;
}
#about a{
color: #282829;
text-decoration: none;
padding: 0 0 10px 0;
border-bottom: 1px dotted #bababa;
display: block;
font-family: times new roman, serif;
font-size: 16px;
}
#about ul.contactme li{
list-style: none;
padding: 0 0 10px 0;
}
We’ve styled the toolbar using a nice clear serif font and increased the letter-spacing to increase visibility. (usability is very important). Next we styled the p, ul, li and h3 using similar styles to the rest of the site.
Add as many divs as you like in the HTML but be sure to add a link to them. Developing for the iPhone really isn’t that hard once the actual optimisation has taken place.
The most important bit?
Add the following Javascript to the bottom of the <head></head> section of any website you wish to have an optimised mobile safari version of. This little bit of javascript will detect the iPhone or iPod touch and send it on it’s way to whatever page you wish.
<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1))
{
document.location = "http://tuttoaster.com";
}
</script>
Be sure to change http://tuttoaster.com to a link of your choice. Although, I think that kinda goes without saying.
References / Further Reading
A couple of useful links which aided me when learning how to create an optimised mobile safari version of my site.
Apple iPhone Dev Center – http://bit.ly/b5CSw3
jQTouch Initialization options – http://bit.ly/ch7f9S
Hope you enjoyed reading this and if you have any queries then just leave a comment on this thread and i’ll be sure to get back to you.
Quick note: One thing I like about Mobile Web Development, especially with Mobile Safari anyway, is that if it works on your iPhone, it’s gonna work exactly the same on the million other iPhones out there.
View the demo on your iPhone and tilt it landscape and portrait. You can style each of these positions differently but isn’t really needed for this. I’ll get into that at a later date.
This entry was posted on Monday, June 7th, 2010 at 9:00 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Matthew Leak is a freelance Web Designer and Developer from Manchester in the UK with an avid interest for new and exciting web technologies and trends. Follow Matthew’s updates on Twitter and be sure to check out his blog.
About the author Published by Matthew Leak
Related posts:
Don't leave, we've got plenty more.
8 Responses »
Trackbacks
Leave a Response
We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.
RSS Feed
Email Feed
Wordpress
DeziWeb
Isn’t it awesome?
Can’t see the demo… blank site!
Google Chrome, by the way.
The demo is working for me? Are you trying to view the demo with Javascript disabled?
I really like and appreciate your blog.Really thank you! Awesome.
The sliding did not work for me after following the tutorial. After troubleshooting, I found that the global.js is missing this part which is responsible for the sliding from one page to another:
$(function(){
jQT.addAnimation({
name: ‘slide’,
selector: ‘.revealme’
});
});
In the end the content of my global.js file looks like this:
var jQT = new $.jQTouch({
icon: ‘jqtouch.png’,
addGlossToIcon: true,
startupScreen: ‘jqt_startup.png’,
statusBar: ‘black’,
preloadImages: []
});
$(function(){
jQT.addAnimation({
name: ‘slide’,
selector: ‘.revealme’
});
});
And then the app started working like your demo.
Thanks for this tutorial!
Nice Tutorial! I’m also playing around with jqTouch actually
but reached very fast my boundaries of comprehension about
jQuery + jqTouch.
For example, use custom events or trigger something if first li is entered. Or why the hell already tested functions dont work anymore
or with interrupts.
I think i need more table edges for my head here.
If you are interest, you can have a look about it here:
http://stackoverflow.com/questions/3548853/jqtouch-event-handling-and-strange-behaviour-of-functions
Best regards,
Thomas
Making a website is really not that tough, and top of all, you can create a website or more website for free.
Building a website is a extremely individual skill and is different with each client.
It is more about revealing your business to new probable clients and generating new sales.