Responsiv design
De 4 layoutformer
Statisk (static)
Layoutet er baseret på faste mål. Fungere bedst på den tiltænkte skærmstørrelse, hvis skærmen er for stor, vil det give luft i siderne. På mobiler vil denne layout form zoome ind, men ikke vise det fulde design.
Flydende (fluid, liquid)
Layoutet tilpasser sig i bredden, i forskellige skærmstørrelser, men gør typisk elementerne meget smalle. Et design, der er fluid vægter indhold og funktionalitet højere end design.
Adaptive
Denne layout form er en mellemting mellem statisk og responsive. Den kan styres med @mediaqueries breakpoints. Typisk laver man nogle bestemte breakpoints. De steder, hvor man ikke har breakpoints vil der være enten for lidt eller for meget plads, og man vil opleve at designet vil hoppe videre til den næste breakpoint, uden, at gradvis skaleres. Adaptive tilpasser sig kun efter det designeren har udtænkt.
Responsive
Ideen med responsive design er, at lave et layout, som tilpasser sig forskellige skærmstørrelser, for at give den bedst mulige brugeroplevelse. Dermed slipper brugeren for at zoome ind på sin telefon for at læse teksten eller trykke på navigationen. Et design der er lavet til en PC, vil ikke være særlig pæn og brugervenlig på en mobil eller tablet.
I takt med webbets udvikling og vores store forbrug af Smartphones, iPads og PC, er det blevet nødvendigt at have et responsivt design. Et alternativ til en responsive webdesigner, at man er nød til at lave en version til hver skærmstørrelse, hvilket er tidskrævende at vedligeholde og foretage ændringer.
Google og responsiv design
I takt med at flere og flere bruger deres mobiltelefon til at gå på nettet med, lavede Google en opdatering af deres søgealgoritme, som vurdere placeringen på ens hjemmeside, alt efter om den er responsiv eller ej.
Viewport
Browseren tror som standard, at den viser en desktop version, medmindre andet er defineret. Ved at definere et viewport meta tag, fortæller man dermed browseren, hvordan den skal skalere designet. Et viewport meta tag ser således ud:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Først fortæller man det er et meta tag med værdien “viewport”, og den content skal bredden være lig med, enhedens bredde og til sidst at den skal skalere 1.0 og dermed vise hjemmesiden i den faktiske størrelse. Viewport er et krav for at @media queries kommer til at virke.
Media Queries og breakpoints
Breakpoint
Breakpoints er en bredde, som indsættes i vores CSS, for at fortælle browseren hvordan den skal vise designet i en bestemt størrelse. Typisk laver man et breakpoint der passer til mobil, en til tablet og en til desktopversionen. Breakpoints angives i pixels, som en @media regel i CSS.
Denne kode betyder I bund og grund, at hvis skærmen har en mindste bredde på 500px, skal body og footer, følge nogle bestemte regler. I det her tilfælde vil både body og footer have en bestemt baggrundsfarve, skrift og teksten skal placeres i midten. CSS koden der skal gælde skrives mellem de 2 sidste krøllede parenteser.
Koden kunne se sådan her ud:
Ved at tilføje både min-width og max-width, betyder det, at designet skal vises sådan, hvis skærmen er mindst 500px bred og max 900px bred
Responsiv design og CSS Grids
Med CSS Grid er det meget nemt at gøre sin hjemmeside responsiv. Det kan gøres ved hjælp af breakpoints, ved at man indsætter sit overordnet element, som man har i sit grid og indsætter i et breakpoint, hvor man så efterfølgende kan flytte rundt i sine areas eller opstille columns og rows anderledes.
Koden kunne se sådan her ud:
Øvelse i forbindelse med media queries:
Vi har haft en øvelse i klassen, hvor vi skulle arbejde med at indsætte break points. Opgaven gik ud på at få designet til at ændre farve, når man kom ned i en mobilstørrelse, ved at bruge Media Queries.
Klik på billedet for at se min opgave
Opgave 1
I denne opgave skulle vi tilføje nogle breakpoints, så nogle af elementerne får ekstra meget plads.
Klik på billedet for at se min opgave
Opgave 2
I denne opgave skulle vi komme med et bud på et responsivt design til fronter.
- Skitser en responsiv udgave af holdets rum på fronter. Der skal være tre bredder
- Lav en fungerende mock-up med brug af grids og responsive teknikker
Klik på billedet for at se min opgave
Eksempel på prototype til mobil
Tablet version
PC version
