Hva er responsivt design? (Forklaringsvideo og infografikk)
Det har tatt et tiår Responsivt webdesign (RWD) å gå mainstream siden Cameron Adams introduserte først konseptet i 2010. Ideen var genial – hvorfor kan vi ikke designe nettsteder som tilpasser seg visningsporten til enheten den blir sett på?
Hva er responsivt design?
Responsivt webdesign er en designtilnærming som sikrer at en nettside gir en optimal seeropplevelse på alle enheter, uavhengig av skjermstørrelse eller oppløsning. Det innebærer å bruke fleksible oppsett, rutenettbaserte oppsett og mediespørringer for å lage et nettsted som tilpasser seg størrelsen på skjermen det vises på. Dette betyr at et nettsted designet med responsivt webdesign vil se ut og fungere godt på en stasjonær datamaskin, et nettbrett eller en smarttelefon.
Med andre ord kan elementer som bilder justeres så vel som utformingen av disse elementene. Her er en video som forklarer hva responsiv design er, samt hvorfor bedriften din bør implementere det. Hvis du får utviklet et nytt nettsteddesign eller nettapplikasjon, er responsiv webdesign et must, ikke et alternativ, gitt at over halvparten av all nettrafikk kommer fra mobile enheter som har varierende visningsportbredder og -høyder.
Responsiv design er også optimal for webdesignere, som ikke trenger å bygge uavhengige opplevelser som er unike basert på enheten eller visningsporten. Responsiv webdesign kan oppnås ved hjelp av CSS.
Responsive Design CSS Viewport Queries
Her er et eksempel på et stilark som justerer skriftstørrelsen basert på visningsporten ved hjelp av en mediespørring:
/* 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;
}
}
Nettlesere er selvbevisste om størrelsen, og de laster stilarket fra topp til bunn. Ved å spørre etter gjeldende stiler for størrelsen på skjermen, kan du angi spesifikke stilelementer for hver minste og maksimale enhetsbredde. Dette betyr ikke at du må designe forskjellige nettsteder for hver størrelse skjerm, du trenger bare å flytte elementene som er nødvendige ved å bruke mediespørringene.
Å operere med en mobil-først-mentalitet er basisstandarden i dag. Klassens beste merkevarer tenker ikke bare på om nettstedet deres er mobilvennlig, men på hele kundeopplevelsen.
Lucinda Duncalfe, administrerende direktør i Monetate
Her er en infografikk fra Monetate illustrerer de potensielle fordelene ved å lage én responsiv design for flere enheter:
Er nettstedet ditt responsivt?
En enkel måte å se om nettstedet ditt er responsivt, er å bare vokse eller krympe nettleservinduet for å se om elementene beveger seg basert på nettleserens bredde.
For mer presisjon, pek på Google Chrome nettleser til nettstedet ditt. Å velge Vis > Utvikler > Utviklerverktøy fra menyen. Dette vil laste en haug med verktøy i et panel eller et nytt vindu. Klikk på det lille ikonet til venstre for menylinjen for utviklerverktøy som ser ut som et mobil- og nettbrettikon. Du kan velge noen standardenheter og til og med endre om du vil se siden horisontalt eller vertikalt.
Du kan bruke navigasjonsalternativene øverst til å endre visningen fra liggende til stående, eller til og med velge et hvilket som helst antall forhåndsprogrammerte visningsportstørrelser. Du må kanskje laste inn siden på nytt, men det er det kuleste verktøyet i verden for å verifisere responsive innstillinger og sikre at nettstedet ditt ser bra ut på alle enheter!