Design for Responsiveness
Designe for lydhurtige hjemmesider kan være lidt udfordrende først, fordi processen er så forskellig.
Som designere har vi været vant til at opbygge pixel-perfekte mockups som vores web-tegninger. Men lydhørt design tager en anden tilgang.
En designer rolle er ikke længere at producere en mockup og derefter videresende den til udvikleren, fordi lydhør design er ikke bare en to-trins proces, det er en række revisioner. De fleste af dem er lavet i browseren. Det er et samarbejde mellem designeren og udvikleren, ikke længere to separate opgaver.
Her er nogle tips og en generel arbejdsgang for at gøre overgangen fra at designe statiske steder til at designe responsive dem lidt lettere.
Kende dine viewports
Inden du starter et projekt, er det vigtigt at bestemme dine visningsporte. En typisk tilgang ville være at opbygge et layout til smartphones, en til tabletter og mindre visninger, en større desktop version og måske en anden desktop version for endnu større / bredere skærme, siger 1200 eller 1400 pixel eller mere.
Planlægning fremad
Skitsering kan være din bedste ven. Tag et stykke papir og lav 3-4 kasser for at repræsentere hver viewport. At have alle dine visningsporte på en side hjælper dig med ikke at fokusere på noget design mere end de andre. Når du lægger dit design ud, skal du først tage det vigtigste indhold og føje det til hvert af de visningsporte, der arbejder dig ned til de mindre vigtige ting, mens du går.
Du vil hurtigt indse, at ikke alt indhold kan passe i de mindre visningsporte. Bedre at finde ud af det nu, mens du laver skitser, i stedet for at forsøge at lave ændringer i et færdigt design.
Yup, det er mine egentlige scribbles. Du kan muligvis ikke finde ud af, hvad hvert element er, men det er fra et egentligt projekt. Jeg gjorde design og udvikling, så jeg ikke var nødt til at gøre det klart for nogen andre. Pointen er, at ingenting er hurtigere end pen og papir til hurtigt at lave ideer til layout.
Wireframes og mockups
Den vigtigste del af wireframing er at have udvikleren tage en aktiv rolle. Han eller hun skal straks vide, om din idé skal arbejde eller ej, og kan give forslag til måder at få din vision på tværs af uden at skulle genopfinde hjulet.
Med responsivt design kan du ikke længere bruge 90% af din designtid før udviklingen begynder. Så mockups skal være hurtige og ru. Vær også åben for ændringer, fordi chancerne er, at dine oprindelige ideer måske ikke fungerer præcis som planlagt.
Browseren
På grund af den store mængde test involveret, er responsivt design bedst udført som en proces med revisioner i browseren. Så snart et grundlæggende layout er aftalt, er det bedst at starte udviklingen med det samme. At få dine layouter synlige fra en browser hjælper med at forhindre mange designproblemer.
En anden ting at betragte som designer er, hvilke elementer i dit design der kan oprettes med CSS alene. Mange udførelser i dag er i stand til at vise drop-shadows, gradienter, grænser, afrundede hjørner og andre designelementer skabt med CSS. CSS-elementer er lettere at ændre, tager mindre designtid at oprette og kræver ikke billeder eller billedskiver, der skal implementeres. Selvfølgelig, hvis du ikke udvikler webstedet selv, skal du kunne kommunikere dine layoutideer med udvikleren.
Tager det ind i Photoshop
Jeg anbefaler stærkt at bruge en .psd til alle layouts. Her er et hurtigt eksempel med 1200 pixels som den største viewport. Så start med en ny .psd ved 1200 pixels bred ved 2000 pixel høj. De andre udsigter vil være 480, 1020 og 768 pixels brede.
For at starte, låse op dit baggrunds lag og duplikere det for så mange viewports som du har brug for plus en. Udfyld det originale baggrundslag sort og lad hvile hvide. Sæt hvert hvidt baggrundslag i en mappe og navngiv det for dets visningsport (eksempel: "480").
Dernæst opstiller hver viewport i .psd. Husk, at du kun behøver at gøre denne gang og bare genbruge skabelonen til alle dine projekter.
Først tilføj guider ved kanterne af hver udsyn. (Se -> Ny vejledning og vælg "Vertikal"). Tilføj guider ved 90, 216, 360, 840 og 1110 pixels.
Dernæst opretter lagmasker på hver mappe, som vil danne kanterne af hvert udsyn. Brug det rektangulære markeringsværktøj til at vælge området inde i midten to guider (480 pixels).
At have Snap checked (View -> Snap) gør det meget lettere. Med det valgte valg og den korrekte mappe, der er valgt i Layerspallet, skal du klikke på knappen Tilføj lagmask for at anvende den. Gør det samme trin for de andre viewports.
Nu skal du blot se de andre mapper for at se en given visningsport. Jeg inkluderede også et foto af Layers Pallet, hvis du ville se, hvordan det skulle se ud.
mockups
Hvis du allerede har et ujævnt websted udviklet, skal du tage et screenshot på hver viewport og føje dem til din .psd i den rigtige mappe.
Generelt er det lettere at starte med den mindste viewport og arbejde dig op til de større i Photoshop. Så udklip dit 480 pixel design, duplikér derefter lagene og slip dem i 768 pixelmappen.
Der er ingen grund til at være pixel perfekt med noget af dine layouter. Jeg har tendens til at få en viewport til at se rigtigt, men for resten ændrer jeg kun de elementer, der er helt forskellige i hver. Du skal ikke bekymre dig om at få margenerne omkring tekstblokke perfekt. Virkelig bare ignorere tekst så meget som du kan, fordi Photoshop ikke kan gøre det sådan som det vises i browseren, og det meste af tekstdesignet vil blive gjort med CSS.
Forstå, hvordan indhold ændrer sig
Når du tænker på designet, skal du forstå, hvordan layoutet vil blive ændret, da det skifter fra et viewport til et andet. Du skal også overveje, hvad der sker, hvis et layout er lidt mindre eller større end visningsporten du designer for.
Der er et par muligheder for at give dit indhold mulighed for at tilpasse sig hvert layout. Hvert element kan fastgøres, skjules, flydes (venstre eller højre), flydende, eller de kan skaleres. Ethvert givende design vil bruge en kombination af alle disse.
Flydende elementer ses mest i indholdsområder, der sidder ved siden af hinanden i store layouter, men stabler oven på hinanden i mindre visningsporte. Da visningsporten begynder at blive mindre og hvert element flyder til venstre, begynder elementerne på højre side at stable under elementerne på venstre side.
Flydende indhold tilpasser sig bedst til skiftende viewports, men kan blive akavet, hvis det bruges på store viewports. Flydende indhold anvendes typisk til kolonner af tekst, der er så bred som visningsporten tillader. De arbejder godt på mindre viewports, men kan blive for store på større, så det kan være bedst at skifte til faste til dem.
På samme måde som flydende, får skaleringselementerne en procentstørrelse og skala så lille eller bred som visningsporten tillader. Disse er forskellige, fordi de kan anvendes til billeder og tekststørrelser. Disse elementer er givet en procent bredde og / eller højde og justere til visningsporten.
Fast er den mest stive måde at lægge indhold på. Hvis du har et indhold, som du ikke ønsker at skalere eller ændre på størrelse på nogen måde, bliver det løst. Den bedste ting at lave med faste elementer er at designe dem for at passe den mindste viewport. Det er meget lettere at bruge et lille element i en stor viewport over at forsøge at passe et stort element i en lille viewport.
Når du vil fjerne et element eller bare ikke have plads til det, kan du gemme det. Skjulte elementer vil ikke blive set af brugeren, men bliver stadig downloadet. Så hvis du bruger store billeder, men gemmer dem fra mobile brugere, vil siden stadig tage lige så meget tid til at indlæse om billederne er synlige eller ej.
Husk at du kan og bør bruge en kombination af alle disse på samme element. Det betyder, at en tekstboks vil være flydende i en viewport, fast og flydende venstre i en anden, og kan være skjult i en tredjedel.
Designere bliver ikke glemt
Fordi så meget af et layout kan oprettes med CSS, kan det føles som om din rolle som designer har formindsket. Virkelig, din rolle er lige blevet ændret. Webdesign for længe har været om at designe grænsefladen, mens du forsømmer indholdet.
Layoutet er stadig vigtigt, men udvikleren kan gøre meget af det. Designeren skal fokusere på at sikre, at målene for hjemmesiden er opfyldt. Tilbring mest tid på at styrke konverteringsprocessen, understrege vigtigt indhold og gøre det mere velsmageligt og fordøjeligt.
For at være helt ærlig forsøgte jeg at kigge efter nogle gode eksempler på dette i responsivt design, men kunne virkelig ikke komme med gode eksempler.
Grafiske elementer og billeder
Der er nogle særlige overvejelser at gøre, når du beskæftiger dig med billeder i lydhør design. Den sikreste tilgang er at lave billeder, der passer til den mindste viewport. På denne måde holder du filstørrelsen nede og har billeder, som vil fungere i hver viewportstørrelse.
Her er et eksempel billeder, der let kan vises i flere visningsporte fra Orestis.nl .
Store baggrundsbilleder kan være særlig problematiske, når de skaleres ned til brug af smartphone. Hvis du planlægger at bruge dem, skal du sørge for at gøre det på en måde, der holder filstørrelser og belastningstider til et minimum.
Konsistens
Et af de største problemer med lydhør design er manglen på konsistens. Brugere kan have problemer med at navigere dit websted på en tablet, når de er vant til deres desktop design.
Sørg for at bruge det samme farveskema på hvert layout og holde mindst ét ensartet element igennem. Logoet er det nemmeste element til overgang gennem alle. Sørg altid for at navigere klart og let at finde. Hvis du skal fjerne elementer fra mindre visningsdesign, har du andre metoder til at komme til det indhold.
Genopdag ikke hjulet
Når du designer et statisk website, kan du have en masse frihed, men i responsivt design er der flere ting at tage højde for. Brug en metode, der virker, og brug din tid til at gøre det godt. Hvis folk kan lave email skabeloner ser fantastisk ud, kan du gøre det samme med et lydhørt design, det tager bare lidt kreativitet.
Hvad synes du er den sværeste ting at huske på, når du designer et lydhurt websted i modsætning til separate mobile og statiske websteder? Lad os vide i kommentarerne!