Det är ingen överraskning att en ny rapport från FN: s byrå, The International Telecoms Union , förutsagde att det kommer att finnas fler mobilabonnemang på planeten än människor inom de närmaste 9 månaderna. "Smartphone Revolution" är definitivt över oss och som sådan har mobilwebdesign exploderat de senaste åren.

Detta har inneburit att webbutvecklare har fått ta hand om mobilwebbdesign, om de vill konkurrera och framtidsbestämda sin verksamhet. Med tanke på detta har jag kommit upp med några bästa tips för att ge utvecklare en utgångspunkt, med vissa saker att komma ihåg innan du fortsätter.

Tänk på snabbteknik

En snabb titt på hur långt mobila enheter har kommit sedan introduktionen av iPad kommer att bekräfta att mobilteknologi är en snabb och ständigt växande industri och därför är det klokt att överväga hur du kan utveckla framtida design.

Det innebär att det är viktigt att du följer de senaste trenderna om du på ett eller annat sätt ska se till att webbplatsen kommer att vara genomförbar om några år. Responsiv design är naturligtvis hela rasen för tillfället och det är troligt att detta kommer att ingå i din plan.

Även om det är säkert att anta att de flesta av dina besökare kommer att ha smartphones, är det värt att överväga att inte alla vill, och så kan du behöva arbeta med detta i designen. Det är värt att undersöka målgruppen i planeringsstadierna, så att du kan ta tag i de gemensamma enheterna som används, liksom användarbeteendet.

Pratar om användarbeteende ...

Mobila webbesökare behöver inte nödvändigtvis tillgång till webbplatser på språng och det här är något att tänka på. Ofta görs mobila surfning medan man väntar; på tåget, i bilen eller ens på soffan hemma.

Det innebär att strippning av designen så att den är för förenklad kan vara kontraproduktiv. Om du har en enda benplats med inget mycket i vägen för innehåll, kan det vara avskräckande för publiken eftersom din webbplats inte ger något mycket verkligt bruk och kan betraktas som något annat än en stor bannerannons.

Mobilt i dessa dagar används så mycket som, om inte mer än, skrivbordet för internetbrowsing, så ha detta i åtanke under designprocessen och se till att din webbplats är enkel att använda, men ändå rik på innehåll.

Optimera din mobila webbplats

Optimering av mobila webbplatser är också viktigt, särskilt för målsidor, eftersom dessa är startpunkten för webbplatsen. Det innebär att en mobilwebbplats bör optimeras med användaren i åtanke, såväl som sökmotorn, för att ge en enkel navigationsupplevelse, tydlig text, enkla klickformulär och relevant metainformation och alt-taggar.

Filstorlekar bör övervägas när det gäller vikt och ett starkt anrop till handling bör ingå i målsidorna. Om du måste använda formulär, behåll dem så enkelt som möjligt, med så få inmatningsfält som möjligt så att användaren inte blir frustrerad och lämnar.

Detsamma gäller för handlingar; Håll dem enkla och använd endast vid behov. Även om det kan vara trevligt att ha ett snygg navigationssystem, om det är oanvändbart, förvänta en hög avvisningsfrekvens.

När knappar måste användas, se till att de passerar "tumprovet", vilket innebär att du bekvämt ska kunna trycka på en knapp med tummen utan att slå på annat innehåll som kan leda till en oönskad sida.

Optimering är något som måste beaktas när man bygger en lyhörd webbplats också. Många debatter har nyligen rassat på hur responsiv design saktar ner webben och huruvida det väsentligen kommer att innebära att svåra reagerande webbplatser kommer att gå. Det finns emellertid villkorliga laddningstekniker som kan hjälpa till att påskynda en webbplats för att säkerställa att enheter inte automatiskt laddar ned hela skrivbordsversionen av webbplatsen varje gång.

CSS- och JavaScript-resurserna bör komprimeras och det finns gott om öppen källkodsprogramvara som kan hjälpa till med detta. Till exempel, UglifyJS kan användas med JavaScript för att komprimera kod och Kompass kan användas för att skapa renare markup, liksom sprites och förlängningar, utan för mycket krångel och hårt arbete.

Rutnät och brytpunkter

När du använder lyhörd design är en av de viktigaste sakerna att definiera i början nätet och dina brytpunkter. Återigen finns det många verktyg online som kan hjälpa dig att definiera kolumner och deras bredd och takrännor.

Vissa utvecklare tycker om att ställa in brytpunkter baserat på upplösning, men det här är inte riktigt den bästa lösningen eftersom det finns så många mobila enheter på marknaden och resolutioner förändras med tiden.

Detta innebär att brytpunkter bör baseras på design och innehåll, snarare än upplösning. För att testa breakpoints och grids kan webbläsarfönstret användas under designprojektet för att se hur innehållet beter sig när det ändras.

Idealiskt bör det flöda naturligt och du kan använda så många brytpunkter som du behöver för att uppnå detta.

UI, kompatibilitet och riktlinjer

Inte alla mobila operativsystem är skapade på samma sätt som du vet, så det är värt att titta på riktlinjerna när det gäller att bygga för Android och iOS, till exempel, och de webbläsare som kan användas på dem.

Tänk på att användarna kommer att bläddra på en mängd olika operativsystem och vissa kommer att vara äldre versioner, så det är användbart att säkerställa att mobilwebbplatsen är bakåtkompatibel. Här är det användbart att titta på analytics för huvudwebbplatsen, om tillämpligt, eftersom du kommer att kunna se vilka enheter din publik kommer åt webbplatsen på.

Att titta på analytics efter att webbplatsen färdigställts kommer naturligtvis också att hjälpa dig att göra nödvändiga förändringar och att lära sig för framtiden.

Innehåll, innehåll, innehåll

Som vi alla vet vid det här laget är innehållet kungens kung igen och det är viktigt att planera innehållsmoduler. Innehållsmodulernas beteende måste definieras för att säkerställa att de visas som de borde som användaren navigerar och vidtar åtgärder.

Det innebär att du måste titta på och definiera hur innehållet visas när du byter mellan en skärm och en mobil skärm för att bestämma hur modulerna ska stapla och omordna sig själva.

I det här sammanhanget är det ofta lättare att verkligen få det här på planeringsstadiet. Gör en skiss över hur du tänker på innehållsskärmen och arbeta sedan igenom hur detta kan uppnås.

Försök dock inte bli alltför upptagen med att definiera allt. Även om dina huvudsidor behöver trådramar följer det inte nödvändigtvis att varje enskild sida kommer att. Att skapa en mästarsats för skärmstorlekar och orientering borde verkligen vara tillräckligt.

Bygg en prototyp först och test noggrant, se till att alla aspekter fungerar som du går med. Det är också klokt att hålla användaren ihåg vid testningen, vilket säkerställer att navigering är enkel och helst högst tre lager. Försök hitta någon som inte är tekniskt inriktad, men använder olika enheter för att testa webbplatsen.

Slutsats

Mobil webbdesign är en nödvändig utmaning för att ta hand om som designer för att kunna erbjuda en komplett service till kunden. Liksom många saker i livet planerar en av de viktigaste aspekterna att du har en klar uppfattning om hur du ska gå vidare.

Effektiv planering och håller användaren i åtanke kommer att hjälpa till att övervinna de flesta hinder som du sannolikt kommer att stöta på, och noggrann testning tar upp resten. Tänk dig lyhörd, snabb och enkel, med utmärkt användbar innehåll och du kan inte gå för långt fel.

Utvalda bild / miniatyrbild, mobil webbbild via Shutterstock.