Hvordan utforme nettsteder for iPhone

Det er nyttig å ha en iPhone-vennlig nettside. Å ha en enklere å navigere nettstedet vil oppmuntre iPhone-brukere til å gå tilbake og anbefale nettstedet til andre. Hvis du allerede har opprettet en nettside, kan du lage en egen CSS-stilark som er formatert med iPhone-brukere i tankene. De to viktigste utfordringer i å skape en iPhone nettsted er skjermstørrelsen iPhone og inngangsenheten. IPhone har ikke en mus for en inngangsenhet; i stedet brukerne bruker fingrene til å navigere.

Bruksanvisning

1 Begynn en ekstern CSS-stilark og koble websidene dine til det.

<Link medie = "bare skjermen og (max-enhet bredde: 480px)" href = "iPhone.css" type = "text / css" rel = "stylesheet" />

Denne linken vil kjenne iPhones og vil henvise Safari til å bruke stil laget spesielt for iPhone-brukere i tankene. Innenfor linken, kan du se den maksimale skjermbredden er 480 piksler som iPhone. Den er knyttet til et stilark som heter "iPhone.css." Du kan kalle stil hva du vil - bare sørg for å sette inn riktig link.

2 Legg en meta tag til hodet delen av websidene dine. Safari i iPhone skalerer automatisk for å passe til iPhone 320 piksler x 480 piksler skjerm. Webdesignere foretrekker å ha full kontroll over hvordan deres nettsteder er skalert på forskjellige enheter.

<Meta name = "view" content = "width = 320, initial-skala = 1,2, bruker skalerbar = no">

Denne koden forteller Safari at innholdet på nettstedet bredde er 320 piksler bred og vil sette den opprinnelige skalaen til 1,2. Det heller ikke tillate at iPhone bruker å skalere innholdet på nettstedet.

3 Erstatte eventuelle mus-over elementer på siden din. IPhone bruker ikke en mus; i stedet bruker du fingrene for taping, zooming, flicking og klemming. Siden det ikke er en markør til å rulle rundt på skjermen, ikke mus-over alternativet fungerer ikke på iPhone.

4 Skift ikke støttes elementer. Flash og Java støttes ikke på iPhone. Du finner en liste over støttede elementer i Safari Reference Library (developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html).

5 Husk å ikke legge for mange linker i en liten plass, siden det vil gjøre det vanskeligere for en iPhone-bruker nøyaktig trykke på riktig link. Det er bedre å bruke større knapper og lenker. Du kan formatere alle koblingene i din CSS-stilark.

Hint

• Når du designe skjemaer på nettstedet ditt, ta hensyn til at halvparten av skjermen vil bli tatt opp av tastaturet og lage skjemaer enkel og liten. Unngå å bruke ramme; iPhone-brukere ikke har rullefelt. Ved hjelp av søyler og blokker vil gjøre siden mer brukervennlig.