De 5 beste verktøyene for responsiv design
La meg begynne med å si dette, jeg vil ikke inkludere noen punkt-og-klikk-designverktøy i denne listen (tenk Adobe Edge Reflow). Årsaken er enkel nok, jeg tror at de er dårlige for alle; designere, klienter, kodere ... alle lider.
Det er ikke et spørsmål om kvaliteten på kodeutgangen av disse programmene. Det er ikke fordi det gjør designen "for lett". Det er fordi uansett hvor bra disse programmene er, vil de alltid begrense folkene som bruker dem.
De vil bli begrenset, ikke engang av hva programmet kan oppnå, men av det de tror det kan oppnå. Hvis de tenker på det, vil den gjennomsnittlige brukeren sannsynligvis sammenligne den med verktøy som PowerPoint og / eller et antall printdesignprogrammer, som igjen faller inn i gamle tanker. Der ligger problemet. Visuelle verktøy for webpublisering vil alltid prøve å bruke gamle prosesser til ny teknologi.
En virkelig nettorientert arbeidsflyt er en som omfatter de underliggende konseptene og teknologiene som weben bygger på. Visst, du kan bruke et hvilket som helst antall visuelle verktøy for å lage nettsteder som er teknisk responsive, men du vil savne poenget.
Det handler ikke om en tilpasningsbar layout. Det handler om å gjøre informasjon tilgjengelig for så mange som mulig. Det er noen ting som et program som Edge Reflow bare ikke kan gjøre. Kort sagt, du må skrive kode.
Derfor er de beste verktøyene for å hjelpe deg med responsivt design de verktøyene som hjelper deg å forstå og bruke webteknologier, planlegge nettstedet ditt grundig, skrive bedre kode mer effektivt og teste / presentere dine responsive design til kunder i kontekst.
La oss starte med det åpenbare:
1) Din nettleser
Nei, jeg tuller ikke. Dette er ganske bokstavelig talt det viktigste verktøyet du har, fordi det viser deg nøyaktig hva nettstedet ditt ser ut under dine spesifikke forhold.
Det har vært mye debatt om hvorvidt utformingen i nettleseren er bedre enn å designe i en bildeditor som Photoshop eller GIMP. Tillat meg å løse dette for deg ...
Er brukerne av nettstedet ditt til å surfe i Photoshop? Bildeditorer kan lage flotte bilder, ikke etterligne faktiske erfaringer. Bruk bildeditorer til å redigere bilder. Bruk nettleseren til å designe nettsteder.
Det er på tide å spekulere våre kunder av de hyper-detaljerte mockups som de har blitt vant til. Når nettverket endres, og prosessene våre blir mer flytende og iterative, må vi fortsette.
Installer minst én nettleser med hver større gjengivelsesmotor, og få noen utviklerutvidelser. Bli vant til å se på kildekoden din, slik nettleseren din ser den, fordi du kommer til å være her en stund.
2) Google Disks tegneapp
Teknisk sett kan omtrent hvilken som helst vektorbasert bilderedigerer gjøre jobben når du skriver inn nettsteder og apper. Jeg har en tendens til å koble den stasjonære versjonen av nettstedet mitt først, lage en kopi av filen, endre størrelsen på lerretet og gå derfra. Å bruke vektorer gjør det enkelt å raskt endre størrelsen og omorganisere elementene mens du er i planleggingsstadiet.
Jeg foretrekker tegneapplikasjonen på Google Disk av et par grunner:
Deling og samarbeidsfunksjoner: Google deler informasjon bedre enn bare om alle andre. Med in-context-kommentar, samtidig redigering og Hangout-integrasjon, er jeg forelsket.
Automatiske guider: I hvert tegne dokument blir guider automatisk opprettet basert på dimensjonene til hver gjenstand du legger inn i dokumentet. Dette gjør det enkelt å skildre konsekvent store elementer i dokumentet, noe som er flott for gridobsatte designere som meg.
Når jeg deler disse wireframes med klienter, er den profesjonelle konsistensen et stort pluss. Og likevel, jeg er ikke begrenset til disse veiledningene. Jeg ser det som et godt alternativ til å mockup apps som prøver å begrense deg til et rutenett.
Åh, og det er gratis. Trenger jeg å si mer?
3) stil prototyper
Basert på Style Tiles, Stil Prototyper er en levererbar nettleser utformet for å hjelpe deg med å gi kundene en ide om hvordan nettstedets typografi, farge og grensesnitt vil se ut. Siden det er ment å bli sett i nettleseren, vil det være færre inkonsekvenser når nettsiden er bygget.
Videre vil jeg si at Style Prototypes kan hjelpe våre kunder til å mentalt skille konseptene UX og estetikk. Og egentlig, alt som hjelper våre kunder til å bedre forstå webdesignprosessen, kan bare være en god ting.
4) Respondator
Responsinator er et enkelt verktøy som viser nettstedet ditt i forskjellige størrelser. Det etterligner, på en veldig grunnleggende måte, flere forskjellige størrelser og sammenhenger. Dette verktøyet er ikke til din fordel. Vil du se hvordan nettstedet ditt ser ut i mindre størrelser? Endre størrelse på nettleservinduet. Bedre ennå, få noen faktiske mobile enheter og gjør noen ekte testing.
Denne web-appen er best brukt til å vise kundene din en rask tilnærming til hvordan deres nettsted vil se ut i sammenhenger annet enn en stasjonær eller bærbar skjerm.
Igjen er det mange verktøy som kan gjøre samme jobb som Responsinator, og like effektivt antar jeg. Jeg valgte denne fordi den presenterer flere enhetssilhouetter etter hverandre, for enkel gjennomgang.
5) Adobe Edge Inspect
Nå er denne for deg. Hvis du har en mobil testing lab (og jo raskere du kan lage en, jo bedre) Kanten inspiserer vil synkronisere alle enhetene dine for å vise den samme siden samtidig. Oppdater siden på en enhet, og du oppdaterer dem alle.
I motsetning til de andre på denne listen, er dette ikke gratis. Men hvis du har råd til nok mobile enheter til å trenge en løsning som dette, er det nok verdt pengene.
Konklusjon
Som alltid er din viktigste ressurs hjernen din. Disse verktøyene, og andre som dem, kan bare hjelpe deg på veien. Jeg valgte disse fordi de utfører svært spesifikke funksjoner som hjelper meg med å designe responsive nettsteder. De begrenser ikke hva jeg kan gjøre.
De beste verktøyene er egentlig de som holder seg ute av veien.
Bruker du disse verktøyene? Hva er dine topp 5 verktøy for responsiv design? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, verktøybilde via Shutterstock.