Har du for vane at placere billeder i højre og/eller venstre side af tekst - eksempelvis i dine blogindlæg? Så teksten smyger sig om billedet? Det er en gammel vane! Det er fint til layout på papir. Men det skaber ofte problemer i moderne, mobilvenligt webdesign. Jeg vil derfor anbefale, at du straks stopper vanen og begynder at bruge en mere mobilvenlig præsentation af billeder. Lad mig starte med at vise et par eksempler.

Gamle vaner i moderne mobilvenligt design

Herunder har jeg brugt to billeder, der som udgangspunkt fint kan fylde hele kolonnen. Men jeg har trukket dem mindre, så de er 250 pixel brede. Og indstillet, at de skal vises henholdvis til højre og venstre for tekst.

Gammeldags design - der fungerer dårligt

Billedet er alt for småt til at fungere godt på smartphone.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint radiente occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Flot billede - men på smartphone er det svært at se de fine detaljer. Billedet passer bedre til en stor computerskærm end en smartphone.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sådan ser det betydeligt bedre ud

Når billeder får lov at være store, fungerer de langt bedre på smartphone. Men et billede som det her dur ikke i lille størrelse. Det SKAL være stort. Ellers kan folk ikke se detaljerne. Og det er ikke engang specielt godt i stor størrelse på en smartphone. Vi er blevet meget mere visuelle. Der er absolut ingen grund til at billeder skal være små og klemmes ned til noget, der ligner et frimærke. Hvis et billede ikke er værd at bringe i stort format, hvorfor så overhovedet bruge det? Det er kun godt, hvis mindst 30% af skærmen er et visuelt udtryk - altså alt andet end almindelig tekst. Det er en gammel vane at indsætte billeder til højre og venstre i tekst. Det ser fint ud på papir og på en stor skærm. Men det fungerer ofte ret skidt i moderne, responsivt design. Især på små skærme. Tekstkolonnen i dette indlæg er 795 px bred. Billederne er trukket ned til cirka 1/3 px. På computerskærm er der ikke noget problem at placere et billede i den ene side af teksten. Det vil stort set altid stå pænt. På smartphone blive det i nogle tilfælde slemt… At det ser ok ud på din mobiltelefon er desværre ikke lig med, at det også er ok, når dine besøgende ser siden på deres smartphone.

Smartphone med lille eller stor skærm

Gamle smartphones kan være bare 320 px brede (Iphone 4 og iphone 5) En Iphone 6 har 750 px. En Iphone 6 plux har 1080 px. På nogle smartphones vil billeder fungerer rigtig dårligt, hvis de er indsat til højre eller venstre i tekstspalten. Måske ikke på din, hvis du har en af de nyeste og mest moderne…. i givet fald opdager du ikke problemet. Men det gør dine læsere.

Små billeder bliver alt for små på smartphone

Bruger du brede billeder i 16:9 format (frem for meget høje billeder) får du et langt pænere layout end hvis du højrestiller eller venstrestiller små billeder ind i teksten. Brug 16:9 formatet til billeder på dit website

Størrelsen ER vigtig - gør billeder store

I dag skal billeder være gode og store. Både på store og små skærme. Hovedmotivet skal også gerne være tæt på beskueren - og væsentlige detaljer skal kunne ses. Også på en smartphone. Det bedste er, når du præsenterer tekst i store mængder, at du tænker i enspaltet design og lader billeder være store, brede og hver især fylde fra kant til kant. Småt er ikke godt, når vi taler om billeder. Slet ikke på en smartphone. Brug store billeder - meget store. Så aktiverer du WordPress-komprimering af billeder. Sådan vælger du fotos til moderne webdesign