iAllenkelhet er firmabloggen til Netlife Research. Vi lager slanke, lettstelte og effektive interaktive løsninger som gjør at du oppnår dine mål og får fornøyde brukere.
«Responsiv Web Design» (RWD) har etter hvert blitt et kjent uttrykk for de fleste som jobber med nett. Uttrykket refererer til bruken av media queries, i kombinasjon med flytende layout, som tilpasses de visningsflatene publikum bruker. Flytende layout betyr som oftest bruk av prosent, og det er ikke alltid like enkelt å jobbe med som piksler. Piksler og prosent er heller ikke enkelt å kombinere. Derfor ønsker jeg å se nærmere på to problemstillinger som kan være relevante for alle som jobber med RWD layouts.
Se for deg følgende layout. En spalte med width:65% og en spalte width:35%. Innholdet i hver av spaltene skal ha en padding:25px.
I dette eksempelet har jeg satt opp følgende HTML.
Og følgende CSS.
Det går rett og slett ikke an å legge sammen 65% + 35% + 100px, når summen skal bli 100%.
Det finnes flere ulike løsninger på dette problemet, men i dette eksempelet ønsker jeg ønsker å fokusere på muligheten for å endre box-model i CSS3.
Vanligvis tolkes box-model som content-box. Det vil si at border og padding legges til bredden på et element.
Dersom box-model endres til border-box, inkluderes border og padding i den totale bredden av et element.
Støtten for å endre box-model er ganske god.
Se for deg følgende layout. En spalte med width:350px og en spalte som tar opp resten av den ledige plassen. Behovet for en spalte med fast bredde kan for eksempel styres av annonser med standardiserte formater.
Jeg har satt opp følgende HTML.
Og tilhørende CSS.
Kombinasjonen av piksler og prosent er tricky, og skaper nok en gang problemer for layouten. I dette eksempelet fikses problemet ved å modifisere HTML og CSS en del. Hovedspalten (.a) pakkes inn i en div (.c) som settes til width:100% og float:left. Inne i diven (.c) får hovedspalten (.a) margin-right:350px, mens float:left og width:65% fjernes. Sidespalten (.b) får margin-left:-350px for å trekkes tilbake over høyre side av diven rundt hovedspalten (.a).
Hvilke teknikker, tips og triks benytter du deg av når du jobber med responsive design?
Martin liker å lage produkter som er enkle og intuitive å bruke. Han setter sin ære i å skape delikate grensesnitt med god typografi og tydelig funksjonalitet.
I juleferien skisset jeg og et par kollegaer raskt opp en alternativ forside til sas.no. Hvorfor i all verden gjorde vi det? Jeg er en ganske alminnelig SAS-kunde. Jeg liker å fly med SAS, men jeg liker dårlig å forholde meg til nettstedet sas.no. Det jeg liker minst er at det er synonymt med umulig [...]
I mars går Difi i gang med å kvalitetsvurdere 700 offentlige nettsteder i Norge. Og til høsten avsluttes det med konferanse, stjernedryss, premiering og fest. Men alt er ikke rosenrødt med Kvalitet på nett. Kanskje det er på tide med noen endringer.
Tor Løvskogen Bollingmo, 20.08.2012 10:49 am
min- og max-width, hacks for IE og media querys. Driver for øyeblikket å gjør vårt CMS-produkt responsivt, en ganske krevende prosess.
Elisabeth Irgens, 20.08.2012 1:16 pm
God oversikt! Teknikken med box-model ser interessant ut. Jeg har prøvd litt med prosent på margins også, kan være befriende enkelt hvis man bruker en 1000px container.
Ole Fredrik Lie, 20.08.2012 8:08 pm
Hei Martin / Netlife: Takk for en god og informativ artikkel som setter lys på relevante problemstillinger med gode løsningsforslag. Artikkelen din er herved bokmerket.
Martin Berglund, 20.08.2012 11:39 pm
@Tor: Det høres ut som noen solide utfordringer. Hvilken løsning har du satset på i forhold til IE og min- og max-width?
@Elisabeth: Prosent på margins er absolutt en mulig vei å gå. Jeg synes bloggposten du lenker til har flere gode råd.
Dersom jeg søker på «box-sizing» i Google får jeg opp resultater fra Paul Irish og Chris Coyier. Jeg tror de to har de beste gjennomgangene av box-model, og anbefaler begge bloggpostene:
- http://paulirish.com/2012/box-sizing-border-box-ftw/
- http://css-tricks.com/box-sizing/
Mens jeg er inne på anbefaling av bloggposter, vil jeg nevne «Don’t Overthink It Grids» også.
@Ole Fredrik: Tusen takk! Send meg gjerne lenker på twitter når du kommer over tips og triks :)
Marius Hauken, 21.08.2012 9:20 am
Fantastisk! Lurte akkurat på dette problemet på jobb i går, ga opp, ruslet hjem, kom over denne artikkelen i RSS-feeden min, og sparte meg for mange timers arbeid! :D Takker og bukker!
Martin Berglund, 22.08.2012 8:27 am
@Marius: Så fint at bloggposten kunne være til hjelp!
Mia Holte, 30.08.2012 11:18 am
Jeg har også lekt meg litt med tanken på marginer i prosent.
Martin Berglund, 30.08.2012 11:33 am
Tanken er absolutt god, men det er ikke lett å beholde den samme graden av kontroll med prosent som med piksler. Løsningen som Elisabeth lenker til, tar utgangspunkt i en sidebredde på 1000 piksler, og det gjør utregningen av marginene lettere.
Jeg har valgt å fjerne luften mellom spaltene og heller lagt padding på innsiden. Alternativt sette margin på elementene som legges i spaltene. Den enkleste måten å finne ut hva som fungerer for deg, er å lage eksempler der du prøver ut de forskjellige alternativene.
Ronny-André Bendiksen, 31.08.2012 9:20 am
Fin og oppklarende artikkel. Angående faste verdier i marger, så vil ikke dette fungere med margin, men kun med padding. Finnes det en god løsning på det, eller må jeg bruke et ekstra element?
Martin Berglund, 01.09.2012 10:11 am
Jeg har satt opp et eksempel som du kan se på http://jsfiddle.net/macbruker/Useu5/
Lurer du på om det går an å komme unna elementet innenfor en grid-kolonne som heter f.eks. «air»?
Se alternativ 1.
Eller vil du finne en annen løsning der du kan bruke margin?
Jeg pleier å sette padding på grid-kolonnen eller styre luften på elementet i grid-kolonnen. Se alternativ 2 0g 3.