Kom ihåg de goda gamla dagarna? Du vet vilka dagar jag pratar om; dagarna inte så länge sen när vi brukade utforma webbplatser till fasta bredder. Ser tillbaka nu verkar de som en så enklare tid; en lyckligare tid; en tid när jag kunde recitera varje typsnitt som var tillgänglig för att använda online utan en andra tanke. Sanningen är att Responsive Web Design ändrade allt. Världen var platt och nu är det runt, jag var blind och nu ser jag att webben var pixlar och nu är det procentandelar.
Med införandet av RWD är det viktigt att vi som designare utvecklar vårt arbetsflöde för att bättre passa kraven på den nya webben. Många av oss har uttryckt våra frustrationer på hur Photoshops fixade pixel-tillvägagångssätt är olämpligt för att utforma de vätskeformat som behövs för en mottaglig webbplats men inga användbara alternativ har erbjudits. Webdesignvärlden är desperat för en skräddarsydd programvara som är byggd från grunden med RWD i åtanke. Produkter som Adobe Reflow är en bra start, eftersom det visar att Adobe åtminstone arbetar med en lösning, men efter att ha spenderat några timmar med det i helgen kan jag se att det fortfarande har en lång väg att gå innan det blir en användbart tillägg till mitt arbetsflöde. Med oss i limbo mellan en prehistorisk programvara och löftet om vad som ska komma imorgon måste vi skapa alternativa arbetsflöden för att tillgodose bristerna i vår nuvarande designprogramvara genom att införa andra verktyg och förfaranden som hjälper till att överbrygga gapet mellan fast pixel och fluidrespons.
Följande är inte en lista över hur RWD-projekt ska kontaktas, utan snarare hur jag har anpassat mitt arbetsflöde för att passa det nya landskapet.
Jag har stått på gränsen mellan Photoshop / Fireworks / Illustrator-klyftan eftersom de varje gång har kämpat för överlägsenhet och har bevittnat oskyldiga människor blir fångade i ett korsfire av pixlar. Designers tenderar att ha sin favorit och skulle hellre dö en långsam smärtsam död än att erkänna att en annan programvara har en funktion som de faktiskt vill ha. Min åsikt är att du ska utforma i vilken programvara som helst så att du kan arbeta så effektivt som möjligt och utforska dina idéer snabbt, vare sig det är Photoshop, Powerpoint eller Paint.
Det är nästan irrelevant som du väljer eftersom det bara borde vara en utgångspunkt för att snabbt experimentera med olika layouter. Personligen föredrar jag fyrverkerier eftersom det fäster mer av rutorna med vad jag vill ha i en programvara. Jag försöker att inte bli tungt fast i detaljer i detta skede och försöker verkligen bara göra några preliminära beslut om layout och struktur, som om det finns några snygga trådramar.
Allt som behöver sägas om användningen av Lorem Ipsum i site mock ups har sagts så vänligen lita bara på mig på den här och använd där möjligt verkligt innehåll att designa från. Var inte möjligt, använd senaste årens innehåll, skriv ditt eget innehåll eller använd texterna till "Ljus i vinden" men använd inte Lorem ipsum. Om du inte använder riktigt innehåll blir det svårt att se vid vilka brytpunkter vissa element behöver justeras.
Det här är bara den bredd som jag gillar att börja med, eftersom den ligger nära en liten skrivbordserfarenhet, som då är lätt att skala upp för större skärmar och ner för tablett / mobilupplevelser. Vissa föredrar att börja bredare medan andra föredrar att designa mobilt först, det kommer bara ner till vad som fungerar för dig.
RWD handlar om vätskebehållare som växer och krympar för att fylla i webbläsarens tillgängliga område, så att designa i procent snarare än pixlar kommer att se till att dina mönster strömmar i proportion till webbläsaren och kräver mindre brytpunkter än motsvarande pixelbaserade design.
Jag brukar ha In-Design öppen i bakgrunden så jag kan snabbt och enkelt ta reda på en procentuell storlek på ett pixelbaserat element. InDesign är utmärkt för hantering av denna typ av beräkningar och du kan enkelt ta reda på vilken storlek ett 428px x 333px-element kommer att ligga på 46% av sin ursprungliga bredd, samtidigt som det är proportioner eller kanske 27% av en 889px webbläsarbredd i sekunder. Resultaten ges fortfarande i pixlar, så att du kan gå tillbaka till den programvara som du designar och skapa den behållaren i pixlar, med vetskap om att den kommer att vara i förhållande till procentdelen av arbetsytan du har definierat.
Om du tror att jag pratar om att använda riktigt innehåll inom dina mönster, hör du att jag fortsätter utforma typografi stilar i Photoshop (eller likvärdig). Typografi ser väldigt annorlunda ut i webbläsaren än den ser ut i de vanliga Adobe-paketen, vilket innebär mer arbete för att du anpassar designen när den är byggd.
Spara själv huvudvärk och använd appar som typecast.com att experimentera och skapa dina typsnittstyp med. När du väl är nöjd med layouten och stilen på din typografi kan du exportera hela arbetsytan som en genomskinlig PNG för att placera i dina designmock-ups. Du behöver inte ha några av dina valda teckensnitt installerade på ditt system eftersom det bara blir en bild men du kommer inte heller att kunna redigera det utan att gå tillbaka till typecast.
Vid det här laget borde du nästan ha din design vid 1000px bred (eller vilken bredd du valde i början), fylld med bredden på behållarna som håller ditt olika innehåll översatt till procentandelar. Jag skulle nu börja skapa ett skräddarsydd rutnät som efterliknar behållarens bredder som jag använder inom min design. Så om jag har en sidovägg som är 30% bred och ett innehållsområde som är 55% av min webbläsare med 5% vaddering på båda sidor kan mitt galler se ut som 5%, 30%, 5%, 55%, 5%.
Du kan använda appar som Gridset att bygga ditt skräddarsydda rutnät men igen föredrar jag att använda InDesign eftersom du kan gruppera element och få dem att ändra storlek i proportion till varandra.
Jag tar nu mitt nät som jag har skapat med InDesign och klistra in det i en 1600px bredd (eller den maximala bredden som du vill att din webbplats ska vara) dokument. Jag börjar sedan ändra storlek på mitt galler bredare och smalare med inkrement på 100px hela vägen ner till 300px bred. Vid varje inkrement kontrollerar jag bredden på varje innehållsbehållare och ser till att den fortfarande är tillräckligt stor för att hysa innehållet. När jag kommer till en bredd som jag tror gör en behållare för liten, ändrar jag bara gallret för att passa. Så om vid 800px bredden på sidorna som jag skapat på 30% av webbläsarens bredd blir för smal kan jag lägga till ytterligare 10% till den, vilket gör det nu 40% av min webbläsarbredd och är tillräckligt bred för att hysa det avsedda innehållet .
Det viktigaste att komma ihåg är att om du gör en behållare bredare måste du göra en annan behållare smalare med samma mängd för att behålla 100% hela bredden. Detta är det bästa sättet att jag har funnit att definiera brytpunkter (den punkt där din layout ändras) eftersom du bara lägger till en annan brytpunkt när innehållet bryter och inte bredden på en ny enhet. Denna procedur kan vara tidskrävande eftersom du kommer att sluta med 14 olika förhandsgranskningar av ditt nät eftersom den växer från 300px till 1600px bred, men det är det bästa sättet att jag har funnit att kontrollera hur din design kommer att se på olika skärmbredder innan den är i utveckling.
Ett annat alternativ är att använda ett verktyg som Adobe Reflow som också tillåter dig att lägga till innehåll i behållare och dra sedan din arbetsyta och se elementskalan. Du kan också bestämma dina brytpunkter genom att ändra storlek på arbetsytan tills innehållet bryter och helt enkelt lägger till en mediefråga. Reflow är fortfarande offentligt Beta och kan laddas ner från här .
Efter att ha minskat dina mönster ner i steg om 100px, skulle du identifiera några bredder där innehållet rasterar och åtgärdar det genom att lägga till en brytpunkt. Du kan nu gå tillbaka till programvaran som du skapade de ursprungliga mönster i och ändra layouten på din design vid de bredder du identifierade som brytpunkter. Det innebär att du slutar utforma endast 2, 3 eller 4 olika layouter (beroende på komplexiteten i ditt rutnät och hur många brytpunkter du behöver) som kommer att täcka hela vägen från 300px till 1600px.
Om du har följt den här processen borde du nu ha en uppsättning layouter som matchar dina brytpunkter, ett dokument som visar hur ditt nät består av procentandelar av webbläsarens bredd och hur det kollapsar för mindre skärmar såväl som alla dina typografi stilar som redan skapats och testats i webbläsaren. Detta borde vara en mycket stark punkt för en utvecklare och sedan börja bygga dina mönster exakt och utan att behöva hantera innehållsbrott vid vissa bredder senare.
Denna process kan verka väldigt långvarig men utan ett specifikt verktyg som är helt byggt för RWD, är det det bästa sättet att jag lätt har testat min responsiva layout med hjälp av icke-responsiv programvara och tydligt kommunicerar mina idéer till en utvecklare. Det här är inte det enda sättet att närma sig ett RWD-projekt, men det är det bästa jag har hittat.
Vad har responsiv design ändrats om ditt arbetsflöde? Vilka tips skulle du dela med dig? Låt oss veta i kommentarerna.