Husk de gode gamle dage? Du ved, hvilke dage jeg taler om; dagene ikke så længe siden, da vi plejede at designe hjemmesider til faste bredder. Ser tilbage nu ser de ud som en sådan enklere tid; en lykkeligere tid; en tid, hvor jeg kunne recitere hver skrifttype, der var tilgængelig til at bruge online uden en anden tanke. Sandheden er, at Responsive Web Design ændrede alt. Verden var flad, og nu er det rundt, jeg var blind, og nu ser jeg, at nettet var pixels og nu er det procentdele.
Med introduktionen af RWD er det afgørende, at vi som designere udvikler vores arbejdsgang for bedre at passe til det nye webs krav. Mange af os har udtrykt vores frustrationer på, hvordan Photoshops faste pixel-tilgang er uegnet til at designe væskelayouterne, der er nødvendige for en lydhør hjemmeside, men der er ikke blevet tilbudt nyttige alternativer. Webdesign verden er desperat for en skræddersyet software, der er bygget fra bunden med RWD i tankerne. Produkter som Adobe Reflow er en god start, da det viser, at Adobe i det mindste arbejder på en løsning, men efter at have tilbragt et par timer med det i weekenden, kan jeg se, at det stadig har en lang vej at gå, før det bliver en nyttig tilslutning til min workflow. Da vi er i limbo mellem en præhistorisk software og løftet om, hvad der kommer i morgen, er vi nødt til at skabe alternative arbejdsgange for at imødekomme manglerne i vores nuværende "design software" ved at indføre andre værktøjer og procedurer, som vil hjælpe med at bygge bro over kløften mellem fast pixel og væskefølsomhed.
Følgende er på ingen måde en liste over, hvordan RWD-projekter skal nærmer sig, men snarere hvordan jeg har tilpasset min arbejdsgang til det nye landskab.
Jeg har stået på grænsen mellem Photoshop / Fireworks / Illustrator-opdelingen, da de hverken har kæmpet for overherredømme og har været vidne til, at uskyldige mennesker bliver fanget i en krydsning af pixels. Designere har en tendens til at have deres favorit og vil hellere dø en langsom smertefuld død end indrømme, at en anden software har en funktion, som de måske rent faktisk vil have. Min opfattelse er, at du bør designe i enhver software, der giver dig mulighed for at arbejde mest effektivt og udforske dine ideer hurtigt, det være sig Photoshop, Powerpoint eller Paint.
Det er næsten irrelevant, som du vælger, da det bare bør være et udgangspunkt for hurtigt at eksperimentere med forskellige layouter. Personligt foretrækker jeg fyrværkeri, da det flækker flere af æskerne i, hvad jeg vil have i en software. Jeg forsøger ikke at blive stærkt fast i detaljer på dette stadium og virkelig forsøger bare at lave nogle foreløbige beslutninger om layout og struktur meget som nogle posh wireframes.
Alt hvad der skal siges om brugen af Lorem Ipsum i site mock ups er blevet sagt, så vær venlig at stole på mig på denne og, hvor det er muligt, brug rigtigt indhold til at designe fra. Hvor det ikke er muligt, brug sidste års indhold, skriv dit eget indhold eller brug teksterne til 'Lys i vinden', men brug ikke Lorem ipsum. Hvis du ikke bruger ægte indhold, vil det være svært at se på hvilke brudpunkter, at visse elementer skal justeres.
Dette er kun den bredde, jeg gerne vil starte med, da det er tæt på en lille desktopoplevelse, som så nemt kan skaleres op for større skærme og ned for tablet / mobile oplevelser. Nogle mennesker foretrækker at starte bredere, mens andre foretrækker at designe mobil-først, det kommer bare ned til det, der virker for dig.
RWD handler om væskebeholdere, der vokser og krymper for at udfylde browserns tilgængelige område, så designe i procent snarere end pixel vil sikre, at dine designs flyder i forhold til browseren og kræver mindre brudpunkter end det tilsvarende pixelbaserede design.
Jeg har tendens til at have In-Design åben i baggrunden, så jeg nemt og hurtigt kan finde ud af en procentstørrelse af et pixelbaseret element. InDesign er fantastisk til at håndtere disse slags beregninger, og du kan nemt finde ud af, hvilken størrelse et 428px x 333px element vil være på 46% af dets oprindelige bredde, samtidig med at det er proportioner eller måske finde ud af 27% af en 889px browserbredde i sekunder. Resultaterne er stadig givet til dig i pixels, så du kan derefter gå tilbage til den software, du designer og oprette den pågældende beholder i pixels, idet du ved, at den vil være i forhold til den procentdel af det arbejdsområde, du har defineret.
Hvis du tror, jeg slår på med at bruge ægte indhold i dine designs, skal du høre mig fortsætte designe typografi stilarter i Photoshop (eller tilsvarende). Typografi vil se meget anderledes ud i browseren end det ser ud i de sædvanlige Adobe-pakker, hvilket vil betyde mere arbejde for dig at tilpasse designet, når det er bygget.
Spar dig selv hovedpinen og brug apps som typecast.com at eksperimentere og oprette dine skrifttypestile med. Når du er tilfreds med layoutet og stilen på din typografi, kan du eksportere hele dit arbejdsområde som en gennemsigtig PNG til at placere i dine designmock-ups. Du behøver ikke at have nogen af dine valgte skrifttyper installeret på dit system, da det bare vil være et billede, men du vil heller ikke kunne redigere det uden at gå tilbage til typecast.
I dag skal du stort set have dit design på 1000px bred (eller hvilken bredde du valgte i starten), der er færdig med bredderne af beholderne, der holder dit forskellige indhold oversat til procentdele. Jeg vil nu begynde at oprette et skræddersyet gitter, der efterligner beholderbredderne, som jeg bruger inden for mit design. Så hvis jeg har et sidebar, der er 30% bredt og et indholdsområde, der er 55% af min browser med 5% polstring på begge sider, kan mit net se ud som 5%, 30%, 5%, 55%, 5%.
Du kan bruge apps som Gridset at bygge dit skræddersyede net, men igen foretrækker jeg at bruge InDesign, da du kan gruppere elementer og få dem til at ændre størrelse i forhold til hinanden.
Jeg tager nu mit net, som jeg har oprettet ved hjælp af InDesign og indsætter det i en 1600px bred (eller den maksimale bredde, du vil have dit websted til at være) dokument. Så begynder jeg at ændre størrelsen på mit net bredere og smalere med trin på 100px helt ned til 300px bredt. Ved hvert trin kontrollerer jeg bredden af hver indholdsbeholder og sørger for, at den stadig er stor nok til at huse dens indhold. Når jeg kommer til en bredde, som jeg tror, gør en beholder for lille, så ændrer jeg netværket til at passe. Så hvis jeg ved 800 px brede sidebjælken, som jeg havde lavet på 30% af browserværden, bliver for smal, kunne jeg tilføje en ekstra 10% til den, hvilket gør det nu 40% af min browserbredde og er bred nok til at huse det ønskede indhold .
Den vigtigste ting at huske er, at hvis du laver en beholder bredere, skal du gøre en anden beholder smalere med samme mængde for at opretholde 100% hele bredden. Dette er den bedste måde, jeg har fundet på at definere brudpunkter (det punkt, hvor dit layout ændres), da du kun tilføjer et andet brudpunkt, når indholdet går i stykker og ikke på bredden af en ny enhed. Denne procedure kan være tidskrævende, da du vil ende med 14 forskellige forhåndsvisninger af dit net, da det vokser fra 300px til 1600px bredt, men det er den bedste måde, jeg har fundet ud af at kontrollere, hvordan dit design vil se på forskellige skærmbredder, før det er i udvikling.
En anden mulighed er at bruge et værktøj som Adobe Reflow det giver dig også mulighed for at tilføje indhold til containere og derefter trække dit arbejdsområde og se elementets skala. Du kan også bestemme dine pausepunkter ved at ændre størrelse på dit arbejdsområde, indtil indholdet går i stykker og blot tilføje et medieforespørgsel. Reflow er stadig offentligt beta og kan downloades fra her .
Når du har nedskaleret dine designs ned i trin på hver 100 px, ville du identificere nogle få bredder, hvor indholdet bryder og korrigerer det ved at tilføje et breakpoint. Du kan nu gå tilbage til softwaren, som du lavede de originale designs i, og ændre layoutet på dit design i bredderne, som du identificerede som break points. Det betyder, at du ender med at designe kun 2, 3 eller 4 forskellige layouter (afhængigt af kompleksiteten af dit net og hvor mange breakpoints du har brug for), der dækker hele vejen fra 300px til 1600px.
Hvis du har fulgt denne proces, skal du nu have et sæt layouter, der matcher dine brudpunkter, et dokument, der viser, hvordan dit net består af procentdele af browserbredden, og hvordan det kollapser for mindre skærme såvel som alle dine typografi stilarter, der allerede er oprettet og testet i browseren. Dette bør være et meget stærkt punkt for en udvikler og derefter begynde at bygge dine designs præcist og uden at skulle beskæftige sig med indholdsbrud ved bestemte bredder senere.
Denne proces kan virke meget langvarig, men uden et specifikt værktøj, der er bygget helt til RWD, er det den bedste måde, jeg har fundet ud af at teste mit reaktive layout let ved hjælp af ikke-lydhør software og klart kommunikere mine ideer til en udvikler. Dette er på ingen måde den eneste måde at nærme sig et RWD-projekt på, men det er det bedste jeg har fundet.
Hvad har responsivt design ændret om din workflow? Hvilke tip vil du dele? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, flow billede via Shutterstock.