Hvad er et responsivt layout?

Hvis du sender et brev vil modtageren se nøjagtig det layout du skrev det i. Et brev er et fixed media format og selv om der kan ske meget i posten vil brevet næppe ændre størrelse undervejs. Websider derimod er ikke et fixed format. Vi kan specificere hvor mange pixels vi ønsker hver enkelt element på siden skal fylde men vi har ingen mulighed for at vide hvilken opløsning eller skærmstørrelse brugeren benytter. Nogen brugere vil måske se websitet på en mobiltelefon og andre på en kæmpe plasma skærm. Disse enheder ville give en meget forskellig oplevelse af et ikke-responsivt website og resultatet ville næppe være særlig godt på nogen af de to enheder. Løsningen på dette problem er responsive layouts som tilpasser sig brugerens skærmopløsning (opløsning og skærmstørrelse går typisk hånd I hånd). Med responsive websites er det f.eks. muligt at præsentere indholdet i 1 spalte på små skærme, 2 spalter på mellemstore skærme og 3 spalter på store skærme.

For at følge denne guide skal du bruge en tekst editor. Start med at oprette et blankt HTML-dokument som du kalder ”index.html” og et blankt stylesheet som du kalder "style.css". Gem begge filer i samme mappe. Du skal selvfølgelig også bruge en browser til at se resultatet.

Første trin - Annullering af default zoom

Mobiler og tablets zoomer som regel ud når et website vises således at hele websites bredte passer til skærmen. Derfor må vi først forhindre denne zoom-funktionalitet. Det kan vi gøre med et viewport meta tag i head elementet af vores html-mark-up.

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

Vores website vil nu vises i en 1 til 1 pixel ratio på alle enheder.

Uformateret HTML vises altid responsivt

Jo..., Sådan da. Hvis vi laver en uformateret HTML-side med et enkelt paragraph element. Så vil den som udgangspunkt tilpasse sig bredten af browser-vinduet. Det er fordi blok elementer har en default bredte på 100%. Derfor er det er meget nemt at lave responsive layouts med bare 1 spalte. Sørg blot for at angive alle width properties i procent i stedet for pixels og tilføj en max-width property på f.eks. 500px for at ungå for lange linjer. Det vil dog stadig resultere i et dårligt format til store skærme så lad os i stedet prøve at lave et simpelt, men mere almindeligt layout med 1 header, 2 spalter med brødtekst og en footer.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="style.css" rel="stylesheet" type="text/css" media="all">
        <title>My Responisive Layout</title>
    </head>
    <body>
        <div class="wrapper">
            <header>The Header</header>
            <div class="leftContent">Content 1 Area</div>
            <div class="rightContent">Content 2 Area</div>
            <footer>The Footer</footer>
        </div>
    </body>
</html>

Nu kan vi begynde at style vores elementer med CSS. Først nulstiller vi et par værdier for at sikre at forskellige browsere viser elementerne ens. Dernæst centrerer vi vores wrapper-div ved at angive automatisk margin i begge sider. For at kunne se forskel på de enkelte elementer giver vi dem midlertidigt forskellige baggrundsfarver.

CSS:


/*reset margin and padding*/
html, body { 
    margin: 0; 
    padding: 0;
}
/*Make sure old browsers displays our html5 tags as block elements*/
/*...and that any added padding or borders will not expand the elements*/
header, footer, div {    
    display: block;
    box-sizing: border-box;
}
.wrapper{
    background: #bbb;
    width: 98%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.leftContent{
    background: #b55;
}
.rightContent{
    background: #5b5;
}

På nuværende tidspunkt vil alle elementerne vises som horisontale rækker fra toppen i en enkelt bred kolonne og det er også fint på små skærme men vi vil gerne have vores .leftContent og .rightContent side om side på større skærme. En måde at gøre det på er at lade elementerne "flyde" til venstre og angive en bredte (width) kombineret med en maksimal bredte(max-width). Maksimal bredten vil sikre at at de to kolonner stables i en enkelt kolonne når vinduet bliver for smalt. Vi må også tilføje en clear property til vores footer for at sikre at den bliver under de to flydende elementer. Hvis du har mange flydende elementer kan du med fordel anvende clearfix:after -tricket på et omsluttende parrent-element men for nu nøjes vi bare med en clear property i footeren med værdien "both".

CSS:


.wrapper{ background: #bbb;
width: 98%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.leftContent{
    background: #b55;
    float: left;
    width:100%;
    max-width: 480px;
}
.rightContent{
    background: #5b5;
    float: left;
    width:100%;
    max-width: 480px;
}
footer {
    clear: both;
}

Browservinduer bredere end 960 pixels vil vise de to divs side om side sådan her:

Responsivt webdesign 1

For små skærme (480px og derunder) virker layoutet også godt med begge divs i en kolonne:

Responsivt webdesign 1

Men for skærme med en bredte på mellem 500 og 960 pixels forhindrer vores max-width property elementerne i at udnytte hele den tilgængelige bredte og resultatet ser ikke for godt ud:

Responsivt webdesign 1

Heldigvis kan vi løse problemet med media queries.

Media Queries

Media queries kan evaluere parametre ligesom if statements i programmering. Ved at angive viduets bredte som et parameter kan vi afvikle særlige CSS regelsæt for skærme under eller over den specificerede bredte. Media queries kan bruges direkte i HTML mark-up til at aktivere forskellige externe stylesheets, eller (som her) angives i en enkelt CSS kode-blok/stylesheet.

Allernederst i vores style.css opretter vi en media query sådan her:

CSS:


@media screen and (min-width: 960px) { 
/*Rules for big screns only*/
}

Bemærk: Det er vigtigt at huske på at vi kun behøver at angive de regler vi vil ændre. Hvis en regel ikke angives bruger browseren bare de regler vi deklarerede i koden før vores media query.

Vi kan nu flytte max-width reglerne ind i media query -blokken så de kun afvikles når vinduet er bredere eller lig med 960 pixels. Det komplette stylesheet skal se sådan ud:

CSS:


/*reset margin and padding*/
html, body {
    margin:0;
    padding: 0;
}
/*Make sure old browsers displays our html5 tags as block elements*/
/*...and that any added padding or borders will not expand the elements*/
header, footer, div {    
    display: block;
    box-sizing: border-box;
}
.wrapper{
    background: #bbb;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}
.leftContent{
    background: #b55;
    float: left;
    width:100%;
}
.rightContent{
    background: #5b5;
    float: left;
    width:100%;
}
footer {
    clear: both;
}
@media screen and (min-width: 960px) {
    .wrapper{ max-width: 960px;}
    .leftContent { max-width: 480px; }
    .rightContent{ max-width: 480px; }
}        

Du kan have lige så mange media queries som du vil men 3-5 er som regel nok.

Mobile first vs. Desktop first

Metoden vi har brugt her hvor vi først definerer reglerne for små skærme og tilføjer media queries til undtagelser for større skærme kaldes ofte Mobile first. Mobile first betragtes generelt som den nemmeste måde at udvikle responsive layouts men det er muligt at gøre det modsat (Desktop first). I så fald skal parametret der evalueres være min-width i stedet for max-width. Gamle browsere som IE6 - IE8 kan ikke afvikle media queries så man må bruge desktop first hvis man vil understøtte disse browsere.

Hvad så med skriftstørrelser?

Man skulle tro at font-sizes på små enheder skal være små men det forholder sig ikke sådan. Specielt hyperlinks og andre UI elementer bør have en betragtelig størrelse for at kunne betjenes. Dog vil det ofte være godt at forøge fontstørrelsen på store skærme en smule. Den bedste måde er at angive en global regel i px for HTML elementet både i den oprindelige CSS og i hver media query. Denne værdi nedarves til alle andre elementer så hvis vi bruger rem værdier til alle andre elementer (i det oprindelige regelsæt) vil elementernes font-størelse være relativ til HTML elements font størelse i hver media query så alle størrelserne automatisk tilpasses. I vores eksempel kunne det se således ud:

CSS:


/*General font size for small screens*/
html {
    font-size:15px;
}
/*reset margin and padding*/
html, body {
    margin:0;
    padding: 0;
}
/*Make sure old browsers displays our html5 tags as block elements*/
/*...and that any added padding or borders will not expand the elements*/
header, footer, div {
    /*we increase the font-size for these elements. */
    /*When using rem we don't have to change this value in all the media queries*/
    font-size:1.5rem;
    display: block;
    box-sizing: border-box;
}
.wrapper{
    background: #bbb;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}
.leftContent{
    background: #b55;
    float: left;
    width:100%;
}
.rightContent{
    /*Let's decrease the font size for this element*/
    font-size:0.9rem;
    background: #5b5;
    float: left;
    width:100%;
}
footer {
    clear: both;
}
@media screen and (min-width: 960px) {
    /*In this media query we will only have to change font size for the html element*/
    html{font-size:17px;}
    .wrapper{ max-width: 960px;}
    .leftContent { max-width: 480px; }
    .rightContent{ max-width: 480px; }
}

Når regelsættet for vores media query træder i kraft vil alle rem værdierne være relative til 17 px i stedet for 15 px.