Responsive design er et relativt nytt begrep i webdesign. Det ble bare laget for tre år siden i mai 2010, da webdesigneren Ethan Marcotte brukte begrepet i hans artikkel for en liste fra hverandre.
I dag er det enda en mini-debatt som skjer om hvorvidt responsiv design er her for å bli, eller om det bare er et blunk i pannen. Bare tid vil fortelle, men for nå er det klart at lydhør design stræber etter å gjøre brukeropplevelsen så behagelig som mulig.
Responsive design er en webdesignfilosofi som fokuserer på å skape nettsteder som gir brukerne en forbedret visningsopplevelse. Dette inkluderer funksjoner som uanstrengt navigering og lesing, og minst nettleserendring, rulling og panorering. Alt dette foregår på tvers av en rekke forskjellige enheter, fra skrivebord til smarttelefoner.
Siden denne webdesign-tilnærmingen fortsatt er i en flatt tilstand, kan du ikke være helt klar på hva responsivt design handler om. Er det mer om sømløst å vise innhold på tvers av flere plattformer, eller handler det hovedsakelig om å hjelpe bedrifter å bygge mer attraktive nettsteder for å øke salget gjennom en bedre brukeropplevelse?
Mashable har allerede gått ut på en lem og kalt 2013 året med responsiv design. Mens det gjenstår å sees, er noen grunnleggende aspekter ved responsiv design standarder som aldri vil gå bort. Her er de viktigste responsive designfakta for å gjøre deg kjent med.
Du ville bli tilgitt for å tro at lydhør design og mobil design er det samme - men de er det ikke. Sikker, responsiv design lager nettsteder slik at de begge svarer på en nettleser størrelse og er mobilvennlig, men lydhør design er virkelig et helt webdesign. Problemet med å henvise til denne webdesign tilnærming som mobil design er at det er iboende begrensende, noe som gjør en disservice til tilnærmingen selv.
De mest effektive responsive nettstedene kan ses som de var ment å være, på tvers av en rekke beslutninger. Dette inkluderer alt fra de vanlige 1024 × 768 piksler til 1920 × 1080 skjermer og alt i mellom. Nettsteder som disse ser også flott ut på tabletter (både netthinnen og standard skjermer), samt på smarttelefoner. Hvis en webdesigner ser på responsiv design utelukkende gjennom mobilens sammenheng, så mister han potensielt en bredere brukeropplevelse.
Samtidig er mobil et veldig hensiktsmessig utgangspunkt for hele den responsive designdiskusjonen. Det har vært normen å begynne med en mobilordning, og deretter utvide dette designet til flere størrelser som et responsivt nettsted er utviklet. Mange designere mener det er enklere å vokse visuelle snarere enn å minimere dem.
Hvis det er en regel som webdesignere burde følge, er det at bildekvaliteten er en hel del viktigere enn det faktiske antall bilder. Årsaken er at et lavkvalitetsbilde bare ikke ser attraktivt ut i noen størrelse. Tiden det tar et nettsted å laste et bilde er nesten like viktig som størrelsen. Mobilbrukere vil være enige med dette fordi de har begrenset båndbredde som de skal kjempe mot.
Hva er en webdesigner å gjøre? Få en smart balanse mellom belastningstid og kvalitet. Dette inkluderer skaleringsbilder med CSS høyde- og breddeegenskaper, styring uten å laste i fullstørrelsesbilder og optimalisere bilder for Internett. Før du laster opp, anbefales det å beskjære noen bilder og lagre hvert bilde med den minste størrelsen, så lenge den fortsatt har skarp, visuell kvalitet.
Sjekk ut Sony USAs nettsted . Legg merke til hvordan alle bildene er super skarpe i kvalitet, uansett hvilken størrelse de er. Når du har besøkt nettstedet eller oppdaterer hjemmesiden, kan du også merke hvor raskt bildene lastes. Du trenger ikke vente mer enn et sekund for alt å komme i fokus ekstremt skarpt.
Designere har mange valg når de innlemmer bilder i en responsiv innstilling. De kan bare bruke noen få bilder; redusere bruken av bilder i mobile størrelsesordninger; tillate bilder å maskere seg i mobile omgivelser; eller bruk ulike filstørrelser og versjoner. Disse valgene vil fungere effektivt, selv om noen utviklere er imot å skjule bilder, fordi brukeren fortsatt må laste bildene til tross for at de er usynlige.
Type skal ikke være en størrelse som passer til alle. En type skrift som ser appellerende til øyet på skrivebordet ditt, kan være vemmelig på smarttelefonen din. Typografi må følge de samme reglene som andre aspekter av responsiv design.
Det viktigste aspektet av responsiv typografi er linjelengden. For jevn lesbarhet, bør typen optimaliseres basert på skjermbredden. Tommelfingerregelen, for stasjonære nettsteder, er at mellom 50 og 75 tegn er en linje ideell; For mobile enheter er bare mellom 35 og 50 tegn ideell.
Type må også enkelt leses vertikalt. Mange nettsteder bruker en linjeplass som er opptil 140 prosent av skjermens punktstørrelse for større tekstblokker. Hvis skjermen er mindre, må mer plass legges til.
Selv den spesifikke skrifttypen som er brukt er signifikant. Fancy skrifttyper og nyhetskrifter har muligheten til å se visuelt tiltalende på større skjermer, men de er vanskelig å lese om punktstørrelsen er liten. Disse typene skal ha mye plass mellom dem. Når du jobber med mindre størrelser, er det enklest å bruke normal sans serif stiler og jevne streker.
På Hardboiled Web Design nettsted , kan du se mange av disse prinsippene blir fulgt, noe som gir god respons. Legg merke til hvordan linjelengden på tekst på skrivebordet - i gjennomsnitt større enn den ideelle anbefalingen på 50 til 75 tegn - består av et skrifttype som er rent og enkelt å lese. I tillegg er linjeplassen også større enn punktstørrelsen på skrifttypen. På mobilenheter gjør nettstedets lydhørhet enda bedre: På en iPhone 5-skjerm var antall tegn per linje omtrent 67, noe som ligger litt over den ideelle regelen mellom 35 og 50 tegn.
Når det gjelder brukeropplevelsen - som er en av de viktigste faktorene som webdesignere bør tenke på - er navigering rett på topp prioriteter. Navigasjonen må være jevn og effektiv for å sikre en komfortabel brukeropplevelse.
Effektiv responsiv design må sikre dette ved å være ekstra oppmerksom på den bestemte bredden til en gitt nettleser. Et nettsted som bruker responsiv designbrønn, vil legge ut sidens navigering i forskjellige områder, alt avhengig av nettleserens bredde. Et av de beste eksemplene på dette er Food Sense S nettstednavigering.
Det ville være en feil for responsiv design for å skalere sidebeskrivelsen til større proporsjoner på enheter med større skjermer.
Så nå, når du hører webdesignere snakker om responsiv design, vet du at det ikke bare handler om å få et nettsted til å se bra ut og kjøre jevnt på mindre, mobile skjermer. Du vet at denne utformingsmetoden er basert på prinsippet om at nettsider av alle størrelser gir den mest optimale opplevelsen til brukeren, uansett hva de bruker til å se nettstedet.
Responsive design er fortsatt et relativt nytt konsept, i hvert fall til de fleste som bare ser nettsteder på internett. Derfor er så mange mennesker fortsatt ikke enige om hva som gjør responsivt design ... responsivt design. Handler det om å se alt riktig på mobile skjermer? Er det bare om belastningstider og bilder av høy kvalitet som vil tilfredsstille øyet? Handler det om en ren design og lettleste skrifttyper?
Det er alt dette og mer. Disse er bare grunnleggende for denne webdesign-tilnærmingen, men responsiv design er fortsatt i utvikling og endring, så sjansene er gode at flere elementer vil bli vurdert også. Til slutt handler det om å forbedre brukeropplevelsen, fordi ingen ønsker å håndtere et nettsted som er sakte, uklart, vanskelig å lese, rotete eller vanskelig å navigere.
Er responsivt design bare en trend? Hva er de viktigste aspektene av responsiv design? Gi oss beskjed om dine tanker i kommentarene.