Video: HTML Crash Course For Absolute Beginners 2024
Ved Janine Warner, David LaFontaine
For å designe sider for mobilnett må du forstå den spesielle utfordringer og fordeler med mobil webdesign - inkludert små skjermstørrelser, forskjeller mellom mobilenheter og tregere tilkoblingshastigheter enn den stasjonære weben, for bare å nevne noen. Men den mobile weben tilbyr også tilgjengelighet og funksjoner som du ikke finner på skrivebordet, og gir deg mulighet til å koble deg til dine besøkende hvor som helst enn de er.
Tips for å designe en vellykket mobilnettsted
Når du begynner å tenke på hvordan du best kan designe mobilversjonen (eller versjonene) av nettstedet ditt, bør du vurdere de unike utfordringene på mobilnettverket. Her er noen viktige hensyn å huske på når du designer nettsteder for mobilnett:
-
Pass på at designen din passer på små skjermer.
-
Begrens bilder og tekst slik at sidene lastes raskt, selv ved langsomme tilkoblingshastigheter.
-
Lag koblinger og andre navigasjonsalternativer som er enkle å klikke på med (fett) finger, penn eller andre begrensede innspillingsalternativer.
-
Dine besøkende har et presserende behov for informasjon. Mange vender seg til mobilnett fordi de må. Dine besøkende kan gå tapt, sent eller virkelig trenger å vite hvem som vant superskålen i 1987 for å vinne en innsats.
-
Tid og sted. Ikke glem at brukerne dine har tilgang til mer enn bare ditt nettsted, og at deres handlinger sannsynligvis vil bli påvirket av hvor de er, hvilken tid på dagen det, og selv om det regner.
Velg en mobil webdesignstrategi
Din tilnærming til å designe et mobilt nettsted er avhengig av innholdet på nettstedet ditt, ressursene dine og publikum. Følgende tips kan hjelpe deg å forstå de mulige mobile webdesignstrategiene og velge en som fungerer for deg:
-
Opprett en enkel versjon av nettstedet ditt: Denne strategien sikrer at det største antall besøkende på nettstedet ditt i det minste kan få den viktigste informasjonen på nettstedet ditt (for eksempel telefonnummeret ditt når de er på vei til kontoret). Sørg for at designet fungerer på selv lave mobile enheter og koble det til skrivebordet ditt. Nettstedet // mobilynx. net, som er vist på figuren, er utviklet for å fungere på en rekke mobilenheter og gir en organisert samling av lenker til andre nettsteder designet for mobilnett.
-
Design flere versjoner: Mange designere lager forskjellige versjoner av et nettsted, og deretter direkte besøkende til den versjonen som er best optimalisert for deres skjermstørrelse og funksjonene som støttes av telefonen eller enhetene.
Hvis du har tid, kompetanse eller budsjett, er det den beste strategien å designe forskjellige versjoner av nettstedet ditt, hver optimalisert for de forskjellige størrelsene og egenskapene til ulike enheter.
-
Bruk innholdstilpasning: I utgangspunktet lager du ett webdesign og tilpasser det deretter til hver enhet. Dermed vil den grunnleggende strukturen til nettstedet være det samme på alle enheter, men bestemte elementer, for eksempel bildestørrelser eller utseendet på videoer, vil endres basert på hva enheten kan støtte.
Når du utvikler et nettsted ved hjelp av innholdsendringsmetoden, er det god praksis å begynne med å lage en wireframe, en slags blueprint til nettstedet ditt, som vist i figuren
-
Design en high-end versjon: > Dette fungerer hvis du vet at de besøkende primært bruker en avansert iPhone eller Droid, navnet som brukes til telefoner som kjører på Googles Android-operativsystem. Jasper Johal's Photography-webside, som er vist på figuren, ser bra ut på en iPhone og en stasjonær datamaskin. Bruk plasseringsbaserte søkemotorer for mobil
Mobilsøk blir den neste store, hyperkonkurrerende kampplassen. Alle de vanlige mistenkte er allerede der, slugging det ut for markedsandeler, men andre, mer spesialiserte, stedbaserte mobile søkemotorer kommer opp i håp om å hugge ut en nisje for seg selv. Her er noen av de store spillerne:
AOL Mobile:
-
// wap. AOL. com Spør. com Mobil:
-
// m. spørre. com Bing Mobile:
-
// m. bing. com Søk. Mobi:
-
// finn. mobi Google Mobile:
-
www. Google. com / m Taptu:
-
// m. Taptu. mobi Yahoo! Mobil:
-
// m. yahoo. no