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.

Læs også…

Guide til salgstekster, der virker

Guide til salgstekster, der virker

Af tekstforfatter Majbritt Lund Sælger dine tekster ikke nok i dag, så læs med her: Mange salgstekster indeholder en række fejl, der gør, at kunden står tilbage med spørgsmål og selv skal gætte sig frem, til hvad han får ud af at købe. Og så er det lettere at lade...

Sådan lægger du et favicon på din Divi-hjemmeside

Sådan lægger du et favicon på din Divi-hjemmeside

Et favicon er det lille billede/’thumbnail’, som du finder i fanen i browseren før dit web sites titel. Et favicon vil hjælpe med at øge din branding og med at stå ud i mængden. Det er altid en god praksis at lægge et på din hjemmeside. Bedste størrelse til dit...