Responsive webdesign er blevet et næsten allestedsnærværende buzzword på nettet. Prøv at søge efter #rwd på Twitter for at finde lige dele indhold og Twitter spam. Dette er en fælles fase i modningen af en ny ide. Jeg husker, da AJAX var alt raseri; Begrebet blev drevet ind i jorden. Nu, få mennesker taler om AJAX, men biblioteker som jQuery er fuldt indbegrebet i en udviklers arbejdsgang.
Dette ser ud til at afspejle, hvad der sker med lydhurtigt webdesign. Udtrykket er overalt. En af mine venner er i magasinpublisering, hun gik til en konference for nylig, og en redaktør for et velkendt nyt magasin talte om kommende trends og nævner lydhør webdesign. Redaktører kan ikke være web-fagfolk, men de kender buzzwords.
Som responsivt webdesign fik damp, ændrede måden vi opbygger websteder til. Da udtrykket går fra buzzword til en fælles del af ethvert webdesign projekt, må vi arbejde som webprofessorer for at ændre. Med dette i tankerne skal vi lægge nogle nye grundregler for, hvordan vi arbejder.
Når nogen fortæller dig at "tjekke dette lydhøre websted", hvad er den første ting du gør? Du skal nok skala vinduet for at se, hvordan layoutet ændres. Jeg vil sandsynligvis ikke åbne den i min telefon og tablet og begynde at ændre retninger eller begynde at køre sidehastighedstest. Jeg skaler browseren og fortsætter med min dag. Dette er vores erfaring som designere og udviklere, men ikke som brugere. Når jeg besøger et websted som bruger, har jeg ingen tålmodighed. Jeg er ligeglad, hvis webstedet smutter fint ud; Jeg vil bare have det, jeg vil have.
"Squishy" er en lineær skalering af et websted. Går stedet fra skinnet til fedt? I modsætning til lineær skalering bør det følsomme webdesign fokusere på at etablere en site-kerne og gradvist indlæse derfra, baseret på evner. Forestil dig et websted, der skulle bygges til en lille mobiltelefon, der kører IE7 på et EDGE-netværk. Det burde være dit kerneområde og derefter skalere op baseret på skærmstørrelse og kapaciteter.
Responsive webdesign er kompliceret. Sådan er det bare. Jeg ville ønske, at der var noget jeg kunne fortælle dig at gøre det nemt, men der er ikke. De fleste har reageret på lydhurtigt webdesign ved at tilføje noget til deres arbejdsgange, om det er en ny leverbar eller bare at gå til en udvikler og spørge, om deres design vil fungere responsivt.
Jeg har en ven, der arbejder på et lydhurt websted for en klient. Hun bygger webstedet i Photoshop i desktop størrelse. Efter nogle få mockups på nogle sider ønskede hun at vise, hvordan webstedet ville ligne i en tablet og en smartphone, så hun gjorde også disse mockups. Efter at have præsenteret for klienten fik hun nogle kreative tweaks. Der er omkring 50 PSD-filer til dette websted på dette tidspunkt. Det tager hende et par dage at ændre layouterne.
At forsøge at tilføje nye designs alene vil resultere i en tidskrævende og inkonsekvent proces. En af de bedste måder at løse dette på er at prototyper dine wireframes og præsentere dem til din klient. Dette giver dig mulighed for at levere direkte til webstedets layout uden samtidig at tale om designet. Foundation af ZURB er et godt værktøj til hurtigt at bygge prototyper.
Det er ikke nok nok at tilføje prototyper til din arbejdsgang. For at lykkes i at opbygge lydhøre, skal du justere, hvilket bringer os til næste regel.
Da jeg først begyndte at bygge hjemmesider, brugte jeg to værktøjer, Photoshop og GoLive. Nu har jeg mindst seks programmer, som jeg absolut har brug for for at opbygge et websted. Jeg bruger stadig Photoshop til at lave grafiske elementer, men jeg designer hovedsagelig i browseren med Sublime Text 2, og jeg bruger Safaris udviklingsværktøjer til at inspicere elementer på min iOS 6. Jeg bruger også Codekit til at kompilere min forudbehandlede CSS og Terminal til versionskontrol i Git.
Responsive webdesign betyder også at ændre måden du designer. I stedet for at lægge en hel side i Photoshop bruger jeg Samantha Warrens stilfliser at artikulere visuelt design. Ved at designe et websteds visuelle mærke og grænsefladeelementer uden for et faktisk layout, kan du kommunikere design direkte og kombinere det med layoutet fra prototypen for at skabe dit lydhøre websted i browseren.
CSS preprocessorer er også stor hjælp i enhver lydhør arbejdsgang. For at sige det enkelt kan præprocessorer bruges til at eliminere noget af komplikationen ved at opbygge et websted og lette meget af gentagelsen, der arver at arbejde i CSS. Jeg foretrækker personligt SCSS, men LESS er et bedre alternativ til nogle, da det har en lavere adgangsbarriere og bedre dokumentation.
[Webben] skal være tilgængeligt fra enhver form for hardware, der kan oprette forbindelse til internettet: stationær eller mobil, lille skærm eller stor. - Tim Berners-Lee
HTML og CSS er selvfølgelig lydhør. Fra starten af HTML var internettet beregnet til at være fleksibel nok til at arbejde på hardware med internetforbindelse. Det var først, før vi som designere og udviklere flyttede til faste layouter, at dette ændrede sig. Ved at forsøge at pålægge faste dimensioner på hjemmesider, har vi begrænset internettet til stationære computere.
Den lydhøre web er en, der abstrakterer hvad du skal sige fra, hvordan du siger det. Tag for eksempel NPRs seneste flytning til en API-drevet indholdsmodel. Ved at flytte til en API for at levere indhold har NPR været i stand til at styre sin samling af apps og websteder på en ensartet måde. Det eneste der ændrer sig er præsentationslaget.
Dette er, hvad den reagerende web skal handle om. At finde ud af, hvad det er, du må sige, og lade dig sige, at det bliver drevet af det. Design handler om at opfylde et behov på en måde, der er visuelt tiltalende, men også det virker for at imødekomme brugerens behov.
Det her handler det om, at den reaktive web er, brugerens skabende websteder, der fungerer for de mennesker, der bruger dem, men de får adgang til indholdet. At lave steder, der kan refactor sig til små skærme, er kun begyndelsen.
Har du taget imod et lydhurtigt webdesign endnu? Hvilke regler for responsivt design vil du gerne tilføje? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, størrelse billede via Shutterstock.