Hvad er responsivt design? (Forklaringsvideo og infografik)
Det har taget et årti for lydhør webdesign (RWD) at gå mainstream siden Cameron Adams blev først introduceret konceptet i 2010. Ideen var genial – hvorfor kan vi ikke designe websteder, der tilpasser sig visningsporten på den enhed, den bliver vist på?
Hvad er responsivt design?
Responsivt webdesign er en designtilgang, der sikrer, at en hjemmeside giver en optimal seeroplevelse på enhver enhed, uanset skærmstørrelse eller opløsning. Det indebærer at bruge fleksible layouts, gitterbaserede layouts og medieforespørgsler til at skabe et websted, der tilpasser sig størrelsen på den skærm, det bliver vist på. Det betyder, at en hjemmeside designet med responsivt webdesign vil se ud og fungere godt på en stationær computer, en tablet eller en smartphone.
Med andre ord kan elementer som billeder justeres såvel som layoutet af disse elementer. Her er en video, der forklarer, hvad responsivt design er, samt hvorfor din virksomhed skal implementere det. Hvis du får udviklet et nyt webstedsdesign eller en ny webapplikation, er responsivt webdesign et must, ikke en mulighed, da over halvdelen af al webtrafik kommer fra mobile enheder, der har varierende visningsbredder og -højder.
Responsivt design er også optimalt for webdesignere, som ikke skal bygge selvstændige oplevelser, der er unikke baseret på enheden eller viewporten. Responsivt webdesign kan udføres ved hjælp af CSS.
Responsive Design CSS Viewport-forespørgsler
Her er et eksempel på et stylesheet, der justerer skriftstørrelsen baseret på viewporten ved hjælp af en medieforespørgsel:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
Browsere er selvbevidste om deres størrelse, og de indlæser stilarket fra top til bund. Ved at forespørge på de relevante stilarter for skærmens størrelse, kan du indstille specifikke stilelementer for hver minimums- og maksimumenhedsbredde. Dette betyder ikke, at du skal designe forskellige websteder for hver størrelse skærm, du skal blot flytte de nødvendige elementer ved hjælp af medieforespørgslerne.
At operere med en mobil-første-mentalitet er den grundlæggende standard i dag. Klassens bedste mærker overvejer ikke kun om deres websted er mobilvenligt, men om den fulde kundeoplevelse.
Lucinda Duncalfe, administrerende direktør i Monetate
Her er en infografik fra Monetate illustrerer de potentielle fordele ved at skabe ét responsivt design til flere enheder:
Er dit websted responsivt?
En enkel måde at se, om dit websted er responsivt, er blot at vokse eller formindske dit browservindue for at se, om elementerne bevæger sig baseret på browserens bredde.
For mere præcision skal du pege på din Google Chrome browser til dit websted. Vælg Se> Udvikler> Udviklerværktøjer fra menuen. Dette vil indlæse en masse værktøjer i et panel eller et nyt vindue. Klik på det lille ikon til venstre for menulinjen Udviklerværktøjer, der ligner et mobil- og tablet-ikon. Du kan vælge nogle standardenheder og endda ændre, om du ønsker at se siden vandret eller lodret.
Du kan bruge navigationsindstillingerne øverst til at ændre visningen fra liggende til stående eller endda vælge et vilkårligt antal forprogrammerede visningsportstørrelser. Du bliver muligvis nødt til at genindlæse siden, men det er det sejeste værktøj i verden til at kontrollere dine responsive indstillinger og sikre, at dit websted ser godt ud på alle enheder!