Sjansen er stor for at du har sett hvordan iPhone kan snu og utvide nettsider. Det kan vise deg hele websiden med et øyeblikk eller zoome inn for å gjøre teksten du er interessert i lesbar. På en måte, siden iPhone bruker Safari, webdesignere trenger ikke å gjøre noe spesielt for å lage en webside som fungerer på iPhone. Men vil du virkelig at siden din bare skal fungere - eller skille seg ut og skinne?
Når du bygge en webside, må du tenke på hvem som skal se det og hvordan de skal se på det. Noen av de beste nettstedene tar hensyn til hvilken type enhet siden vises på, inkludert oppløsning, fargevalg og tilgjengelige funksjoner. De stoler ikke bare på at enheten finner ut av det.
Generelle retningslinjer for bygging av et nettsted for mobile enheter
- Test på så mange enheter du kan. Det første du bør gjøre er å se nettstedet ditt på en iPhone og så mange forskjellige mobile enheter eller emulatorer som du kan. Mens du kan bruke emulatorer for alle testene dine, gir de deg ikke den samme følelsen som å prøve å navigere gjennom et nettsted på den lille skjermen. Du bør teste på faktiske enheter så mye som mulig.
- Få sidene dine til å bli dårligere. Du kan skrive sidene dine for Flash-aktivert, widescreen-nettlesere, men sørg for at kritisk informasjon er synlig selv i en liten skjerm som ikke kan håndtere noen spesielle funksjoner (som informasjonskapsler, Ajax, Flash, JavaScript, etc.). Alt utover XHTML Basic vil være utenfor noen mobiltelefoner. Mens de fleste smarttelefoner kan håndtere alle disse tingene, kan andre mobile enheter ikke.
- Bygg en side som er spesifikk for trådløs kommunikasjon - og gjør den enkel å finne. Hvis du skal bygge en bestemt side for mobiltelefonene og trådløse kunder - gjør den tilgjengelig. En flott måte er å sette lenken til den trådløse siden helt øverst i dokumentet, og deretter skjule den lenken fra ikke-håndholdte enheter ved hjelp av typen håndholdt media. Tross alt kommer de fleste til hjemmesiden din, til og med på mobiltelefoner - og hvis lenken til den trådløse siden din ikke er der, vil de gå hvis siden er for vanskelig å bruke.
Websideoppsett for smarttelefoner
Det første du bør huske når du skriver sider til smarttelefonmarkedet, er at du ikke trenger å gjøre noen endringer hvis du ikke vil. Det som er bra med de fleste tilgjengelige smarttelefoner, er at de bruker Webkit-nettlesere (Safari på iOS og Chrome på Android) til vise websider, så hvis siden din ser bra ut i Safari eller Chrome, vil den se bra ut på de fleste smarttelefoner (bare mye mindre). Men det er ting du kan gjøre for å gjøre nettleseropplevelsen mer behagelig:
- Husk at skjermen er liten. Smarttelefoner vil kondensere alle kolonnene ned i det lille vinduet, og dette kan gjøre dem veldig vanskelige å lese uten å zoome. De fleste brukere er vant til å zoome, men det kan bli slitsomt. En lang kolonne med tekst er lettere å lese.
- Del sider i mindre biter. Det kan være vanskelig å lese lange tekstsegmenter på en mobiltelefon, så å legge dem på flere sider gjør det lettere å lese dem.
Koblinger og navigering på iPhones
- Jo kortere nettadressene er, jo bedre. Hvis du noen gang har prøvd å skrive inn en URL på en mobiltelefon, vil du vite at det er vondt (bortsett fra kanskje for tenåringer som er vant til å sende mange tekstmeldinger). Selv på iPhone er det kjedelig å skrive inn lange nettadresser. Hold dem korte.
- Men det er lettere å trykke på lang lenketekst. Når det er på en side der flere separate ord er lenket til forskjellige artikler, helt ved siden av hverandre, kan det være veldig vanskelig å trykke på den rette uten å zoome. Mange vil bare gi opp og gå et annet sted. Koblinger med 3 til 5 ord i er lettere å klikke på telefonen enn 1-ords lenker.
- Ikke plasser navigasjonen helt øverst på skjermen. Det er ikke noe mer irriterende enn å måtte bla gjennom skjermbilder og lenker for å finne informasjonen du ønsker. Hvis du har sett på nettsider som er designet for mobiltelefoner, vil du se at de første tingene som vises, er innholdet og overskriften. Deretter, under det, er navigering.
- Ikke vær redd for å skjule navigasjonen.Skjuler navigasjonskoblinger med CSS eller JavaScript, og å få dem til å vises bare når brukeren ber om at det er en måte å gjøre siden enklere for smarttelefonbrukere.
Tips for bilder på smarttelefoner
- Bildene må være små. Ja, Android og iPhones kan zoome inn og ut på bilder, men jo mindre de er, i både dimensjoner og nedlastingstid, desto lykkeligere vil dine trådløse kunder være. Optimalisering av bilder er alltid en god ide, men for mobiltelefonsider er det viktig.
- Bilder må lastes ned raskt. Bilder tar mye plass på nettsider når du ser dem fra en mobilenhet. Og selv om de ofte er veldig hyggelige og får sidene til å se bedre ut når de vises i en fullskjerm-nettleser, kommer de ofte i veien for en mobil enhet. Pluss når en smarttelefonbruker er på mobilnettverket, er det siste de vil betale for å laste ned en haug med store bilder eller navigasjonsikoner.
- Ikke plasser store bilder øverst på siden. Akkurat som med navigering, kan det være veldig kjedelig å vente på at et bilde som tar opp 3 til 4 skjermbilder lastes inn helt øverst på siden. Og dette er ekstremt vanlig på websider. Det eneste unntaket fra dette er hvis leseren vet at de kommer til å få et bilde når de klikker, si i et fotogalleri.
Hva du skal unngå når du designer for mobil
Det er flere ting du bør unngå når du bygger en mobilvennlig side. Som nevnt ovenfor, hvis du virkelig vil ha disse på siden din, kan du, men sørg for at nettstedet fungerer uten dem.
- Blits: De fleste mobiltelefoner støtter ikke Flash, så det er ikke lurt å ta det med på de trådløse sidene.
- Informasjonskapsler: Mange mobiltelefoner har ingen informasjonskapselstøtte. iPhones har informasjonskapselstøtte.
- Rammer: Selv om nettleseren støtter dem, tenk på dimensjonene på skjermen. Rammer fungerer bare ikke på mobile enheter - de er veldig vanskelige eller umulige å lese.
- Tabeller: Ikke bruk tabeller for layout på en mobilside. Og prøv å unngå bord generelt. De støttes ikke på alle mobiltelefoner (selv om iPhones og andre smarttelefoner støtter dem), og du kan ende opp med rare resultater.
- Nestede bord: Hvis du må bruke et bord, må du passe på at du ikke hekker det i et annet bord. Dette er vanskelig for stasjonære nettlesere å støtte, og i beste fall får siden til å lastes saktere inn.
- Absolutte tiltak: Med andre ord, ikke definer dimensjonene til objekter i absolutte størrelser (som piksler, millimeter eller tommer). Hvis du definerer noe som 100px bredt, kan det på en mobil enhet som kan være halvparten av skjermen og på en annen være to ganger bredden. Relative størrelser (som ems og prosenter) fungerer best.
- Skrifttyper: Ikke anta at noe av skrifttyper du er vant til å ha tilgang til, vil være tilgjengelig på mobiltelefonene.