Innehåll
- Designa för det okända
- En pragmatisk syn på design
- Bli layout agnostiker
- Kodning gradvis
- Dyka in i mark-up
Det verkar som om alla pratar om lyhörd webbdesign idag och med goda skäl; eftersom antalet webbaktiverade enheter fortsätter att växa - var och en med olika funktioner och funktioner - är det inte längre klokt att bygga webbplatser med fast bredd.
Sanningen är, det var det aldrig. Men hittills ansågs det som bästa praxis att utforma upplevelser som gjorde ett antal antaganden, vare sig de rörde skärmupplösning, bandbredd eller inmatningsmetod. Om du någonsin har utformat en webbplats på 960 pixlar, bara för att se den på en väns lilla skärmnetbook (och ja, jag skriver från smärtsam erfarenhet här), kommer du att förstå varför detta inte var ett särskilt smart tillvägagångssätt. Nu, när smartphones och surfplattor kastas i mixen, är det uppenbart att våra traditionella metoder inte längre passar för ändamål.
Tack och lov innebär tillkomsten av CSS-mediefrågor och ett växande erkännande att webben är ett medium i sig, att vi börjar omfamna plattformens sanna natur och accepterar att dess universalitet är en styrka, inte en svaghet.
Under de kommande fem dagarna guidar jag dig genom en teknik som känner igen detta faktum: lyhörd webbdesign. Utvecklat av Ethan Marcotte, kombinerar detta flytande layouter, flexibla bilder och mediefrågor för att hjälpa oss att bygga webbplatser som graciöst anpassar sig till alla miljöer de stöter på.
Jag kommer att demonstrera detta tillvägagångssätt genom att visa dig hur du bygger ett enkelt mediegalleri. I mina exempel skapar jag en liten webbplats för att dokumentera en ny bilresa jag tog över USA, men anpassa gärna koden och designen efter dina egna behov.
Designa för det okända
Mycket av denna handledning kommer att centrera kring utvecklingsaspekten av responsiv design. Men innan vi gräver in i någon kod, låt oss fundera över hur vi kan utforma en webbplats som tänkbart kan ha oändliga layouter.
Nu har jag turen att jag kan designa gränssnitt och utveckla frontend-koden som gör dem verkliga. Det här är naturligtvis inte en unik färdighet - om du arbetar för dig själv är du förmodligen densamma. Men det är verkligen fördelaktigt att förstå hur innehållet kan anpassas och återflödas när man skapar flytande mönster.
Jag arbetar också som en del av ett större team där min roll är mer specialiserad. I en sådan miljö kan den visuella formgivaren fokusera enbart på att översätta trådramar till attraktiva, engagerande (sign-off, pixel-perfekt) komp. Och det är inte ovanligt att utvecklare placeras separat och översätter dessa layouter till magert och effektivt markering och CSS.
Sådana linjära och segregerade arbetsflöden bryts dock snabbt ner när vi börjar utvärdera hur mönster kommer att anpassa sig till olika miljöer. Så mycket som något nytt verktyg eller ny teknik bör vi också överväga mer samarbetsvilliga och smidiga arbetssätt. Många av de svåraste problemen som man stöter på vid utformning av responsiva webbplatser kan lösas helt enkelt genom konversation, experiment och iteration.
En pragmatisk syn på design
Det betyder inte att det inte finns utrymme för designers att tänka på hur en design kan fungera utanför en viss enhets gränser.
På Clearleft initierar vi visuell design ur skrivbordets perspektiv. Vi börjar med att definiera ett övergripande designspråk och visuell estetik, och baserar ofta inledande utforskningar kring ett kärninnehåll. Till exempel, om vi utformar en matwebbplats, börjar vi med en recept-sida; för en nyhetssida, en berättelsessida.
Detta är inte bara en viktig sida på webbplatsen, men det innehåller förmodligen tillräckligt med strukturerat innehåll för att vi ska kunna bygga upp en typografisk palett. Vi kommer också att tänka på hur layouten kan anpassas - även om det bara ligger bakom oss i detta skede.
Ett användbart sätt att stresstesta en design är att ta en sådan sida och anpassa den för en smalare (~ 320px bred) skärm. Du kommer troligen att upptäcka att vissa aspekter av designen måste omprövas för att de ska kunna arbeta i denna bredd. Här är några exempel:
- Typografi: Stora rubriker kan fungera bra på bredare layouter, men på mindre skärmar kan de ta mycket vertikalt utrymme och kräver därför ytterligare rullning. När linjelängderna ändras bör du också överväga linjehöjder och andra typografiska behandlingar.
- Länkar: Hur kommer din design att fungera på pekskärmsenheter? Även om vi inte har ett enkelt sätt att upptäcka dessa ännu (vilket innebär att vi bör ta hänsyn till i alla aspekter av vår design), kan design för en smalare skärm ge oss en möjlighet att tänka på målområden för länkar och andra interaktiva element . IOS-riktlinjerna rekommenderar att dessa är minst 44 pixlar / punkter kvadratiska, vilket är en bra siffra att sikta på.
- Navigering: Detta kommer förmodligen att vara den mest besvärliga komponenten i någon lyhörd design, särskilt om din webbplats har många sektioner och en djup hierarki. Brad Frost har skrivit en sammanfattning av några olika tillvägagångssätt för navigering som för närvarande övervägs.
- Överflödigt innehåll: Krävs inte något innehåll? Behöver annat innehåll bara visas i vissa scenarier? Jag förespråkar inte att dölja innehåll baserat på vilken enhet en användare råkar använda, men tekniker som villkorlig laddning (som vi kommer att titta på senare i veckan) kan hjälpa oss att visa upp mindre sidor som bara laddar kompletterande innehåll när det behövs.
Att designa två kontrasterande layouter förstärker idén att en design kommer att anpassas, samtidigt som potentiella gotchas stryks ut tidigt. Även om detta låter som en fördubbling av arbetet, kom ihåg att vi inte utformar varje sida för pixel-perfekt precision. Istället fokuserar vi på att bygga ett skalbart designspråk - ett som kommer att utvecklas när vi börjar implementera det i kod och ett som bygger på enskilda moduler och komponenter.
Bli layout agnostiker
Inte överraskande, för en bransch som historiskt har behandlat webben som tryck har layouter med fast bredd genomsyrat många av de leveranser vi producerar. När vi börjar utforma ett anpassningsbart medium övervägs nya tillvägagångssätt som gör det möjligt för oss att lösa problem och kommunicera idéer samtidigt som vi erkänner mediumets flytande natur. Här är några av mina favoriter:
- Sidbeskrivningsdiagram: Medan trådramar ofta kan innebära layout (och därmed anta en viss typ av enhet) tar sidbeskrivningsdiagrammen bort detta antagande och beskriver istället de enskilda komponenterna, ordnade i dokumentet med avseende på prioritet.
- Style brickor: När vi kommunicerar designidéer med kunderna kan vi hitta oss att presentera ”målningar av webbplatser”. Om vi inte är försiktiga kommer kunder med rätta att be att se koncept som visar hur en design kommer att se ut på andra enheter också. Detta kan tvinga oss in i en ohållbar situation att producera flera sidor för flera enheter. Samantha Warren har funderat på detta problem och kommit med stilplattor. Dessa sitter någonstans mellan ett stämningsbräda (men mindre vagt) och fullt ut realiserade kompiser (men mindre exakta) och hjälper oss att kommunicera typografi, knappstilar och masthead-behandlingar. De uppmuntrar också en mer mogen nivå av diskussion med våra kunder.
- Mobilifiera designspel: Den här övningen kan fungera riktigt bra under samarbetsdesignworkshops. I den här övningen skriver alla ner på Post-it noterar de element som kan visas på en viss sida. Dessa fastnar sedan på väggen i ordning efter betydelse, som om de verkade linjära på en mobiltelefon. Den resulterande diskussionen kan generera några överraskande slutsatser. Du kan till exempel inse att navigering inte är den viktigaste komponenten på sidan. Detta kan följa med till designen, där en hopplänk högst upp på sidan länkar till navigationen i sidfoten.
Det finns naturligtvis fortfarande utrymme för de verktyg vi redan använder, men när vi utformar en webbplats i breda ordalag måste vi komma ihåg att layout inte längre är känd.
Kodning gradvis
Tack och lov behöver vi inte oroa oss för den visuella designen i exemplet vi jobbar med eftersom det hårda arbetet har gjorts för oss! Istället kan vi koncentrera oss på att koda vår design till en helt responsiv webbplats.
En sak till innan vi börjar. Det är viktigt att komma ihåg en grundläggande princip för det medium vi arbetar med: universalitet. Det innebär att man inte bara bygger för dagens webbaktiverade enheter utan också säkerställer kompatibilitet med gårdagens och morgondagens. John Allsopp beskrev varför denna princip spelar roll i sitt inlägg The Next 6 Billion:
"De närmaste sex miljarder är barn på landsbygden i Indien, Afrika, Kina där tillgång till makt och nätverk kan vara intermittent. Det är någon i Sumatra vid ett decennium gammalt Wintel-box. Det är människor som talar hundratals olika språk, med dussintals olika skrivsystem. Det är människor som är de första i sin familj som kan läsa och skriva. Det är de 20 procent av människor världen över som inte kan läsa eller skriva. Ändå.’
Vi kan spåra vår förståelse för webben genom att titta på de olika moderna (av brist på ett bättre ord) som har tagit tag i vårt yrke: webbstandarder, tillgänglighet, diskret JavaScript ... alla är varianter på samma tema: progressiv förbättring. Detsamma gäller responsiv webbdesign. Att bygga en verkligt responsiv webbplats är att bygga en webbplats som inte bara är bakåtkompatibel utan också framtidsvänlig.
Dyka in i mark-up
Okej, tillräckligt med ingressen, det är dags att öppna en textredigerare.Vår designer har försett oss med en skrivbordsorienterad design och har varit snäll att ge exempel på hur detta också kan se ut i en smalare syn.
Det kan vara frestande att koda upp dem separat, men jag kommer att föreslå en annan metod. Genom att placera de separata komponenterna - eller mönster - som utgör designen på en enda sida kan vi skapa en mönsterportfölj. Detta gör att vi kan utveckla komponenter utanför ramarna för vilken sidlayout som helst och kommer att ge oss något att referera till senare för eventuella regressionstester. Låt oss se den ursprungliga markeringen på några olika enheter:
Se vår markerade mönsterportfölj
Jag ska bli förbannad - vi har redan en lyhörd webbplats! Vårt innehåll anpassar sig till varje enhets gränser, vare sig det är en snygg ny iPad eller en kasserad funktionstelefon. Det fungerar till och med i en webbläsare som endast Lynx.
Tack vare de underliggande principerna för universalitet är webben det lyhörd som standard. Det är bra, men det betyder också att allt vi gör med koden från och med nu kan äventyra denna inbyggda anpassningsförmåga.
I morgon: Vi trampar försiktigt och börjar använda den första aspekten av responsiv design: typografi och flytande rutnät.
