Hur skapar jag en mobil (vänlig) hemsida och vad ska jag tänka på?

Transkript

1 Hur skapar jag en obil (vänlig) hesida och vad ska jag tänka på? Inledning Att skaffa en obil hesida koer för ånga företag vara en avgörande faktor för den digitala närvaron. Vi går ot en verklighet där surf i obila enheter är lika vanligt (o inte vanligare) än att surfa via datorer. Då är en obil hesida avgörande. Det är troligt att en stor del av den arknadsföring du gör idag koer generera besökare via obiltelefoner, utan en obil sida riskerar du att gå iste o dessa kunder och sänka konverteringen från din arknadsföring. Hoppas att du uppskattar aterialet och sprid gärna ordet o våra guider! Vi är glada för all feedback på Vad är viktigt att tänka på ed den obila hesidan 1. Strategi Det första steget vid skapandet av en obil hesida är att utarbeta en strategi. Allt för ånga resonerar kring sin traditionella hesida och även kring sin obila hesida so att: "En hesida/obilsida det är något jag behöver skaffa för att utan det frastår jag so oseriös, sen är det ur världen och jag kan fokusera på in egentliga verksahet. Fråga dig själv o inte internet och din digitala närvaro är viktigare än så? Enligt Google är ROPO (Research Online Purchase Offline) siffran kring 60%. Det innebär att 6 av 10 nya kunder so handlar utanför webben tagit sitt beslut o vart de ska vända sig via webben. Allstå åste du ha en sartare strategi än att skaffa en obil hesida bara för att det är bra att ha och det ser seriöst ut. Tänk istället efter: vad koer dina obila besökare vara ute efter? Vad är det du vill att dina obila besökare skall göra? Det är viktigt att styra besökaren ot en öjlig konvertering, en konvertering so är bra för din verksahet. Ta dig tid (eller hör av dig till oss för att få hjälp) och skaffa en plan för din obila hesida. Det är inte ovanligt att denna strategi även saknas på din traditionella hesida. Då är det hög tid att sätta igång nu, annars springer dina konkurrenter ifrån dig. Tänk även ett steg längre, hur koer in obila hesida fungera i fratiden. Idag förändras arknaden fort. Att hantera din obila webb får inte bli en heltidssyssla, en inte heller glöas bort. Planera så att din hesida är lätt att bygga ut i fratiden och så att det är lätt för dig att integrera din obilsida i din övriga arknadsföring. - Lägg tid på att skapa en sart strategi, din obilsida kan snart visa sig vara en av dina viktigaste inkostkällor. Du vill inte gå iste o denna öjlighet. - Bestä vilken/vilka konverteringar du är ute efter och bygg strategin därefter. Se Stockhol

2 2. Innehåll När strategin väl är utarbetad kan du påbörja arbetet ed att välja ut vilket innehåll du vill ha ed på din obila hesida. Vad är dina obila besökare ute efter? Det priära ed obilsidan är att göra det enkelt för besökaren, tydligt: ring, hitta och aila ikoner so alla är direkt kopplade till obilens satalsfunktion, ailprogra och förinstallerade kartprogra är ovärderligt och bör alltid ses so steg 1 i vad sidan åste innehålla. Utöver kontaktknapparna gäller det att du väljer ut innehåll so är viktigt för din verksahet och att detta struktureras upp på ett sådant sätt att det är väl anpassat för obilen. Många drar sig för att ha ed ycket inforation på sin obila hesida, det kan vara bra o du är oerfaren av att skapa obila hesidor och vill börja enkelt. Vi anser dock att det är att föredra att ha ed relativt ycket inforation, det so avgör är hesidans struktur (se punkt 4). Med en bra struktur kan hesidan innehålla ycket inforation och ändå upplevas enkel. Men ed er inforation fyller din obila hesida fler funktioner och koer konvertera fler kunder och fungera bättre i fratiden. - Tänk ut vilket innehåll du vill ha ed på den obila hesidan, Vilket är syftet? - Ha ed tydliga kontaktuppgifter och ring, hitta och ail knappar kopplat till telefon ens inbyggda funktioner. 3. Mobilanpassa text och bildaterial Att läsa på en liten obilskär är en helt annan upplevelse än att läsa på en datorskär. Dessuto surfar vi ofta på stående fot. Alltså behöver du korta ned allt textaterial så att bara det est vitala av inforationen är ed. Känner du att du har ycket inforation du vill föredla är det viktigt att dela upp detta i olika stycken so i sin tur kan delas upp i olika undersidor på obilsidan. Även bilder åste obilanpassas. Du bör ändra storleken för att passa i en obil skär och se till att bilderna är konverterade till ett forat so tar så liten voly so öjligt. All extra data åste kapas bort för att inska laddningstiderna. Tänk dock på att vissa obiler är utrustade ed retina skär. Denna skär är extret högupplöst och går inte att jäföra ed en noral dataskär. Alltså bör både bilder, din logotyp, och andra grafiska objekt so knappar vara i en högre upplösning än vad du visar på skären. En bild so skall visas i ex 300 * 300 px bör vara ungefär dubbelt så stor, därefter kodar du att webbläsaren visar bilden i önskad storlek. Då uppnår du ett knivskarpt resultat även på retina skärarna. Det kräver lite er datautrye en ser ycket bättre ut. Ha även i åtanke hur dina bilder visas o an väljer att titta på de ed skären i ett liggande läge istället för stående. Bilderna får inte heller vara för breda för sartphones ed indre skärar då riskerar att vara bredare än skären kan visa. - Korta ned allt textaterial till att innehålla det nödvändigaste, dela upp i flera delar o nödvändigt. - Minska ned bilder och konvertera till det forat so kräver inst datavoly. - Gör ikoner, knappar, logotyp etc större än de visas för högupplösta skärar. - Anpassa bilderna för att passa i ajoriteten av alla sartphoneskärar. Se Stockhol

3 4. Mobilsidans struktur/navigering Hur en obil sida är att navigera i är avgörande för användarupplevelsen. Det finns obila hesidor so innehåller enora ängder inforation en so ändå känns enkla att navigera. Startsidan är oerhört viktig. Det åste vara väldigt enkelt och gå snabbt för besökaren att välja hur hon skall agera på sidan får att hitta det hon söker. För att undvika en hög bounce rate är det ycket viktigt att startsidan laddar snabbt och är enkel och tilltalande. Tänk på att kontaktuppgifter åste gå att finna snabbt. Utöver kontaktuppgifterna är det bra ed en del inforation o din verksahet, speciellt o du vill attrahera nya kunder so kanske inte känner till dig sedan tidigare. Listor på vilka tjänster du erbjuder, produktutbud, restaurangeny, bokningsfunktioner, edlessidor, bilder osv. Allt detta är bra att ha ed en börja ed att kategorisera det tydligt. En bra riktlinje är att ha ax 7-8 knappar på startsidan. Fler än så upplevs oftast so för ycket. - Gör en snygg och enkel startsida där det är lätt att hitta vad an söker. - Det åste vara lätt att hitta kontaktuppgifter. - Ha inte er än 8 knappar på din startsida. 5. Design Även o du koer skapa din design i en dator är det viktigt att du redan på designnivå testar hur sidan ser ut i olika sartphones. Det är stor skillnad att titta på en design på en datorskär och på en sartphoneskär. Det finns verktyg för detta, sök på: Android: android-ui-utils Iphone: liveview Gör inte knappar och ikoner för så. I en obilsida ska det inte gå att zooa (se punkt 6). Alltså åste all design vara skapad så att det direkt känns enkelt att trycka på. Tänk också på att designa så att obilsidan atchar din traditionella hesida och den grafiska profilen. Du vill inte att den obila hesida uppfattas so en landningssida ed rekla utan besökaren åste direkt känna igen sig grafiskt. Till sist är det bra att jobba ed designen så att den blir tilltalande satidigt so du tänker på att undvika onödig data. Låt inte besökaren häta stora bakgrundsbilder på alla undersidor utan använd saa eller koda bakgrundsfärgen i den ån det går. Din design åste också vara gjord för att passa på flera olika skärar och designen åste flyta ut rätt o besökaren lägger obilen på sidan. Detta kan kräva en del experienterande. Se Stockhol

4 - Testa din design i olika obiler innan den skall kodas. - Gör knappar och ikoner i en storlek so är lätt att trycka på. - Ha en röd tråd ellan designen på obilsidan och din traditionella hesida. - Gör design so inte är så krävande i datavoly. - Tänk på att bakgrunden åste kunna passa i ånga skärar och i stående sat liggande skärläge. 6. Laddningstid Det finns olika teorier och riktlinjer för vad so är bra respektive dåliga laddningstider. Inget är er rätt än det andra, det so avgör är bara o besökaren koer ge dig tid nog att hinna ladda sidan eller inte. Du skall också ha i åtanke att det obila internet kan variera kraftigt i täckning vilket påverkar hastigheten enort. Alltså är det inte laddningstiden so avgör, det är ängden data so åste hätas so är avgörande. Även väldigt så sidor tar tid att ladda o besökaren för tillfället saknar 3G (eller 4G) täckning. Det finns fler aspekter kring laddningstid so ibland talar eot varandra. Det handlar helt enkelt o att du vill skapa en så snygg och tilltalande obilsida so öjligt utan att den blir tung att ladda. O en obil hesida är för långsa att ladda så får du en försärad bounce rate = besökare so vänder i dörren. Vårt tips är att du lägger stor energi kring din bakgrund, dina knappar och din logotyp på startsidan. Det ska se tilltalande ut en ändå enkelt. Undvik att göra startsidan för hög. Det är ingen fara att ha lite scroll på startsidan en det är ändå att föredra att få den så kort so öjligt. En riktlinje vi gillar är varken att fokusera på laddningstid eller ängd data, utan se till att obilsidan är inst 5ggr snabbare att häta än din traditionella hesida. Då har du blivit 5ggr bättre laddningsässigt än du är utan obilsidan. Detta gör stor skillnad. Vi tror även att utvecklingen snabbt koer gå ot att det obila internet blir snabbare och snabbare, även detta talar för att laddninshysterin kan vara något överdriven. - Mängden data so skall hätas är avgörande för laddningstiden - Bli inte hysterisk i jakten på att få en snabb obilsida, den skall fortfarande vara snygg, användarvänlig och representera ditt företag på ett sätt so passar ditt varuärke. - Gör din obilsida (startsida) inst 5 ggr indre i dataängd jäfört ed din traditionella hesida. 7. Storlek, tuvänlighet och zoo Vi börjar ed tuvänlighet. En sartphone navigeras till största delen ed en tue. Tänk på att knappar, länkar och ikoner åste placeras på ett sådant sätt att de är lätta att trycka på. Ett vanligt isstag är att lägga textlänkar på varandra. Det kan vara riktigt svårt att klicka på rätt länk och utan öjlighet att zooa blir det ännu svårare. Alltså ha distans ellan knappar och klickbara objekt för att vara tuvänlig. Se Stockhol

5 Vidare skiljer sig olika sartphones i storlek och ingen vet riktigt hur de koer se ut i fratiden. Men det går att skapa obilsidor so visas bra i en stor ajoritet av alla sartphones och so trots detta har stor flexibilitet för fratida skärar. Många anpassar sina obilsidor efter Iphones. Detta kan tyckas logiskt då Iphones utgör ajoritet av alla sartphones en vi anser att detta är dut. En fördel en en obil sida (webbapp) är ju att den fungerar i alla operativsyste. Varför då begränsa sig till Iphone. Dessuto är Apple väldigt heliga kring vad so koer ske i fratiden, bara för att en obilvänlig sida passar bra i en Iphone idag är det ingen garanti för att den koer göra det i koande Iphones. Alltså är det inte bra att koda sidan till att alltid fylla en Iphoneskär i bredd, då koer sidan inte fungera bra i en sartphone ed salare skär sat se säre ut i en obil ed större skär. Se även till att ta bort öjligheten till att zooa. Med en obil sida skall an inte behöva zoo eller skrolla i sidled, kan an det upplevs den direkt jobbig och svårnavigerad. - Var tuvänlig. - Det ska inte gå att zooa eller skrolla i sidled på obilsidan oavsett sartphone. O besökaren känner ett behov av att zooa har du isslyckats ed din obilanpassning. - Anpassa inte bara din obilsida efter Iphone. - Tänk på hur din sida koer att fungera i en obiltelefon ed salare respektive bredare skär än Iphone. 8. Text och tydlighet Olika delar av din sida kan fylla olika funktion. Kontakuppgifter so ring, hitta och aila -knapparna är troligt att de koer användas av besökaren när denna har bråtto. Gör därför dessa stora och tydliga. Har du ycket text däreot så är det troligt att besökare koer läsa detta när hon har er tid och använder obilen i ett annat saanhang. Denna inforation är bättre att inska ned och se till att o du har ycket text så skall denna fylla ut en stor del av skärens bredd för att iniera scroll. Du får prova dig fra till vilken textstorlek du gillar och hitta när den känns tydlig utan att vara onödigt stor. Vilket typsnitt du använder påverkar vilken teckenstorlek du bör använda. Se bara till att använda typsnitt so du vet är websäkra. Undvik att ha ånga toa rader i text, det skapar bara onödigt ängd scroll. Dela istället upp texten i rubriken och underrubriker. Markera även länkar, telefonnuer och e-post adresser i all text ed annan färg och koppla dessa till rätt funktion i obilen. Tänk även på att ha stark kontrast ellan bakgrunden och texten, speciellt på de sidor där du vill ha hög konvertering snabbt. Alltså där kunden väljer att trycka när hon har bråtto, det skall fortfarande vara tydligt för besökaren även so denna står utohus i fullt solljus. Se Stockhol

6 9. Be local Många av dina kunder koer besöka din obila hesida när de befinner sig i orådet. Lokala sökningar är ycket vanligt. Se till att direkt föredla var du finns och vad du erbjuder. Det skall vara tydligt och väldigt enkelt att förstå vad so är ditt företags styrkor och varför kunden skall välja dig. En lokal sökning är troligtvis en person so är väldigt lätt att konvertera till en kund. Se till att fånga denna direkt. Att din obila hesida ger ett bra intryck koer vara en av de första anledningarna till o kunden väljer dig. Det är vanligt ed besökare på webben so vänder i dörren (bounce rate). Detta kan bero på att din design är dålig, sidan är långsa att ladda, sidan är svårnavigerad eller att den på något annat sätt föredlar ett dåligt eller otydligt budskap. För att vinna kunden i den lokala sökningen är din förstasida, ditt tydliga budskap och kontaktuppgifter och karta avgörande. - Tydlig och tilltalande startsida. - Tala o kort och enkelt vad du gör/erbjuder och varför kunden skall välja dig. - Tydliga kontaktuppgifter och karta. 10. Konverteringsanpassa Tanken ed din obila hesida är troligtvis att den skall leda till fler kunder. Geno att skaffa en obilsida ökar dina öjligheter att konvertera obila besökare till kunder flera gånger o. Men det finns ycket att jobba ed för att göra en obil hesida riktigt konverteringsanpassad. Återigen så koer din startsida spela stor roll. Här avgörs det o du fångar besökarens intresse eller inte. Testa därför din obila sida ordentligt och ät resultatet. Din bounce rate spelar stor roll. Därefter är det viktigt att ta reda på vad dina besökare gör. Var klickar de och var vill du att besökaren skall sluta upp. Skapa en strategi ed vart du vill leda dina kunder. Är det att få besökaren till en butik, att fylla i ett forulär, delta i en tävling eller bara läsa er o ditt utbud? Definiera vad so är viktigast att leda besökaren ot och avsluta gärna dina sidor ed en länk vidare på obilsidan dit du vill styra kunden. Ett exepel: låt säga att du har en knapp so lyder Våra tjänster, efter texten o vilka tjänster so erbjuds bör du på ett eller flera ställen ha ed. Vill du veta er eller ha en offert så kontakta oss geno att - Ta reda på vad dina besökare gillar. Använd verktyg so Google Analytics för att övervaka detta. - Styr besökaren dit du vill och se till att göra det enkelt för kunden att konvertera. Se Stockhol

7 11. Övrigt Det finns självklart enort ycket er so går att göra ed din obila hesida. Här har vi listat några oråden so är viktiga, du är alltid välkoen att kontakta oss o du behöver er hjälp ed något av alla oråden so nänts i denna guide. Övrigt - Länk till traditionella hesidan. Även o du vill ha dina besökare på din obila hesida bör denna länk alltid finnas ed för den so vill. - Lista ställen: En sartphone har ju allt so oftast en GPS, detta ger en unik öjlighet so datorer saknar att snabbt visa för besökaren vilket/vilka inköpsställen etc so ligger närast. Detta är ycket uppskattat av besökaren och skapar ängder ed konverteringar. Vi kallar denna funktion Close-2-Me. - Heskärsikon. I Iphone går det att ed några enkla knapptryckningar spara ned en länk till en webbplats direkt på telefonens heskär. Du kan lägga in en bild i din kod so är anpassad för denna funktion och so gör att din ikon på heskären koer se ut so en App på telefonens skrivbord. Detta rekoenderar vi starkt. - Specialeffekter. Vi använder oss ofta av avancerad kodning i språk so HTML5 och Jquery för att skapa en bättre upplevelse av den obila hesidan. Med dessa verktyg går det till exepel att skapa rörelsefunktioner so får obilsidan att ännu er likna effekterna so oftast används i en installerad App. - Autoatisk uppdatering av obilsidan utifrån den traditionella hesidan. För dig so ofta uppdaterar din vanliga hesida ed inforation kan det vara ovärderligt. Det finns flera etoder för att lösa detta so: Parse, koppling ot API osv. Detta är ofta avancerade lösningar so vi er än gärna hjälper till ed. 12. Hur använder jag in nya obilsida i in arknadsföring? Förhoppningsvis har du nu skaffat dig en fantastisk obilsida och vill koa igång och arknadsföra denna för att få in ännu fler kunder. Då rekoenderar vi att besöka /guider - där finns fler tips och guider på hur du kobinerar din obilsida ed din arknadsföring. 13. Sist en inte inst Mät och utvärdera din data. Webben är avgörande för alla bolag idag, även o all försäljning sker offline så koer din obilsida troligtvis vara ett av dina viktigaste säljstöd so hjälper dig att genererar nya kunder. Mät och övervaka trafiken på din hesida noggrant och se hela tiden till att utvecklas och bli bättre. /// Det var allt, hoppas guiden har varit till stor nytta och sprid gärna att våra guider finns till flera du känner. Allt aterial finns på Copyright Mobiledia Sverige AB 2012 Se Stockhol