Tech Thursday: Så mobilanpassar du din blogg

För bara några år sedan var mobilanpassning av en blogg en snygg extrafunktion. I dag är det en livsnödvändighet. Vi använder datorer allt mindre och mobilen allt mer för att konsumera innehåll.

Som bloggare är vi bra på att lägga mycket tid på att jobba med vår bloggdesign utifrån hur den ser ut på datorn. Men hur mycket tid och tanke har du lagt på vad dina läsare möter i mobilen?

I det här inlägget tänkte jag gå igenom några punkter som du borde fundera på för att inte skrämma bort läsare som hittar till din blogg via mobilen. Genom att tänka mobilt när du designar din blogg är du redo för framtiden och kommer kunna få fler läsare i längden!

mobilanpassa-blogg

Är ditt bloggtema anpassningsbart för mobilen?

De flesta bloggplattformarna och teman du kan välja i dag använder responsive design för att försäkra att din blogg ser bra ut på alla plattformar. Det innebär att bloggen skalar ned sig automatiskt beroende på hur stor skärm den visas på.

» Läs mer: Urvalsprocessen – Saker att tänka på när du väljer wordpress tema

responsive-designEtt tema byggt med responsive design är bättre än ett tema med en dedikerad mobildesign eftersom enheter har alla möjliga storlekar idag. Det är i princip omöjligt att göra EN mobil design som ser snygg ut på alla olika enheter.

Ett enkelt sätt att se om din blogg är responsive idag är att ta ett webbläsarfönster och bara dra i hörnet och se vad som händer. Skalar den ned på ett sätt så att allt ser bra ut även på smalare skärmar?

Om inte: ta tag i utmaningen nu direkt. Byt till ett tema med responsive design!

» Läs mer: Mobilegeddon – Är din blogg redo för Google’s mobilvänliga förändring?

Vad möter en förstagångsläsare som kommer till din blogg via mobilen?

När du försäkrat dig om att din blogg är anpassningsbar för mobilen ska vi börja fundera på dina läsare. Många av dina förstagångsläsare kommer troligtvis in på din blogg via mobilen. Vad möts de av?

Ta upp ett av dina inlägg på mobilen och föreställ dig att du inte vet någonting alls om bloggen och det här är det första du ser. Framgår det vad bloggen heter och handlar om? Går det att se vem som ligger bakom bloggen på ett enkelt sätt? Hur letar man sig vidare? Hur enkelt är det att hitta dina sociala kanaler och kontaktuppgifter?

Hur användarvänlig är din blogg på mobilen?

Vad vill du att besökare på din blogg ska göra när de kommer till din blogg? Om du är mån om att få kommentarer: testa att kommentera själv via mobilen. Är det lätt att hitta fram till kommenteringsrutan? Hur svårt/lätt är det att fylla i sina uppgifter?

Tips: Gör en prioriteringslista på de 5 saker du vill att dina bloggbesökare ska göra på bloggen.

T.ex:

  1. Läsa inlägg
  2. Kommentera
  3. Läsa ett till inlägg
  4. Följa på Bloglovin
  5. Följa på Instagram

Fundera sedan på hur de här prioriteringarna syns på din blogg. Om läsningen är det viktigaste bör du göra det lätt för läsarna att snabbt komma in i innehållet. Se till att inte överdimensionerade headerbilder, annonser eller liknande tar upp hela fönstret.

En bra hållpunkt är att försöka göra vägen så kort som möjligt, med så få klick som möjligt, så dina läsare enkelt kan hitta fram dit du vill. Gör det tydligt för läsaren vad du vill att denne ska göra, håll vägen städad och led läsaren vid handen.

Tips: När du ska välja ett nytt tema eller göra om designen på din blogg – börja med den mobila designen. Se det som din huvuddesign och den viktigaste att lägga krut på och ta datorversionen senare. Det kommer hjälpa dig att komma in i rätt tänk och göra din blogg mer framtidssäkrad.

Hur lättläst är din blogg i mobilen?

Ett litet och plåttrigt typsnitt, för lite avstånd mellan raderna, för långa stycken och för breda marginaler kan vara saker som gör din blogg svårläst på mobilen. Det här kan skrämma bort nya läsare och hindra dem från att komma tillbaka.

Ett bra tips är att titta på t.ex. nyhetssajternas sidor (DN, SvD, Huffington Post) på mobilen och jämföra med ens blogg. Dessa sidor är ju optimerade för att locka till läsning och brukar därför vara bra på det här!

Tips: I ”Anpassa”-menyn på WordPress finns det tre knappar där du kan växla mellan att visa hur din blogg ser ut på dator, platta och mobil. Bra hjälpmedel när du förhandsgranskar teman eller ändringar du vill göra på din blogg.

I många fall kan de här frågeställningarna ovan vara till hjälp i val av tema och hur du kan tänka om du har någon som hjälper dig med din bloggdesign. Jag tänkte nedan bara ge en liten fingervisning hur du kan börja fixa om du gillar att experimentera med din egen bloggdesign.

Så här ändrar du mobildesignen i ett responsivt tema

Steg 1: Leta upp stilmallen (style.css) för din blogg och använd cmd+F (mac) eller ctrl+F (PC) för att söka i koden.

Steg 2: Sök på ”@media”.

Mediaqueries är sättet som CSS-koden anpassar designen beroende på bredden på fönstret som bloggen visas i. Där finns olika brytpunkter som märks ut med ”min-width” och ”max-width”. Exakt vilka brytpunkter som används kan vara olika från tema till tema.

Steg 3: När du identifierat brytpunkterna för ditt tema, t.ex. ”max-width 480px”, kan du skriva in dem i ditt child themes stilmall alternativt använda ”Ändra CSS”-alternativet (på WordPress). Här kan du nu anpassa din design.

Exempel


@media only screen and (max-width: 480px) {

 body {
 margin: 0;
 }
 p {
 line-height: 1.5em;
 font-size: 110%;
 }
}

 

» Läs mer: Tech Thursday: Lär dig grunderna i CSS

Steg 4: En bra hjälp för att identifiera vilken kod du behöver ändra eller lägga till är att använda utvecklarverktyget ”Inspektera”-alternativet i Chrome eller Firefox. Koppla loss inspektera-fönstret till en egen ruta och skala ned ditt webbläsarfönster så du ser hur bloggen stylas vid de olika brytpunkterna.

Att tänka på gällande annonser och sponsrade inlägg

Annonser och reklam kan ta över väldigt mycket utrymme och uppmärksamhet på mobilen. Det är bra att ha med sig i förhandlande om annonsplatser.

annons-mobile

Kolla i Google Analytics hur stor procent av dina läsningar som kommer in i mobilen och ha med det i beräkningen. En liten annons på desktop kan bli en väldigt stor på mobilen – och borde kosta därefter.

Om du har sponsrade inlägg – kontrollera att sponsringsmärkningen är tydlig och läsbar även på mobilen.

Sista tipset: tänk som en app!

Att göra en egen app för sin blogg är oftast inte särskilt ekonomiskt effektivt, dessutom krånglar det till det med länkar och delningar. Det du kan göra är istället att tänka att din blogg på mobilen ska funka som en webbapp.

Det vill säga: inspireras av layout, design, användbarhet och navigering i dina favoritappar när du designar och utformar din mobila design. På så vis kan du ge samma mobilvänliga upplevelse utan att behöva bygga en ny plattform för ditt innehåll.

Hur mobilvänlig är din blogg i dag?

Elin Häggberg

Digital designer, medievetare och journalist. Bloggar om teknik och internet ur ett kreativt perspektiv på egna bloggen Teknifik. Brinner för jämställdhet inom tech och älskar att koda!

3 Comments
    1. Ja men verkligen! Det är ju A och O. Men sen tycker jag inte man ska ”slappna av” för mycket i att det är ett responsive tema utan också gå steget längre. Ser många mobilanpassade sidor som är krångliga att använda, fula, svårlästa m.m. Det funkar ju bara inte 2016.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>