Hvorfor ser mit website ikke pænt ud på både computerskærm, tablet og smartphone, når det er lavet i responsivt design?

Hvorfor driller billederne? Hvorfor knækker teksten underligt?

Sådanne spørgsmål får jeg jævnligt. I denne uge flere gange. Mange bliver voldsomt overraskede over, at responsivt design er ikke er lig med, at et website helt automatisk ser godt ud på alle skærmtyper.

Er det måske ikke lige netop dét responsivt design kan og skal? Altså få tekster og billeder til at tilpasse sig pænt…. uanset man ser siden på en 13″ bærbar, en 27″ stationær computer, en smartphone eller en tablet?

Men så enkelt og ligetil er det desværre ikke. Selv professionelle webproducenter og tekniske nørder skal arbejde hårdt for at få et pænt resultat. Og bruger i mange tilfælde responsivt design forkert.

Nogle har helt styr på teknikken, men forstår ikke nødvendigvis at bruge mulighederne rigtigt - til at kommunikere effektivt.

  • Dygtige designere er ikke altid gode til teknik
  • Teknikere er ikke altid gode til design
  • Designere og teknikere forstår ikke nødvendigvis at kommunikere

At du kan samle et køkken, installere komfur og opvaskemaskne, og forstår at indstille og starte en mikroovn, er heller ikke lig med, at du også er god til at lave mad.

Har du brug for en kok, skal du ikke hyre en køkkensnedker. Samme princip gælder for webdesign!

Viden og teknik er ikke nok - du skal også træne

Det er ikke nok at have styr på teknikken i at køre en bil og kunne ræse afsted på lukket bane. Du skal også kende færdselsloven, hvis du vil køre sikkert mellem os andre.

Du lærer i øvrigt heller ikke at køre bil eller cykle ved at spørge i en gruppe på Facebook, hvordan det gøres. Du er nødt til at træne. Måske endda øve i mange timer, vælte utallige gange og få blodige knæ, før du mestrer det, du gerne vil.

Vil du have styr på at arbejde med webdesign - og særligt mobilvenligt og responsivt design - skal du ikke bare have styr på teknik og indstillinger. Det kræver viden og utallige timers træning.

Det bliver IKKE godt uden træning. Og den dårligste måde at lære det på er at sætte sig til at se tilfældige videoer på YouTube.

Mangler du teknisk indsigt

Mange har æstetisk sans og ved, hvornår de er tilfredse med designet - men mangler måske den grundlæggende viden om teknikken og har derfor svært ved at få tingene til at fungere, som de gerne vil. De kæmper i timer for at finde en løsning, der ofte er lige til højrebenet, hvis man først har fået styr på det fundamentale.

  • Du skal kunne vælge velegnede billeder, hvis du vil designe hjemmeside
  • Du skal have viden om billeder - forskellige formater, pixel, dpi, kb, mb
  • Du skal have et billedbehandlingsprogram til at redigere
  • Du skal kunne ændre bredde og højde. Du skal kunne beskære
  • Du skal vide, hvilke praktiske og tekniske krav et billede skal opfylde

Du skal både have teknisk viden, sans for design, gode tekster og gode billeder, hvis du vil lave et godt og responsivt design, der virker godt på alle skærme.

Husk at tjekke på alle skærmtyper

Når du designer hjemmeside, kan du ikke nøjes med at designe til din computerskærm. Heller ikke selvom du arbejder i en responsiv designskabelon.

Du skal løbende tjekke på både computerskærm, tablet og smartphone! Den responsive skabelon sørger nemlig ikke for, at det også er flot og velfungerende på smartphone!

Herunder ser du først et design, der fungerer nogenlunde på computerskærmen - men som du kunne se i starten af dette indlæg, fungerer det ikke godt på smartphone, hvor letbaneskinneskridtskraber knækker i tre dele og bliver til

LETBANESK
INNESKIDT
SKRABER

Det trælse knæk i overskriften skyldes, at ordet er for langt og/eller at skriftstypen er for stor.

Og sådan er det. Et responsivt design er kun et værktøj. Du skal bruge det rigtigt. Det bliver ikke uden videre og helt automatisk mobilvenligt i alle tilfælde.

Du skal derfor lære at bruge det responsive værktøj, før det bliver godt og helt mobilvenligt. Og der er masser af muligheder for at bruge det forkert.

Her kan du se et praktisk eksempel på at bruge baggrundsbilleder, fuldbreddebilleder og sliderbilleder i DIVI

Læs mere her, hvis brug af billeder driller