Indhold
- Design for det ukendte
- En pragmatisk tilgang til design
- Bliver layout agnostiker
- Kodning gradvist
- Dykning i mark-up
Det ser ud til, at alle taler om responsivt webdesign i disse dage og med god grund; efterhånden som antallet af webbaserede enheder fortsætter med at vokse - hver med forskellige funktioner og funktioner - er det ikke længere fornuftigt at oprette websteder med fast bredde.
Sandheden er, det var det aldrig. Alligevel blev det indtil nu betragtet som bedste praksis at designe oplevelser, der gjorde en række antagelser, hvad enten de var omkring skærmopløsning, båndbredde eller inputmetode. Hvis du nogensinde har designet et websted på 960 pixel, kun for at se det på en vens netbook med lille skærm (og ja, jeg skriver fra smertefuld erfaring her), vil du forstå, hvorfor dette ikke var en særlig smart tilgang. Nu med smartphones og tablets kastet i blandingen er det klart, at vores traditionelle metoder ikke længere er egnede til formålet.
Heldigvis betyder fremkomsten af CSS-medieforespørgsler og en voksende anerkendelse af, at internettet er et medium i sig selv, at vi begynder at omfavne platformens sande natur og acceptere, at dets universalitet er en styrke, ikke en svaghed.
I løbet af de næste fem dage vil jeg guide dig gennem en teknik, der genkender denne kendsgerning: responsivt webdesign. Dette er udviklet af Ethan Marcotte og kombinerer flydende layouter, fleksible billeder og medieforespørgsler for at hjælpe os med at opbygge websteder, der tilpasser sig yndefuldt til ethvert miljø, de møder.
Jeg demonstrerer denne tilgang ved at vise dig, hvordan du bygger et simpelt mediegalleri. I mine eksempler opretter jeg et lille websted for at dokumentere en nylig biltur, jeg tog over USA, men du er velkommen til at tilpasse koden og designet, så det passer til dine egne behov.
Design for det ukendte
Meget af denne vejledning vil fokusere på udviklingsaspektet ved responsivt design. Men inden vi graver ind i en kode, skal vi tage et øjeblik til at tænke over, hvordan vi kan designe et websted, der muligvis kan have uendelige layouts.
Nu er jeg heldig, fordi jeg kan designe grænseflader og udvikle frontend-koden, der gør dem virkelige. Dette er naturligvis ikke en unik færdighed - hvis du arbejder for dig selv, er du sandsynligvis den samme. Men det er bestemt fordelagtigt at forstå, hvordan indhold kan tilpasse sig og flyde igen, når man laver flydende design.
Jeg arbejder også som en del af et større team, hvor min rolle er mere specialiseret. I et sådant miljø kan den visuelle designer fokusere udelukkende på at oversætte wireframes til attraktive, engagerende (underskrevet, pixel-perfekte) comps. Og det er ikke usædvanligt, at udviklere placeres separat og oversætter disse layouts til lean og effektiv markup og CSS.
Sådanne lineære og adskilte arbejdsgange bryder dog hurtigt sammen, når vi begynder at evaluere, hvordan design vil tilpasse sig forskellige miljøer. Så meget som ethvert nyt værktøj eller ny teknologi, bør vi også overveje mere samarbejdsvillige og smidige måder at arbejde på. Mange af de sværeste problemer, der opstår, når du designer responsive websteder, kan løses simpelthen gennem samtale, eksperimentering og iteration.
En pragmatisk tilgang til design
Det betyder ikke, at der ikke er plads til designere til at tænke over, hvordan et design kan fungere uden for en bestemt enheds rammer.
Hos Clearleft igangsætter vi visuelt design ud fra skrivebordets perspektiv. Vi begynder med at definere et overordnet designsprog og visuel æstetik og baserer ofte indledende udforskninger omkring et kerneindhold. For eksempel, hvis vi designer et madsted, starter vi med en opskriftside; til et nyhedsside, en historieside.
Ikke kun er dette en vigtig side på webstedet, men det indeholder sandsynligvis nok struktureret indhold til, at vi kan opbygge en typografisk palet. Vi vil også overveje, hvordan layoutet kan tilpasse sig - selvom det bare er bagest i vores sind på dette tidspunkt.
En nyttig måde at stresstest på et design er at tage en sådan side og tilpasse den til en smallere (~ 320px bred) skærm. Du vil sandsynligvis opdage, at nogle aspekter af designet bliver nødt til at genoverveje for at de kan arbejde i denne bredde. Her er nogle eksempler:
- Typografi: Store overskrifter kan fungere godt på bredere layout, men på mindre skærme kan de tage meget lodret plads og kræver derfor yderligere rulning. Når linjelængderne ændres, bør du også overveje linjehøjder og andre typografiske behandlinger.
- Links: Hvordan fungerer dit design på berøringsskærmenheder? Selvom vi endnu ikke har en nem måde at opdage disse på (hvilket betyder, at vi skal tage kontakt i alle aspekter af vores design), kan design til en smallere skærm give os en mulighed for at tænke over målområder for links og andre interaktive elementer. . IOS-retningslinjerne anbefaler, at disse er mindst 44 pixels / point firkantede, hvilket er en god figur at sigte mod.
- Navigation: Dette vil sandsynligvis være den mest akavede komponent i ethvert responsivt design, især hvis dit websted har mange sektioner og et dybt hierarki. Brad Frost har skrevet et resumé af nogle forskellige tilgange til navigation, der i øjeblikket overvejes.
- Overflødigt indhold: Er der ikke noget indhold, der kræves? Skal andet indhold kun vises i visse scenarier? Jeg går ikke ind for at skjule indhold baseret på hvilken enhed en bruger tilfældigvis bruger, men teknikker som betinget indlæsning (som vi vil se på senere i ugen) kan hjælpe os med at betjene mindre sider, der kun indlæser komplementært indhold, når det er nødvendigt.
At designe to kontrasterende layouter styrker ideen om, at et design vil tilpasse sig, mens man tidligt stryger potentielle gotchas ud. Selvom dette lyder som en fordobling af arbejdet, skal du huske på, at vi ikke designer hver side til pixel-perfekt præcision. I stedet fokuserer vi på at opbygge et skalerbart designsprog - et, der vil udvikle sig, når vi begynder at implementere det i kode, og et, der er baseret på individuelle moduler og komponenter.
Bliver layout agnostiker
Det er ikke overraskende, at for en branche, der historisk har behandlet internettet som tryk, har layout med fast bredde gennemsyret mange af de leverancer, vi producerer. Når vi begynder at designe et tilpasset medium, overvejes nye tilgange, der giver os mulighed for at løse problemer og kommunikere ideer, mens vi anerkender mediets flydende natur. Her er et par af mine favoritter:
- Sidebeskrivelsesdiagrammer: Mens wireframes ofte kan antyde layout (og således antage en bestemt type enhed), fjerner sidebeskrivelsesdiagrammer denne antagelse og beskriver i stedet de enkelte komponenter, der er arrangeret i dokumentet med hensyn til prioritet.
- Stil fliser: Når vi kommunikerer designideer med klienter, kan vi finde os i at præsentere 'malerier af hjemmesider'. Hvis vi ikke er forsigtige, vil klienter med rette bede om at se koncepter, der viser, hvordan et design også ser ud på andre enheder. Dette kan tvinge os ind i en uholdbar situation med at producere flere sider til flere enheder. Samantha Warren har overvejet dette problem og kommet med stilfliser. Disse sidder et sted mellem et humørbræt (men mindre vagt) og fuldt realiserede comps (men mindre præcise) og hjælper os med at kommunikere typografi, knapformater og masthead-behandlinger. De tilskynder også til et mere modent niveau af diskussion med vores kunder.
- Mobiliser designspil: Denne øvelse kan fungere rigtig godt under kollaborative designworkshops. I denne øvelse skriver alle ned på Post-it-notater de elementer, der kan vises på en bestemt side. Disse sidder derefter fast på væggen i rækkefølge efter betydning, som om de ser ud til at være lineariseret på en mobiltelefon. Den resulterende diskussion kan generere nogle overraskende konklusioner. For eksempel kan du indse, at navigation ikke er den vigtigste komponent på siden. Dette kan følge med i designet, hvor et springlink øverst på siden linker til navigationen i sidefoden.
Der er naturligvis stadig plads til de værktøjer, som vi allerede bruger, men når vi designer et websted i store træk, skal vi huske på, at layout ikke længere er kendt.
Kodning gradvist
Heldigvis behøver vi ikke bekymre os om det visuelle design i det eksempel, vi arbejder på, da det hårde arbejde er gjort for os! I stedet kan vi koncentrere os om at kode vores design til et fuldt responsivt websted.
En ting mere, før vi kommer i gang. Det er vigtigt at huske et grundlæggende princip for det medium, vi arbejder med: universalitet. Det betyder ikke kun at opbygge til dagens webbaserede enheder, men at sikre kompatibilitet med dem i går og i morgen. John Allsopp beskrev, hvorfor dette princip betyder noget i sit indlæg The Next 6 Million:
"De næste seks milliarder er børn i landdistrikterne Indien, Afrika, Kina, hvor adgang til magt og netværk kan være intermitterende. Det er nogen i Sumatra i en tiårs gammel Wintel-kasse. Det er mennesker, der taler hundredvis af forskellige sprog med snesevis af forskellige skrivesystemer. Det er mennesker, der er de første i deres familie, der kan læse og skrive. Det er de 20 procent af mennesker verden over, der ikke kan læse eller skrive.’
Vi kan spore vores forståelse af internettet ved at se på de forskellige mode (af mangel på et bedre ord), der har fået fat i vores profession: webstandarder, tilgængelighed, diskret JavaScript ... alle er varianter på samme tema: progressiv forbedring. Det samme gælder for responsivt webdesign. At bygge en virkelig responsivt websted er at opbygge et websted, der ikke kun er bagudkompatibelt, men også fremtidsvenligt.
Dykning i mark-up
Okay, nok af indledningen, det er tid til at åbne en teksteditor.Vores designer har forsynet os med et desktoporienteret design og har været venlig nok til at give eksempler på, hvordan dette også kan se ud i en smallere visning.
Det kan være fristende at kode disse op separat, men jeg vil foreslå en anden tilgang. Ved at placere de separate komponenter - eller mønstre - der udgør designet på en enkelt side, kan vi oprette en mønsterportefølje. Dette giver os mulighed for at udvikle komponenter uden for ethvert sidelayout og vil give os noget at henvise til senere for enhver regressionstest. Lad os se den oprindelige markering på et par forskellige enheder:
Se vores markerede mønsterportefølje
Nå, jeg bliver forbandet - vi har allerede et lydhørt websted! Vores indhold tilpasser sig grænserne for hver enhed, det være sig en fancy ny iPad eller en kasseret funktionstelefon. Det fungerer endda i en tekstbeskyttet browser som Lynx.
Takket være de underliggende principper for universalitet er internettet det lydhør som standard. Det er fantastisk, men det betyder også, at alt, hvad vi gør med koden fra nu af, kan kompromittere denne indfødte tilpasningsevne.
I morgen: Vi træder forsigtigt og begynder at anvende det første aspekt af responsivt design: typografi og flydende gitre.
