iphonize your mobile website
DESCRIPTION
A quick tour of things you change to make your mobile website feel better on iPhone The presentation is available online here : http://slides.liip.ch/iPhonize/index.htmlTRANSCRIPT
![Page 1: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/1.jpg)
Date: 2008-08-05
Joel Bez Liip AG
What you can do to make you mobile website to look better on iPhones
iPhonize your mobile website
© Copyright 2008 Liip AG
![Page 2: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/2.jpg)
Doing an native iPhone app
Creating a mobile website
My tshirts addiction
What this is not about
iPhonize your mobile website
© Copyright 2008 Liip AG 2
![Page 3: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/3.jpg)
make your mobile website look nicer on iPhones
doing hacks on purpose, yeah!
What this is about
iPhonize your mobile website
© Copyright 2008 Liip AG 3
![Page 4: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/4.jpg)
You don't need to changeeverything to start make it
feel better
iPhonize your mobile website
© Copyright 2008 Liip AG 4
![Page 5: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/5.jpg)
HTTP_USER_AGENT
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {$template = 'home/iPhone.html';
} else {$template = 'home/noniPhone.html';
}
Wurfl
How to detect iPhones
iPhonize your mobile website
© Copyright 2008 Liip AG 5
![Page 6: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/6.jpg)
Adapt the viewport:
<name="viewport" id="iphone-viewport"content="width=480" />Demo
without viewport
with viewport
First tweak
iPhonize your mobile website
© Copyright 2008 Liip AG 6
![Page 7: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/7.jpg)
<script type="application/x-javascript">if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {setTimeout(hideURLbar, 0);
}, false);}function hideURLbar() {
window.scrollTo(0, 1);}
</script>
Hide the url bar
iPhonize your mobile website
© Copyright 2008 Liip AG 7
![Page 8: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/8.jpg)
http://www.joehewitt.com/files/liquid1.html
http://www.iphonewebdev.com/examples/liquified/
gradient_liquified.html
Detect iPhone orientation
iPhonize your mobile website
© Copyright 2008 Liip AG 8
![Page 9: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/9.jpg)
This starts a direct call on iPhones
<a href="tel:+41435003980">Call Liip</a>
Direct call links
iPhonize your mobile website
© Copyright 2008 Liip AG 9
![Page 10: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/10.jpg)
This starts the map native app on iPhones
Map link
<a href="http://maps.google.com/maps?q=zuerich">Liip Zurich</a>Directions link
<a href="http://maps.google.com/maps?f=d&saddr=Fribourg,+La+Sarine,+Fribourg,+Switzerland&daddr=zuerich,+switzerland">From Liip Frib.to Liip ZH</a>
Direct link to map
iPhonize your mobile website
© Copyright 2008 Liip AG 10
![Page 11: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/11.jpg)
This starts the native mail app on iPhones
<a href="mailto:[email protected][email protected]&subject=Pwnd%20at%20Foosball&body=I got you!">mail</a>
Direct mail links
iPhonize your mobile website
© Copyright 2008 Liip AG 11
![Page 12: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/12.jpg)
This starts the native youtube app on iPhones
http://www.youtube.com/v/<video identifier>
Direct youtube links
iPhonize your mobile website
© Copyright 2008 Liip AG 12
![Page 13: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/13.jpg)
CSS hacks
http://lipidity.com/apple/iphone-webkit-css-3
Javascript
Some things not availiable and others buggy
But some HTML5 features (getElementsByClassName, Offline database
SQLite)
iPhone debugger
Take advandtage of the media specificity
iPhonize your mobile website
© Copyright 2008 Liip AG 13
![Page 14: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/14.jpg)
iUI library
A javascript library for building iPhone interfaces
Used by facebook
Another example
iPhone native app
Other solutions
iPhonize your mobile website
© Copyright 2008 Liip AG 14
![Page 15: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/15.jpg)
iPhoney
http://www.iphoney.com
Aspen simulator (iPhone Developer tools)
http://www.playgroundblues.com/posts/2008/mar/13/aspen-simulator/
Tools
iPhonize your mobile website
© Copyright 2008 Liip AG 15
![Page 16: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/16.jpg)
If you have a mobile version :
iPhonize!!!
If you don't :
iUI is nice but you might consider doing an iphone app (depends)
Conclusion
iPhonize your mobile website
© Copyright 2008 Liip AG 16
![Page 17: iPhonize Your Mobile Website](https://reader038.vdocuments.us/reader038/viewer/2022100600/55580968d8b42ae31c8b5256/html5/thumbnails/17.jpg)
Send them to joel [alt] liip.ch
Sources :
Apple guidelines
http://www.iphonewebdev.com
iUI presentation by Joe Hewit
Questions
iPhonize your mobile website
© Copyright 2008 Liip AG 17