Förra året ökade mobilanvändningen 148% över hela världen. I den närmaste framtiden som smarthpones blir mer och mer allestädes närvarande kommer detta nummer att fortsätta skjuta upp. Som utvecklare har tiden kommit för att du seriöst ska överväga om du ska börja ta emot din mobila publik.
Idag ser vi på några snabba sätt att göra din webbplats lite vänligare för mobila enheter.
Analysera din målgrupp
Innan du dyker in på att förbättra din webbplats från ett mobilt perspektiv är det en bra idé att kolla hur mycket av din trafik som faktiskt kommer från mobila enheter. Med hjälp av Google Analytics eller något liknande, ta en titt på webbläsaren för att bara bekanta dig med det här numret. Då kan du göra ett utbildat beslut om hur långt du ska gå med ditt mobila boende.
En sak att komma ihåg är att om detta nummer är super lågt, kan det vara delvis på grund av det aktuella dåliga läget för din webbplats på mobila enheter. Ta ett beslut om huruvida du bara vill förbättra upplevelsen hos dina nuvarande mobila användare eller aktivt söka fler mobila användare genom att starta en särskild mobilplats, webbapps eller iPhone-app.
Skapa mobila stilark
En av de största stegen du kan vidta för att göra din webbplats mobilvänlig är att skapa anpassad CSS som riktar mot mobila enheter. Detta kan vara en mycket mindre uppgift än du kan tänka dig om du letar efter att hålla webbplatsens övergripande utseende. Låt oss se hur du syftar till mobil CSS för att ladda bara på mobila enheter.
Mediatyper
Med hjälp av olika mediatypdeklarationer kan du tilldela olika stylesheets för vissa användningsområden. De flesta stationära webbläsare känner igen? Skärm? medan många mobila enheter använder den? handhållna? kommando. Kolla in följande exempel:
Med hjälp av denna enkla deklaration kan du skapa en handheld.css-fil som endast aktiveras på handhållna enheter (åtminstone de som tillåter styling). Detta kommer givetvis inte att fungera på alla enheter, men det kommer att få en anständig summa. Vissa utvecklare går även så långt som att föreslå att använda den här metoden med ett tomt stilark för att bara återställa allt och göra det enkelt för mobilvisning.
Använd Fluid Layouts
Tyvärr är det inte lätt att upptäcka hur din layout kommer att se på alla mobila webbläsare eftersom det finns alltför många enheter för att kunna spåra dem alla. Ett sätt som du kan kringgå detta problem är att använda flytande layouter som automatiskt anpassas till skärmstorleken.
Ett sätt att uppnå detta är att Undvik att ställa in bredder i pixlar och skjuta för procentandelar eller ems istället. Till exempel istället för
helt enkelt använda
För att ladda ner några bra pre-built flytande mobil layouter, kolla in artikeln nedan:
Perfekt flerskolts CSS-vätskeformat - iPhone kompatibel
Dölj onödigt innehåll
Om din webbplats har massor av små sidfot eller rörigt annonsutrymme, är det en bra idé att kvitta detta innehåll i mobilversionen. Tänk på att den lilla skärmstorleken för mobila webbläsare inte är idealisk för att klicka på små objekt eller bläddra runt på stora innehållsinställda sidor. Försök trimma ditt innehåll så att det är enkelt att bläddra i ett enda kolumnformat med stora, klickbara områden och tydligt definierade rubriker.
Infoga följande CSS för något element som du vill gömma:
Korrekt limning av bilder
Stora bilder kan eller inte visas korrekt i mobila webbläsare, och du kan satsa på att de verkligen kommer att bogga ner en mobil webbplats. Det är en bra metod att dimensionera dem antingen på servern eller med hjälp av CSS med kommandot max bredd. Tänk bara på att den senare är lite mer processorintensiv och kan ta lite tid att ladda.
Att se till att bilderna inte är för stora är inte ditt enda problem. Som sagt i det föregående tipset måste klickbara områden också omprövas. Många mobila enheter använder ett finger som den primära inmatningsenheten, vilket är betydligt mindre noggrann än en mus och pekare. På grund av detta måste alla bilder som fungerar som knappar eller länkar ta hänsyn till och eventuellt ändra storlek så att de enkelt kan väljas med en punkt och tryck i stället för en punkt och klicka. Osäker på hur stor att göra en knapp? Titta på storleken på din egen fingertopp som en indikator för huruvida en bild enkelt kan väljas på en mobil enhet.
Interaktivitet
Ibland lägger du till några interaktiva element på en webbplats gör det mycket roligare och mindre statiskt / tråkigt. På den mobila optimerade versionen av din webbplats ska du dock minska interaktiviteten till ett minimum (såvida du inte skapar ett spel eller något liknande). Interaktion kan enkelt gå fel på mobila enheter och lämna dina användare frustrerade med allt arbete de måste göra. Leta efter platser att skära ner på den inmatning du behöver från användare, särskilt när det gäller textinmatning som att använda små tangentbord kan det vara en av de värsta delarna av mobilwebbenupplevelsen.
iPhone Specifika tekniker
Många av er kom till den här artikeln såg inte så mycket för information på mobilbanan i allmänhet men i hopp om att du hittar några bra tips om optimering av iPhone. Jag skulle hata att besvikna så här är några saker du kan göra för att rymma kungen hos mobila webbklienter.
Lägga till en startskärmssymbol
iPhone och iPod Touches har en inbyggd funktion som gör det möjligt för användare att lägga till din webbplats på sin startsida som en ikon. Du kan anpassa den här ikonen helt enkelt genom att placera en fil i rubrikens rubrik? Apple-touch-icon.png? (se till att bilden är minst 57? 57). Alternativt kan du placera följande kod i HTML:
Självklart anpassar du filbanan och namnet för din egen bild.
Viewport: Standard zoom
Din webbplats kan ha inbyggt vitt utrymme som ser bra ut på ett skrivbord, men det lägger till en extra zoom i steg för iPhone-användare som inte vill se det vita utrymmet eftersom det skär ner läsbarheten och storleken på huvudinnehållet. Använd följande kod för att automatiskt zooma in i bredden på ditt innehåll.
Bredden = 320 ;? bestämmer förstoringsnivån för innehållet. Ange det här numret till vad som helst för ditt innehåll (320 pixlar är bredden på iPhone-skärmen i vertikal riktning).
iPhone Specifikt formatblad
Om du vill skapa CSS som bara gäller för dina iPhone-användare, använd följande kod:
Det här är endast inriktat på enheter med en maximal skärmbredd på 480 pixlar, nämligen iPhones och iPod Touches.
Mobila webbplatsbyggare
Det finns några webbplatser där ute som hjälper dig att skapa en mobil webbplats med liten eller ingen kunskap om HTML och CSS. De mest lovande av dessa enligt min mening är Mobify, men jag har också kastat på några få alternativ. Om du har provat någon av dessa (eller andra), låt oss veta fördelarna och nackdelarna och ditt helhetsintryck.
Mobify
Mofuse
Wirenode
bMobilized
Zinadoo
Vidare läsning
Kolla in dessa andra bra artiklar för att skapa mobila optimerade webbplatser. Var och en av dessa hjälpte mig i min forskning och är full av ytterligare information.
- Hur man gör din webbplats mobilvänlig
- 5-minuters CSS Mobile Makeover
- Gör din webbplats mobil och iPhonevänlig
- 7 tips för att göra din webbplats mobilvänlig
- 6 tips för att optimera din webbplats för iPhone
- Skapa en hemsida iPhonevänlig med hjälp av CSS
- Principer och riktlinjer för att skapa bra iPhone-innehåll
Slutsats
Tipsen ovan representerar bara några sätt du kan börja hantera det växande segmentet av mobila webbanvändare. Använd kommentarerna nedan och dela dina tips för mobiloptimering. Jag är också ivrig att lära av dig också!