Efni.
- Hönnun fyrir hið óþekkta
- Raunsæ nálgun við hönnun
- Verða skipulag agnostískt
- Kóðun smám saman
- Kafa í álagningu
Svo virðist sem allir séu að tala um móttækilega vefsíðuhönnun þessa dagana, og af góðri ástæðu; þar sem fjöldi tækja sem tengjast vefnum heldur áfram að aukast - hvert með mismunandi getu og eiginleika - er ekki lengur skynsamlegt að byggja vefsíður með fasta breidd.
Sannleikurinn er sá að það var aldrei. En hingað til var það talið best venja að hanna upplifanir sem gerðu nokkrar forsendur, hvort sem þær voru í kringum skjáupplausn, bandbreidd eða inntaksaðferð. Ef þú hefur einhvern tíma hannað 960 pixla breiða vefsíðu, aðeins til að skoða hana á litskjá netbók vinar þíns (og já, ég er að skrifa af sársaukafullri reynslu hér), þá skilurðu hvers vegna þetta var ekki sérstaklega snjöll nálgun. Nú, þegar snjallsímum og spjaldtölvum er hent út í blönduna, er ljóst að hefðbundnar aðferðir okkar henta ekki lengur í tilgangi.
Sem betur fer, tilkoma fyrirspurna um CSS fjölmiðla og vaxandi viðurkenning á því að vefurinn er miðill í sjálfu sér, þýðir að við erum að byrja að faðma hið sanna eðli vettvangsins og sætta okkur við að alheimur hans er styrkur en ekki veikleiki.
Næstu fimm daga mun ég leiða þig í gegnum tækni sem viðurkennir þessa staðreynd: móttækilegri vefhönnun. Þetta er þróað af Ethan Marcotte og sameinar fljótandi uppstillingar, sveigjanlegar myndir og fjölmiðlafyrirspurnir til að hjálpa okkur að byggja upp síður sem tignarlega aðlagast hverju því umhverfi sem þeir lenda í.
Ég mun sýna fram á þessa nálgun með því að sýna þér hvernig á að byggja upp einfalt fjölmiðlasafn. Í dæmum mínum mun ég búa til litla vefsíðu til að skrá nýlega vegferð sem ég fór um Bandaríkin en ekki hika við að aðlaga kóðann og hönnunina að þínum þörfum.
Hönnun fyrir hið óþekkta
Stór hluti af þessari kennslu mun snúast um þróunarþátt móttækilegrar hönnunar. En áður en við förum í kóða skulum við taka smá stund til að hugsa hvernig við gætum hannað vefsíðu sem hugsanlega gæti haft óendanlegar uppsetningar.
Nú er ég heppinn að því leyti að ég get hannað tengi og þróa framendakóðann sem gerir þá raunverulega. Þetta er auðvitað ekki sérstök hæfni - ef þú vinnur fyrir sjálfan þig þá ertu líklega sá sami. En það er vissulega hagstætt að skilja hvernig efni getur aðlagast og flæðst þegar unnið er með fljótandi hönnun.
Ég starfa líka sem hluti af stærra teymi þar sem hlutverk mitt er sérhæfðara. Í slíku umhverfi getur myndhönnuður einbeitt sér eingöngu að því að þýða vírramma yfir í aðlaðandi, grípandi (undirritaðan, pixla fullkominn) tækni. Og það er ekki óvenjulegt að forritarar séu staðsettir aðskildir og þýði þessar uppsetningar í halla og skilvirka álagningu og CSS.
Slík línuleg og aðskilin vinnuflæði bilast þó fljótt þegar við byrjum að meta hvernig hönnun mun aðlagast mismunandi umhverfi. Eins mikið og hvert nýtt tæki eða tækni ættum við að huga að samvinnuhæfari og liprari vinnubrögðum. Mörg erfiðustu vandamálin sem koma upp við hönnun móttækilegra vefsíðna er hægt að leysa einfaldlega með samtali, tilraunum og endurtekningu.
Raunsæ nálgun við hönnun
Það er ekki þar með sagt að ekki sé svigrúm fyrir hönnuði til að hugsa um hvernig hönnun geti virkað utan takmarka hvers og eins tækis.
Hjá Clearleft hefjum við sjónræna hönnun frá sjónarhorni skjáborðsins. Við byrjum á því að skilgreina yfirgripsmikið hönnunarmál og sjónrænan fagurfræði, og byggjum oft fyrstu rannsóknir í kringum kjarnaefni. Til dæmis, ef við erum að hanna matsíðu byrjum við með uppskriftasíðu; fyrir fréttasíðu, sögusíðu.
Ekki aðeins er þetta mikilvæg síða á síðunni, heldur inniheldur hún líklega nóg skipulagt efni til að við getum byggt upp leturgerðarspjald. Við munum einnig hugsa um hvernig útlitið getur lagað sig - jafnvel þó það sé bara í huga okkar á þessu stigi.
Ein gagnleg leið til að álagsprófa hönnun er að taka slíka síðu og aðlaga hana að þrengri (~ 320px breiður) skjá. Þú munt líklega uppgötva að það þarf að hugsa suma þætti hönnunarinnar til að þeir vinni í þessari breidd. Hér eru nokkur dæmi:
- Leturgerð: Stór fyrirsagnir geta virkað vel á breiðari uppsetningum, en á smærri skjám geta þær tekið mikið lóðrétt pláss og því þarfnast frekari flettingar. Þegar línulengdir breytast, ættir þú að huga að línuhæðum og öðrum leturfræðilegum meðferðum.
- Krækjur: Hvernig mun hönnun þín vinna á snertitækjum? Þó að við höfum ekki auðvelda leið til að greina þetta ennþá (sem þýðir að við ættum að taka tillit til allra þátta hönnunar okkar), þá getur hönnun fyrir þrengri skjá gefið okkur tækifæri til að hugsa um marksvæði fyrir tengla og aðra gagnvirka þætti . IOS leiðbeiningarnar mæla með því að þetta séu að minnsta kosti 44 punktar / punktar ferningur, sem er góð tala til að miða við.
- Leiðsögn: Þetta mun líklega vera óþægilegasti þátturinn í allri móttækilegri hönnun, sérstaklega ef vefsvæðið þitt er með marga hluta og djúpt stigveldi. Brad Frost hefur skrifað yfirlit yfir nokkrar mismunandi aðferðir við siglingar sem nú eru til skoðunar.
- Óþarfa innihald: Er ekki krafist einhvers efnis? Þarf aðeins að sýna annað efni í ákveðnum atburðarásum? Ég er ekki talsmaður þess að fela efni byggt á því hvaða tæki notandi gerist að nota, en aðferðir eins og skilyrt hleðsla (sem við munum skoða síðar í þessari viku) geta hjálpað okkur að birta minni síður sem hlaða aðeins viðbótarefni þegar þess er þörf.
Með því að hanna tvö andstætt útlit styrkir hugmyndin um að hönnun muni aðlagast, en strauja mögulega gotchas snemma. Þó að þetta hljómi eins og tvöföldun vinnu, hafðu í huga að við erum ekki að hanna hverja blaðsíðu til að fá pixla fullkomna nákvæmni. Í staðinn leggjum við áherslu á að byggja upp stigstærð hönnunarmáls - tungumál sem mun þróast þegar við byrjum að innleiða það í kóða og eitt sem byggist á einstökum einingum og íhlutum.
Verða skipulag agnostískt
Það kemur ekki á óvart að fyrir iðnað sem hefur í gegnum tíðina meðhöndlað vefinn eins og prentun, hafa skipulag með fasta breidd gegnsýrt margar þær vörur sem við framleiðum. Þegar við byrjum að hanna aðlögunarhæfan miðil er verið að skoða nýjar aðferðir sem gera okkur kleift að leysa vandamál og miðla hugmyndum um leið og viðurkennum fljótandi eðli miðilsins. Hér eru nokkur af mínum uppáhalds:
- Skýringarmyndir blaðsíðunnar: Þó að vírrammar geti oft falið í sér skipulag (og þannig gert ráð fyrir ákveðinni gerð af tækjum), fjarlægja lýsingar skýringarmynda þessa forsendu og í staðinn lýsa einstökum íhlutum, raðað í skjalið með tilliti til forgangs.
- Stílflísar: Þegar við miðlum hönnunarhugmyndum við viðskiptavini getum við lent í því að setja fram ‘málverk af vefsíðum’. Ef við erum ekki varkár munu viðskiptavinir með réttu biðja um að sjá hugtök sem sýna fram á hvernig hönnun mun líta út á öðrum tækjum líka. Þetta getur neytt okkur í ósjálfbærar aðstæður við að framleiða margar síður fyrir mörg tæki. Samantha Warren hefur hugsað um þetta vandamál og komið með stílflísar. Þetta situr einhvers staðar á milli stemningartöflu (en minna óljóst) og fullkomlega gerða töfra (en minna nákvæmar) og hjálpar okkur að miðla leturfræði, hnappastíl og meðferðum með masthead. Þeir hvetja einnig til þroskaðra umræðustigs við viðskiptavini okkar.
- Mobilify hönnunarleikur: Þessi æfing getur virkað mjög vel meðan á vinnusmiðjum stendur fyrir samvinnu. Í þessari æfingu skrifa allir niður á Post-it athugasemdir um þá þætti sem kunna að birtast á ákveðinni síðu. Þessir eru síðan fastir við vegginn eftir mikilvægi, eins og þeir birtust línulega gerðir í farsíma. Umræðan sem myndast gæti leitt til undarlegra ályktana. Til dæmis gætirðu gert þér grein fyrir að siglingar eru ekki mikilvægasti hlutinn á síðunni. Þetta gæti fylgt hönnuninni, þar sem sleppa hlekkur efst á síðunni krækir í siglingarnar í fótinum.
Auðvitað er enn pláss fyrir þau verkfæri sem við erum nú þegar að nota, en við hönnun vefsíðu í stórum dráttum verðum við að hafa í huga að útlit er ekki lengur þekkt.
Kóðun smám saman
Sem betur fer þurfum við ekki að hafa áhyggjur af sjónhönnuninni í dæminu sem við erum að vinna að þar sem mikil vinna hefur verið unnin fyrir okkur! Í staðinn getum við einbeitt okkur að því að kóða hönnun okkar á vefsíðu sem er móttækileg.
Enn eitt áður en við byrjum. Það er mikilvægt að muna grundvallarreglu miðilsins sem við erum að vinna með: alheims. Það þýðir að byggja ekki aðeins fyrir tæki á netinu í dag, heldur að tryggja samhæfni við þau í gær og á morgun. John Allsopp lýsti hvers vegna þessi meginregla skipti máli í færslu sinni næstu 6 milljarðar:
"Þessir næstu sex milljarðar eru börn á landsbyggðinni á Indlandi, Afríku, Kína þar sem aðgangur að völdum og netkerfi getur verið með hléum. Það er einhver á Súmötru við áratugs gamla Wintel kassa. Það er fólk sem talar hundruð mismunandi tungumála, með tugi mismunandi ritkerfi. Það er fólk sem er það fyrsta í fjölskyldunni sem getur lesið og skrifað. Það eru 20 prósent fólks um allan heim sem getur ekki lesið eða skrifað. Samt.’
Við getum rakið skilning okkar á vefnum með því að skoða mismunandi tísku (sem vantar betra orð) sem hafa náð tökum á starfsgrein okkar: vefstaðlar, aðgengi, lítið áberandi JavaScript ... allt eru afbrigði af sama þema: framsækin endurbót. Sama er að segja um móttækilega vefhönnun. Að byggja upp a sannarlega móttækileg vefsíða er að byggja upp síðu sem er ekki aðeins samhæfð afturábak heldur framtíðarvæn líka.
Kafa í álagningu
Allt í lagi, nóg af formálanum, það er kominn tími til að opna ritstjóra.Hönnuðurinn okkar hefur útvegað okkur skjáborðsmiðaða hönnun og verið nógu góður til að koma með dæmi um hvernig þetta gæti líka komið fram í þrengri útsýni.
Það gæti verið freistandi að kóða þetta sérstaklega, en ég ætla að leggja til aðra nálgun. Með því að setja aðskildu íhlutina - eða mynstur - sem mynda hönnunina á eina blaðsíðu, getum við búið til mynstrasafn. Þetta gerir okkur kleift að þróa íhluti utan ramma hvers blaðsíðuskipulags og mun gefa okkur eitthvað til að vísa til síðar til aðhvarfsprófana. Við skulum skoða upphafsálagningu í nokkrum mismunandi tækjum:
Skoðaðu merkt uppskriftarmynstur okkar
Jæja, ég verð fjandinn - við erum nú þegar með móttækilega vefsíðu! Innihald okkar er að laga sig að takmörkum hvers tækis, hvort sem það er flottur nýr iPad eða fargaður sími. Það virkar meira að segja í textavafra eins og Lynx.
Þökk sé undirliggjandi meginreglum alheimsins er vefurinn það móttækilegur sjálfgefið. Það er frábært, en það þýðir líka að allt sem við gerum við kóðann héðan í frá getur skaðað þessa aðlögunarhæfni.
Á morgun: Við munum stíga varlega til jarðar og byrja að beita fyrsta þætti móttækilegrar hönnunar: leturfræði og vökvakerfi.
