Du har sikkert hørt udtrykket ”responsivt design” før, men hvad er det egentlig og hvad skal du bruge det til? Det vil Crunch give dig svaret på i dette blogindlæg.

Nu om dage er det nærmest i alle tilfælde nødvendigt at have et responsivt design på sin hjemmeside. Et responsivt hjemmesidedesign gør det muligt for din hjemmeside at tilpasse sig flere forskellige størrelser. Før i tiden havde man kun mulighed for at besøge hjemmesider via en computer og der var derfor ikke det store behov for at tilpasse hjemmesider til forskellige størrelser. Nu om dage benytter folk sig af smartphones, tablets og mange forskellige skærmstørrelser til at gå på nettet – og der er derfor vigtigt at din hjemmeside ikke kun ser godt ud på en computerskærm, men også i mindre formater som fx på en smartphone.

Den mest anvendte måde at lave responsivt design på er ved at opbygge sin hjemmeside i et grid. Et grid er en slags tabel, du lægger dit indhold i. Et grid har dog den fordel at den fordeler elementer i forhold til skærmstørrelsen. Nedenfor kan du læse om nogle af de funktioner, som gør at et responsivt design er vigtigt at bruge.

Placeringer

Forestil dig at du placerer 3 billeder ved siden af hinanden på din hjemmeside. Disse 3 billeder vil se fine ud og have en god størrelse når du ser dem på en computerskærm. Hvis du derimod kigger på en mobil, vil billederne blive meget små. Med et responsivt grid vil de 3 billeder ikke længere stå ved siden af hinanden når du ser hjemmesiden på en mobiltelefon, nu vil billederne stå under hinanden. Det gør at der er mere plads til hvert billede og at brugeren dermed nemmere kan se hvad billederne forestiller.

Skjul elementer

Forestil dig igen at du har en hjemmeside med 3 billeder placeret ved siden af hinanden. Du bruger et responsivt grid og når du kigger på hjemmesiden via din smartphone er billederne under hinanden i stedet for ved siden af hinanden. Siden er dog lidt lang nu når du skal scrolle ned forbi hele 3 billeder for at nå til hjemmesidens brødtekst.

Her giver et responsivt design dig mulig for at skjule elementer på forskellige enheder. Du kan slette 2 af billederne fra rækken kun på smartphones. Nu skal dine seere ikke scrolle så langt ned længere når de kigger på din hjemmeside via mobilen, hvorimod hvis de kigger på hjemmesiden via deres computer kan de stadig se de 3 billeder.

Størrelser

En sidste ting som er meget effektivt ved responsivt design er at billedstørrelser samt størrelser på fonte kan tilpasses forskellige enheder. Brødteksten skal muligvis være større på mindre enheder som fx smartphones end på computer for at øge brugervenligheden. Også billeder skaleres i størrelse så de passer til forskellige enheder.

 

Der findes mange måder at lave responsivt design på. Det kan kodes fra bunden eller du kan hente populære grids som fx Bootstrap, SimpleGrid og mange flere. I mange WordPress temaer er der allerede indbygget et responsivt grid som du kan tilpasse din hjemmeside efter.

En anden, men mindre benyttet måde at lave et responsivt design på er ved at lave forskellige hjemmesider. Der laves en hjemmeside til brug på computerskærme, en side til brug på tablets og en side til brug på smartphones. Dette er også en løsning, men ulemper ved dette er at hvis noget generelt skal rettes som fx en farve på en knap, et billede eller noget tekst, så skal det gøres på alle tre hjemmesider i stedet for kun på én hjemmeside.

 

Hvis du har spørgsmål omkring responsivt design er du velkommen til at kontakte os. En ting er sikkert – responsivt design er kommet for at blive.

Meld dig til vores nyhedsbrev

Meld dig til vores nyhedsbrev

Meld dig til vores nyhedsbrev og få spændende nyheder hver uge!

Du er nu tilmeldt nyhedsbrevet!