iPhone-venligt webdesign
11/6-2008
D. 10. juni blev det annonceret, at iPhone kommer til Danmark. Der er i skrivende stund - juni 2008 - langt over 8000 iPhones i Danmark, så inden længe bliver vi oversvømmet med dem. Undersøgelser har vist, at iPhone-ejere surfer meget mere på nettet end andre mobil-ejere (med deres mobil vel at mærke). Derfor er det vigtigt, at din hjemmeside ser ordentlig ud i en iPhone (og iPod Touch - som har samme browser som iPhone indbygget).
Her vil jeg diske op med en håndfuld tips til, hvordan du laver
webdesign til iPhone.
iPhone og iPod touch har en mobil udgave af Apples browser
Safari, men der er forskelle. Dog er den mobile Safari den mest avancerede mobil-browser på markedet. Her er et par facts om den:
- Den understøtter cookies
- Den understøtter ikke flash eller java
- Den understøtter XmlHttpRequest-objektet (juhuuuuu)
- Den understøtter gif, png, jpg og tiff-filer, men gif, png og tiff-filer må ikke være over 8 MB og jpg-filer ikke over 125 MB
- Den understøtter CSS, men naturligvis ikke hover
- Understøtter javascript, men selvfølgelig ikke mouseover- og mouseout-effekter
Nå - men her er et par guldkorn til at starte med:
Bookmark ikon på iPhone
Har du lavet en god side, så vil dine brugere muligvis bookmarke den, så de har et ikon på deres "Home screen". I stedet for at få et standard anonymt ikon, så lav dit eget, som du ser det her. Det ser mere prof ud.
Alt du skal gøre er at lave et png-billede i formatet 57x57 pixels. Hvis du laver det i et andet format, vil iPhone sørge for at re-size det. Når din side bliver bookmarket, så vil iPhone lægge et lag over, så det får det klassiske lidt glossy look for iPhone-ikoner. Her til venstre kan du se dét, jeg lavede til min EM 2008-side til iPhone (
www.v4d5.net/em).
Når du har lavet ikonet, skal du indsætte dette link-tag i din header på hjemmesiden.
<link rel="apple-touch-icon" href="http://www.v4d5.net/em/euro2008.png"/>
That's it... Din side har nu sit eget ikon på "skrivebordet" og det kommer til at se sådan ud:
Gør telefonnumre "opkalds-bare"
Skal du lave link til et telefonnummer, så gør det nemt for brugeren at ringe op. Laver du linket således:
<a href="tel:11114444">Ring 11112222</a>
så kan brugeren blot klikke på det og telefonen vil ringe op med det samme.
Vis det på Google Maps
Skal du vise noget på et kort, så brug Google Maps ved at skrive det således:
<a href="http://maps.google.com/maps?q=willemoesgade+54%2Ccopenhagen">Willemoesgade 54, København</a>
Når brugeren klikker på linket, åbner Google Maps automatisk på brugerens iPhone.
For at finde det link, du skal bruge, går du ind på
Google Maps, laver din søgning, sakser URL'en og sætter ind. Du kan evt. fjerne alle parametre undtagen dem med din adresse i. Det vigtigste er dét, der står efter
q=, men det kan du nok godt regne ud ;-).
På samme måde kan du også lave "directions" - altså fra-til.
Der ska' nok komme flere tips til, hvordan du designer
hjemmesider til iPhone. Dette var bare første omgang. I mellemtiden kan jeg kun opfordre til et besøg på:
Kommentarer
Ingen har endnu kommenteret dette indlæg. Du kan blive den første.
Har du lyst til at kommentere, er du mere end velkommen
