logo   Responsive Web Design. (RWD)




Frem til udgangen af 00rne Var der kun en skærmtype til visning af hjemmesider - desktopskærmen. Opløsningen (og størrelsen) steg i en glidende og ret udramatisk udvikling. Den eneste konsekvens af udviklingen var, at bredden på hjemmesider ændrede sig fra fuld skærm til typisk centerplacering på 1000-1200 pixel med 'ubrugte' marginer på begge sider


Medio 10rne er situationen en helt anden. Der findes browsere i udstyr med alt fra ca. 240*380 px til (foreløbig) ca. 2*hd. Alle skærme bliver endvidere i praksis ca. 100 px mindre i højden grundet brug af ca. 60px for oven til adressefeltet og ca. 45px for neden til værktøjslinien.


Der er derfor sket en teknisk udvikling væk fra 'et-site-er-opbygget-som-et-site-er' henimod 'et-site-er-opbygget-så-det-tilpasser-sig-til-de-skærmstørrelser-det-skal-vises-på'. Design af sites har derved ændret sig fra statisk til dynamisk skalering - responsivt.


Samtidig er der sket en udvikling fra at bruge tabeller til det strukturelle design af sites over til at bruge <div>-bokse. De første år anvendtes udelukkende individuelt opbyggede <div>-boks løsninger. Ca. 2010 begyndte grid-baserede løsninger baseret på frameworks som f.eks. Bootstrap at dukke op. Fra ca. 2015 har det været muligt at anvende Flexbox (der også er <div>-boks baseret) som grundlag for design. Udover at Flexbox teknisk er til rådighed er det endnu så nyt at der stort set ikke findes 'how to use'.


Både grid- og flexbox- baserede sites er / vil som hovedregel være responsive.


RWD søger at kompensere for de forskellige skærmstørrelser på 3 måder:

  • Dynamisk skalerbarhed
    Det viste skærmbillede tilpasser sig den bredde den aktuelle skærm har uden at der er kodet til den specifikke skærmbredde. Passer til, at der i praksis findes et utal af skærmbredder.
  • Trinvis skalerbarhed
    Kolonner, der på en bred skærm vises ved siden af hinanden, vil på en smallere skærm automatisk glide ned under hinanden. Det bliver derved muligt, at bibeholde tekster etc. uden at de skaleres ned til ulæselighed eller at de skaleres op til jumbostørrelse.
  • Trinvis indholdsvalg
    Samtidig med den trinvise skalering kan dataene i en del af det oprindelige skærmbillede tages helt ud af skærmbilledet eller erstattes af andre data, der passer bedre til den anden skalering




Mobile first


SKAL TILPASSES


En konsekvens af at kolonnestyringen også gælder for klasseidenter for bredere skærmbilleder er, at den kodemæssige opbygning af en side bedst gøres nedefra = 'phone first'. Praktiseres 'phone last' vil man som hovedregel ved hver ny styringskode også påvirke de allerede vurderede opsætninger.




-----------------------------------------------

Begrebet Responsive Web Design blev først fremført i 2008 af Cameron Adams. Luke Wroblewski har fra 2009 og fremover været flittig til at beskrive RWD. Fremkomsten af RWD har ført til en række CSS-baserede frameworks udviklet med henblik på, at gøre det nemmere at bygge responsive sider. Bootstrap er et af dem - og nok det mest benyttede.


Ved et traditionelt design vil der kun være en version at tage hensyn til. Sitet vil fremstå ens, uanset hvor stort / lille et viewport det vises i.


Ved et responsivt design vil der være op til ganske mange versioner at tage hensyn til. Sitet vil fremstå forskelligt, alt efter hvilket viewport det vises i.
























x
x