Share
Med mindre du er helt ny i bransjen, eller du har levd under en stein i fjerntliggende land på en annen planet, har du hørt om responsiv design. Selv om du ikke forstår det fullt, er det nødvendig å være noe du har kommet over eller interaksjon med på en eller annen måte.
Kort sagt, responsivt webdesign er kunsten å designe nettsteder for en rekke skjermstørrelser og enheter, slik at det er en optimal opplevelse for hver bruker i alle mulige størrelser.
Responsive webdesign er på sitt beste når det er agnostisk enhet; hvor du ikke har som mål å designe for bestemte oppløsninger eller størrelser, for eksempel kun for iPhone eller iPad-størrelser. I stedet bør du sikte på å designe med innhold og design i tankene og hvordan dette innholdet flyter og tilpasser seg de ulike miljøene det kan sees eller brukes i.
Det pleide å være tilfelle at for å få tilgang til internett, måtte du prøve gjennom en (vanligvis veldig stor) datamaskin, med de kjente lydene fra modemet som høres mens du er tilkoblet. Nå skjønt, kan du få tilgang til internett via datamaskiner, bærbare datamaskiner, mobiltelefoner, smarttelefoner, tabletter, fjernsyn, spillkonsoller - listen føles nesten endeløs.
Responsive Web Design, skrevet av Ethan Marcotte og utgitt av A Book Apart, er en glimrende introduksjon til prinsippene for Responsive Web Design. Nå er det på den ene siden gode nyheter. Mer enn noen gang før, kan vi være koblet til internett når som helst eller sted som vi kanskje vil. Mens dette er tatt for gitt, for mange er det også nødvendig. Og med nødvendighet og tilgang er vi også ofte presentert med utålmodighet og behovet for ting å jobbe, og jobber raskt.
På grunn av at mottakelige nettsteder blir mye mer vanlige, har det til og med allmennheten (slik at alle utenfor web og kreative næringer) nesten kommet til å forvente det når de surfer på nettet. Så alt i alt er responsivt webdesign definitivt en stor ting.
Arbeid med responsiv design er ikke uten sine utfordringer. Først av alt er det så mange enheter og skjermstørrelser som vi må ta vare på. Fra store til store skjermer, fra små til midten (og alt i mellom) er det mye å tenke på. Og som jeg er sikker på at du allerede vet å være en utvikler, kan det å arbeide med lydhør design fra den tekniske siden av ting også bli mareritt-ish og være ekstremt vanskelig å håndtere.
Mediaqueri.es nettside tilbyr mye inspirasjon for noen toppmoderne lyddesigner. Som med ethvert prosjekt, er de viktigste tingene du trenger å tenke på med responsivt webdesign, innholdet på nettstedet, hvordan dette innholdet passer inn i designet og hvordan innholdet flyter fra side til side. Du må se på hvordan de forskjellige designelementene du har jobbet sammen og sørge for at alt føles sammenhengende og konsistent.
Forskjellen med responsiv webdesign er at du også må tenke på hvordan alt dette fungerer fra en størrelse til en annen, enten det er bredde eller høyde basert. Du må tenke nøye på hvordan alt dette oversettes til en mindre eller større skjerm, og hvordan alle designelementene dine, innholdsstrømmen og alt annet fungerer. Du må holde opplevelsen konsekvent, uansett størrelsen på nettstedet.
Vi, som designere og utviklere i en slik fartsindustri, er ganske heldige. Vi kommer til å jobbe med noen fantastiske prosjekter, og vi er vanligvis alltid på jobb i forkant av nye og nye teknologier. Å jobbe med responsivt webdesign er bare en av de spennende tingene vi kommer til å gjøre, men med det kommer en pris.
Greenbeltfestivalen er et godt eksempel på lydhør webdesign. Skjermbilder gitt på grunn av mediaqueri.es. Tenk tilbake til
I begynnelsen av et designprosjekt bør du forsøke å etablere nøyaktig hva det er at klienten ønsker å komme seg ut av prosjektet og hva de forventer at resultatene skal være. Å administrere kundens forventninger kan være vanskelig å gjøre, men det er viktig at du holder på med det for å sikre at kundene dine forstår din prosess fullt ut.
Et godt eksempel på responsivt webdesign i aksjon kan ses på nettstedet for Modern Green Home. Skjermbilder gitt på grunn av mediaqueri.es. Når det gjelder responsivt webdesign, og spesielt hvis de har kommet til deg med en av disse buzzwords, må du prøve å hjelpe til med å utdanne dine kunder. Ofte har disse buzzwords blitt hørt i forbifarten, eller har blitt representert feil, og det er opp til deg å sørge for at klienten din har en riktig forståelse av emnet.
For eksempel, noen ganger kan du til og med få potensielle kunder som kommer til deg og sier at de ønsket et nettsted som fungerte på "iPhone og iPad". I dette tilfellet vil jeg si "Vel, det er helt fint - men det som er flott er at vi i stedet kan fokusere på å skape deg en perfekt lydhendig nettside som vil fungere på noen enhet og ikke bare være begrenset til de to. "Det er en flott isbryter på emnet, og det er noe som gjør det veldig åpent for deg å forklare videre inn i planleggingsstadiene.
Hvis kunden din forstår responsivt design på riktig måte, så tenker jeg på at de vil bli lykkeligere med prosjektet.
The Stuff & Nonsense-nettstedet er et godt eksempel på responsivt webdesign, og introduserer også forskjellige illustrasjoner på forskjellige skjermstørrelser. Skjermbilder gitt på grunn av mediaqueri.es. Hvis du tar deg tid til å utdanne klienten riktig, kan den bare fungere til fordel for deg. For eksempel, i mitt eget arbeid, prøver jeg alltid å sikre at klientene mine føler at jeg jobber med dem, heller enn bare til dem. Dette bidrar til å lette prosessen med å jobbe med kundene dine når du utformer for den responsive weben.
Det er vel og bra å snakke om hvorfor det er viktig å utdanne klienter og fortelle ting du kanskje allerede vet om responsivt webdesign. Nå for nitty-gritty, hvor jeg kommer til å fortelle deg de beste måtene å designe responsive nettsteder.
Den store misnøye er velkjent for sine intervjuer, og deres nettside er et godt eksempel på magasindesign på nettet, samt å være et glimrende eksempel på responsivt webdesign. Skjermbilder gitt på grunn av mediaqueri.es. Og svaret? Vel, dessverre er det egentlig ikke riktig! Jeg beklager hvis det ikke er det du lette etter, men som du vil trolig forstå med utviklingen og kodingen, er alle dine prosesser annerledes, og ingen synes å fungere på samme måte. Dette er på sin måte flott, da det betyr at vi alltid kan finne nye måter å jobbe på.
Men ikke bekymre deg, jeg skal gi deg noen topp tips for å designe responsive nettsteder som du burde kunne sette i gang ganske enkelt. Ta gjerne med og velg fra alle disse, samt kombinere dem der du synes det kan være passende. Også eksperiment! Prøv mange forskjellige måter å designe responsive nettsteder og se hva som passer du beste.
Å lage en mockup for et sted med statisk bredde i Photoshop (eller annen grafikkprogramvare) pleide å være måten de fleste designte nettsteder på, og for noen er det fortsatt. Det er helt greit! Hvis du er komfortabel med å bruke en grafikkapp for å designe hvordan nettstedet ditt ser ut, så er det greit.
UX London 2013 nettstedet er et vakkert eksempel på design som skalerer seg fra små til store grasiøst. Skjermbilder gitt på grunn av mediaqueri.es. Men ikke prøv å designe en mockup for hver eneste oppløsning eller bredde; du vil bli gal og være der i svært lang tid. I stedet tenk tilbake til wireframing-artikkelen. Tenk på hvordan vi så på innholdsstrømmen for disse wireframes og hvordan vi bestemte oss for at alt skulle slås sammen. Prøv og oversett dette til designene dine og tenk på hvordan disse elementene vil flyte og flytte når skjermstørrelsen endres.
Noen av disse endringene vil være store, og for de da kan det være hensiktsmessig å lage en liten mockup for å vise dette, men for andre endringer, for eksempel teksttilpasning, så holder jeg meg til å se på disse typer ting i nettleser når du starter koding av prototyper. Hvis du foretrekker å designe en mockup for alle store faser av designet ditt, så må du bare være klar over tiden som dette vil legge til på prosjektet ditt.
Nå, for litt kontrovers. Du har kanskje hørt om det hele
WWF-nettstedet er et nydelig eksempel på webdesign som også fungerer briljant responsivt. Skjermbilder gitt på grunn av mediaqueri.es. Design i nettleseren er når du går fra et wireframe-trinn (hvis du har gjort det) rett inn i nettleseren for å starte designfasen, i stedet for å jobbe med noen grafikkprogramvare. Hvis du bruker mange elektroniske verktøy for å hjelpe deg med å skape ulike elementer i designstrukturen din (for eksempel å lage grids eller forfinne typografien din), kan dette fungere veldig bra..
Imidlertid kan mange designere føle at de sliter med å designe i nettleseren, spesielt hvis de er mer en designer enn en koder. Årsaken til dette er fordi de føler at det begrenser deres kreativitet litt mer, noe som gjør det vanskeligere for dem å føle at de kan komme opp med kreative, unike og visuelt spennende ideer.
Next Web klarer å vise innhold på en måte som er lett å fordøye og følge, selv ned til små skjermer. Skjermbilder gitt på grunn av mediaqueri.es. Men som utvikler vil du mest sannsynlig være ekstremt komfortabel å bruke kode og så kan det være lurt å leke med å prøve å designe i nettleseren og se hvilke resultater du kommer med.
Dette er sannsynligvis min personlige favoritt. Bestemme i nettleseren betyr at du får litt arbeid i grafikkprogramvaren og litt i nettleseren. Personlig tror jeg at du ikke kan få et bedre resultat av hvordan et design vil fungere til det er i selve nettleseren. Typografi vil alltid gjøre forskjellig i grafikkapper enn i nettleseren, og det er mye lettere å lage prototyper og iterere raskt gjennom designfaser når du er i nettleseren (selv om alt som kan endres ved innføring av applikasjoner som
Microsofts nettside bruker smart innhold og beskjærer bilder avhengig av størrelsen på visningsporten. Skjermbilder gitt på grunn av mediaqueri.es. Arbeide med både en blanding av mockups og nettbasert arbeid betyr at du kan gi stor fleksibilitet til design og beslutninger du må gjøre. Nøkkelen til dette begrepet "bestemmer i nettleseren" skjønt, er med det første ordet. Selv om mange viktige kreative beslutninger kan gjøres i grafikkprogramvaren, er nettleseren hvor ditt endelige valg kan gjøres.
Når jeg jobber på denne måten, finner jeg at jeg ofte ender med en blanding av mockups, designet mønsterbiblioteker (i grafikkprogramvare og i HTML og CSS) og full HTML & CSS prototyper. En blanding er flott og det viser utviklingen av nettstedet fra begynnelsen til det som forhåpentligvis begynner å bli en full nettside.
Først opp, hvis du ikke allerede har lært av artiklene mine i avsnittet "Før du begynner" - alltid, alltid, alltid begynn å jobbe med designene dine først. Alt dette betyr at du skal sørge for at du jobber med ekte innhold og innholdet som skal brukes på nettstedet du designer.
Philip House er et godt eksempel på hvordan du kan skifte og flytte oppsett når du arbeider med lydhør webdesign. Skjermbilder gitt på grunn av mediaqueri.es. For det andre er det helt opp til deg om du jobber mobil-først (med mindre layouter) eller desktop-down (som starter med full bredde skrivebordslayouter). Det er mange debatter om det på nettet, men egentlig dette er din egen beslutning om å gjøre. Hvis du føler deg mer kreativ går fra en større størrelse til en mindre, selv om du bygger den på motsatt måte, så er det greit. Som gjør det motsatte, og går fra små til store!
La oss pakke opp ting med noen nyttige ressurser. Det er så mange verktøy der ute som kan hjelpe deg når du designer lydhør nettsteder, ta en titt:
Accentsconagua