Sådan undgår du grimme orddelinger på mobil

af | Webdesign

Når du arbejder med din hjemmeside, bør du løbende tjekke, hvordan den ser ud på mobil. Og mon ikke du en enkelt gang eller to har oplevet, at et ord ’ufrivilligt’ bliver delt over to linjer på små skærme? Det ser ikke pænt ud. Du risikerer i værste fald at visse typer (hvis du er på Facebook, har du nok mødt dem der) griner af ukorrekt orddeling – selv om du har skrevet ordet uden at dele det.

Jeg forklarer lige først, hvad jeg mener med ukorrekt orddeling:

Du skiver ordet ’eksamensopgave’ i en overskrift, hvor du bruger en stor skriftstørrelse, hvorfor ordet kan blive delt uheldigt på mobil:

Bla bla bla …. eksamenso
pgave

Eller hvis du er mere heldig:

Bla bla bla …. eksamens
opgave

Men ingen af delene er korrekt. Ordet skal jo dele sig sådan her:

Bla bla bla …. eksamens-
opgave

Jeg har for nylig set en fra min branche forslå, at man kan sætte bindestreg ind i ordet og tvinge linjeskift selv. Men så vil der jo være bindestreg på alle skærmstørrelser, og så er problemet med forkert orddeling flyttet over på større skærme. Og så er vi lige vidt.

Korrekt deling af ord på mobil og mindre skærme

Her kommer løsningen:

Denne her løsning, er en af dem jeg vender tilbage til i min OneNote flere gange, hver gang jeg laver en hjemmeside (ja, jeg kan ikke huske den udenad).

I din tekst-editor på hjemmesiden (- den der accepterer HTML – ikke den visuelle, hvis du har sådan en) sætter du koden

­

ind i din ord, der hvor du vil have ordet til at dele på mindre skærme, hvis der ikke er plads til hele ordet på én linje.

Eksempel: Ord­deling

Tekst-editor:

Korrekt orddeling på mobil - sådan gør du!

Koden vil nu dele ordet korrekt, så det står sådan her små skærme, når der ikke er plads til hele ordet på linjen:

Ord-
deling

Allerbedste hilsner

PS: Hvis du ikke vil gå glip af fremtidige tips til din hjemmeside, så meld dig til nyhedsbrevet herunder.

 

Oplever du, at længere ord på din hjemmeside bliver delt uden bindestreg, ved visning på mindre skærme? Det er meget nemt at løse med et nemt lille trick.

Kom med på nyhedsbrevet og modtag
Den ultimative hjemmesideguide

Nå dine hjemmeside-KPI'er/performance-mål i år

R

23 sider tætpakket med håndgribelige tips og værktøjer til den eksisterende hjemmeside og projekt ny-hjemmeside.

R

Sådan kvalitetssikrer du den eksisterende hjemmeside.

R

Ny hjemmeside - sådan gør du.

Ebog vist på en Ipad
Rikke Ekelund

Skribent

Artiklen her er skrevet af mig. Jeg hedder Rikke Ekelund, og det er primært mig, der skriver her på bloggen. Til dagligt arbejder jeg som freelance webdesigner med at bygge hjemmesider til mine kunder, som jeg også hjælper med drift og support.

4 Kommentarer

  1. Jesper Kristiansen

    Korrekt orddeling: Det har jeg ledt efter i laaaaang tid :-).

    Tak, Rikke 🙂

    Svar
    • Rikke Ekelund

      Hej Jesper

      Velbekomme og mange tak for feedback 🙂

      Bh Rikke

      Svar
  2. Trine

    Hej Rikke

    Nu skriver du et sted på din hjemmeside, at du efterhånden har brugt en del timer på at tilpasse dine designs til mobilvisning … det har jeg efterhånden også fundet ud af, er nødvendigt (jeg havde nok naivt forestillet mig, dén del jo bare spillede nærmest ved første klik 🙂 ). Men lige så vel som den del skal tilpasses, hvordan oplever du så udfordringer med at tilpasse dine designs efter forskellige skærmstørrelser i det hele taget – endda bare fra én desktop til en anden: fx fra en stor iMac til en lille MacBook? Har du gode fif hertil også? Ærger mig over at bruge tid på én skærm, for så at se, det hopper rundt på en helt andet måde, når jeg åbner min hjemmeside på en anden skærm.

    Svar
  3. Rikke Ekelund

    Kære Trine

    Jeg ved lige, hvad du mener. Det har jeg desværre ikke ét godt tip til. Jeg er kun blevet nogenlunde god til dette, fordi jeg arbejder med webdesign hver dag. Det kræver meget erfaring, vilje og “okayhed” med at spørge om hjælp. Jeg bruger mit netværk af nørder og et par Facebook-grupper til dette. Hvis jeg skal give dit ét tip, så skal det være, at du skal tænke mobilen ind i dit design helt fra start. Tjek dit løbende dit design ud på alle de skærmstørrelser, du kan komme i nærheden af.

    Bedste hilsner
    Rikke

    Svar

Indsend en kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Læs også…

Evaluer din hjemmeside i 5 trin

Evaluer din hjemmeside i 5 trin

Hvad siger din hjemmeside om dig? Hvis dette spørgsmål er svært at besvare, eller hvis du ikke er sikker på, om du selv kan lide svaret, så er her en hurtig guide til, hvordan du kan evaluere din hjemmeside. Hvis den eneste indtryk en person havde af dig eller din...

6 best practices, som alle WordPress-ejere bør kende

6 best practices, som alle WordPress-ejere bør kende

Websites har brug for regelmæssig vedligeholdelse, pleje og opmærksomhed for at sikre, at de forbliver i topform og fortsætter tilføre din virksomhed værdi. En god WordPress-vedligeholdsaftale varetager den daglige vedligeholdelse af din hjemmeside for dig, men som...

WordPress vs. Squarespace,  Wix og Webflow – et overblik

WordPress vs. Squarespace, Wix og Webflow – et overblik

Hvis du overvejer at oprette en hjemmeside, har du sandsynligvis stødt på de fire mest populære platforme: WordPress, Squarespace, Wix og Webflow. Men hvad er forskellen mellem dem, og hvilken platform er bedst for dig? I denne artikel vil jeg se nærmere på hver...