Góður móttækilegur vefhönnun, af eðli sínu, fer óséður fyrir þá sem neyta efni á netinu. Svo þegar einhver biður um nýjan vef, eru þeir oft alveg ókunnugt um hugtakið, þrátt fyrir að upplifa það daglega. Og enn er móttækilegur website hönnun nú viðurkennt sem venjulegt starf í öllum iðnaði.
Building viðbrögð vefsíður hafa breytt ferlum okkar, frá því að búa til mockups af heill síðum, að byggja upp bókasöfn af endurnýtanlegum íhlutum og skipulagi.
Skipulag er efni-ekið og stíll er vörumerki-ekið
Nýlega vorum við nálgast af núverandi viðskiptavini til að endurhönnun vefsíðunnar móttækilega. Við höfðum áður unnið með þeim með stíft foss. Að flytja til viðráðanlegu vinnuflæði, við tókst að faðma breytingu hvenær sem er í verkefninu.
Í gegnum ferlið héldu viðhorf heimspekinnar að skipulag er efni-ekið og stíll er vörumerki-ekið.
Specification skjöl vinna vel fyrir skráningu út alla virkni sem síða er skylt að hafa. En er það í raun það sem viðskiptavinurinn þarf? Það er mjög erfitt að visualize þessar aðgerðir í stað. Þannig er niðurstaðan sú að forskriftargögn breytast oft í uppblásna óskalista. Þetta hjálpar ekki viðskiptavininum, hönnuðum eða endanlegri vefsíðu.
Í staðinn fyrir forskriftargögn valiðum við að nota vírramma. Fyrsta skrefið í verkefninu fólst í því að búa til vír ramma fyrir hverja síðu. Þetta kann að hljóma eins og overkill, en vírrammarnar leiddu til snemma umræðu um innihald og eiginleika fyrir hverja síðu. Við komumst að því að aðgerðir sem við tölum aldrei áður voru bætt við, en margir voru fjarlægðir.
Wire-rammar gáfu okkur skýrt og skýrt framsetning á því hvaða efni og virkni ætti að vera forgangsraða á hverri síðu. Þessar vírrammar varð þá viðmiðunarpunktur í stað forskriftarskjals.
Helstu takeaway: framleiða vír ramma í stað forskrift skjöl áherslu allir á algerlega lögun og mikilvægi innihaldsins.
Endurskoðun vírramma gerir okkur kleift að búa til lista yfir allar algengu þættirnar. Á einum síðu verður tugi lítilla hluta á hverri síðu sem er mjög svipuð. Þessir þættir geta safnast saman í tæmandi lista sem verður notuð síðar.
Þetta stig hefur þrjá kosti:
Helstu takeaway: áætlanagerð um hvernig á að nálgast framhlið þróun verkefnis er mikilvægt að skapa viðhaldslegan, halla kóða stöð.
Mynstur bókasöfn eru safn sameiginlegra þátta sem notuð eru á vefsíðu. Með því að einbeita sér að þróun framan við byggingu íhluta sem eru ekki háð síðum, getum við dregið úr kóða kostnaði og bætt samræmi.
Með því að nota lista yfir íhluti sem við safnaðum á endurskoðunarstiginu getum við byggt upp Sass okkar í viðunandi safn af skrám.
Við höfum notað mynsturbókasöfn á nokkrum verkefnum en höfum alltaf átt í erfiðleikum með nafngiftarsamningum, sérstaklega möppuuppbyggingu: hvar seturðu stíl fyrir þennan tónlistarspilara, í hlutum eða í hluta?
Áður höfðum við notað hugtök eins og hluta og hluti til að skipuleggja Sass skrár okkar. Þó að þetta virðast eins og fullkomlega lögmætar nafngiftarsamþykktir, þá eru þau opin fyrir túlkun. Þegar það eru margar forritarar sem vinna að verkefnum, þannig að stofnun kóðunarstöðvarinnar, sem er opin fyrir túlkun, leiðir til óskipulags CSS.
BEM (Block, Element, Modifier), veitir okkur sameiginlegt samkomulag til að fylgja og skapar skilning á milli framhaldshönnuða. Gamla leiðin var skilin til einstakra forritara til að koma upp með nöfnum sem voru allt of háu stigi til að gleypa hvaða merkingu sem er. Sem betur fer vorum við heppin að sjá Brad Frost Talaðu um mynsturbibliotek hans á Upfront ráðstefna í Manchester. Pattern Lab lánar hugtökum frá efnafræði til að lýsa þeim þáttum sem mynda bókasafnið. Með því að nota atóm, sameindir og lífverur til að lýsa muninn á hlutum á síðu hjálparðu að útskýra hugtakið fyrir forritara sem eru nýir í verkefninu.
Atomic hönnun er fyrir notendaviðmót: http://t.co/eEZSYeK5VF Þú getur sótt um atomic hönnun til hvaða HÍ, eins og Instagram pic.twitter.com/BrztgtRoGU
- Brad Frost (@brad_frost) 10. júlí 2015
Í náttúrunni eru atóm lítið nafn (nema við kafa í kvark og rafeindir). Í þróun vefur eru atóminir grundvallarþættir HTML. Í öllum tilgangi gera þeir ekki mikið á eigin spýtur. Þetta eru fyrirsagnir, málsgreinar, inntak, hnappar, listar ... Þú færð hugmyndina.
Þetta eru næsta lag upp. Í efnafræði eru sameindir úr atómum og sama gildir um uppbyggingu CSS. Sameindir eru hluti á vefsvæðinu sem nota atóm til að mynda þau.
Gott dæmi um sameind er leitarreitur. Þetta innihalda 3 atóm: merki, inntak og hnappur. Sameindalagið byrjar að mynda nokkur atriði sem við getum notað á vefsíðunni. Það er mikilvægt að gera allar þessar sameindir stigstærð. Þeir ættu að vera hönnuð með þeirri hugmynd að þeir gætu verið notaðir hvar sem er á staðnum. Fullkomið markmið okkar að gera CSS eins sveigjanlegt og endurnýtanlegt og mögulegt er.
Eins og nafnið gefur til kynna eru lífverur hópar sameinda. Nokkur dæmi um þetta eru haus, fótur eða lista yfir vörur.
Ef við tökum dæmi um haus, þá myndi þetta innihalda lógó, leit og flakk. Þessir voru allir búnar til sem sameindir og sameinuð til að mynda header lífveru.
Þetta er þar sem líffræðileg hliðstæða endar. Eins og Brad segir, "komdu inn á tungumál sem gerir meira vit í viðskiptavinum og endanlegri framleiðsla" . Sniðmát er lím á vefsíðu. Þetta sameinar öll lífverurnar sem við höfum búið til í skipulagi sem gæti verið beitt á síðu á vefsíðunni.
Dæmi gæti verið bloggskrá. Þetta sniðmát myndi innihalda haus, fótur, lista yfir bloggatriði og skenkur. Sniðmát eru yfirleitt skipulögð og innihalda aðeins skipulag.
Lokaþátturinn er síður. Þetta er þar sem þú getur prófað sniðmát með raunverulegum gögnum. Síður eru sérstakar dæmi um sniðmát. Þessi hluti er mikilvægt vegna þess að það gerir okkur kleift að sjá hversu vel atóm, sameindir, lífverur og sniðmát hafa verið.
Það er óhjákvæmilegt að við að byggja upp vefsvæðið munu vissar aðstæður verða ungfrú. Klassískt dæmi er langa titla eða veisluþjónusta fyrir mismunandi gjaldmiðla og tungumál.
Helstu takeaway: Nafngiftir samninga mál. Lagsetning CSS skapar hreint kóða til að vinna frá því sem er eins lítið og mögulegt er.
Hönnun mynstur er erfitt. Þú getur ekki hannað einangrað mynstur, svo sem frétt, og búast við því að það passi við afganginn af síðunni. Leiðin við að byggja upp vefsíður og hvernig við hönnun þá eru mismunandi.
Hönnunin er líkleg til að breytast óháð því hvort við fáum skilaboð ... Innskráning varð óviðeigandi skref í því ferli sem aðeins þrýstingur beggja megin
Við notuðum Photoshop til að búa til mockups af vírrammunum með þessum stíll hluti á sínum stað. Þegar við vorum ánægðir með útlit og tilfinningu fyrir hönnunin sem við fluttum til að einangra hverja hluti. Þetta gerði okkur kleift að tryggja að hver hluti væri sveigjanlegur til að vinna hvar sem er á vefsíðunni.
Við vorum mjög meðvitaðir um að fá ekki skilti á hvaða hönnun sem er. Hönnun skilti skapar hindrun þar sem hönnuður líður á þrýsting til að búa til eitthvað sem verður settur í stein. Hugsanlegt er að hönnun muni breytast óháð því hvort við fáum að skrá þig eða ekki. Almennt erum við fús til að mæta öllum breytingum hvenær sem er á tímalínu verkefnisins. Skráningin varð óviðkomandi skref í því ferli sem aðeins setti þrýsting á báðum hliðum til skaðlegra samskipta.
Vitandi hvenær á að flytja frá Photoshop til kóða er mikilvægt. Þetta skref er miklu fyrr en við vorum vanir að tveimur ástæðum:
Í stað þess að eyða meiri tíma í Photoshop valiðum við að fjárfesta tímann í kóða. Ef við ættum að fullkomna eitthvað, þá ætti það að vera kóðinn, sá hluti sem raunverulega verður notaður og séð af öllum vefnotendum. Fyrir okkur var Photoshop tól til að búa til hönnunarsnið sem hægt væri að nota á vefsíðunni.
Hönnun er miklu meira um samvinnu allra á liðinu. Mockups voru enn mjög mikilvægur þáttur í því ferli og hjálpaði viðskiptavininum að sjá hvernig vefsvæðið myndi líta út. Ef við vorum öll ánægð með almenna stefnu hönnunarinnar, vildum við færa það til kóða. Við eyddum sjaldan tíma til baka og áfram að breyta Photoshop skjölum.
Lykilatriði: Photoshop er frábært tæki til að búa til hugmyndir um hönnun. Að flytja til kóða eins fljótt og auðið er er mikilvægt. Fullkomið það í kóða, ekki Photoshop.
Fegurð þessa vinnuflæðis er að það eru svo margir staðir til að endurskoða og bæta vefsíðuna.
Það er mikilvægt að hafa í huga að þetta eru lausar skref í verkefninu. Ef við þurfum eitthvað nýtt í verkefninu munum við almennt meðhöndla það sem sjálfstæðan mát hluti sem hægt er að sleppa inn á vefsíðuna og samþykkja hönnunarsnið svæðisins.
Hvert þessara skref býður upp á punkt þar sem við getum endurskoðað starf okkar hingað til. Það gerir einnig kleift að fá ferskt augað til að sjá hluti frá öðru sjónarhorni.
Á einhverjum þessum stigum gætum við komist að því að sum hlutar virka ekki eins og búist er við. Þetta er allt í lagi. Í raun er það gott. Að lenda í fátækum notagildi snemma er lykillinn að árangursríkri vefsíðu. Að fara aftur og vísa til þessara hluta vefsvæðisins mun gera verkefnið betra þegar það fer í beinni.
Key takeaway: Vertu ekki hræddur við að fara aftur í byrjun ef eitthvað þarf að bæta. Að ná þessum snemma mun gera verkefnið betra þegar það fer lifandi.
Við eyddum dögum saman til að tryggja að allir hlutar vefsíðunnar væru fullgildar. Við prófuð eins margar aðstæður og mögulegt er, til að tryggja að vafraupplifunin sé í samræmi.
Þegar gögnin eru á vefsíðunni getum við fullkomlega prófað vefsíðu. Það er oft of auðvelt að stilla verkefni án þess að prófa að fullu. Við getum athugað hraða, auðveldan siglingar og síðast en ekki síst kaupflæði.
Allir nefna Apple fyrir að vera fullkomnunarfræðingar en ég er viss um að fyrstu tilraunir þeirra væru langt frá fullkomnum. Það tekur tíma og vígslu að gera þær endanlegar úrbætur til að gefa okkur þær vörur sem við elskum í dag. Með því að nota tækjabúnaðinn okkar, sem felur í sér flestar vinsælustu tæki og vettvangi, gátum við tryggt að reynslan hafi verið bjartsýni á eins mörg nýjustu vettvangi og skjástærð eins og kostur er.
Að læra af hverju verkefni er mikilvægt svo að við getum stöðugt bætt við ferla sem leiða til betri vefsíður.
Í þessu verkefni sáu fæðingin á eigin mynsturbæklingi okkar sem hvetur samkvæmni milli verkefna. Þegar við vinnum í auglýsingastofu gætum við haft heilmikið af verkefnum sem eru í þróun á sama tíma. Hæfni fyrir alla að vinna á hvaða verkefni sem er, er mikilvægt.
Að búa til grunn sem við getum öll unnið að muni stuðla að því markmiði.
Frammistaða vefsíðunnar var aðeins talin í lok verkefnisins. Árangursrík viðbragðslegur website þarf að vera halla og hratt. Stórt úrval af tækjum og getu þeirra breytilegt frá glænýjum Mac tölvum í gamla smartphones. Þegar þú ert að byggja upp fjölmiðlunarríkan vef getur verið mjög erfitt að stjórna frammistöðu, sérstaklega þegar afturvirkt reynir að bæta það.
Á Upfront Conference í Manchester sáum við Yesenia Perez Cruz tala um að íhuga árangur á öllum stigum verkefnisins, þar á meðal hönnun. Í huga, þetta er eitthvað sem við ættum að hafa innleitt. Sem hópur margra hönnuða, forritara og framhaldshönnuða, sem hafa umsjón með heildarstærð og frammistöðu (einkum skynja árangur) ætti að hafa verið stærri forgang.
Allt á síðu hefur kostnað vegna frammistöðu. Forgangsatriði hvað er mikilvægt tryggir vefsíðuna er ekki aðeins hratt en aðgengilegt fyrir fleiri tæki. Á sumum eldri tækjum fannst okkur að vefsíðan hrundi ekki bara vafrann, heldur allt tækið. Reynt að flýta vefsíðunni afturvirkt þýddi að við gætum ekki búið til vefsíðu eins hratt og það gæti verið.
Næst þegar við munum ganga úr skugga um að árangur sé innbyrðis í hverju stigi ferlisins, þá er það ekki hugsun.