Chancerne er, at du har set, hvordan iPhone kan vende og udvide websider. Det kan vise dig hele websiden med et øjeblik eller zoome ind for at gøre den tekst, du er interesseret i, læselig. På en måde, siden iPhone bruger Safari, webdesignere skal ikke gøre noget særligt for at oprette en webside, der fungerer på iPhone. Men ønsker du virkelig, at din side bare skal fungere - eller skille sig ud og skinne?
Når du oprette en webside, skal du tænke over, hvem der skal se det, og hvordan de vil se det. Nogle af de bedste websteder tager højde for, hvilken type enhed siden vises på, herunder opløsning, farveindstillinger og tilgængelige funktioner. De stoler ikke bare på enheden for at finde ud af det.
Generelle retningslinjer for opbygning af et websted til mobile enheder
- Test på så mange enheder som muligt. Den første ting du skal gøre er at se dit websted på en iPhone og så mange forskellige mobile enheder eller emulatorer, som du kan. Mens du kan bruge emulatorer til al din test, giver de dig virkelig ikke den samme fornemmelse som at prøve at navigere gennem et websted på den lille lille skærm. Du skal teste på faktiske enheder så meget som muligt.
- Få dine sider til at nedbrydes yndefuldt. Du kan skrive dine sider til Flash-aktiveret, widescreen-browsere, men sørg for, at de vigtige oplysninger er synlige, selv i en lille skærm, der ikke kan håndtere nogen specielle funktioner (som cookies, Ajax, Flash, JavaScript osv.). Alt ud over XHTML Basic vil være ud over nogle mobiltelefoner. Mens de fleste smartphones kan håndtere alle disse ting, kan andre mobile enheder ikke.
- Byg en trådløs-specifik side - og gør det let at finde. Hvis du skal oprette en bestemt side til dine mobiltelefoner og trådløse kunder - gør den tilgængelig. En god måde er at placere linket til den trådløse side øverst i dit dokument og derefter skjule dette link fra ikke-håndholdte enheder ved hjælp af typen håndholdt medie. Når alt kommer til alt, kommer de fleste til din startside, selv på mobiltelefoner - og hvis linket til din trådløse side ikke er der, forlader de, hvis siden er for svær at bruge.
Webside layout til smartphones
Den første ting, du skal huske, når du skriver sider til smartphone-markedet, er at du ikke behøver at foretage ændringer, hvis du ikke vil. Det gode ved de fleste tilgængelige smartphones er, at de bruger Webkit-browsere (Safari på iOS og Chrome på Android) til vise websider, så hvis din side ser okay ud i Safari eller Chrome, vil den se fint ud på de fleste smartphones (bare meget mindre). Men der er ting, du kan gøre for at gøre browseroplevelsen mere behagelig:
- Husk, at skærmen er lille. Smartphones kondenserer alle disse kolonner ned i det lille vindue, og dette kan gøre dem meget svære at læse uden at zoome. De fleste brugere er vant til at zoome, men det kan blive trættende. En lang tekstsøjle er lettere at læse.
- Opdel sider i mindre stykker. Det kan være svært at læse lange tekstsegmenter på en mobiltelefon, så det er lettere at læse, hvis du lægger dem på flere sider.
Links og navigation på iPhones
- Jo kortere webadresserne er, jo bedre. Hvis du nogensinde har prøvet at indtaste en URL på en mobiltelefon, ved du, at det er smertefuldt (undtagen måske for teenagere, der er vant til at sende mange sms'er). Selv på iPhone er det kedeligt at indtaste lange webadresser. Hold dem korte.
- Men lang linktekst er lettere at trykke på. Når det er på en side, hvor flere separate ord er linket til forskellige artikler, lige ved siden af hinanden, kan det være meget vanskeligt at trykke på det rigtige uden at zoome. Mange mennesker vil bare give op og gå et andet sted. Links med 3 til 5 ord i dem er lettere at klikke på telefonen end 1-ords links.
- Placer ikke din navigation øverst på skærmen. Der er intet mere irriterende end at skulle bladre gennem skærme og skærme med links for at finde de oplysninger, du ønsker. Hvis du har kigget på websider, der er designet til mobiltelefoner, vil du se, at de første ting, der vises, er indholdet og overskriften. Derefter er der under navigationen.
- Vær ikke bange for at skjule din navigation.Skjuler navigationslinks med CSS eller JavaScript og få dem til at vises kun, når brugeren beder om, det er en måde at gøre siden lettere for smartphone-brugere.
Tips til billeder på smartphones
- Billederne skal være små. Ja, Android og iPhones kan zoome ind og ud på billeder, men jo mindre de er, både i dimensioner og downloadtid, jo lykkeligere bliver dine trådløse kunder. Optimering af billeder er altid en god idé, men for mobiltelefonsider er det kritisk.
- Billeder skal downloades hurtigt. Billeder optager meget plads på websider, når du ser dem fra en mobilenhed. Og mens de ofte er meget pæne og får siderne til at se bedre ud, når de vises i en fuldskærms-webbrowser, kommer de ofte i vejen for en mobilenhed. Plus, når en smartphone-bruger er på mobilnetværket, er det sidste, de vil betale for, at downloade en masse store billeder eller navigationsikoner.
- Placer ikke store billeder øverst på siden. Ligesom med navigation kan det være meget kedeligt at vente på et billede, der tager op til 3 til 4 skærmbilleder at indlæse øverst på siden. Og dette er meget almindeligt på websider. Den eneste undtagelse herfra er, hvis læseren ved, at de får et billede, når de klikker, siger i et fotogalleri.
Hvad man skal undgå, når man designer til mobil
Der er flere ting, du bør undgå, når du opbygger en mobilvenlig side. Som nævnt ovenfor, hvis du virkelig vil have disse på din side, kan du det, men sørg for at webstedet fungerer uden dem.
- Blitz: De fleste mobiltelefoner understøtter ikke Flash, så det er ikke en god ide at medtage det på dine trådløse sider.
- Cookies: Mange mobiltelefoner har ingen cookie-understøttelse. iPhones har cookie support.
- Rammer: Selvom browseren understøtter dem, skal du tænke på skærmens dimensioner. Rammer fungerer bare ikke på mobile enheder - de er meget vanskelige eller umulige at læse.
- Tabeller: Brug ikke tabeller til layout på en mobil side. Og prøv at undgå tabeller generelt. De understøttes ikke på alle mobiltelefoner (selvom iPhones og andre smartphones understøtter dem), og du kan ende med mærkelige resultater.
- Indlejrede tabeller: Hvis du skal bruge et bord, skal du sørge for ikke at rede det i et andet bord. Disse er vanskelige for desktop-browsere at understøtte, og i bedste fald får siden til at indlæses langsommere.
- Absolutte foranstaltninger: Med andre ord må du ikke definere objekternes dimensioner i absolutte størrelser (som pixels, millimeter eller inches). Hvis du definerer noget som 100 px bredt, på en mobilenhed, der måske er halvdelen af skærmen, og på en anden kan det være to gange bredden. Relative størrelser (som ems og procenter) fungerer bedst.
- Skrifttyper: Antag ikke, at nogen af skrifttyper du er vant til at have adgang til, vil være tilgængelig på mobiltelefoner.