Innhold
- Design for det ukjente
- En pragmatisk tilnærming til design
- Blir layout agnostiker
- Koding gradvis
- Dykking i markeringen
Det ser ut til at alle snakker om responsivt webdesign i disse dager, og med god grunn; ettersom antall nettaktiverte enheter fortsetter å øke - hver med forskjellige muligheter og funksjoner - er det ikke lenger fornuftig å bygge nettsteder med fast bredde.
Sannheten er at det aldri var. Til nå ble det ansett som best praksis å designe opplevelser som gjorde en rekke antakelser, det være seg rundt skjermoppløsning, båndbredde eller inndatametode. Hvis du noen gang har designet et nettsted på 960 piksler, bare for å se det på en venns netbook med liten skjerm (og ja, jeg skriver fra smertefull erfaring her), vil du forstå hvorfor dette ikke var en spesielt smart tilnærming. Nå, med smarttelefoner og nettbrett kastet i blandingen, er det klart at våre tradisjonelle metoder ikke lenger er egnet for formålet.
Heldigvis betyr fremkomsten av CSS-mediespørsmål og en økende erkjennelse av at nettet er et medium i seg selv, at vi begynner å omfavne den sanne naturen til plattformen, og aksepterer at dens universalitet er en styrke, ikke en svakhet.
I løpet av de neste fem dagene vil jeg veilede deg gjennom en teknikk som anerkjenner dette faktum: Responsivt webdesign. Dette er utviklet av Ethan Marcotte, og kombinerer flytende oppsett, fleksible bilder og mediespørsmål for å hjelpe oss med å bygge nettsteder som elegant tilpasser seg ethvert miljø de møter.
Jeg vil demonstrere denne tilnærmingen ved å vise deg hvordan du bygger et enkelt mediegalleri. I eksemplene mine lager jeg et lite nettsted for å dokumentere en nylig biltur jeg tok over USA, men tilrettelegg gjerne koden og designet for å dekke dine egne behov.
Design for det ukjente
Mye av denne veiledningen vil fokusere på utviklingsaspektet av responsiv design. Men før vi graver inn i noen kode, la oss tenke litt på hvordan vi kan designe et nettsted som kan tenkes å ha uendelige oppsett.
Nå er jeg heldig fordi jeg kan designe grensesnitt og utvikle frontend-koden som gjør dem ekte. Dette er selvfølgelig ikke en unik ferdighet - hvis du jobber for deg selv, er du sannsynligvis den samme. Men det er absolutt fordelaktig å forstå hvordan innhold kan tilpasse seg og flyte når man lager flytende design.
Jeg jobber også som en del av et større team der rollen min er mer spesialisert. I et slikt miljø kan den visuelle designeren fokusere utelukkende på å oversette trådrammer til attraktive, engasjerende (signert-av, piksel-perfekte) kompiser. Og det er ikke uvanlig at utviklere befinner seg hver for seg, og oversetter disse layoutene til magert og effektiv markering og CSS.
Imidlertid brytes slike lineære og segregerte arbeidsflyter raskt når vi begynner å evaluere hvordan design vil tilpasse seg forskjellige miljøer. Så mye som noe nytt verktøy eller teknologi, bør vi også vurdere mer samarbeidende og smidige måter å jobbe på. Mange av de vanskeligste problemene som oppstår når du designer responsive nettsteder, kan løses ganske enkelt gjennom samtale, eksperimentering og iterasjon.
En pragmatisk tilnærming til design
Det betyr ikke at det ikke er rom for designere å tenke på hvordan et design kan fungere utenfor rammen av en bestemt enhet.
På Clearleft setter vi i gang visuell design fra skrivebordets perspektiv. Vi begynner med å definere et overordnet designspråk og visuell estetikk, og baserer ofte innledende utforskninger rundt et kjerneinnhold. For eksempel, hvis vi designer et matnettsted, begynner vi med en oppskriftsside; for et nyhetsnettsted, en historieside.
Ikke bare er dette en viktig side på nettstedet, men det inneholder sannsynligvis nok strukturert innhold til at vi kan bygge opp en typografisk palett. Vi vil også tenke på hvordan oppsettet kan tilpasse seg - selv om det bare er i bakhodet på dette stadiet.
En nyttig måte å stressteste et design på er å ta en slik side og tilpasse den til en smalere (~ 320px bred) skjerm. Du vil sannsynligvis oppdage at noen aspekter ved designet må vurderes på nytt for at de skal kunne arbeide i denne bredden. Her er noen eksempler:
- Typografi: Store overskrifter kan fungere godt på bredere oppsett, men på mindre skjermer kan de ta mye loddrett plass og krever derfor ekstra rulling. Når linjelengden endres, bør du også vurdere linjehøyder og andre typografiske behandlinger.
- Lenker: Hvordan vil designet ditt fungere på berøringsskjermenheter? Selv om vi ikke har en enkel måte å oppdage disse ennå (noe som betyr at vi bør ta hensyn til i alle aspekter av designet vårt), kan design for en smalere skjerm gi oss en mulighet til å tenke på målområder for lenker og andre interaktive elementer. . IOS-retningslinjene anbefaler at disse er minst 44 piksler / poeng, noe som er en god figur å sikte på.
- Navigasjon: Dette vil trolig være den vanskeligste komponenten i responsivt design, spesielt hvis nettstedet ditt har mange seksjoner og et dypt hierarki. Brad Frost har skrevet et sammendrag av noen forskjellige tilnærminger til navigering som for øyeblikket blir vurdert.
- Overflødig innhold: Kreves ikke noe innhold? Må annet innhold bare vises i visse scenarier? Jeg tar ikke til orde for å skjule innhold basert på hvilken enhet en bruker tilfeldigvis bruker, men teknikker som betinget lasting (som vi vil se på senere denne uken) kan hjelpe oss med å vise mindre sider som bare laster inn komplementært innhold når det er nødvendig.
Å designe to kontrasterende oppsett forsterker ideen om at et design vil tilpasse seg, mens du stryker ut potensielle gotchas tidlig. Selv om dette høres ut som en dobling av arbeidet, må du huske at vi ikke designer hver side til piksel-perfekt presisjon. I stedet fokuserer vi på å bygge et skalerbart designspråk - et som vil utvikle seg når vi begynner å implementere det i kode, og et som er basert på individuelle moduler og komponenter.
Blir layout agnostiker
Ikke overraskende, for en bransje som historisk har behandlet nettet som trykk, har layout med fast bredde gjennomsyret mange av leveransene vi produserer. Når vi begynner å designe et tilpasningsdyktig medium, vurderes det nye tilnærminger som lar oss løse problemer og kommunisere ideer mens vi anerkjenner mediumets flytende natur. Her er noen av favorittene mine:
- Sidebeskrivelsesdiagrammer: Mens wireframes ofte kan innebære layout (og dermed anta en bestemt type enhet), fjerner sidebeskrivelsesdiagrammene denne antagelsen og beskriver i stedet de enkelte komponentene, ordnet i dokumentet med hensyn til prioritet.
- Stil fliser: Når vi kommuniserer designideer med klienter, kan vi finne oss i å presentere ‘malerier av nettsteder’. Hvis vi ikke er forsiktige, vil klienter med rette be om å se konsepter som viser hvordan et design vil se ut på andre enheter også. Dette kan tvinge oss inn i en uholdbar situasjon med å produsere flere sider for flere enheter. Samantha Warren har tenkt på dette problemet og kommet med stilfliser. Disse sitter et sted mellom et humørbrett (men mindre vagt) og fullstendig realiserte comps (men mindre presise), og hjelper oss med å kommunisere typografi, knappestiler og masthead-behandlinger. De oppfordrer også til et mer modent nivå av diskusjon med våre kunder.
- Mobiliser designspill: Denne øvelsen kan fungere veldig bra under samarbeidende designverksteder. I denne øvelsen skriver alle ned på Post-it notater elementene som kan vises på en bestemt side. Disse blir deretter festet på veggen i rekkefølge etter betydning, som om de dukket opp lineært på en mobiltelefon. Den resulterende diskusjonen kan generere noen overraskende konklusjoner. For eksempel kan du innse at navigering ikke er den viktigste komponenten på siden. Dette kan følge videre til designet, der en hoppkobling øverst på siden lenker til navigasjonen i bunnteksten.
Det er selvfølgelig fortsatt rom for verktøyene vi allerede bruker, men når vi utformer et nettsted i store trekk, må vi huske at layout ikke lenger er kjent.
Koding gradvis
Heldigvis trenger vi ikke å bekymre oss for den visuelle designen i eksemplet vi jobber med ettersom det harde arbeidet har blitt gjort for oss! I stedet kan vi konsentrere oss om å kode designet vårt til et responsivt nettsted.
En ting til før vi setter i gang. Det er viktig å huske et grunnleggende prinsipp for mediet vi jobber med: universalitet. Det betyr ikke bare å bygge for dagens nettaktiverte enheter, men å sikre kompatibilitet med de i går og i morgen. John Allsopp beskrev hvorfor dette prinsippet betyr noe i sitt innlegg The Next 6 Billion:
"De neste seks milliardene er barn på landsbygda i India, Afrika, Kina hvor tilgang til makt og nettverk kan være intermitterende. Det er noen på Sumatra i en tiår gammel Wintel-boks. Det er folk som snakker hundrevis av forskjellige språk, med dusinvis av forskjellige skriftsystemer. Det er mennesker som er de første i familien som kan lese og skrive. Det er de 20 prosent av menneskene over hele verden som ikke kan lese eller skrive.’
Vi kan spore vår forståelse av nettet ved å se på de forskjellige motene (for mangel på et bedre ord) som har fått tak i vårt yrke: nettstandarder, tilgjengelighet, diskret JavaScript ... alt er varianter på samme tema: progressiv forbedring. Det samme gjelder responsiv webdesign. Å bygge en virkelig responsivt nettsted er å bygge et nettsted som ikke bare er bakoverkompatibelt, men også fremtidsvennlig.
Dykking i markeringen
Ok, nok av innledningen, det er på tide å åpne en tekstredigerer.Designeren vår har gitt oss en desktop-orientert design, og har vært så snill å gi eksempler på hvordan dette også kan se ut i et smalere syn.
Det kan være fristende å kode disse separat, men jeg vil foreslå en annen tilnærming. Ved å plassere de separate komponentene - eller mønstrene - som utgjør designet på en enkelt side, kan vi lage en mønsterportefølje. Dette tillater oss å utvikle komponenter utenfor rammen av hvilken som helst sideoppsett, og vil gi oss noe å referere til senere for enhver regresjonstest. La oss se den opprinnelige markeringen på noen få forskjellige enheter:
Se vår merkede mønsterportefølje
Vel, jeg blir forbannet - vi har allerede et responsivt nettsted! Innholdet vårt tilpasser seg grensen til hver enhet, det være seg en fancy ny iPad eller en kassert funksjonstelefon. Det fungerer til og med i en tekstleser som Lynx.
Takket være de underliggende prinsippene for universalitet er nettet det responsiv som standard. Det er flott, men det betyr også at alt vi gjør med koden fra nå av kan kompromittere denne innfødte tilpasningsevnen.
I morgen: Vi tråkker forsiktig og begynner å bruke det første aspektet av responsiv design: typografi og flytende nett.
