Responsive web design on tullut lähes kaikkialla läsnäoleva muotisana verkossa. Yritä etsiä #rwd Twitterissä löytää yhtäläiset osasisällöt ja Twitter-roskasisältö. Tämä on yhteinen vaihe uuden ajatuksen kypsymisessä. Muistan, kun AJAX oli kaikki raivo; termi ajautui maahan. Nyt vain harvat puhuvat AJAX: stä, mutta jQuery-kirjastot ovat täysin kehittäjän työnkulussa.
Tämä näyttää peilistä, mitä tapahtuu herkälle web-suunnittelulle. Termi on kaikkialla. Ystäväni on aikakauslehtikustantamisessa, hän meni äskettäin konferenssiin, ja tunnettu uutislehden toimittaja puhui tulevista trendeistä ja mainitusta reagoivasta web-suunnittelusta. Toimittajat eivät välttämättä ole verkkoalan ammattilaisia, mutta he tietävät, että sanat ovat salasanoja.
Koska reagoiva web-suunnittelu sai höyryä, tapamme rakentaa verkkosivustoja muuttui. Koska termi siirtyy muotisana yhdeksi kaikkien web design -hankkeiden yhteiseksi osaksi, tapamme, jolla työskentelemme web-ammattilaisina, täytyy muuttua. Tässä mielessä on luotava joitakin uusia sääntöjä siitä, miten toimimme.
Kun joku sanoo, että voit tarkistaa tämän vastaavan sivuston, mikä on ensimmäinen asia, mitä teet? Luultavasti skaalaat ikkunan nähdäksesi, miten ulkoasu muuttuu. En luultavasti avaa sitä puhelimessani ja tablet-laitteellani ja aloita muuttaa suuntauksia tai aloittaa sivunopeustestien suorittamisen. Skaalata selaimen ja jatkaa päiväni kanssa. Tämä on kokemuksemme suunnittelijoina ja kehittäjinä, mutta ei käyttäjinä. Kun käyn sivustossa käyttäjänä, minulla ei ole kärsivällisyyttä. En välitä, jos sivusto squishes mukavasti; Haluan vain haluamani asian.
"Squishy" on verkkosivuston lineaarinen skaalaus. Ovatko sivustot laihasta rasvasta? Lineaarisen skaalauksen sijaan reagoivan web-suunnittelun tulisi keskittyä luomaan sivuston ydin ja ladattava sen jälkeen kapasiteetiltaan. Kuvittele sivuston, joka oli rakennettava pienelle kännylle, joka käyttää IE7: tä EDGE-verkossa. Sen pitäisi olla sinun ydinsijaasi ja sitten skaalata se näytön koon ja ominaisuuksien perusteella.
Responsive web design on monimutkainen. Juuri niin se on. Toivon, että voisin kertoa teille, että se olisi helppoa, mutta ei ole. Useimmat ihmiset ovat vastanneet reagoivaan web-suunnitteluun lisäämällä jotain niiden työnkulkuihin, olipa kyseessä uusi julkaisu tai vain kehittäjä ja kysyy, aikovatko ne suunnitella toimimaan reagoivasti.
Minulla on ystävä, joka työskentelee asiakkaan reagoivalla sivustolla. Hän rakentaa sivuston Photoshopissa työpöydän kokoon. Joidenkin sivujen muutamien mallien jälkeen hän halusi näyttää, miltä sivusto näyttäisi tablet-laitteelta ja älypuhelimelta, joten hän teki myös nämä mallinnukset. Esittämällä asiakkaalle hänelle annettiin luovaa tweaksia. Tällä sivulla on tällä hetkellä noin 50 PSD-tiedostoa. Se vie hänet muutaman päivän päivittämään asetteluja.
Yritetään lisätä uusia malleja yksinään johtaa aikaa vieviin ja epäjohdonmukaisiin prosesseihin. Yksi parhaista tavoista ratkaista tämä on prototyping your wireframes ja esittää ne asiakkaalle. Tämä antaa sinulle mahdollisuuden puhua suoraan sivuston ulkoasuun ilman, että puhutaan samanaikaisesti suunnittelusta. ZURBin säätiö on hyvä työkalu prototyyppien rakentamiseen nopeasti.
Yksinkertaisesti lisäämällä prototyyppejä työnkulkuun ei kuitenkaan riitä. Jotta pystyt vastaamaan rakennettavien sivustojen rakentamiseen, sinun on säädettävä, mikä tuo meidät seuraaviin sääntöihin.
Aloitessani verkkosivujen rakentamista käytin kaksi työkalua, Photoshop ja GoLive. Nyt minulla on vähintään kuusi ohjelmaa, jotka ehdottomasti vaaditaan sivuston rakentamiseksi. Käytän edelleen Photoshopia graafisten elementtien luomisessa, mutta olen enimmäkseen suunnittelija selaimessa Sublime Text 2: llä ja käytän Safarin kehittäjätyökaluja tarkastelemaan iOS 6: n elementtejä. Käytän myös Codekitä valmiiksi käsitellyn CSS: n ja terminaalin kääntämiseen versionhallintaan Gitissä.
Responsive web design tarkoittaa myös muuttamista suunniteltaessa. Sen sijaan, että voisin luoda koko sivun Photoshopissa, käytän sitä Samantha Warrenin tyylihuovat kuvata visuaalista muotoilua. Suunnittelemalla sivuston visuaalinen brändi ja käyttöliittymäelementit varsinaisen ulkoasun ulkopuolella voit kommunikoida muotoilun suoraan ja yhdistää sen prototyypin ulkoasuun, jotta voit luoda reagoivan sivustosi selaimessa.
CSS-esikäsittelyohjelmat ovat myös valtava apu kaikissa vastaaviin työnkulkuihin. Yksinkertaisesti sanottuna esikäsittelyjärjestelmien avulla voidaan erottaa sivuston rakentamisen monimutkaisuus ja helpottaa paljon toistoa perinnöksi työskentelemällä CSS: ssä. Henkilökohtaisesti mieluummin SCSS, mutta LESS on eräiden vaihtoehtojen parempi vaihtoehto, sillä niillä on alhaisempi maahantulo ja parempi dokumentaatio.
[Webbin] pitäisi olla saatavilla mistä tahansa laitteesta, joka voi muodostaa yhteyden Internetiin: kiinteä tai liikkuva, pieni näyttö tai suuri. - Tim Berners-Lee
HTML ja CSS ovat luonnostaan herkkiä. HTML: n alusta alkaen verkon tarkoituksena oli olla riittävän joustava toimimaan millä tahansa laitteella, jolla on Internet-yhteys. Vasta kun suunnittelijat ja kehittäjät siirtyivät kohti kiinteää asettelua, että tämä muuttui. Yritettäessä asettaa kiinteät ulottuvuudet verkkosivustoille olemme rajoittaneet verkon pöytätietokoneisiin.
Reagoiva verkko on yksi, joka tiivistää, mitä sinun on sanottava siitä, miten sanot. Ota esimerkiksi NPR: n äskettäin siirtyminen API-pohjaiseen sisältömalliin. Siirtymällä sisällön tarjoamiseen sovellusliittymään NPR on pystynyt hallitsemaan sovellusten ja sivustojen kokoa johdonmukaisella tavalla. Ainoa muutos on esityskerros.
Tämä on, mitä vastaavan verkon pitäisi olla kyse. Kuvittele, mitä sinun on sanottava, ja antaa, miten sanot sen ajaa sitä. Suunnittelu on tarpeiden täyttämistä visuaalisesti miellyttävällä tavalla, mutta myös se, joka toimii käyttäjien tarpeiden tyydyttämiseksi.
Tämä on asia, joka vastaa reaaliaikaista verkkoa, käyttäjän luomista sivustoja, jotka toimivat käyttäjiä varten, mutta he pääsevät sisältöön. Niiden sivustojen tekeminen, jotka voivat palauttaa itsensä pienille näytöille, on vasta alkua.
Oletko omaksunut reagoivan web-suunnittelun vielä? Mitä sääntöjä herkälle suunnittelulle haluat lisätä? Kerro meille kommentit.