Responsive webdesign har blitt en nær allestedsnærværende buzzword på nettet. Prøv å søke etter #rwd på Twitter for å finne like innhold og Twitter-spam. Dette er en felles fase i modningen av en ny ide. Jeg husker da AJAX var alt raseri; Begrepet ble drevet inn i bakken. Nå snakker få folk om AJAX, men biblioteker som jQuery er fullt tatt i en utviklers arbeidsflyt.

Dette synes å gjenspeile hva som skjer med lydhør webdesign. Begrepet er overalt. En venn av meg er i magasinutgivelse, hun dro nylig til en konferanse, og en redaktør for et velkjent nytt magasin snakket om kommende trender og nevnte responsivt webdesign. Redaktører kan ikke være web-profesjonelle, men de vet buzzwords.

Som responsiv webdesign fikk damp, ble måten vi bygger på nettsteder endret. Når begrepet beveger seg fra buzzword til en felles del av hvert webdesign prosjekt, må måten vi jobber som webprofessorer endre. Med dette i tankene må vi legge til nye regler for hvordan vi jobber.

Regel 1: Ikke stopp på "squishy"

Når noen forteller deg å "sjekke ut dette responsive nettstedet", hva er det første du gjør? Du sannsynligvis skaler vinduet for å se hvordan layoutet endres. Jeg kommer nok ikke til å åpne den i telefonen min og nettbrettet, og begynner å endre retninger eller begynne å kjøre sideturtallsprøver. Jeg skalere nettleseren og fortsette med dagen min. Dette er vår erfaring som designere og utviklere, men ikke som brukere. Når jeg besøker et nettsted som bruker, har jeg ingen tålmodighet. Jeg bryr meg ikke om stedet squishes pent; Jeg vil bare ha det jeg vil ha.

"Squishy" er en lineær skalering av et nettsted. Går stedet fra mager til fett? I stedet for lineær skalering bør responsiv webdesign fokusere på å etablere en nettstedskjerne og gradvis laste den derfra, basert på evner. Tenk deg et nettsted som måtte bygges for en liten mobiltelefon som kjører IE7 på et EDGE-nettverk. Det bør være ditt kjerneområde og deretter skalere opp basert på skjermstørrelse og evner.

Regel 2: Ikke se etter en enkel vei ut

Responsive webdesign er komplisert. Sånn er det bare. Jeg skulle ønske det var noe jeg kunne fortelle deg å gjøre det enkelt, men det er det ikke. De fleste har svart på responsivt webdesign ved å legge til noe i arbeidsflyten, enten det er en ny leverbar eller bare å gå til en utvikler og spørre om deres design vil fungere responsivt.

Jeg har en venn som jobber på et responsivt nettsted for en klient. Hun bygger nettstedet i Photoshop i skrivebordsstørrelse. Etter noen få mockups på noen sider, ønsket hun å vise hvordan nettstedet skulle se ut i en nettbrett og en smarttelefon, så hun gjorde det også. Etter å ha presentert til klienten fikk hun noen kreative tweaks. Det er omtrent 50 PSD-filer for dette nettstedet på dette tidspunktet. Det tar henne noen dager å revidere oppsettene.

Å prøve å legge til nye motiver alene vil resultere i en tidkrevende og inkonsekvent prosess. En av de beste måtene å løse dette på er å prototypere wireframes og presentere dem til klienten din. Dette gir deg en leverbar å snakke direkte med nettstedets layout uten samtidig å snakke om designet. Stiftelse av ZURB er et godt verktøy for å bygge prototyper raskt.

Bare å legge til prototyper i arbeidsflyten din, vil ikke være nok skjønt. For å lykkes i å bygge responsive nettsteder, må du justere, noe som bringer oss til neste regel.

Regel 3: Embrace forandring

Da jeg først begynte å bygge nettsteder, brukte jeg to verktøy, Photoshop og GoLive. Nå har jeg minst seks programmer som jeg absolutt trenger for å bygge et nettsted. Jeg bruker fremdeles Photoshop til å lage grafiske elementer, men jeg designer for det meste i nettleseren med Sublime Text 2, og jeg bruker Safaris utviklerverktøy for å inspisere elementene på IOS 6. Jeg bruker også Codekit til å kompilere min forhåndsbehandlede CSS og Terminal for versjonskontroll i Git.

Responsive webdesign betyr også å endre måten du designer på. I stedet for å legge ut en hel side i Photoshop, bruker jeg Samantha Warrens stilfliser å formulere visuell design. Ved å designe et nettsteds visuelle merke og grensesnittelementer utenfor et faktisk layout, kan du kommunisere design direkte og kombinere det med layoutet fra prototypen for å lage ditt responsive nettsted i nettleseren.

CSS preprosessorer er også stor hjelp i enhver responsiv arbeidsflyt. For å si det enkelt, kan preprosessorer brukes til å eliminere noen av komplikasjonene ved å bygge et nettsted og lette mye repetisjonen arve å jobbe i CSS. Jeg personlig foretrekker SCSS, men MINDRE er et bedre alternativ for noen, da det har en lavere inngangsbarriere og bedre dokumentasjon.

Regel 4: Husk dine røtter

[Internett] skal være tilgjengelig fra alle typer maskinvare som kan koble til Internett: stasjonær eller mobil, liten skjerm eller stor. - Tim Berners-Lee

HTML og CSS er iboende responsive. Fra begynnelsen av HTML var nettet ment å være fleksibelt nok til å fungere på maskinvare med en Internett-tilkobling. Det var ikke før vi som designere og utviklere flyttet mot faste layouter at dette endret seg. Ved å forsøke å pålegge faste dimensjoner på nettsteder, forringet vi nettet til stasjonære datamaskiner.

Sammendrag

Den responsive web er en som abstrakterer hva du må si fra hvordan du sier det. Ta for eksempel NPRs siste trekk til en API-drevet innholdsmodell. Ved å flytte til en API for å gi innhold, har NPR klart å administrere sin samling av programmer og nettsteder på en konsistent måte. Det eneste som endres er presentasjonslaget.

Dette er hva den reagerende weben skal handle om. Å finne ut hva det er du må si, og la hvordan du sier det drives av det. Design handler om å møte behov på en måte som er visuelt tiltalende, men også det som fungerer for å møte brukerens behov.

Dette er hva den responsive weben handler om, brukeren som lager nettsteder som fungerer for de som bruker dem, men de får tilgang til innholdet. Å lage nettsteder som kan refactor seg for små skjermer er bare begynnelsen.

Har du tatt imot responsivt webdesign ennå? Hvilke regler for responsiv design vil du legge til? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, størrelse bilde via Shutterstock.