Responsive webdesign har blivit en catch-all term för att göra din webbplats fungerar bra vid låga resolutioner.
Smartphones revolutionerade mobilbanan och tabletter kastar en ny nyckel till växlarna med sin växande popularitet. Med alla aspekter kan en webbplats idag upplevas på en smartphone med låg upplösning, en medellös upplösningstabell eller en högupplöst skrivbord eller en bärbar dator. När du kastar näthinnan i mixen är antalet potentiella skärmstorlekar svimlika. Idealt sett kommer din webbplats att se och fungera graciöst på alla ovanstående, vid någon resolution.
Responsive webdesign i sig är processen att göra en webbplats på mycket små skärmar, väldigt stora skärmar, och vid någon upplösning däremellan.
Under de senaste åren har industrin gemensamt utvecklat en kort lista över gemensamma bästa praxis. Många av dessa metoder fokuserar på eftermontering av webbplatser avsedda för hög upplösning ner till lägre storlekar. Andra börjar på mobilen och arbetar upp till de större visningarna, optimerar efter behov. Alla dessa metoder kan generellt kategoriseras som antingen responsiva eller adaptiva layouter.
Responsiva layouter fungerar i allmänhet bättre än adaptiva layouter, men i vissa fall (komplexa webbapplikationer till exempel) kan ett anpassat tillvägagångssätt hjälpa användarna bättre. Hur som helst är målet att få din hemsida alltid att se sitt bästa ut på önskad upplösning.
De flesta väljer att använda mediafrågor för att göra detta, som de är rockfasta om du inte behöver support för IE8 eller under. För de av oss som fortfarande har en publik i IE6-8, har Scott Jehl skapat en JavaScript-polyfill heter Respond.js det kommer att få saker att fungera.
Innan hade många webbdesigners minimal kommunikation med utvecklare tills handoff. Nu måste designers och utvecklare jobba tillsammans genom både design och utvecklingsprocessen för att allt ska gå smidigt. Från användaranalyser till vad som kan eller inte kan omarrangeras när man ändrar visningsportar är designers och utvecklare närmare än någonsin, om inte samma person. Om du letar efter inspiration om vilka responsiva eller adaptiva layouter som ser ut, MediaQueri.es är ett populärt webbdesign galleri som visar fyra visningar av en webbplats.
När idén om lyhörd webbdesign först började vinna, anpassade adaptiva tekniker ett tag. Det är lättare att övergå till att utforma och utveckla för dessa layouter, även om de kräver mer arbete än deras lyhörda konterdelar. Detta är också den väg som många människor tar när man installerar en befintlig webbplats för att vara mobilvänlig. På grund av arten av adaptiva layouter ger de mycket mer kontroll över utformningen av webbplatsen. Du behöver bara designa för specifika visningsportar, och webbläsare visar bara den högsta som passar in i bredden. Dessa layouter är de som "snap" när du justerar när du ändrar ditt webbläsarfönster. Faktum är att om du ändrar storleken på ditt fönster till mindre än 1024 pixlar ser du den här plötsliga förändringen som jag pratar om eftersom layouten på denna webbplats anpassas för att fokusera på ett visningsutrymme med medelupplösning.
När man utformar för en anpassad utvecklingsmetod är arbetet ganska enkelt. Innan responsiv webbdesign blev en sak, utformade du bara en layout och utvecklade den sedan. Nu ska du designa för flera visningsportar och utveckla dem. I allmänhet är det lättare att börja med lågupplösningsvisningar och arbeta dig uppåt. Om du börjar med högupplösta visningsportar och gå ner kan sakerna bli lite kompakta. Och när du når mobilen, rörig.
Antalet visningar du designar är helt upp till dig och utvecklaren, utarbeta en kampplan baserad på dina användare. Om aktuell webbplatsanalys visar att användarna mest använder visningsportar med låg och medelupplösning, planera för dem. Du vill ha minst tre: en för visningar med låg upplösning (smartphones), visningar med medelupplösning (tabletter) och en för högupplösta visningar (stationära och bärbara datorer). Helst är planeringen för sex standarden, med en hög och låg upplösningslayout för var och en av de tre visningarna som anges ovan. Att ha för mycket mer än det kommer dock att göra utvecklingen och underhållet för mycket att hantera, så var försiktig.
Att utveckla en adaptiv layout är faktiskt ganska enkel också. Förutsatt att du har arbetat med formgivaren (eller är designer) från get-goet, är det som att utveckla en traditionell webbplats. Du börjar med att utveckla webbplatsen i ett mobilt lågupplösningsvisningsport. När du väl har gjort det, använder vi mediafrågor för att expandera layouten för visningar med högre upplösning. Nedan visas låga, medelstora och högupplösta visningsmediafrågor:
/* 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) { ... }Här kommer "snap" från det adaptiva tillvägagångssättet. Eftersom vi riktar in flera vanliga visningsportlösningar går det att gå från en till en annan när storleken på fönstret ändras. Som jag nämnde tidigare är adaptiv design och utveckling endast mycket användbar för eftermontering eller för komplexa webbapps. Att utforma och utveckla för dessa många layouter för oberoende vyer är mycket mer krångel om det inte behövs.
Från och med idag är responsiv design och utveckling den faktiska tillvägagångssättet att använda. Medan det ger mindre kontroll över layouten jämfört med ett adaptivt tillvägagångssätt, är det mycket mindre arbete att implementera och underhålla, eftersom du tekniskt bara har en layout. Det är också mer anpassat för webbplatsen, och det här är nyckelförsäljningspunkten. Du kommer att kunna göra egna brytpunkter baserat på när din design bryts eller inte ser ut som avsedd.
Responsiva layouter innehåller även vätskeformat. Innan mottagande webdesign fångades på var vätskesystem populära - layouter med procentuella bredder. Medan de verkligen fungerade bra i de flesta fall, det var innan vi hade smartphones och tabletter. Nu förstärks de flesta vätskeformat av mediafrågor vid mycket låga och mycket höga upplösningar. Annars kan du hamna med mycket kompakta eller oerhört stora layouter.
Medan du har en väldigt enkel guide att följa med adaptiv design är responsiv design inte så tydlig skärning. Det är uppvärmd debatt att design i webbläsaren är det bästa sättet att gå om det - designa och utveckla samtidigt. Eftersom du i grund och botten kommer att ta hänsyn till alla synpunkter när du designar, finns det mer arbete på designsidan. Helst vill vi hålla synpunkterna i åtanke, men inte designa för någon speciell. Om möjligt, försök att träffa i mitten; Fokusera på mittupplösningsvisningar medan du kommer ihåg att layouten måste justera för lägre och högre upplösningar senare.
Det är oerhört viktigt att använda befintlig användaranalys om du har dem. Om din webbplats redan har analyser som visar att din målgrupp huvudsakligen läser från visningar med låg upplösning, designar du med fokus på dem. Mål din publik , även om det innebär att ignorera några av de bästa metoderna där ute. I slutändan kommer din webbplats att betjäna dem, inte de som sammanfattar dessa "bästa" metoder.
När designfasen är klar är utvecklingen där den riktiga kul börjar. Som tidigare nämnts, om du har analytiska data från din typiska publik, startar du där. När du har fått din layout utvecklad, använder du mediafrågor för att göra det lyhört. I stället för att definiera uppsatta visningsportar ändras du istället manuellt i din webbläsare tills layouten bryter. När det händer, det är din brytpunktsbredd - lägg till en mediefråga för att fixa rasten i designen och fortsätt med att ändra storlek. Idealt sett gör du det från en högupplösningsenhet så att du kan se alla visningsportar. När du ser till att du har stöd för visningar med låg och hög upplösning, fortsätt till testning.
Sällan kan du stöta på en webbplats som använder en anpassad lösning, till exempel {$lang_domain} . I allmänhet faller majoriteten av webben i antingen de lyhörda eller adaptiva grupperna som beskrivits ovan, men ibland blir människor kreativa och skapar en egen lösning. {$lang_domain} gör det genom att börja med de vanliga låga, medelstora och höga brytpunkterna och sedan komplettera vid behov mellan varandra när layouten bryts. Utöver detta är layouten också flytande i naturen upp till en viss maxupplösning. Med detta i åtanke, bli kreativ och bygga något som bryter normen!
Tyvärr är det verkligen ingen bra lösning för webbläsaren att testa dessa layouter än. Det bästa sättet att gå på test är att göra det manuellt: ladda upp sidan på din telefon, surfplatta, bärbar dator och något annat runt. Du kan också använda en visningspofer i webbläsaren om den stöder en sådan anknytning. Ripple Emulator är en förlängning som jag använder i krom för att testa vissa visningar med låg upplösning. Medan det verkligen är obekvämt att manuellt testa på enheter, ger det ett mer exakt intryck av funktionaliteten som din webbplats har. UI som ser bra ut på en emulator, kan faktiskt utföra ganska dåligt på en verklig enhet.
Så omfattande som den här artikeln är det helt enkelt en primer om ämnet för layouttyper. Det finns mycket information om responsiva webbdesignmetoder som inte ingår i den här artikeln. Optimering av användargränssnitt och typografi, responsiva bilder och media, enhetspixelförhållanden och mycket mer förklaras inte här. Det finns emellertid många källor till sådan kunskap, i mycket mer information täta former. Sedan idén om lyhörd webbdesign kom runt, har vi bidragit till en överlägset stor mängd kunskap om ämnet. Jag hoppas genom att förklara skillnaden mellan layouttyper här, du kommer att kunna bättre ta hand om idén om en mottaglig web ... utan att gå vilse ner i kaninhålet.
Gemenskapen skapar ständigt nya tekniker och bygger kreativa lösningar på problem som vi bara börjar möta. Så medan det finns en stor mängd information tillgänglig om lyhörd webbdesign där ute, är det ett koncept som fortfarande är i sin linda. Medan bästa praxis och vanliga fall är lätta att överensstämma med, att vara kreativ och beställa är din egen lösning alltid uppmuntrad. Om du har några tips eller förslag för de som bara kommer in i eller utökar vår kunskap om responsiv webbdesign och utveckling, gnid en diskussion nedan!
Utvalda bild / miniatyrbild, användningar responsiv bild via Shutterstock.