Tio saker att tänka på när du designar webbsidor för Iphone och Ipad
Mobilsurfande blir mer och mer populärt, och en stor del av det görs med Apples prylar. För att inte låsa fast designen vid en enskild modell är det bra att använda framtidssäkra tekniker. Här är några saker att tänka på.
1. Se till att HTML-koden är så välstrukturerad som möjligt. Då blir den både lättare att formge och det går snabbare att rendera den för de svagare mobila processorerna.
2. Använd HTML5 för multimedia istället för insticksprogram från tredjepartstillverkare. Funktioner som <video> går lätt att göra helt bakåtkompatibla så att det fungerar även i äldre läsare på skrivborden. Läs vår artikel om hur man gör.
3. Ta hänsyn till att det inte finns någon :hover eller onmouseover på en pekskärm och använd dem inte på ett sådant sätt att sajten inte går att använda utan dem.
4. Javascript fungerar utmärkt på Iphone och Ipad, men var återhållsam med att använda stora bibliotek om de inte verkligen behövs. Att ladda in hela Jquery på en mobil kräver väldigt mycket av telefonen och är oftast inte nödvändigt. Skriv egna optimerade funktioner istället.
5. Använd CSS 3-animationer istället för att animera med javascript. Animationerna blir mindre resurskrävande och mjukare i och med hårdvaruaccelereringen.
6. Ha högupplösta bilder och skalbara bilder (SVG och PDF) tillgängliga där det går. Om användaren zoomar på sidan riskerar inte bilderna att bli taggiga och fula.
7. Varken Iphone eller Ipad har stöd för andra länkade typsnitt än SVG-typsnitt. Vill du använda @font-face måste du tänka på att se till att det finns SVG-fonter förutom opentype/truetype och EOT.
8. Gör knappar och länkar lätta att trycka på genom att ha en stor träffyta på dem.
9. Använd CSS 3 media-queries för att göra olika layout för olika enheter. Koden nedan kommer bara att appliceras på enheter som klarar CSS3-regler och har en maximal skärmbredd på 480 pixlar. Oftast är det Iphone, men även andra telefoner med de förutsättningarna kommer att gälla.
@media only screen and (max-device-width: 480px) {
}
För Ipad måste man vara lite mer noggrann och även ange ett minimimått eftersom det finns risk att datorer man navigerar med mus också har en skärm med 1024 pixlar i bredd.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
10. Användartesta dina gränssnitt. Det finns många metoder för det, men den enklaste är att plocka några personer i din närhet och ge dem en uppgift att utföra på sajten. Stå sedan bredvid och observera hur och vad de gör för att lösa uppgiften. Man ser direkt var förbättringar behöver göras.