Sådan skri­ver du mobil­ven­li­ge web­tek­ster

 

Ben­ny Chri­sten Gran­da­hl

Part­ner og Chief Con­tent Offi­cer, web­te­xts­hop

Mobil­ven­li­ge web­tek­ster er en must, for­di de fle­ste søg­nin­ger fore­går fra mobi­len. Så lige­som din hjem­mesi­des web­de­sign først og frem­mest skal udtæn­kes til at se godt ud på mobi­len, bør du til­ret­te­læg­ge og skri­ve dine web­tek­ster, så de tager sig godt ud på mobilskær­men. Her får du et hur­tigt lyn­kur­sus i at skri­ve mobil­ven­li­ge web­tek­ster.

Har du tænkt på, at hoved­par­ten af dine besø­gen­de vil læse tek­sten på din hjem­mesi­de på en mobil­te­le­fon? For efter­som hoved­par­ten af alle søg­nin­ger i dag fore­går på mobi­len, vil der nød­ven­dig­vis være lige så man­ge, som efter­føl­gen­de læser de til­hø­ren­de sider som de klik­ker ind på fra søge­re­sul­ta­ter­ne på mobi­len.

Vi læser rig­tig meget på mobi­len

For vi vil ger­ne læse tekst på net­tet – og iføl­ge en under­sø­gel­se af ame­ri­kan­ske stu­de­ren­des læse­va­ner læser vi rig­tig meget på mobi­len. Hele 45 % af de ads­purg­te brug­te mest tid på at læse artik­ler og andet webind­hold på mobi­len. Kun 38% hav­de com­pu­te­ren eller deres tab­let som det fore­truk­ne læse­me­die.

Sam­ti­dig konsu­me­rer vi rig­tig meget ind­hold på net­tet. 44 % læste op til 15 artik­ler om ugen og 36 % læste op til 30. 10 % læste op til 45 og atter 10 % læste mere end 45 artik­ler onli­ne om ugen.

Hoved­par­ten af de ads­purg­te fandt artik­ler­ne via Face­book. Søg­nin­ger på Goog­le kom først ind på anden­plad­sen med Twit­ter som den tred­je mest anvend­te plat­form til at fin­de ind­hold på. Så meget tyder på, at vi også skal gen­tæn­ke den måde vores ind­hold bli­ver fun­det på. Men det må bli­ve emnet for en hel anden arti­kel.

Tekst­mu­re er ekstra uover­kom­me­li­ge at læse på mobilskær­men

Desvær­re møder vi oftest mas­si­ve tekst­mu­re på de fle­ste hjem­mesi­der i dag. Men på mobi­lens lil­le skærm vil en tekst­mur med man­ge, lan­ge tekst­af­snit, vir­ke ekstra kvæ­len­de på de besø­gen­des lyst til at begyn­de at scrol­le sig igen­nem artik­len.

De kan ikke få det sam­me over­blik på mobi­len, før de går i gang med at læse tek­sten, som de kan på en com­pu­ter. De er nødt til at rul­le ned over siden på lyk­ke og frem­me og håbe på, at tek­sten giver dem den for­del, som den har lovet dem i man­chet­ten og de ind­le­den­de tekst­af­snit.

Tager du høj­de for de udfor­drin­ger den lil­le mobilskærm giver, kan du dog gøre meget for at til­ret­te­læg­ge tek­sten, så den bli­ver mere mobil­ven­lig. Det kan gøres ved, at du:

  • Væl­ger en skrift­ty­pe og -stør­rel­se, der er læse­ven­lig på mobi­len
  • Sør­ger for god kon­trast mel­lem tekst og bag­grund, så tek­sten er tyde­lig
  • Anven­der kor­te afsnit, der kan over­sku­es på mobi­len uden at skul­le scrol­le
  • Byg­ger sær­li­ge mobil­ver­sio­ner af de ind­hold­s­e­le­men­ter, der ellers vil­le give pro­ble­mer på mobi­len
  • Tager høj­de for, hvad der sker med ind­hol­dets opstil­ling, når det kon­ver­te­res til mobil-plat­for­men
  • Giver klik­ba­re gen­ve­je til de enkel­te sek­tio­ner i tek­sten, der spa­rer folk for at skul­le scrol­le på skær­men

Så lige­som jeres web­de­sign, skal jeres tek­ster til hjem­mesi­den udvik­les først til mobi­len og der­ef­ter til de øvri­ge plat­for­me, som folk læser hjem­mesi­den på

Tek­sten på rig­tig man­ge hjem­mesi­der er slet ikke skre­vet til at bli­ve læst på mobi­len.

Er tekst eller knap­per for små på mobi­len, bli­ver det svært at læse tek­sten og ram­me knap­per­ne. Tek­sten her er nok lige på græn­sen til sta­dig at være læs­bar på små mobilskær­me – og kon­tra­sten kun­ne være bed­re især på mær­ke, vare­num­mer og sta­tus.

Vælg en mobil­ven­lig skrift­ty­pe

og -stør­rel­se

Det er kræ­ven­de at læse tekst på en så den for­holds­vis lil­le skærm, der er på de fle­ste mobi­ler. Der­for skal du sør­ge for, at skrift­ty­pen er let­læ­se­lig på mobilskær­men. Vælg ger­ne en skrift uden fød­der – sans serif – som er mere åben i det end en skrift med fød­der – serif – der vir­ker mere kom­pakt. Det gør bog­sta­ver­ne tyde­li­ge­re. Alt­så skal du gøre det stik mod­sat­te af, hvad du vil­le gøre på tryk.

Sam­ti­dig bør du anven­de en lidt stør­re skrift­stør­rel­se, end du vil­le gøre på en com­pu­ter­skærm eller på tryk. Gå ger­ne 2 eller fle­re punk­ter op, så tek­sten vir­ker nem­me­re at læse på mobilskær­men.

På den­ne side har vi fak­tisk valgt sam­me skrift­ty­pe til både over­skrift, mel­lem­ru­brik og brød­tekst. For­skel­len er ude­luk­ken­de hold i skrift­stør­rel­ser, vægt (tyk­kel­sen) og far­ve.

Brug stor kon­trast mel­lem tekst og bag­grund

Det er også vig­tigt, at du sør­ger for, at kon­tra­sten mel­lem bag­grun­den og tek­sten er så stor som muligt. Brug ger­ne helt sort tekst på helt hvid bag­grund. Er kon­tra­sten ikke stor nok, bli­ver det for svært at læse tek­sten på mobilskær­men.

Bedst er det, hvis du altid væl­ger en lys bag­grund og en mørk far­ve til tek­sten. Væl­ger du det mod­sat­te, skal der helst være en god grund til det – f.eks. for­di du vil frem­hæ­ve afsnit­tet. Sam­ti­dig bør du går yder­li­ge­re nog­le punk­ter op i skrift­stør­rel­se, samt måske væl­ge en kraf­ti­ge­re udga­ve af skrift­ty­pen, hvis du skri­ver lys tekst på en mørk bag­grund.

Anvend kor­te afsnit, der kan læses på mobi­len uden at scrol­le

Find ud af, hvor man­ge ord der gen­nem­snit­lig kan være på en mobilskærm med den valg­te skrift­ty­pe og -stør­rel­se. Hol­der du hvert afsnit i tek­sten, samt bok­se og andre ele­men­ter inden for det antal ord, sik­rer du, at den besø­gen­de kan over­skue alt tek­sten i hvert afsnit på en enkelt skærmsi­de, selv om de læser siden på mobi­len.

Gå efter ord­an­tal­let på f.eks. en iPho­ne SE eller iPho­ne 5. Det er en meget god skærm­stør­rel­se at ret­te ind efter. Med den skrift­ty­pe og -stør­rel­se vi anven­der her på siden, er der lige omkring 60 ord til rådig­hed i hvert afsnit. Tjek selv den­ne side på din mobil, og se hvor­dan den tager sig ud.

Det bety­der, at tek­sten skal opbyg­ges af man­ge kor­te afsnit. Sør­ger du sam­ti­dig for at anven­de man­ge kor­te sæt­nin­ger i de kor­te afsnit, øges læs­bar­he­den bety­de­ligt. Det vil sige sæt­nin­ger på mak­si­malt 20 ord pr. sæt­ning – og ger­ne meget min­dre.

På bil­le­det her­un­der (eller til høj­re hvis du læser siden på en com­pu­ter) kan du se, at det er muligt at over­skue både mel­lem­ru­brik og før­ste tekst­af­snit i den­ne sek­tion på mobi­len, uden at du behø­ver at scrol­le på siden.

Det er muligt at læse både mel­lem­ru­brik­ken og hele tek­sten i før­ste afsnit uden at scrol­le på mobi­len.

Lin­se Kes­slers hjem­mesi­de er en af dem, hvor der er tænkt over, hvor­dan sto­re ele­men­ter fra com­pu­ter-ver­sio­nen af siden vises på en smart måde på mobi­len.

Byg mobil­ven­li­ge ver­sio­ner af ele­men­ter, der ellers vil­le give pro­ble­mer på mobi­len

Tekst­bok­se, sto­re dia­gram­mer, info­gra­fik­ker, inter­ak­ti­ve ele­men­ter og lig­nen­de kan nemt bli­ve en pine at se på en mobilskræm. Så hvis dit CMS-system eller dit Word­Press-tema giver mulig­hed for det, er det en god ide at byg­ge en sær­lig mobil­ver­sion af ind­hol­det ind på de enkel­te sider. Så er du sik­ker på, at ind­hol­det ikke bli­ver en show­stop­per for mobil­læ­ser­ne.

Har du f.eks. et inter­ak­tivt ele­ment som en sli­der, hvor bru­ge­ren skal skif­te mel­lem de for­skel­li­ge sli­des for at læse ind­hol­det, bør du byg­ge det på en anden måde på mobi­len. F.eks. som en almin­de­lig punk­top­stil­ling eller som løben­de tekst.

I f.eks. Word­Press-tema fra­mewor­ket Divi fra Ele­gant The­mes (som vi bru­ger her på siden) kan du byg­ge sepa­ra­te ver­sio­ner af de enkel­te ind­hold­s­e­le­men­ter på siden til hen­holds­vis com­pu­ter, tab­let og mobil. På den måde er det nemt at tage hen­syn til mulig­he­der­ne på de for­skel­li­ge plat­for­me.

Husk i øvrigt også at instal­le­re et typo­gra­fi-plu­gin (hvis du bru­ger Word­Press). Det sik­rer en bed­re ord­de­ling, når siden vises på tab­let og mobil. Her kan stan­dar­dindstil­lin­ger­ne for ord­de­ling i web­brow­ser­ne nem­lig nemt ska­be pro­ble­mer for læse­ven­lig­he­den af tek­sten.

Tag høj­de for hvad der sker med ind­hol­det på siden, når det kon­ver­te­res til mobil-plat­for­men

Selv om det ser rig­tig godt ud med fle­re spal­ter på siden, når du ser ind­hol­det på en com­pu­ter­skærm, kan det nemt give pro­ble­mer, når ind­hol­det vises på mobi­len. Her ind­pas­ses ind­hol­det fra de for­skel­li­ge kolon­ner, så de bli­ver vist i en lang ræk­ke på mobilskær­men.

Tekst­mæs­sigt er det oftest ikke noget pro­blem. For når siden vises på en min­dre skærm, ryk­kes de enkel­te tekst­ko­lon­ner ind under hin­an­den fra ven­stre mod høj­re. Alt­så så før­ste kolon­ne til ven­stre kom­mer øverst, anden kolon­ne neden under og en even­tu­elt tred­je kolon­ne vises helt nederst.

Pas på ræk­ke­føl­gen af tekst og bil­le­der

Men udvik­ler du web­de­sig­net på siden ført til com­pu­te­ren, kan du nemt få valgt et design på com­pu­ter­skær­men, der giver pro­ble­mer. F.eks. hvor bil­le­der og tekst kom­mer skif­te­vis i høj­re og ven­stre kolon­ne – som f.eks. den­ne side om web­tek­ster. Det vil det give pro­ble­mer på mobi­len.

For her vises de enkel­te ele­men­ter, så der kom­mer to bil­le­der lige efter hin­an­den og så to tek­ste­e­le­men­ter lige efter hin­an­den – og da mel­lem­ru­brik­ken til tek­sten står i bil­le­det, vil du alt­så ende med nog­le til­fæl­de, hvor du får vist over­skrif­ten efter den til­hø­ren­de tekst, når du læser tek­sten på mobi­len – samt to mel­lem­ru­brik­ker lige efter hian­den.

Så hold dit web­de­signs respon­si­ve funk­tio­na­li­tet for øje, alle­re­de når du skri­ver din tekst. Vælg pla­ce­rin­gen af tekst, bil­le­der og andre ind­hold­s­e­le­men­ter på siden, så de ikke vises i for­kert ræk­ke på mobi­len. For ræk­ke­føl­gen skal natur­lig­vis være den sam­me, uan­set om tek­sten læses på en mobil, tab­let eller com­pu­ter.

Et rig­tigt godt eksem­pel på uhel­dig ombryd­ning af siden, når den vises på mobi­len. Dels er ele­men­ter­ne for sto­re på mobi­len, og dels kom­mer der to over­skrif­ter efter hin­an­den på grund af ombryd­nin­gen. Kede­ligt nok har vi hen­tet eksemp­let fra vores egen hjem­mesi­de. Ingen er fuld­kom­men.

På Doc24.dk fin­des der altid en klik­bar ind­holds­for­teg­nel­se først i alle læn­ge­re artik­ler.

Opret gen­ve­je, der spa­rer de besø­gen­de for, at skul­le scrol­le på mobilskær­men

Tænk også på, om du med for­del kan opret­te en kort ind­holds­for­teg­nel­se øverst på siden. Den kan give læse­ren over­blik over ind­hol­det selv på en mobil. Sam­ti­dig giver den de besø­gen­de en nem gen­vej til de sek­tio­ner i tek­sten, som de fin­der mest inter­es­san­te at læse her og nu.

Det kan spa­re de besø­gen­de for en mas­se rul­len op og ned ad siden på mobi­len for først at dan­ne sig et over­blik over tek­sten og der­næst læse den. Sam­ti­dig slip­per de for det til­sva­ren­de rul­le­ri, når de skal gen­fin­de de tekst­af­snit på siden, som de ger­ne vil læse.

Ved at ind­sæt­te gen­ve­je som spa­rer de besø­gen­de for at scrol­le, øger du chan­cer­ne for, at de får læst meget mere af din arti­kel. Det er især smart, hvis der er tale om en læn­ge­re arti­kel, som f.eks. den du er ved at være fær­dig med at læse nu.

Skal du have udvik­let mobil­ven­li­ge web­tek­ster?

Som du kan se, er der en del ting, du bør være opmærk­som på, hvis du ønsker at udvik­le mobil­ven­li­ge tek­ster til net­tet.

Vil du ger­ne sik­re dig, at dine web­tek­ster er nem­me at læse på mobi­len, kan du med for­del tage fat i os. Vi kan også hjæl­pe dig med at opti­me­rer tek­ster­ne på jeres eksiste­en­de sider, så de bli­ver nem­me­re at læse på mobi­len for jeres besø­gen­de.

Vi skri­ver mas­ser af mobil­ven­li­ge web­tek­ster til vores kun­der hver ene­ste dag, for­di vi ger­ne vil gøre net­tet værd at læse. Så kon­takt os alle­re­de i dag. Så kan vi tage os snak om, hvil­ke mobil­ven­li­ge web­tek­ster vi skal skri­ve for dig.

Skal vi skri­ve mobil­ven­li­ge web­tek­ster til jer?

Udfyld for­mu­la­ren, så rin­ger vi dig op!

Jo! Vi vil ger­ne læse på net­tet!

Eks­per­ter­ne siger, at vi ikke gider læse noget på net­tet. Men når ind­hol­det er godt og gen­nem­be­ar­bej­det, og siden og tek­sten er sat flot og inspi­re­ren­de op, har vi ingen pro­ble­mer med at læse artik­ler på fle­re tusin­de ords læng­de. Få bevi­set her!

Sådan river du tekst­mu­ren ned

Skal du øge chan­cen for, at hol­de de besø­gen­de på din side, skal du bry­de tekst­mu­ren ned og desig­ne siden, så det bli­ver nemt at læse den i fle­re kon­cen­tra­tions­in­ter­val­ler. Det kræ­ver en ny til­gang til opbyg­nin­gen af tekst og ind­hold på siden.

web­te­xts­hop

Vil du ger­ne fin­des på inter­net­tet, men synes det er svært at kom­me til tops i søge­re­sul­ta­ter­ne, så kan vi hjæl­pe. Web­te­xts­hop pro­du­ce­rer con­tent mar­ke­ting og tek­ster til din hjem­mesi­de.

© 2017 web­te­xts­hop i/s

WEB­TE­XTS­HOP

Præ­ste­marks­vej 20
4653 Kari­se
Mail: info at webtextshop.dk
Tlf.: 29 72 55 73
CVR: 36679220

Sådan bliver din hjemmeside din bedste sælger

Den komplette guide til hvordan du bygger en moderne hjemmeside, der fungerer som en aktiv sælger af de tjenester og ydelser, dit firma leverer!

Du modtager snart download link til bogen pr. mail!

Sådan bliver din hjemmeside din bedste sælger

Den komplette guide til hvordan du bygger en moderne hjemmeside, der fungerer som en aktiv sælger af de tjenester og ydelser, dit firma leverer!

Du modtager snart download link til bogen pr. mail!

Share This