Responsivt Design

Her findes en oversigt over responsivt design, og metoderne der bruges hertil.

Responsivt Design

I begyndelsen byggede man sit website til specifikke skærmstørrelser. Ofte ville det resultere i uønskede resultater på større og mindre skærme – f.eks. scrollbars og urimeligt lange linjer. Designet så som regel bedst ud på designerens skærm.

Det ændrede sig da der kom mere diverse skærmstørrelser til, hvor behovet for et mere flexibelt web design opstod. Herfra kom begrebet Responsive Web Design, som dækker en række metoder der lader os ændre vores layout og design så det passer til forskellige skærmstørrelser og opløsninger.

Static Layout

I de tidlige år var den dominerende metode ”static layout”, og det er lige præcis hvad det lyder til. Et statisk layout, som ikke ændre sig. Dette var som regel lavet på desktop, og det betød at mindre skærme ville enten give en uønsket scrollbar, eller skalere siden på mobilen enheder. Større skærme ville give nogle urimeligt lange linjer til tekst og en masse ”luft” på siden. Det så som regel bedst ud med samme skærm og opløsning som designeren.

Statisk layout

Fluid Layout

Denne metode foretrækkes, hvis man vægter indhold og funktionalitet højere end det grafiske design. Designere som benyttede sig af fluid layout, var ikke på god fod med det æstetisk-orienterede designere, da deres fokus blev nedprioriteret.

Dertil skal det nævnes at det ofte giver en bedre brugeroplevelse, da man både udnytter pladsen bedre, men også lader elementerne skalerer med siden. Dette gøres ved at angive bredden på elementer relativt, ved hjælp af procenter. Dette gør at elementerne kan blive meget smalle. Der er dog ofte grænser for, hvor smalt indhold kan blive.

Fluid layout

Responsive Layout

Dette består typisk af et liquid layout.Forskellen er at denne metode ændre på layoutet afhængig af skærmens bredde – Dette sker ved hjælp af det vi skalder @media-queries. Disse @media-queries gør det muligt, at bruge den samme HTML og CSS, på tværs af alle enheder.

Selvom der skal lidt planlægning til, så er det en metode som gør det nemmere udføre det man også kalder multi-device web. Tilgangen her, er mobile first, der betyder at man designer sit website i rækkefølgen: mobil > tablet > desktop.

Fluid layout

Adaptive Layout

Denne metode er en mellemting mellem statisk og responsive layout. Det ligner det responsive layout meget på den måde, at det benytter sig af @media-queries, men på skærme der ikke rammer disse breakpoints vil der ofte være for meget, eller for lidt plads.

Har man muligheden for at gøre det responsivt vil man typisk vælge det over det adaptive layout. Man kan sige, at dette benyttes hvis man skal konvertere et statisk layout til et responsivt layout. Det vil dog aldrig blive fuldt responsivt, hvis man ikke skriver det om.

Modsat responsive layout, benytter denne metode sig af mobile last.