Sisältö
- Suunnittelu tuntemattomalle
- Pragmaattinen lähestymistapa suunnitteluun
- Asettelusta agnostikko
- Koodaus asteittain
- Sukellus hinnanlisään
Näyttää siltä, että kaikki puhuvat reagoivasta verkkosuunnittelusta näinä päivinä, ja syystä; Koska verkkoyhteyksien määrä kasvaa jatkuvasti - kullakin on erilaiset ominaisuudet ja ominaisuudet - ei ole enää järkevää rakentaa kiinteän leveyden verkkosivustoja.
Totuus on, että se ei koskaan ollut. Silti tähän asti katsottiin parhaaksi käytännöksi suunnitella kokemuksia, jotka tekivät useita oletuksia, olivatpa ne näytön tarkkuuden, kaistanleveyden tai syöttötavan ympärillä. Jos olet koskaan suunnitellut 960 kuvapisteen kokoisen verkkosivuston vain katsellaksesi sitä ystävän pienellä näytöllä (ja kyllä, kirjoitan tuskallisesta kokemuksesta täällä), ymmärrät, miksi tämä ei ollut erityisen fiksu lähestymistapa. Kun sekoitukseen on heitetty älypuhelimia ja tabletteja, on selvää, että perinteiset menetelmämme eivät enää sovellu tarkoitukseen.
Onneksi CSS-mediakyselyjen ilmaantuminen ja kasvava tietoisuus siitä, että verkko on itsenäinen media, tarkoittaa, että olemme alkaneet omaksua alustan todellisen luonteen hyväksymällä, että sen universaalisuus on vahvuus, ei heikkous.
Seuraavien viiden päivän aikana opastan sinut tekniikan avulla, joka tunnistaa tämän tosiasian: reagoiva web-suunnittelu. Ethan Marcotten kehittämä tämä yhdistää sujuvan ulkoasun, joustavat kuvat ja mediakyselyt auttaakseen meitä rakentamaan sivustoja, jotka sopeutuvat sulavasti mihin tahansa kohtaamaansa ympäristöön.
Esittelen tämän lähestymistavan osoittamalla, kuinka voit rakentaa yksinkertaisen mediagallerian. Esimerkeissäni luon pienen verkkosivuston dokumentoidakseni äskettäisen matkan, jonka kävin läpi Yhdysvaltojen, mutta voit mukauttaa koodin ja ulkoasun omiin tarpeisiisi.
Suunnittelu tuntemattomalle
Suuri osa tästä opetusohjelmasta keskittyy reagoivan suunnittelun kehitysnäkökohtiin. Mutta ennen kuin syvennämme koodia, mietitään hetki, miten voimme suunnitella verkkosivuston, jolla voisi olla äärettömän asettelun.
Olen onnekas siinä, että voin suunnitella käyttöliittymiä ja kehittää käyttöliittymäkoodi, joka tekee niistä todelliset. Tämä ei tietenkään ole ainutlaatuinen taito - jos työskentelet itsellesi, olet todennäköisesti sama. Mutta on varmasti hyödyllistä ymmärtää, miten sisältö voi sopeutua ja sulautua, kun muotoillaan nestemäisiä malleja.
Työskentelen myös osana suurempaa tiimiä, jossa roolini on erikoistunut. Tällaisessa ympäristössä visuaalinen suunnittelija voi keskittyä yksinomaan lankakehysten kääntämiseen houkutteleviksi, mukaansatempaaviksi (allekirjoitetuiksi, pikseliä täydellisiksi) kompiksi. Eikä ole epätavallista, että kehittäjät sijoittuvat erikseen kääntämällä nämä asettelut vähäiseksi ja tehokkaaksi merkinnäksi ja CSS: ksi.
Tällaiset lineaariset ja erilliset työnkulut hajoavat kuitenkin nopeasti, kun alamme arvioida, kuinka mallit mukautuvat erilaisiin ympäristöihin. Samoin kuin minkä tahansa uuden työkalun tai tekniikan, meidän pitäisi myös harkita yhteistyöhön perustuvia ja ketterämpiä työskentelytapoja. Monet reagoivien verkkosivustojen suunnittelussa haastavimmista ongelmista voidaan ratkaista yksinkertaisesti keskustelun, kokeilun ja iteroinnin avulla.
Pragmaattinen lähestymistapa suunnitteluun
Tämä ei tarkoita sitä, että suunnittelijoilla ei ole mahdollisuutta miettiä, miten muotoilu voi toimia minkä tahansa laitteen rajojen ulkopuolella.
Clearleftillä aloitamme visuaalisen suunnittelun työpöydän näkökulmasta. Aloitamme määrittelemällä kattava suunnittelukieli ja visuaalinen esteettisyys, perustamalla usein ensimmäiset tutkimukset ydinsisällön ympärille. Jos esimerkiksi suunnittelemme ruokasivustoa, aloitamme reseptisivulla; uutissivustolle, tarinasivulle.
Tämä ei ole vain tärkeä sivu sivustolla, mutta se sisältää todennäköisesti myös tarpeeksi jäsenneltyä sisältöä, jotta voimme rakentaa typografisen paletin. Mietitään myös, kuinka asettelua voidaan mukauttaa - vaikka se olisi vain mielemme takana tässä vaiheessa.
Yksi hyödyllinen tapa testata mallia on ottaa tällainen sivu ja mukauttaa sitä kapeammalle (~ 320 kuvapistettä leveälle) näytölle. Tulet todennäköisesti huomaamaan, että joitain suunnittelun näkökohtia on harkittava uudelleen, jotta ne toimisivat tällä leveydellä. Tässä on joitain esimerkkejä:
- Typografia: Suuret otsikot voivat toimia hyvin laajemmissa ulkoasuissa, mutta pienemmissä näytöissä ne voivat viedä paljon pystysuoraa tilaa ja vaativat sen vuoksi lisä vieritystä. Kun linjan pituus muuttuu, sinun on harkittava myös viivan korkeutta ja muita typografisia hoitoja.
- Linkit: Kuinka suunnittelusi toimii kosketusnäyttölaitteilla? Vaikka meillä ei vielä ole helppoa tapaa havaita näitä (mikä tarkoittaa, että meidän on otettava huomioon kaikki suunnittelumme näkökohdat), kapeammalle näytölle suunnitteleminen voi antaa meille mahdollisuuden miettiä linkkien ja muiden interaktiivisten elementtien kohdealueita . IOS-ohjeissa suositellaan, että näiden neliön on oltava vähintään 44 pikseliä / piste, mikä on hyvä tavoite.
- Navigointi: Tämä on todennäköisesti kaikkein hankalin osa reagoivaa suunnittelua, varsinkin jos sivustollasi on useita osioita ja syvä hierarkia. Brad Frost on kirjoittanut yhteenvedon joistakin nykyisin harkittavista erilaisista lähestymistavoista navigointiin.
- Tarpeeton sisältö: Eikö sisältöä tarvita? Täytyykö muuta sisältöä näyttää vain tietyissä tilanteissa? En suosittele sisällön piilottamista sen perusteella, mitä laitetta käyttäjä sattuu käyttämään, mutta tekniikat, kuten ehdollinen lataus (jota tarkastelemme myöhemmin tällä viikolla), voivat auttaa meitä palvelemaan pienempiä sivuja, jotka lataavat vain täydentävää sisältöä tarvittaessa.
Kahden vastakkaisen asettelun suunnittelu vahvistaa ajatusta, että muotoilu mukautuu, samalla kun silitetään potentiaaliset gotchat varhaisessa vaiheessa. Vaikka tämä kuulostaa työn kaksinkertaistumiselta, pidä mielessä, että emme suunnittele kaikkia sivuja kuvapisteiden täydelliseksi tarkkuudeksi. Sen sijaan keskitymme rakentamaan skaalautuvan suunnittelukielen - sellaisen, joka kehittyy, kun aloitamme sen käyttöönoton koodissa, ja joka perustuu yksittäisiin moduuleihin ja komponentteihin.
Asettelusta agnostikko
Ei ole yllättävää, että teollisuudelle, joka on historiallisesti käsitellyt verkkoa painotuotteena, kiinteän leveyden asettelut ovat läpäisseet monia tuottamiamme toimituksia. Kun alamme suunnitella sopeutuvaa mediaa, harkitaan uusia lähestymistapoja, joiden avulla voimme ratkaista ongelmia ja välittää ideoita samalla kun tunnustamme väliaineen sujuvan luonteen. Tässä on muutama suosikkini:
- Sivukuvaukset: Lankakehykset voivat usein merkitä asettelua (ja siten olettaa tietyntyyppisen laitteen), mutta sivukuvauskaaviot poistavat tämän oletuksen ja kuvaavat sen sijaan yksittäiset komponentit, jotka on järjestetty asiakirjassa prioriteetin mukaan.
- Tyyli laatat: Kun välitämme ideoita asiakkaiden kanssa, voimme löytää itsemme esittelemällä "maalauksia verkkosivustoista". Jos emme ole varovaisia, asiakkaat pyytävät perustellusti näkemään käsitteitä, jotka osoittavat, miltä muotoilu näyttää myös muilla laitteilla. Tämä voi pakottaa meidät kestämättömään tilanteeseen tuottamaan useita sivuja useille laitteille. Samantha Warren on ajatellut tätä ongelmaa ja keksinyt tyylilaatat. Nämä istuvat jonnekin mielialalevyn (mutta vähemmän epämääräisen) ja täysin toteutuneiden (mutta vähemmän tarkkojen) välissä ja auttavat meitä kommunikoimaan typografian, napityylien ja mastonhoitojen välillä. Ne kannustavat myös kypsempään keskusteluun asiakkaiden kanssa.
- Mobilisoi suunnittelupeli: Tämä harjoitus voi toimia todella hyvin suunnittelutyöpajoissa. Tässä harjoituksessa kaikki kirjoittavat muistiin Post-it-muistiinpanot, jotka voivat näkyä tietyllä sivulla. Nämä ovat sitten kiinni seinässä tärkeysjärjestyksessä, ikään kuin ne näyttäisivät olevan lineaarisia matkapuhelimessa. Tuloksena oleva keskustelu voi tuottaa yllättäviä johtopäätöksiä. Saatat esimerkiksi huomata, että navigointi ei ole tärkein komponentti sivulla. Tämä voisi seurata suunnittelua, jossa sivun yläosassa oleva ohituslinkki linkittää alatunnisteen navigointiin.
Työkaluille, joita jo käytämme, on tietysti vielä tilaa, mutta kun suunnittelemme verkkosivustoa laajasti, meidän on pidettävä mielessä, että asettelua ei enää tunneta.
Koodaus asteittain
Onneksi meidän ei tarvitse huolehtia visuaalisesta suunnittelusta esimerkissä, jossa työskentelemme, koska kova työ on tehty meille! Sen sijaan voimme keskittyä koodaamaan suunnittelumme täysin reagoivaan verkkosivustoon.
Vielä yksi asia ennen kuin aloitamme. On tärkeää muistaa työskentelemisen välineiden perusperiaate: universaalisuus. Tämä ei tarkoita vain rakentamista verkkoyhteydeltään nykyisille laitteille, vaan yhteensopivuuden varmistamista myös eilisen ja huomisen laitteiden kanssa. John Allsopp kuvasi, miksi tämä periaate on tärkeä, seuraavassa 6 miljardissa:
"Tämä seuraava kuusi miljardia on lapsia Intian maaseudulla, Afrikassa, Kiinassa, jossa pääsy valtaan ja verkkoihin voi olla ajoittaista. Se on joku Sumatrassa vuosikymmenen vanhassa Wintel-laatikossa. Ihmiset puhuvat satoja eri kieliä, kymmenillä eri kielillä kirjoitusjärjestelmät. Ihmiset ovat ensimmäisiä perheessään, jotka pystyvät lukemaan ja kirjoittamaan. Se on 20 prosenttia ihmisistä maailmanlaajuisesti, jotka eivät osaa lukea tai kirjoittaa.’
Voimme jäljittää ymmärryksemme verkosta tarkastelemalla eri muotia (paremman sanan puuttuessa), jotka ovat vallanneet ammattimme: verkkostandardit, saavutettavuus, huomaamaton JavaScript ... kaikki ovat saman teeman muunnelmia: progressiivinen parannus. Sama pätee reagoivaan verkkosuunnitteluun. Rakentaa a todella reagoiva verkkosivusto on rakentaa sivusto, joka ei ole vain taaksepäin yhteensopiva, mutta myös tulevaisuuden ystävällinen.
Sukellus hinnanlisään
Okei, tarpeeksi johdanto-osa, on aika avata tekstieditori.Suunnittelijamme on toimittanut meille työpöydälle suunnatun suunnittelun, ja hän on ollut ystävällinen antamaan esimerkkejä siitä, miten tämä saattaa näkyä myös kapeammassa näkymässä.
Voi olla houkuttelevaa koodata nämä erikseen, mutta aion ehdottaa erilaista lähestymistapaa. Sijoittamalla erilliset komponentit tai kuviot yhdelle sivulle voimme luoda kuviosalkun. Tämä antaa meille mahdollisuuden kehittää komponentteja minkä tahansa sivun asettelun rajojen ulkopuolella, ja antaa meille jotain viittaavaa myöhemmin regressiotestauksessa. Tarkastellaan alkuperäistä merkintää muutamassa eri laitteessa:
Tarkastele merkittyä mallivalikoimaamme
No, olen kirottu - meillä on jo reagoiva verkkosivusto! Sisältömme sopeutuu kunkin laitteen rajoihin, olipa kyseessä upea uusi iPad tai käytöstä poistettu puhelin. Se toimii jopa vain tekstiselaimessa, kuten Lynx.
Universaalisuuden perusperiaatteiden ansiosta verkko on reagoiva oletusarvoisesti. Se on hienoa, mutta se tarkoittaa myös, että kaikki, mitä teemme koodille tästä lähtien, voi vaarantaa tämän alkuperäisen sopeutumiskyvyn.
Huomenna: Käymme läpi huolellisesti ja alamme soveltaa reagoivan suunnittelun ensimmäistä osa-aluetta: typografiaa ja nesteverkkoja.
