Muista hyvät vanhat päivät? Tiedät, mistä päivistä puhun; päivää, niin kauan sitten, kun suunnittelimme verkkosivuja kiinteisiin leveyksiin. Katse takaisin nyt he tuntuvat tällaiselta yksinkertaisemmalta ajankohdalta; onnellisempi aika; aikaa, jolloin voisin sanoa jokaisen fontin, joka oli käytettävissä verkossa ilman toisen ajattelun. Totuus on, että Responsive Web Design on muuttanut kaiken. Maailma oli tasainen ja nyt se on pyöreä, olin sokea ja nyt näen, verkko oli pikseleitä ja nyt se on prosenttiosuuksia.
RWD: n käyttöönotto on elintärkeää, että suunnittelijamme kehittävät työnkulkuamme vastaamaan paremmin uuden verkon vaatimuksia. Monet meistä ovat ilmaisseet turhautuneisuuksemme siitä, miten Photoshopin kiinteä pikseli-lähestymistapa ei sovi suunnitellakseen reagoivan verkkosivuston tarvitsemat nestemäiset asettelut, mutta mitään hyödyllisiä vaihtoehtoja ei ole tarjottu. Web design maailma on epätoivoinen räätälöity ohjelmisto, joka on rakennettu pohjalta ylös RWD mielessä. Tuotteet, kuten Adobe Reflow ovat hieno alku, koska se osoittaa, että Adobe työskentelee ainakin ratkaisun parissa, mutta viikonlopun jälkeen viettää muutaman tunnin ja näen, että se on vielä pitkä matka ennen kuin se muuttuu hyödyllinen lisä työnkulkuun. Meidän ollessa limittäin esihistoriallisen ohjelmiston ja huomisen tulevan lupauksen välillä, meidän on luotava vaihtoehtoisia työnkulkuja nykyisen "design-ohjelmiston" puutteiden korjaamiseksi ottamalla käyttöön muita välineitä ja menettelytapoja, jotka auttavat luomaan aukon kiinteän pikselin ja nesteen vasteajan välillä.
Seuraavassa ei ole lainkaan luetteloa siitä, miten RWD-projekteja tulisi lähestyä, vaan miten olen sopeuttanut työnkulkuni sopivaksi uudelle maisemalle.
Olen pysytellyt rajalla Photoshop / Fireworks / Illustrator -jakauman välillä, koska kukin on taistellut ylivallan puolesta ja on nähnyt viattomia ihmisiä saamasta pikselien ristipistettä. Suunnittelijoilla on taipumus olla suosikki ja mieluummin kuolevat hitaasti tuskallista kuolemaa kuin myöntää, että toisella ohjelmistolla on ominaisuus, jonka he todella haluavat. Minun näkemykseni on, että sinun pitäisi suunnitella missä tahansa ohjelmistossa, jonka avulla voit työskennellä tehokkaimmin ja tutkia ideoita nopeasti, olipa kyseessä Photoshop, Powerpoint tai Paint.
Se on melkein merkityksetöntä, jonka valitset, koska sen pitäisi olla vain lähtökohtana nopeasti kokeilemalla erilaisia asetteluja. Henkilökohtaisesti mieluummin ilotulitus, kun se houkuttelee enemmän laatikoita mitä haluan ohjelmistossa. Yritän olla vaikea kiinnittyä yksityiskohtiin tässä vaiheessa ja yrittää vain tehdä joitakin alustavia päätöksiä ulkoasusta ja rakenteesta aivan kuten joitain posh wireframes.
Kaikki mitä on sanottava käyttämisestä Lorem Ipsum sivuston mock ups on sanottu niin ota vain luottaa minuun tässä ja mahdollisuuksien mukaan käyttää todellista sisältöä suunnitella. Jos ei ole mahdollista, käytä viime vuosien sisältöä, kirjoita oma sisältö tai käytä sanoituksia "Kynttilän tuulessa", mutta älä käytä Lorem ipsumia. Jos et käytä todellista sisältöä, on vaikea nähdä, mihin tauon pisteisiin jotkut elementit tarvitsevat säätää.
Tämä on vain leveys, jota haluan aloittaa, koska se on lähellä pienen työpöydän kokemusta, joka on sittemmin helppo laajentaa suuremmille näytöille ja alas tablet- / mobiilikokemuksille. Jotkut ihmiset haluavat aloittaa laajemmin, kun taas toiset haluavat suunnitella mobiili-ensin, se vain tulee alas, mikä toimii sinulle.
RWD on kyse nestemäisistä säiliöistä, jotka kasvavat ja kutistuvat täyttämään selaimen käytettävissä olevan alueen. Suunnittelu prosentteina pikseleiden sijaan varmistaa, että malleillasi kulkee suhteessa selaimeen ja vaatia vähemmän rikkoontumispisteitä kuin vastaava pikselipohjainen muotoilu.
Minulla on In-Design taustalla avoin, jotta voin helposti ja nopeasti selvittää pikselipohjaisen elementin prosentuaalisen koon. InDesign on erinomainen käsitellä tällaisia laskutoimituksia ja voit helposti selvittää, minkä kokoinen 428px x 333px -elementti on 46% sen alkuperäisestä leveydestä, säilyttäen sen mittasuhteet tai ehkä 27% 889px-selaimen leveydestä sekunteina. Tuloksia annetaan edelleen pikseleissä, jotta voit palata sisään ohjelmassa olevaan ohjelmistoon ja luoda pakkauksen pikseleissä tietäen, että se on suhteessa määritettyyn työtilaan.
Jos luulet, että ärsytään siitä, että käytät todellista sisältöä malleissasi, sinun pitäisi kuulla, että minulle mennään kuvakkeiden suunnittelu Photoshopissa (Tai vastaava). Typografia näyttää selaimelta huomattavasti erilaiselta kuin tavallisissa Adobe-paketeissa, mikä merkitsee enemmän työtä, kun muotoilua muokattaessa sen rakennuksen jälkeen.
Tallenna itsesi päänsärkyä ja käytä sellaisia sovelluksia kuin haluat typecast.com kokeilla ja luomalla fonttityylejäsi. Kun olet tyytyväinen typografian ulkoasuun ja tyyliin, voit viedä koko työtilan läpinäkyväksi PNGksi sijoitettavaksi suunnittelumallistoistasi. Sinun ei tarvitse olla mitään valitsemistasi fontteja asennettuna järjestelmään, koska se on vain kuva, mutta et myöskään voi muokata sitä menemättä takaisin tyyppikuvaksi.
Nyt sinulla on melko paljon oma mallisi 1000px leveä (tai kumpi leveys olet valinnut alussa) täydennetty leveydet kontit, jotka pitävät eri sisältöä käännetty prosentteina. Aloitan nyt luoda räätälöity ristikko, joka jäljittelee kontin leveyksiä, joita käytän suunnitteluni sisällä. Joten jos minulla on sivupalkki, joka on 30% leveä ja sisältöalue, joka on 55% selaimellani 5%: n pehmusteella kummallakin puolella, ruudukko voi näyttää siltä kuin 5%, 30%, 5%, 55%, 5%.
Voit käyttää esimerkiksi sovelluksia Gridset rakentaa räätälöityä verkkosi, mutta toisaalta haluan käyttää InDesignia, koska voit ryhmitellä elementtejä ja muuttaa niiden kokoa suhteessa toisiinsa.
Otan nyt ruudukon, jonka olen luonut käyttämällä InDesignia ja liittänyt sen 1600px: n laajuuteen (tai maksimileveyteen, jonka haluat sivustossasi olla). Sitten aloitan kokoa koko verkon laajemmalle ja kapeammaksi kerralla 100px aina 300px leveä. Jokaisella lisäyksellä tarkistan jokaisen sisällön pakkauksen leveyden ja varmista, että se on vielä tarpeeksi suuri sisällön säilyttämiseksi. Kun saan leveyden, jonka mielestäni säiliö on liian pieni, muokkaan verkkoa vain sopivaksi. Joten jos 800 sivua leveä sivupalkki, jonka olin luonut 30 prosentilla selaimen leveydestä, tulee liian kapeaksi, voisin lisätä siihen ylimääräisen 10%: n, joten se on nyt 40% selaimen leveydestä ja riittävän leveä säilyttääksesi sen aiotun sisällön .
Tärkeintä on muistaa, että jos teet säiliötä laajemmaksi, sinun on tehtävä toinen säiliö kapeampi samalla määrällä, jotta 100% koko leveys säilyisi. Tämä on paras tapa, jonka olen löytänyt määrittävän rikkoontumispisteet (kohta, jossa ulkoasu muuttuu), kun lisäät vain toisen ristipisteen, kun sisältö rikkoo, eikä uuden laitteen leveyttä. Tämä menettely voi olla aikaa vievää, kun pääset 14 eri esikatseluun verkostasi, kun se kasvaa 300px: stä 1600px: n leveydelle, mutta se on paras tapa, jolla olen löytänyt tarkistaa, miten muotoilu näyttää eri näytön leveydet ennen kuin se on kehittäminen.
Toinen vaihtoehto on käyttää työkalua kuten Adobe Reflow jonka avulla voit myös lisätä sisältöä kontteihin ja vetää työtilaa ja tarkastella elementtien määrää. Voit myös määrittää taittopisteet muokkaamalla työtilaasi, kunnes sisältö rikkoutuu ja lisäämällä vain mediakysely. Reflow on edelleen julkisessa beta-muodossa ja se voidaan ladata osoitteesta tässä .
Skaalautuneita kuvioita alaspäin joka 100px: n välein, sinä tunnistit muutaman leveyden, jossa sisältö rikkoutuu ja korjataan lisäämällä breakpoint. Nyt voit palata ohjelmistoon, jonka olet luonut alkuperäiset mallit ja muuttamaan mallisi ulkoasua leveyteen, jonka olet määrittänyt lomapisteinä. Tämä tarkoittaa, että päätät suunnitella vain 2, 3 tai 4 erilaista ulkoasua (riippuen verkon monimutkaisuudesta ja siitä, kuinka monta keskeytyspistettä tarvitset), joka kattaa aina 300px: stä 1600px: ään.
Jos olet seurannut tätä prosessia, sinulla on nyt joukko lomakkeita, jotka sopivat lomapisteisiisi, asiakirja, joka näyttää, kuinka verkko koostuu prosenttiosuuksista selaimen leveydestä ja siitä, miten se romahtaa pienemmille näytöille ja kaikille typografiatyylit, jotka on jo luotu ja testattu selaimessa. Tämän pitäisi olla erittäin vahva kohta kehittäjälle, jonka jälkeen he voivat rakentaa malleja tarkasti ja ilman, että he joutuvat käsittelemään sisällön rikkomista tietyillä leveyksillä myöhemmin.
Tämä prosessi saattaa tuntua hyvin kauan tuulelta, mutta ilman erityistä työkalua, joka on rakennettu kokonaan RWD: lle, on paras tapa, jolla olen löytänyt helposti testata reagoivan ulkoasun käyttämällä ei-reagoivaa ohjelmistoa ja selkeästi ilmaista ideani kehittäjälle. Tämä ei ole missään nimessä ainoa tapa lähestyä RWD-projektia, mutta se on paras, mitä olen löytänyt.
Mikä on herkkä muotoilu muuttunut työnkulusta? Mitä vinkkejä jaatko? Kerro meille kommentit.