Husk de gode gamle dager? Du vet hvilke dager jeg snakker om; dagene ikke så lenge siden da vi pleide å designe nettsteder til faste bredder. Ser tilbake nå, de virker som en så enklere tid; en lykkeligere tid; en tid da jeg kunne recitere hver skrift som var tilgjengelig for bruk online uten en annen tanke. Sannheten er at Responsive Web Design forandret alt. Verden var flat og nå er det rundt, jeg var blind og nå ser jeg at nettet var piksler, og nå er det prosentandeler.
Med introduksjonen av RWD er det viktig at vi som designere utvikler arbeidsflyten vår for å bedre passe kravene til den nye webben. Mange av oss har uttalt våre frustrasjoner på hvordan Photoshops faste pixel-tilnærming er uegnet for å designe væskeoppsettene som trengs for en responsiv nettside, men ingen nyttige alternativer har blitt tilbudt. Webdesign verden er desperat for en skreddersydd programvare som er bygget fra grunnen opp med RWD i tankene. Produkter som Adobe Reflow er en god start, da det viser at Adobe i det minste jobber med en løsning, men etter å ha tilbrakt noen timer med det i helgen, kan jeg se at det fortsatt har en lang vei å gå før det blir en nyttig tillegg til arbeidsflyten min. Med oss i limbo mellom en prehistorisk programvare og løftet om hva som kommer i morgen, må vi skape alternative arbeidsflyter for å imøtekomme manglene i vår nåværende designprogramvare ved å introdusere andre verktøy og prosedyrer som vil bidra til å bygge bro over gapet mellom fast piksel og væskefølsomhet.
Følgende er på ingen måte en liste over hvordan RWD-prosjekter skal nærmer seg, men heller hvordan jeg har tilpasset arbeidsflyten min for å passe til det nye landskapet.
Jeg har stått på grensen mellom Photoshop / Fireworks / Illustrator dividen som hver har kjempet for overlegenhet og har sett uskyldige mennesker bli fanget i et kryssfelt av piksler. Designere har en tendens til å ha sin favoritt og vil helst dø en langsom smertefull død enn å innrømme at en annen programvare har en funksjon som de kanskje egentlig vil ha. Min oppfatning er at du bør designe i hvilken som helst programvare som gjør at du kan jobbe mest effektivt og utforske dine ideer raskt, enten det er Photoshop, Powerpoint eller Paint.
Det er nesten irrelevant som du velger som det bør bare være et utgangspunkt for å eksperimentere raskt med forskjellige layouter. Personlig foretrekker jeg fyrverkeri som det merker mer av boksene av det jeg vil ha i en programvare. Jeg prøver ikke å bli tungt fast i detaljer på dette stadiet, og prøver egentlig bare å lage noen foreløpige beslutninger på layout og struktur, som om det er noen posh wireframes.
Alt som trenger å bli sagt om bruk av Lorem Ipsum i stedet for mock ups har blitt sagt, så vær så stolt på meg på denne og, hvor det er mulig, bruk ekte innhold til å designe fra. Hvor det ikke er mulig, bruk innhold i siste år, skriv ditt eget innhold eller bruk teksten til 'Stearinlys i vinden', men bruk ikke Lorem ipsum. Hvis du ikke bruker ekte innhold, vil det være vanskelig å se på hvilke bruddpunkter enkelte elementer trenger justering.
Dette er bare bredden som jeg liker å begynne på, da den er nær en liten desktop-opplevelse, som da er lett å skalere opp for større skjermer og ned for tablett- / mobilopplevelser. Noen foretrekker å starte bredere mens andre foretrekker å designe mobil først, det kommer bare ned til det som fungerer for deg.
RWD handler om væskebeholdere som vokser og krympes for å fylle nettleserens tilgjengelige område, slik at utforming i prosenter i stedet for piksler vil sikre at designene dine flyter i forhold til nettleseren og krever mindre bruddpunkter enn tilsvarende pikselbaserte design.
Jeg pleier å ha In-Design åpen i bakgrunnen, så jeg kan raskt og enkelt finne ut en prosentstørrelse på et pikselbasert element. InDesign er flott å håndtere denne typen beregninger, og du kan enkelt finne ut hvilken størrelse et 428px x 333px element vil være på 46% av sin opprinnelige bredde, mens du holder det proporsjoner eller kanskje finne ut 27% av en 889px nettleserbredde i sekunder. Resultatene er fortsatt gitt til deg i piksler, slik at du kan gå tilbake til programvaren du designer og lage den beholderen i piksler, og vite at den vil være i forhold til prosentsatsen for arbeidsområdet du har definert.
Hvis du tror at jeg slår på med å bruke ekte innhold i designene dine, bør du høre meg fortsette utforming typografi stiler i Photoshop (eller tilsvarende). Typografi vil se mye annerledes ut i nettleseren enn det ser ut i de vanlige Adobe-pakkene, noe som vil bety mer arbeid for deg å tilpasse designet når det er bygget.
Spar deg selv hodepine og bruk programmer som typecast.com å eksperimentere og lage fontstiler med. Når du er fornøyd med utformingen og stilen på typografien din, kan du eksportere hele arbeidsområdet som en gjennomsiktig PNG for å plassere innenfor designmock-ups. Du trenger ikke å ha noen av dine valgte skrifttyper installert på systemet ditt, da det bare vil være et bilde, men du vil heller ikke kunne redigere det uten å gå tilbake til typecast.
Nå skal du ganske enkelt ha designet ditt på 1000px bredt (eller hvilken bredde du valgte i starten) fullført med bredden på beholderne som holder innholdet ditt oversatt til prosentandeler. Jeg vil nå begynne å lage et skreddersydd rutenett som etterligner beholderbredder som jeg bruker i mitt design. Så hvis jeg har en sidebar som er 30% bred og et innholdsområde som er 55% av nettleseren min med 5% polstring på begge sider, kan nettet min se ut som 5%, 30%, 5%, 55%, 5%.
Du kan bruke programmer som Gridset å bygge ditt tilpassede rutenett, men igjen foretrekker jeg å bruke InDesign, fordi du kan gruppere elementer og få dem til å endre størrelse i forhold til hverandre.
Jeg tar nå rutenettet mitt som jeg har opprettet ved hjelp av InDesign, og lim det inn i en 1600px bredde (eller den maksimale bredden du vil at nettstedet skal være). Jeg begynner deretter å endre størrelsen på nettverket mitt bredere og smalere med trinn på 100px helt ned til 300px bred. Ved hvert trinn kontrollerer jeg bredden på hver innholdsbeholder og sørger for at den fortsatt er stor nok til å huse innholdet. Når jeg kommer til en bredde som jeg tror gjør en beholder for liten, endrer jeg bare rutenettet slik at den passer. Så hvis jeg ved 800px bredden av sidebjelken som jeg hadde opprettet på 30% av nettleservidden, ble for smal, kunne jeg legge til en ekstra 10% på den, noe som gjør at den nå er 40% av nettleserbredden min og er bred nok til å huse det tiltenkte innholdet .
Den viktigste tingen å huske er at hvis du lager en beholder bredere, må du gjøre en annen beholder smalere med samme mengde for å opprettholde 100% hele bredden. Dette er den beste måten jeg har funnet på å definere bruddpunkter (det punktet på hvilket layoutet vil endres), da du bare legger til et annet brytepunkt når innholdet bryter, og ikke til bredden på en ny enhet. Denne prosedyren kan være tidkrevende da du vil ende opp med 14 forskjellige forhåndsvisninger av rutenettet ditt, da den vokser fra 300px til 1600px bred, men det er den beste måten jeg har funnet på å sjekke hvordan designet vil se på forskjellige skjermbredder før det er i utvikling.
Et annet alternativ er å bruke et verktøy som Adobe Reflow som også gir deg mulighet til å legge til innhold i beholdere og deretter dra arbeidsområdet og se elementets skala. Du kan også bestemme dine bruddpunkter ved å endre størrelsen på arbeidsområdet til innholdet går i stykker, og bare legge til en medieforespørsel. Reflow er fortsatt i offentlig Beta og kan lastes ned fra her .
Etter å ha nedskalert designene dine ned i trinn på hver 100px, ville du identifisere noen få bredder hvor innholdet bryter og korrigerer det ved å legge til et bruddpunkt. Du kan nå gå tilbake til programvaren som du opprettet de originale designene i og endre utformingen av designet ditt på bredder som du identifiserte som bruddpunkter. Dette betyr at du ender med å designe bare 2, 3 eller 4 forskjellige layouter (avhengig av kompleksiteten til rutenett og hvor mange brytepunkter du trenger) som vil dekke hele veien fra 300px til 1600px.
Hvis du har fulgt denne prosessen, bør du nå ha et sett med layouter som samsvarer med dine bruddpunkter, et dokument som viser hvordan nettverket ditt består av prosentandel av nettleserbredden og hvordan den kollapser for mindre skjermer, så vel som alle dine typografi stiler allerede opprettet og testet i nettleseren. Dette bør være et veldig sterkt poeng for en utvikler, og deretter begynne å bygge designene dine nøyaktig og uten å måtte håndtere innholdsbrudd ved bestemte bredder senere.
Denne prosessen kan virke svært langvarig, men uten et bestemt verktøy som er bygget helt for RWD, er det den beste måten jeg har funnet for å enkelt teste mitt responsive layout ved hjelp av ikke-lydhør programvare og klart formidle mine ideer til en utvikler. Dette er ikke den eneste måten å nærme seg et RWD-prosjekt på, men det er det beste jeg har funnet.
Hva har responsivt design endret om arbeidsflyten din? Hvilke tips vil du dele? Gi oss beskjed i kommentarene.