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

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

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

You don't need to changeeverything to start make it

feel better

iPhonize your mobile website

© Copyright 2008 Liip AG 4

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

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

<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

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

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

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

This starts the native mail app on iPhones

<a href="mailto:ebi@liip.ch?cc=patrick@liip.ch&subject=Pwnd%20at%20Foosball&body=I got you!">mail</a>

Direct mail links

iPhonize your mobile website

© Copyright 2008 Liip AG 11

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

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

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

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

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

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