Responsiv webbdesign har blivit ett nära allestädes närvarande buzzword på webben. Försök att söka efter #rwd på Twitter för att hitta lika delar innehåll och Twitter-spam. Detta är en gemensam fas i modningen av en ny idé. Jag kommer ihåg när AJAX var allt raseri; Termen blev driven i marken. Nu pratar få om AJAX men bibliotek som jQuery är helt omhändertagna i en utvecklings arbetsflöde.
Detta verkar spegla vad som händer med en lyhörd webbdesign. Termen är överallt. En vän av mig är i tidningsutgivning, hon gick nyligen till en konferens och en redaktör för en välkänd ny tidning talade om kommande trender och nämnde responsiv webbdesign. Redaktörer kan inte vara webbproffs, men de känner till buzzwords.
Som lyhörd webbdesign fick ånga förändrades sättet vi bygger webbplatser. Eftersom begreppet flyttas från buzzword till en gemensam del av varje webbdesignprojekt, måste vi jobba som webproffs ändras. Med tanke på detta måste vi lägga nya regler för hur vi arbetar.
När någon säger att du ska "kolla in den här lyhörda webbplatsen", vad är det första du gör? Du skala förmodligen fönstret för att se hur layouten ändras. Jag kommer förmodligen inte att öppna den i min telefon och surfplatta och börja ändra orienteringar eller börja köra sidhastighetsprov. Jag skala webbläsaren och fortsätter med min dag. Det här är vår erfarenhet som designers och utvecklare, men inte som användare. När jag besöker en webbplats som användare har jag inget tålamod. Jag bryr mig inte om webbplatsen snubblar snyggt; Jag vill bara ha det jag vill ha.
"Squishy" är en linjär skala av en webbplats. Går webbplatsen från mager till fet? I stället för linjär skalning bör responsiv webbdesign fokusera på att skapa en webbplatskärna och gradvis ladda därifrån, baserat på kapacitet. Föreställ dig en webbplats som måste byggas för en liten mobiltelefon som kör IE7 på ett EDGE-nätverk. Det ska vara din kärnwebbplats och sedan skala upp baserat på skärmstorlek och kapacitet.
Responsiv webbdesign är komplicerad. Det är bara hur det är. Jag önskar att det var något jag kunde säga till dig att göra det enkelt, men det finns inte. De flesta har svarat på lyhörd webbdesign genom att lägga till något i deras arbetsflöden, oavsett om det är en ny leveransbar eller bara går till en utvecklare och frågar om deras design kommer att fungera responsivt.
Jag har en vän som jobbar på en mottaglig webbplats för en klient. Hon bygger webbplatsen i Photoshop i skrivbordsstorlek. Efter några mockups på några sidor ville hon visa hur webbplatsen skulle se ut i en tablett och en smartphone, så gjorde hon också de här mockupsna. Efter att ha presenterat för kunden fick hon några kreativa tweaks. Det finns cirka 50 PSD-filer för denna sida vid denna tidpunkt. Det tar henne några dagar att ändra layouterna.
Att försöka lägga till nya modeller ensam resulterar i en tidskrävande och inkonsekvent process. Ett av de bästa sätten att lösa detta är att prototypera dina trådramar och presentera dem för din klient. Detta ger dig en leverans att tala direkt med webbplatsens layout utan att samtidigt prata om designen. Stiftelsen av ZURB är ett bra verktyg för att snabbt bygga prototyper.
Att helt enkelt lägga till prototyper i ditt arbetsflöde är inte tillräckligt men. För att lyckas med att bygga upp svåra platser måste du justera vilket leder oss till nästa regel.
När jag började bygga webbplatser började jag använda två verktyg, Photoshop och GoLive. Nu har jag minst sex program som jag absolut behöver för att bygga en webbplats. Jag använder fortfarande Photoshop för att skapa grafiska element, men jag designar mestadels i webbläsaren med Sublime Text 2 och jag använder Safaris utvecklingsverktyg för att inspektera element på min iOS 6. Jag använder också Codekit för att kompilera min förbehandlade CSS och Terminal för versionskontroll i Git.
Responsiv webbdesign innebär också att du ändrar hur du utformar. I stället för att lägga ut en hel sida i Photoshop använder jag Samantha Warrens stilplattor att formulera visuell design. Genom att utforma en webbplatss visuella varumärke och gränssnittselement utanför en faktisk layout, kan du kommunicera design direkt och kombinera den med layouten från prototypen för att skapa ditt lyhörda område i webbläsaren.
CSS-förprocessorer är också stor hjälp i något responsivt arbetsflöde. För att uttrycka det enkelt kan preprocessorer användas för att eliminera en del av komplikationen att bygga en webbplats och underlätta en stor del av upprepningen som ärar för att arbeta i CSS. Jag föredrar personligen SCSS, men MINDRE är ett bättre alternativ för vissa eftersom det har ett lägre inträdesbarriär och bättre dokumentation.
[Webben] ska vara tillgänglig från någon form av hårdvara som kan anslutas till Internet: stationär eller mobil, liten skärm eller stor. - Tim Berners-Lee
HTML och CSS är naturligtvis responsiva. Från starten av HTML var nätverket avsett att vara tillräckligt flexibelt för att fungera på vilken hårdvara som helst med en Internetanslutning. Det var inte förrän vi som designers och utvecklare rörde sig mot fasta layouter så att det förändrades. När vi försökte införa fasta dimensioner på webbplatser stramade vi webben till stationära datorer.
Den mottagliga webben är en som sammanfattar vad du måste säga från hur du säger det. Ta till exempel NPRs senaste flytt till en API-driven innehållsmodell. Genom att flytta till ett API för att tillhandahålla innehåll har NPR lyckats hantera sin samling av appar och webbplatser på ett konsekvent sätt. Det enda som ändras är presentationsskiktet.
Detta är vad den lyhörda webben ska handla om. Beräkna vad det är du måste säga, och låta hur du säger att det drivs av det. Design handlar om att möta ett behov på ett visst sätt, men det fungerar också för att möta användarens behov.
Det här är vad den lyhörda webben handlar om, användarskapande webbplatser som fungerar för de personer som använder dem, men de får tillgång till innehållet. Att göra webbplatser som kan refactor sig för små skärmar är bara början.
Har du tagit emot en ändamålsenlig webbdesign än? Vilka regler för responsiv design vill du lägga till? Låt oss veta i kommentarerna.