Hvordan skrive nettsider for mobile enheter

InnholdsfortegnelseUtvide

• Generelle retningslinjer
• Layout for smarttelefoner
• Lenker og navigasjon
• Tips for bilder
• Ting å unngå

Sjansen er stor for at du har sett hvordan iPhone kan snu og utvide nettsider. Den kan vise deg hele nettsiden på et øyeblikk eller zoome inn for å gjøre teksten du er interessert i lesbar. På en måte, siden iPhone bruker Safari , bør webdesignere ikke måtte gjøre noe spesielt for å lage en nettside 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 nettside , må du tenke på hvem som skal se den og hvordan de kommer til å se den. Noen av de beste nettstedene tar hensyn til hvilken type enhet siden vises på, inkludert oppløsning, fargealternativer og tilgjengelige funksjoner. De stoler ikke bare på enheten for å finne ut av det.

Generelle retningslinjer for å bygge 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. Selv om du kan bruke emulatorer for all testing, gir de deg virkelig 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 å forringe grasiøst.Du kan skrive sidene dine for Flash-aktivert , widescreen-nettlesere, men sørg for at den kritiske informasjonen er synlig selv på 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 ikke andre mobile enheter det. Bygg en trådløs-spesifikk side – og gjør den enkel å finne.Hvis du skal bygge en spesifikk side for mobiltelefon- og trådløse kunder – gjør den tilgjengelig. En fin måte er å legge koblingen til den trådløse siden helt øverst i dokumentet, og deretter skjule den koblingen fra ikke-håndholdte enheter som bruker den håndholdte medietypen. Tross alt kommer de fleste til hjemmesiden din, selv på mobiltelefoner - og hvis lenken til den trådløse siden din ikke er der, forsvinner de hvis siden er for vanskelig å bruke.

Websideoppsett for smarttelefoner

Det første du bør huske når du skriver sider for smarttelefonmarkedet er at du ikke trenger å gjøre noen endringer hvis du ikke vil. Det fine med de fleste tilgjengelige smarttelefoner er at de bruker Webkit-nettlesere (Safari på iOS og Chrome på Android) for å vise nettsider, så hvis siden din ser ok 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 disse kolonnene ned i det lille vinduet, og dette kan gjøre dem svært 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 sidene i mindre biter.Det kan være vanskelig å lese lange tekstsegmenter på en mobiltelefon, så å legge dem på flere sider gjør dem lettere å lese.

Lenker 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 (unntatt kanskje for tenåringer som er vant til å sende mange tekstmeldinger). Selv på iPhone er det kjedelig å skrive inn lange URL-er. Hold dem korte. Men lang lenketekst er lettere å trykke på.Når du er på en side hvor flere separate ord er koblet til forskjellige artikler, helt ved siden av hverandre, kan det være svært vanskelig å trykke på det riktige uten å zoome. Mange mennesker vil bare gi opp og gå et annet sted. Lenker med 3 til 5 ord er lettere å klikke på telefonen enn 1-ords lenker. Ikke plasser navigasjonen din helt øverst på skjermen.Det er ikke noe mer irriterende enn å måtte bla gjennom skjermer og skjermer med 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 dukker opp er innholdet og overskriften. Så, under det er navigasjon. Ikke vær redd for å skjule navigasjonen din. Skjuler navigasjonslenker med CSS eller JavaScript og få dem til å vises bare når brukeren ber om det er en måte å gjøre siden enklere for smarttelefonbrukere.

Tips for bilder på smarttelefoner

Bildene må være små.Ja, Android og iPhone kan zoome inn og ut på bilder, men jo mindre de er, både i dimensjoner og nedlastingstid, jo mer fornøyde vil dine trådløse kunder være. Optimalisering av bilder er alltid en god idé, men for mobiltelefonsider er det kritisk. Bilder må lastes ned raskt.Bilder tar opp mye plass på nettsider når du ser dem fra en mobilenhet. Og selv om de ofte er veldig fine og får sidene til å se bedre ut når de vises på en nettleser i fullskjerm, er de ofte i veien på en mobilenhet. I tillegg når en smarttelefonbruker er på mobilnettverket, er det siste de vil betale for å laste ned en haug med enorme bilder eller navigasjonsikoner. Ikke legg store bilder øverst på siden.Akkurat som med navigasjon, kan det være veldig kjedelig å vente på at et bilde som tar opp 3 til 4 skjermer skal lastes helt øverst på siden. Og dette er ekstremt vanlig på nettsider. Det eneste unntaket fra dette er hvis leseren vet at de kommer til å få et bilde når de klikker, for eksempel i et bildegalleri.

Hva du bør 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 ønsker å ha disse på siden din, kan du det, men sørg for at siden fungerer uten dem.

Blits: De fleste mobiltelefoner støtter ikke Flash, så det er ikke en god idé å inkludere det på dine trådløse sider. Informasjonskapsler: Mange mobiltelefoner har ingen støtte for informasjonskapsler. 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 merkelige resultater. Nestede bord: Hvis du må bruke et bord, sørg for å ikke legge det i et annet bord. Disse er vanskelige for stasjonære nettlesere å støtte, og gjør i beste fall at siden lastes saktere. 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 mobilenhet som kan være halve skjermen og på en annen være to ganger bredden. Relative størrelser (som ems og prosenter) fungerer best. Skrifter: Ikke anta at noen av de fonter du er vant til å ha tilgang til vil være tilgjengelig på mobiltelefonene.