Design for Responsiveness
Design for responsive nettsteder kan være litt utfordrende først fordi prosessen er så annerledes.
Som designere har vi blitt vant til å bygge piksel-perfekte mockups som våre webblåkopier. Men responsiv design tar en annen tilnærming.
En designers rolle er ikke lenger å produsere en mockup og deretter sende den videre til utvikleren fordi responsiv design er ikke bare en to-trinns prosess, det er en serie revisjoner. De fleste av dem er laget i nettleseren. Det er et samarbeid mellom designeren og utvikleren, ikke lenger to separate oppgaver.
Her er noen tips og en generell arbeidsflyt for å gjøre overgangen fra å designe statiske steder til å designe responsive de litt enklere.
Å vite visningsportene dine
Før du starter et prosjekt, er det viktig å bestemme visningsportene dine. En typisk tilnærming ville være å bygge en layout for smarttelefoner, en for tabletter og mindre visningsporter, en større desktopversjon, og kanskje en andre desktopversjon for enda større / bredere skjermbilder, sier 1200 eller 1400 piksler eller mer.
Planlegger fremover
Skisse kan være din beste venn. Ta ett stykke papir og lag 3-4 bokser for å representere hver visning. Å ha alle dine visningsportaler på en side, hjelper deg ikke å fokusere på noe mer enn de andre. Når du legger ut ditt design, tar du først det viktigste innholdet og legger det til hver av visningsportene, og arbeider deg ned til de mindre viktige tingene mens du går.
Du vil raskt innse at ikke alt innholdet kan passe inn i de mindre visningsportene. Bedre å finne det ut nå mens du gjør skisser, i stedet for å prøve å gjøre endringer i en ferdig design.
Yup, det er mine egentlige scribbles. Du kan kanskje ikke finne ut hva hvert element er, men det er fra et faktisk prosjekt. Jeg gjorde design og utvikling slik at jeg ikke måtte gjøre det klart for noen andre. Poenget er, ingenting er raskere enn penn og papir for å raskt skrive ned oppsettideer.
Wireframes og mockups
Den viktigste delen av wireframing, har utvikleren en aktiv rolle. Han eller hun burde vite med en gang om ideen din kommer til å fungere eller ikke, og kan gi forslag til måter å få visjonen på uten å måtte gjenoppfinne hjulet.
Med responsiv design kan du ikke lenger bruke 90% av designtiden før utviklingen begynner. Så mockups må være raske og raske. Vær også åpen for endringer fordi sjansene er at dine opprinnelige ideer kanskje ikke fungerer akkurat som planlagt.
Nettleseren
På grunn av den store mengden testing involvert, er responsiv design best gjort som en prosess med revisjoner i nettleseren. Så snart en grunnleggende layout er avtalt, er det best å starte utviklingen med en gang. Å ha layoutene dine synlige fra en nettleser, bidrar til å forhindre mange designproblemer.
En annen ting å betrakte som designer er hvilke elementer i designet du kan lage med CSS alene. Mange utførelser i dag er i stand til å vise dropshadows, gradienter, grenser, avrundede hjørner og andre designelementer opprettet med CSS. Bare CSS-elementer er enklere å endre, tar mindre designtid å lage, og krever ikke at bilder eller bildeskivene skal implementeres. Selvfølgelig, hvis du ikke utvikler nettstedet selv, må du kunne kommunisere dine layoutideer med utvikleren.
Tar det inn i Photoshop
Jeg anbefaler på det sterkeste å bruke en .psd for alle oppsettene. Her er et raskt eksempel ved hjelp av 1200 piksler som den største visningsporten. Så start med en ny .psd på 1200 piksler bred ved 2000 piksler høye. De andre visningene vil være 480, 1020 og 768 piksler bredt.
For å starte, låser opp bakgrunnslaget ditt og dupliser det for så mange visningsporte som du trenger pluss en. Fyll opp det opprinnelige bakgrunnslaget svart og la resten hvite. Sett hvert hvitt bakgrunnslag i en mappe og navnet den for visningsporten (eksempel: "480").
Neste sett opp hvert visningsport i .psd. Husk at du bare trenger å gjøre denne gangen og bare bruke malen for alle dine prosjekter.
Først legg til guider på kantene til hver visning. (Vis -> Ny guide og velg "Vertikal"). Legg til guider på 90, 216, 360, 840 og 1110 piksler.
Deretter lager Lag Masker på hver mappe, som vil danne kantene til hvert visningsport. Bruk Rectangular Marquee Tool til å velge området i midten av to guider (480 piksler).
Å ha Snap sjekket (Vis -> Snap) gjør dette mye enklere. Med det valgte valget og den riktige mappen som er valgt i Layerspallet, klikker du Legg til lagsmaskeknapp for å bruke den. Gjør det samme trinnet for de andre visningsportene.
Nå for å se et gitt visningsport, slår du bare av de andre mappene. Jeg har også tatt med et bilde av Layer Pallet hvis du vil se hva det skal se ut.
mockups
Hvis du allerede har et ujevnt nettsted utviklet, ta et skjermbilde ved hver visning og legg til dem i .psd i riktig mappe.
Generelt er det lettere å starte med den minste visningsporten og jobbe deg opp til de større i Photoshop. Så kutte ut 480 piksler, deretter kopier lagene og slipp dem inn i 768 piksler-mappen.
Det er ikke nødvendig å være pixel perfekt med noen av layoutene dine. Jeg pleier å få en visningsport å se riktig, men for resten endrer jeg bare elementene som er helt forskjellige i hver. Ikke bekymre deg for å få margene rundt tekstblokker perfekt. Virkelig bare ignorere tekst så mye som mulig, fordi Photoshop ikke kan gjøre det slik det vises i nettleseren, og det meste av tekstdesignet vil bli gjort med CSS.
Forstå hvordan innholdet endres
Når du tenker på designet, må du forstå hvordan layoutet vil bli endret etter hvert som det endres fra ett visningsport til et annet. Du må også vurdere hva som skjer hvis en layout er litt mindre eller større enn visningsporten du designer for.
Det er noen muligheter for at innholdet ditt skal kunne tilpasses hvert layout. Hvert element kan festes, skjules, flyte (venstre eller høyre), flytende, eller de kan skalere. Enhver gi responsiv design vil bruke en kombinasjon av alle disse.
Flytende elementer er mest sett i innholdsområder som ligger side ved side i store layouter, men stabler oppå hverandre i mindre visningsporte. Da visningsporten begynner å bli mindre og hvert element blir flatt til venstre, begynner elementene på høyre side å stable under elementene på venstre side.
Flytende innhold tilpasser seg best til å endre visningsportene, men kan bli vanskelig hvis det brukes på store visninger. Flytende innhold brukes vanligvis for kolonner med tekst som er så brede som visningsporten tillater. De jobber bra på mindre visningsporte, men kan bli for store på større, så det kan være best å bytte til faste for dem.
På samme måte som flytende, blir skaleringselementer gitt en prosentstørrelse og skala som liten eller bred som visningsporten tillater. Disse er forskjellige fordi det kan gjelde for bilder og tekststørrelser. Disse elementene er gitt en prosentbredde og / eller høyde og justeres til visningsporten.
Fast er den mest stive måten å legge ut innhold på. Hvis du har et innholdsområde som du ikke vil at det skal skalere eller endre størrelse på noen måte, blir det løst. Det beste med faste elementer er å designe dem for å passe den minste visningsporten. Det er mye lettere å bruke små elementer i en stor utsiktport over å prøve å passe et stort element i en liten visningsport.
Når du vil fjerne et element eller bare ikke ha plass til det, kan du gjemme det. Skjulte elementer vil ikke bli sett av brukeren, men vil fortsatt bli lastet ned. Så hvis du bruker store bilder, men gjemmer dem fra mobilbrukere, vil siden fortsatt ha samme tid å laste om bildene er synlige eller ikke.
Husk at du kan og bør bruke en kombinasjon av alle disse på samme element. Det betyr at en tekstboks vil være flytende i ett visningsport, fast og flytende igjen i en annen, og kan være skjult i en tredjedel.
Designere blir ikke glemt
Fordi så mye av et oppsett kan opprettes med CSS, kan det føles som din rolle som designer har redusert. Virkelig, din rolle har nettopp blitt forandret. Webdesign for lenge har vært om å designe grensesnittet mens du forsømmer innholdet.
Oppsettet er fortsatt viktig, men utvikleren kan gjøre mye av det. Designeren bør fokusere på at målene for nettstedet blir oppfylt. Tilbring mest tid på å styrke konverteringsprosessen, understreke viktig innhold, og gjøre det mer smakfullt og fordøyelig.
For å være helt ærlig prøvde jeg å lete etter noen gode eksempler på dette i responsiv design, men kunne egentlig ikke komme med noen gode eksempler.
Grafiske elementer og bilder
Det er noen spesielle hensyn å gjøre når du arbeider med bilder i responsiv design. Den sikreste tilnærmingen er å lage bilder som passer den minste visningsporten. På denne måten holder du filstørrelsen nede og har bilder som vil fungere i hver visningsstørrelse.
Her er et eksempel på bilder som enkelt kan vises i flere visningsporteføljer fra Orestis.nl .
Store bakgrunnsbilder kan være spesielt problematiske når det skaleres ned for bruk av smarttelefon. Hvis du planlegger å bruke dem, må du sørge for å gjøre det på en måte som holder filstørrelser og lastetider til et minimum.
Konsistens
Et av de største problemene med responsiv design er mangelen på konsistens. Brukere kan ha problemer med å navigere på nettstedet ditt på en nettbrett når de er vant til skrivebordet.
Sørg for å bruke samme fargevalg på hvert layout og hold minst ett konsistent element gjennom. Logoen er det enkleste elementet til overgang gjennom alle. Gjør alltid navigasjonen tydelig merket og lett å finne. Hvis du må fjerne elementer fra mindre visningsdesign, har du andre metoder for å komme til innholdet.
Ikke gjenoppfinne hjulet
Når du designer et statisk nettsted, kan du ha mye frihet, men i responsiv design er det flere ting å ta hensyn til. Bruk en metode som fungerer og tilbringe tiden din som ser bra ut. Hvis folk kan gjøre e-postmaler ser flotte ut, kan du gjøre det samme med en responsiv design, det tar bare litt kreativitet.
Hva synes du er det vanskeligste å huske på når du designer et lydhørt nettsted i motsetning til separate mobile og statiske nettsteder? Gi oss beskjed i kommentarene!