Sisu
- Kujundamine tundmatule
- Pragmaatiline lähenemine disainile
- Saamine agnostikuks
- Kodeerimine järk-järgult
- Hinnalisandisse sukeldumine
Tundub, et kõik räägivad tänapäeval tundlikust veebidisainist ja seda põhjusega; kuna veebitoega seadmete arv kasvab jätkuvalt - kõigil on erinevad võimalused ja funktsioonid -, pole enam mõistlik ehitada fikseeritud laiusega veebisaite.
Tõde on see, et kunagi polnud. Siiani peeti parimateks tavadeks kogemuste kujundamist, mis tegid mitmeid eeldusi, olgu need siis ekraani eraldusvõime, ribalaiuse või sisestusmeetodi ümber. Kui olete kunagi kujundanud 960px laiuse veebisaidi, saate seda vaadata ainult sõbra väikesel ekraanil (ja jah, kirjutan siin valusast kogemusest), saate aru, miks see polnud eriti nutikas lähenemine. Nüüd, kui nutitelefonid ja tahvelarvutid on segusse visatud, on selge, et meie traditsioonilised meetodid pole enam otstarbeks sobivad.
Õnneks tähendab CSS-i meediaküsimuste ilmnemine ja kasvav tõdemus, et veeb on omaette meedium, see tähendab, et hakkame omaks võtma platvormi tõelist olemust, aktsepteerides, et selle universaalsus on tugevus, mitte nõrkus.
Järgmise viie päeva jooksul juhatan teid läbi tehnika, mis tunnistab seda fakti: tundlik veebidisain. Ethan Marcotte'i välja töötatud funktsioon ühendab sujuva paigutuse, paindlikud pildid ja meediumipäringud, et aidata meil luua saite, mis kohanevad kenasti igas keskkonnas, kus nad kokku puutuvad.
Ma näitan seda lähenemist, näidates teile, kuidas lihtsat meediumigaleriid koostada. Näidetes loome väikese veebisaidi, et dokumenteerida hiljutist teekonda, mille läbisin Ameerika Ühendriikides, kuid kohandage julgelt koodi ja kujundust vastavalt oma vajadustele.
Kujundamine tundmatule
Suur osa sellest õpetusest keskendub tundliku disaini arendusaspektile. Kuid enne kui uurime mõnda koodi, mõelgem korraks mõttele, kuidas võiksime kujundada veebisaidi, millel võiks olla lõpmatu paigutus.
Mul on nüüd vedanud, et saan liideseid kujundada ja arendage eesseadme kood, mis muudab need reaalseks. See pole muidugi ainulaadne oskus - kui töötate enda heaks, olete tõenäoliselt sama. Kuid kindlasti on kasulik mõista, kuidas sisu saab vedelate kujunduste loomisel kohaneda ja ümber voolata.
Töötan ka suurema meeskonna koosseisus, kus minu roll on rohkem spetsialiseerunud. Sellises keskkonnas võib visuaalne disainer keskenduda ainult traadiraamide tõlkimisele atraktiivseteks, köitvateks (sisselogimata, pikslitega) kompaktseteks. Ja pole ebatavaline, et arendajad asuvad eraldi, muutes need paigutused lahjaks ja tõhusaks märgistuseks ja CSS-iks.
Kuid sellised lineaarsed ja eraldatud töövood lagunevad kiiresti, kui hakkame hindama, kuidas kujundused erinevate keskkondadega kohanevad. Nagu iga uus tööriist või tehnoloogia, peaksime kaaluma ka koostöövõimelisemaid ja väledamaid tööviise. Paljud kõige reageerivate veebisaitide kujundamisel tekkinud kõige keerulisemad probleemid saab lahendada lihtsalt vestluse, katsetamise ja kordamise kaudu.
Pragmaatiline lähenemine disainile
See ei tähenda, et disaineritel pole võimalust mõelda, kuidas disain võib töötada väljaspool konkreetse seadme piire.
Clearleftis algatame visuaalse kujunduse töölaua vaatenurgast. Alustame üldise kujunduskeele ja visuaalse esteetika määratlemisega, tuginedes esmasele uurimisele sageli sisutüki ümber. Näiteks kui kujundame toidukohta, alustame retseptilehega; uudistesaidi jaoks loo leht.
See pole mitte ainult saidi oluline leht, vaid sisaldab tõenäoliselt piisavalt struktureeritud sisu, et saaksime tüpograafilise paleti üles ehitada. Mõleme ka sellele, kuidas paigutus võib kohaneda - isegi kui see on selles etapis lihtsalt meie peas.
Üks kasulik viis disaini stressitestimiseks on võtta selline leht ja kohandada see kitsama (~ 320px laiuse) ekraani jaoks. Tõenäoliselt avastate, et selle laiusel töötamiseks tuleb disaini mõned aspektid uuesti läbi mõelda. siin on mõned näidised:
- Tüpograafia: Suured pealkirjad võivad laiematel paigutustel hästi töötada, kuid väiksematel ekraanidel võivad need hõivata palju vertikaalset ruumi ja vajavad seetõttu täiendavat kerimist. Kuna joone pikkus muutub, peaksite kaaluma ka joone kõrgust ja muid tüpograafilisi töötlusi.
- Lingid: Kuidas teie disain puutetundliku ekraaniga seadmetes töötab? Kuigi meil pole nende tuvastamiseks veel lihtsat viisi (see tähendab, et me peaksime seda oma disaini kõigis aspektides arvesse võtma), võib kitsama ekraani jaoks kujundamine anda meile võimaluse mõelda linkide ja muude interaktiivsete elementide sihtpiirkondadele . IOS-i juhised soovitavad, et nende ruut oleks vähemalt 44 pikslit / punkt, mis on hea näitaja, mille poole püüelda.
- Navigeerimine: See on tõenäoliselt mis tahes reageeriva kujunduse kõige ebamugavam komponent, eriti kui teie saidil on palju jaotisi ja sügav hierarhia. Brad Frost on kirjutanud kokkuvõtte mõnest erinevast navigatsioonikäsitlusest, mida praegu kaalutakse.
- Üleliigne sisu: Kas mõnda sisu pole vaja? Kas muud sisu tuleb näidata ainult teatud stsenaariumide korral? Ma ei poolda sisu peitmist selle põhjal, millist seadet kasutaja juhtumisi kasutab, kuid sellised tehnikad nagu tingimuslik laadimine (mida vaatame hiljem sel nädalal) võivad aidata meil teenindada väiksemaid lehti, mis laadivad täiendavat sisu ainult vajaduse korral.
Kahe kontrastse paigutuse kujundamine tugevdab ideed, et disain kohandub, samal ajal kui potentsiaalsed getod juba varakult välja siluvad. Ehkki see kõlab töö kahekordistumisena, pidage meeles, et me ei kujunda iga lehte pikslite täpsusega. Selle asemel keskendume skaleeritava disainikeele ülesehitamisele - keelele, mis areneb välja, kui hakkame seda koodis rakendama, ja sellele, mis põhineb üksikutel moodulitel ja komponentidel.
Saamine agnostikuks
Pole üllatav, et tööstuse jaoks, mis on veebi ajalooliselt käsitlenud nagu trükitud, on fikseeritud laiusega paigutused levinud paljudesse meie toodetud toodetesse. Kohandatava meediumi kujundamist alustades kaalutakse uusi lähenemisviise, mis võimaldavad meil probleeme lahendada ja ideid edastada, tunnistades samas meediumi voolavust. Siin on mõned minu lemmikud:
- Lehe kirjelduse skeemid: Ehkki traadiraamid võivad sageli tähendada paigutust (ja seega eeldada teatud tüüpi seadmeid), eemaldavad lehe kirjeldusdiagrammid selle eelduse ja kirjeldavad selle asemel üksikuid komponente, mis on dokumendis prioriteetselt paigutatud.
- Stiiliplaadid: Klientidega disainiideid edastades võime leida end "veebisaitide maalidest". Kui me pole ettevaatlikud, paluvad kliendid õigustatult näha kontseptsioone, mis näitavad, kuidas disain ka teistes seadmetes välja näeb. See võib sundida meid jätkusuutmatusse olukorda, kui toodame mitme seadme jaoks mitu lehte. Samantha Warren on selle probleemi üle mõelnud ja stiiliplaadid välja mõelnud. Need asuvad kuskil meeleolulaua (kuid vähem ebamäärased) ja täielikult realiseeritud kompaktide (kuid vähem täpsed) vahel ning aitavad meil suhelda tüpograafia, nööbistiilide ja päitseprotseduuride vahel. Need julgustavad ka küpsemat arutelu meie klientidega.
- Disainimängu mobiliseerimine: See harjutus võib disainide koostöötubade ajal väga hästi töötada. Selles harjutuses kirjutavad kõik üles Post-it märkmikud, mis võivad teatud lehel ilmuda. Seejärel kinnitatakse need tähtsuse järjekorras seina külge, nagu oleksid nad mobiiltelefonis lineaarsed. Sellest tulenev arutelu võib tuua üllatavaid järeldusi. Näiteks võite mõista, et navigeerimine pole lehe kõige olulisem komponent. See võib järgida kujundust, kus lehe ülaosas olev vahelejätmise link viib jaluses navigeerimisele.
Loomulikult on veel ruumi tööriistadele, mida me juba kasutame, kuid veebisaidi laiemas plaanis kujundamisel peame meeles pidama, et paigutus pole enam teada.
Kodeerimine järk-järgult
Õnneks ei pea me töötava näite visuaalse kujunduse pärast muretsema, kuna meie jaoks on raske töö tehtud! Selle asemel võime keskenduda disaini kodeerimisele täielikult reageerivale veebisaidile.
Enne alustamist veel üks asi. Oluline on meeles pidada meediumi, millega me töötame, aluspõhimõte: universaalsus. See ei tähenda mitte ainult ehitamist veebipõhiste seadmete jaoks tänapäeval, vaid ühilduvuse tagamist ka eilse ja homse seadmetega. John Allsopp kirjeldas, miks see põhimõte oluline on, oma postituses Järgmised 6 miljardit:
"See järgmine kuus miljardit on lapsed India maapiirkonnas, Aafrikas, Hiinas, kus juurdepääs võimule ja võrkudele võib olla katkendlik. See on keegi Sumatras kümnendi vanuses Winteli kastis. Need inimesed räägivad sadu erinevaid keeli, kümneid erinevaid kirjutamissüsteemid. Need on inimesed, kes saavad oma perekonnas esimestena lugeda ja kirjutada. See on 20 protsenti inimestest kogu maailmas, kes ei oska lugeda ega kirjutada. Ometi.’
Me saame jälgida oma veebimõistmist, vaadeldes erinevaid moesid (parema sõna puudumisel), mis on meie erialal levinud: veebistandardid, juurdepääsetavus, pealetükkimatu JavaScripti… kõik on sama teema variandid: järkjärguline täiustamine. Sama lugu on reageeriva veebidisainiga. Ehitada a tõeliselt tundlik veebisait on luua sait, mis ei oleks mitte ainult tagurpidi ühilduv, vaid ka tulevikus sõbralik.
Hinnalisandisse sukeldumine
Olgu, piisab preambulist, on aeg avada tekstiredaktor.Meie disainer on pakkunud meile töölauale orienteeritud kujunduse ja olnud piisavalt lahke, et tuua näiteid selle kohta, kuidas see ka kitsamas vaates avaneb.
Võib olla ahvatlev need eraldi üles kodeerida, kuid pakun teistsugust lähenemist. Paigutades kujunduse moodustavad eraldi komponendid - või mustrid - ühele lehele, saame luua mustrite portfelli. See võimaldab meil arendada komponente väljaspool mis tahes lehepaigutuse piire ja annab meile midagi, millele hiljem regressioonitesti jaoks viidata. Vaatame esialgset märgistust mõnes erinevas seadmes:
Vaadake meie märgistatud mustrite portfelli
Noh, ma olen neetud - meil on juba reageeriv veebisait! Meie sisu kohandub iga seadme piiridega, olgu selleks siis uhke uus iPad või kasutuselt kõrvaldatud telefon. See töötab isegi ainult tekstibrauseris nagu Lynx.
Tänu universaalsuse aluspõhimõtetele on veeb vaikimisi reageeriv. See on suurepärane, kuid see tähendab ka seda, et kõik, mida koodiga edaspidi teeme, võib ohustada seda kohalikku kohanemisvõimet.
Homme: Astume hoolikalt läbi ja hakkame rakendama tundliku disaini esimest aspekti: tüpograafiat ja vedeliku võreid.
