Responsive webdesign har blitt en catch-all term for å gjøre nettstedet ditt fungerer godt ved lave oppløsninger.
Smarttelefoner revolusjonerte mobilbanen, og tabletter kaster en ny skiftenøkkel inn i girene med sin voksende popularitet. Med alt i betraktning kan et nettsted i dag oppleves på en lavoppløselig smarttelefon, en middels oppløsningstabell eller en høyoppløselig stasjonær eller bærbar datamaskin. Når du kaster netthinnen i blandingen, er antallet potensielle skjermstørrelser svimlende. Ideelt sett vil nettstedet ditt se og fungere grasiøst på alt ovenfor, ved enhver oppløsning.
Responsive webdesign i seg selv er prosessen med å lage et nettsted arbeid på svært små skjermer, veldig store skjermer, og på hvilken som helst oppløsning i mellom.
I løpet av de siste årene har industrien samlet utviklet en liste over felles beste praksis. Mange av disse praksisene fokuserer på ettermontering av nettsteder beregnet for høy oppløsning ned til lavere størrelser. Andre starter på mobil og arbeider opp til de større visningsportene, optimaliserer etter behov. Alle disse metodene kan generelt kategoriseres som enten responsive eller adaptive layouter.
Responsive layouter utfører generelt bedre enn adaptive layouter, men i noen tilfeller (komplekse webapps for eksempel) kan en adaptiv tilnærming gi brukerne bedre service. Uansett, målet er å gjøre nettstedet ditt alltid se sitt beste ut på ønsket oppløsning.
De fleste velger å bruke medieforespørsler for å gjøre dette, som de er steinfaste med mindre du trenger støtte for IE8 eller under. For de av oss som fortsatt har et publikum i IE6 - 8 skjønt, har Scott Jehl opprettet en JavaScript-polyfil kalt Respond.js det vil få ting til å fungere.
Først hadde mange webdesignere minimal kommunikasjon med utviklere til handoff. Nå må designere og utviklere jobbe sammen gjennom både design og utviklingsprosessen for at alt skal gå greit. Fra brukeranalyser til hva som kan eller ikke kan omarrangeres når man bytter visningsporteføljer, er designere og utviklere nærmere enn noensinne, om ikke den samme personen. Hvis du leter etter inspirasjon om hvilke responsive eller adaptive layouter som ser ut, MediaQueri.es er et populært webdesign galleri som viser fire visningsportaler av et nettsted.
Når ideen om lydhurt webdesign først begynte å komme seg, dominerte adaptive teknikker for en stund. Det er lettere å overgå til å designe og utvikle for disse oppsettene, selv om de krever mer arbeid enn deres responsive sammenhenger. Dette er også ruten mange tar når man monterer et eksisterende nettsted for å være mobilvennlig. På grunn av arten av adaptive layouter gir de mye mer kontroll over utformingen av nettstedet. Du trenger bare å designe for bestemte visningsporte, og nettlesere viser bare den høyeste som passer inn i bredden. Disse layoutene er de som "snap" når du justerer når du endrer størrelsen på nettleservinduet. Faktisk hvis du endrer størrelsen på vinduet ditt til å være mindre enn 1024 piksler, ser du denne plutselige endringen jeg snakker om, siden utformingen av dette nettstedet justerer seg for å fokusere på et mediumoppløsningsvisningsport.
Når du designer for en adaptiv utviklingstilnærming, er arbeidet ganske enkelt. Før responsiv webdesign ble en ting, utformet du bare ett layout og utviklet det deretter. Nå skal du designe for flere visningsporte, og utvikle dem. Vanligvis er det lettere å starte på visninger med lav oppløsning og jobbe deg opp. Hvis du starter med høyoppløselige visninger og går ned, kan ting ende opp litt ... kompakt. Og når du kommer til mobil, rotete.
Antall visningsportene du designer for, er helt opp til deg og utvikleren, utarbeide en kampplan basert på brukerne dine. Hvis nåværende nettstedanalyse viser brukere for det meste ved bruk av lav og middels oppløsning, planlegger du dem. Du vil ha minst tre: en for visninger med lav oppløsning (smarttelefoner), middels oppløsning (tabletter) og en for høyoppløselige visninger (skrivebord og bærbare datamaskiner). Ideelt sett er planlegging for seks standarden, med et høyt og lavoppløsningslayout for hver av de tre visningsportene som er oppført ovenfor. Men å ha for mange mer enn det vil gjøre utviklingen og vedlikeholdet for mye til å håndtere, så vær forsiktig.
Å utvikle en adaptiv layout er faktisk ganske enkelt også. Forutsatt at du har jobbet med designeren (eller er designeren) fra farten, er det akkurat som å utvikle en tradisjonell nettside. Du starter med å utvikle nettstedet på et mobilt lavoppløsningsvisningsport. Når du får det gjort, bruker vi medieforespørsler for å utvide layoutet for visningsportevisninger med høyere oppløsning. Nedenfor finner du spørreundersøkelser med lav, medium og høy oppløsning:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Dette er hvor "snap" kommer fra den adaptive tilnærmingen. Siden vi målretter mot flere vanlige visningsportoppløsninger, kan det gå at det går å hoppe fra layout til side når det går å endre størrelsen på vinduet. Som nevnt tidligere, er adaptiv design og utvikling bare svært nyttig for ettermontering eller for komplekse webapps. Å designe og utvikle for mange layouter for uavhengige visninger er mye mer stress enn det ikke er nødvendig.
Fra og med i dag er responsiv design og utvikling den de facto-tilnærmingen til bruk. Mens det gir mindre kontroll over oppsettet sammenlignet med en adaptiv tilnærming, er det mye mindre arbeid å implementere og vedlikeholde, siden du teknisk sett bare har en layout. Det er også mer tilpasset for nettstedet, og dette er nøkkelsalget. Du vil kunne lage dine egne bruddpunkter basert på når designet ditt går i stykker eller ikke ser ut som ønsket.
Responsive layouter inkluderer også væskeoppsett. Før responsiv webdesign fanget på, var fluidsystemer populære - layouter ved hjelp av prosenter for bredder. Mens de sikkert fungerte bra i de fleste tilfeller, var det før vi hadde smarttelefoner og tabletter. Nå blir de fleste væskeoppsettene utvidet av medieforespørsler ved svært lave og svært høye oppløsninger. Ellers kan du ende opp med svært kompakte eller utrolig store oppsett.
Mens du har en veldig enkel guide til å følge med adaptiv design, er responsiv design ikke så klart kuttet. Det er oppvarmet debatt at design i nettleseren er den beste måten å gå om det - å designe og utvikle samtidig. Siden du i hovedsak skal ta hensyn til alle visningsportene når du designer, er det mer arbeid involvert på designsiden. Ideelt sett ønsker vi å holde visningsportene i tankene, men ikke design for noen bestemt. Hvis det er mulig, prøv å møte midt på bakken; Fokus på midtoppløsningsvisninger mens du husker at layoutet må justeres for lavere og høyere oppløsninger senere.
Det er overordentlig viktig å bruke eksisterende brukeranalyse hvis du har dem. Hvis nettstedet ditt allerede har analyser som viser at målgruppen din hovedsakelig leser fra visninger med lav oppløsning, design med fokus på disse. Mål publikum , selv om det betyr at du ignorerer noen av de beste rutinene der ute. Til slutt vil nettstedet ditt være å betjene dem, ikke folkene som sammenfatter disse "beste" praksisene.
Når designfasen er fullført, er utviklingen hvor den virkelige moroa begynner. Som nevnt tidligere, hvis du har analytiske data fra ditt typiske publikum, start der. Når du har fått layoutet ditt utviklet, bruker du medieforespørsler for å gjøre det responsivt. I stedet for å definere angitte visningsportaler, vil du i stedet endre størrelsen på nettleseren din til layoutet bryter. Når det skjer, er det din breakpointbredde - legg til et medieforespørsmål for å fikse pause i design og fortsett med å endre størrelse. Ideelt sett vil du gjøre dette fra en høyoppløsningsenhet, slik at du kan se alle visningsportene. Når du sørger for at du har støtte for visninger med lav og høy oppløsning, går du videre til testing.
Sjelden kan du støte på et nettsted som bruker en tilpasset løsning, for eksempel {$lang_domain} . Vanligvis faller flertallet av webene inn i enten de responsive eller adaptive gruppene som skissert ovenfor, men noen ganger blir folk kreative og lager sin egen løsning. {$lang_domain} gjør det ved å starte med standard lav, medium og høy breakpoints, og deretter supplere etter behov mellom seg når oppsettet går i stykker. På toppen av det er oppsettet også flytende i naturen opp til et sett maks oppløsning. Med dette i tankene, bli kreativ og bygg noe som bryter normen!
Dessverre er det egentlig ikke noen god løsning på nettleseren som tester disse oppsettene ennå. Den beste måten å teste på, er å gjøre det manuelt: laste opp siden på telefonen, nettbrettet, datamaskinen og alt annet rundt. Du kan også bruke en visningspoeder i nettleseren din hvis den støtter en slik utvidelse. Ripple Emulator er en forlengelse jeg bruker i krom for å teste noen visninger med lav oppløsning. Selv om det er absolutt ubeleilig å manuelt teste på enheter, gir det et mer nøyaktig inntrykk av funksjonaliteten din side har. UI som ser bra ut på en emulator, kan faktisk utføre ganske dårlig på en faktisk enhet.
Så omfattende som denne artikkelen er, er dette bare en primer om temaet layouttyper. Det er mye informasjon om responsive webdesignmetoder som ikke er inkludert i denne artikkelen; Optimalisering av brukergrensesnitt og typografi, responsive bilder og medier, enhetspikselforhold og mye mer er ikke forklart her. Det er imidlertid mange kilder til slik kunnskap, i mye mer informasjon tette former. Siden ideen om responsiv webdesign kom rundt, har vi bidratt til et enormt vell av kunnskap om emnet. Jeg håper å forklare forskjellen mellom layouttyper her, du vil bedre kunne håndtere ideen om en lydhør web ... uten å gå seg villig ned i kaninhullet.
Samfunnet skaper stadig nye teknikker og bygger kreative løsninger på problemer vi bare begynner å møte. Så mens det er en stor mengde informasjon tilgjengelig om responsiv webdesign der ute, er det et konsept som fremdeles er i barndommen. Mens beste praksis og brukssaker er enkle å overholde, å være kreativ og bane, blir din egen løsning alltid oppmuntret. Hvis du har noen tips eller forslag til de som bare kommer inn i, eller utvider vår kunnskap om responsiv webdesign og utvikling, drar du en diskusjon under!
Utvalgt bilde / miniatyrbilde, bruk responsivt bilde via Shutterstock.