Create an iPhone Optimised Website using jQTouch
Here we changed our background color 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 yummy-ness.
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> <h2>About Me</h2> <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://35.226.78.216";
}
</script>
Be sure to change http://35.226.78.216 to a link of your choice. Although, I think that kinda goes without saying.
This entry was posted on Monday, June 7th, 2010 at 09:00 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.
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.
Here is another nice jQTouch tutorial/example: http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/
Hi,
Thanks for the tutorial. Just a little observation about the viewport metas. These seem to be useless unless you set the fixedViewport option to false when initializing jQTouch.
Indeed, this option is set to true by default so jQTouch defines its own values for the viewport.
On the example above, the values set in the metas are the same than the jQTouch ones, so no everything’s displayed as expected. But if you wanna change the scales, for example, you have to set the fixedViewport to false.
These lines:
are actually not required if you set the fullScreen and statusBar options to true, so jQTouch will take care of it.
I know these are details, but I think it’s cleaner to let jQTouch do the job 😉
Anyway, this library definitely needs a documentation… >_<'
Argh, the lines of code were filtered. I was talking about the “apple-mobile-web-app-capable” and “apple-mobile-web-app-status-bar-style” metas.
does this work on android phones?
(i don;t have an android to check)
Amazing, you have explained all the fundamentals of jqtouch for websites, including a detailed explaination of the viewport (which before didn’t really know much about), and plus it works almost seamlessly on Android! Thanks Matt!
Hi,
Thanks for Wonderful tutorial.
I have one question.
Your all page was static, if i want to dynamic pages from asp.net than how it will work?
Thanks
Ashish
Hey is there any reason why this doesnt work on a blackberry phone? I know this is ment for iPhone but what if i wanted to use this for blackberry too. Any suggestions on how to get this to work?
Hello
I had tried everything but the menu can not be clicked.Links works sometimes only the first two and so there is no more..I’ve tried thet tip from Hari butdid not helpt..