Chansen är stor att du har sett hur iPhone kan vända och expandera webbsidor. Det kan visa hela webbsidan med en överblick eller zooma in för att göra texten du är intresserad av läsbar. På ett sätt, eftersom iPhone använder Safari, webbdesigners borde inte behöva göra något speciellt för att skapa en webbsida som fungerar på iPhone. Men vill du verkligen att din sida bara ska fungera - eller sticker ut och lyser?
När du bygg en webbsidamåste du tänka på vem som ska se det och hur de ska se det. Några av de bästa sajterna tar hänsyn till vilken typ av enhet sidan visas på, inklusive upplösning, färgalternativ och tillgängliga funktioner. De litar inte bara på enheten för att räkna ut det.
Allmänna riktlinjer för att bygga en webbplats för mobila enheter
- Testa på så många enheter som möjligt. Det första du bör göra är att visa din webbplats på en iPhone och så många olika Mobil enheter eller emulatorer som du kan. Medan du kan använda emulatorer för alla dina test, ger de dig inte samma känsla som att försöka navigera genom en webbplats på den lilla lilla skärmen. Du bör testa på faktiska enheter så mycket som möjligt.
- Låt dina sidor försämras graciöst. Du kan skriva dina sidor för Flash-aktiverat, widescreen-webbläsare, men se till att den kritiska informationen syns även på en liten bildskärm som inte kan hantera några specialfunktioner (som cookies, Ajax, Flash, JavaScript, etc.). Allt utanför XHTML Basic kommer att vara bortom vissa mobiltelefoner. Medan de flesta smartphones kan hantera alla dessa saker, kan andra mobila enheter inte.
- Skapa en trådlös specifik sida - och gör det enkelt att hitta. Om du ska bygga en specifik sida för dina mobiltelefoner och trådlösa kunder - gör den tillgänglig. Ett bra sätt är att placera länken till den trådlösa sidan högst upp i dokumentet och sedan dölja den länken från icke-handhållna enheter med den handhållna mediatypen. När allt kommer omkring kommer de flesta till din hemsida, även på mobiltelefoner - och om länken till din trådlösa sida inte finns, lämnar de om sidan är för svår att använda.
Webbplatslayout för smartphones
Det första du bör komma ihåg när du skriver sidor till smarttelefonmarknaden är att du inte behöver göra några ändringar om du inte vill. Det fina med de flesta tillgängliga smartphones är att de använder webkit-webbläsare (Safari på iOS och Chrome på Android) till visa webbsidor, så om din sida ser bra ut i Safari eller Chrome kommer den att se bra ut på de flesta smartphones (bara mycket mindre). Men det finns saker du kan göra för att göra surfupplevelsen trevligare:
- Kom ihåg att skärmen är liten. Smartphones kommer att kondensera alla dessa kolumner ner i det lilla fönstret, och detta kan göra dem väldigt svåra att läsa utan att zooma. De flesta användare är vana vid att zooma, men det kan bli tröttsamt. En lång textkolumn är lättare att läsa.
- Dela upp sidor i mindre bitar. Det kan vara svårt att läsa långa textdelar på en mobiltelefon, så att sätta dem på flera sidor gör det lättare att läsa dem.
Länkar och navigering på iPhones
- Ju kortare webbadresserna är, desto bättre. Om du någonsin har försökt skriva in en URL på en mobiltelefon vet du att det är ont (förutom kanske tonåringar som är vana att skicka många sms). Även på iPhone är det tråkigt att skriva in långa webbadresser. Håll dem korta.
- Men lång länktext är lättare att trycka på. När det finns en sida där flera separata ord är länkade till olika artiklar, precis bredvid varandra, kan det vara mycket svårt att trycka på rätt ord utan att zooma. Många människor kommer bara att ge upp och gå någon annanstans. Länkar med 3 till 5 ord är lättare att klicka på telefonen än 1-ordslänkar.
- Placera inte din navigering högst upp på skärmen. Det finns inget mer irriterande än att behöva bläddra igenom skärmar och skärmar med länkar för att hitta den information du vill ha. Om du har tittat på webbsidor som är designade för mobiltelefoner ser du att innehållet och rubriken är de första som dyker upp. Sedan, under det är navigering.
- Var inte rädd för att dölja din navigering.Döljer navigeringslänkar med CSS eller JavaScript och få dem att visas endast när användaren ber om det är ett sätt att göra sidan enklare för smarttelefonanvändare.
Tips för bilder på smartphones
- Bilderna måste vara små. Ja, Android och iPhones kan zooma in och zooma ut på bilder, men ju mindre de är, i både dimensioner och nedladdningstid, desto lyckligare blir dina trådlösa kunder. Optimera bilder är alltid en bra idé, men för mobiltelefonsidor är det viktigt.
- Bilder måste laddas ned snabbt. Bilder tar mycket plats på webbsidor när du visar dem från en mobil enhet. Och även om de ofta är väldigt trevliga och får sidorna att se bättre ut när de visas i en helskärmswebbläsare, kommer de ofta i vägen på en mobil enhet. Plus när en smarttelefonanvändare är i mobilnätverket är det sista de vill betala för att ladda ner en massa stora bilder eller navigationsikoner.
- Lägg inte stora bilder högst upp på sidan. Precis som med navigering kan det vara väldigt tråkigt att vänta på att en bild som tar upp 3 till 4 skärmbilder laddas högst upp på sidan. Och detta är extremt vanligt på webbsidor. Det enda undantaget från detta är om läsaren vet att de kommer att få en bild när de klickar, säg i ett fotogalleri.
Vad man ska undvika när man designar för mobil
Det finns flera saker du bör undvika när du bygger en mobilvänlig sida. Som nämnts ovan, om du verkligen vill ha dessa på din sida kan du, men se till att webbplatsen fungerar utan dem.
- Blixt: De flesta mobiltelefoner stöder inte Flash, så det är inte en bra idé att inkludera det på dina trådlösa sidor.
- Småkakor: Många mobiltelefoner har inget kakstöd. iPhones har kakstöd.
- Ramar: Även om webbläsaren stöder dem, tänk på skärmens mått. Ramar fungerar bara inte på mobila enheter - de är väldigt svåra eller omöjliga att läsa.
- Tabeller: Använd inte tabeller för layout på en mobil sida. Och försök att undvika tabeller i allmänhet. De stöds inte på alla mobiltelefoner (även om iPhones och andra smartphones stöder dem) och du kan sluta med konstiga resultat.
- Kapslade bord: Om du måste använda ett bord, se till att inte häcka det i ett annat bord. Dessa är svåra för stationära webbläsare att stödja, och i bästa fall gör att sidan laddas långsammare.
- Absoluta åtgärder: Med andra ord, definiera inte objekten i absoluta storlekar (som pixlar, millimeter eller tum). Om du definierar något som 100 pixlar brett, på en mobil enhet som kan vara hälften av skärmen och på en annan kan det vara två gånger bredden. Relativa storlekar (som ems och procentsatser) fungerar bäst.
- Typsnitt: Antag inte att någon av teckensnitt du är van vid att ha tillgång till kommer att finnas tillgänglig på mobiltelefonerna.