Móttækilegur vefur hönnun hefur orðið nálægt alls staðar nálægur buzzword á vefnum. Prófaðu að leita að #rwd á Twitter til að finna efni sem innihalda jafna hluta og Twitter. Þetta er sameiginlegur áfangi í gjalddaga nýrrar hugmyndar. Ég man þegar AJAX var allt reiði; Hugtakið var ekið í jörðu. Nú, fáir tala um AJAX en bókasöfn eins og jQuery eru að fullu tekið í verkflæði verktaki.

Þetta virðist spegla hvað er að gerast með móttækilegri vefhönnun. Hugtakið er alls staðar. Vinur minn er í tímaritútgáfu, hún fór á ráðstefnu undanfarið og ritstjóri vel þekkt nýtt tímarit var að tala um komandi þróun og nefndur móttækilegur vefhönnun. Ritstjórar mega ekki vera vefur sérfræðingar, en þeir þekkja buzzwords.

Eins og móttækilegur vefur hönnun náði gufu, þá leiðum við að byggja upp vefsíður breytt. Þar sem hugtakið færist frá buzzword inn í sameiginlega hluti af hverju vefhönnun verkefnisins, þurfa leiðin sem við vinnum sem fagfólki að breyta. Með þessu í huga, þurfum við að setja nýjar reglur um hvernig við vinnum.

Regla 1: Ekki hætta við "squishy"

Þegar einhver segir þér að "kíkja á þetta móttækilega vefsvæði", hvað er það fyrsta sem þú gerir? Þú reiknar líklega gluggann til að sjá hvernig skipulagið breytist. Ég er líklega ekki að fara að opna hana í símanum mínum og spjaldtölvum og byrja að breyta stefnumörkun eða byrja að keyra próf á síðunni. Ég mæli vafrann og fara áfram með daginn minn. Þetta er reynsla okkar sem hönnuðir og verktaki, en ekki eins og notendur. Þegar ég heimsækir síðuna sem notandi hefur ég ekki þolinmæði. Mér er alveg sama ef svæðið snýst fallega; Ég vil bara það sem ég vil.

"Squishy" er línuleg stigstærð vefsvæðis. Er vefsvæðið farið frá lítið til fitu? Í stað þess að línuleg stigstærð ætti móttækilegur vefhönnun að einbeita sér að því að koma á fót kerfisstefnu og fylla smám saman þar af leiðandi, byggt á getu. Ímyndaðu þér síðuna sem þurfti að byggja fyrir örlítið farsíma sem keyrir IE7 á EDGE-neti. Það ætti að vera algerlega staður þinn og síðan að kvarða upp byggt á skjástærð og getu.

Regla 2: Ekki leita að auðveldu leið út

Móttækilegur vefhönnun er flókinn. Það er bara hvernig það er. Ég vildi að það væri eitthvað sem ég gæti sagt þér að gera það auðvelt, en það er ekki. Flestir hafa brugðist við móttækilegri vefhönnun með því að bæta eitthvað við vinnuflæði þeirra, hvort sem það er nýtt skila eða bara fara að verktaki og spyrja hvort hönnun þeirra muni virka með skilvirkum hætti.

Ég er með vin sem vinnur á móttækilegri síðu fyrir viðskiptavin. Hún er að byggja upp síðuna í Photoshop í skrifborðsstærð. Eftir nokkrar mockups á sumum síðum, vildi hún sýna hvað síða myndi líta út eins og í töflu og snjallsíma, svo hún gerði það líka. Eftir að hafa kynnt viðskiptavininum fékk hún skapandi klip. Það eru um 50 PSD skrár fyrir þessa síðu á þessum tímapunkti. Það tekur hana nokkra daga að endurskoða skipulag.

Reynt að bæta við nýjum hönnun einum mun leiða í tímafrekt og ósamræmi ferli. Ein besta leiðin til að leysa þetta er með því að mótmæla vírframleiðslum þínum og kynna þær fyrir viðskiptavininn. Þetta gefur þér afhendingu til að tala beint við uppsetningu svæðisins án þess að tala um hönnunina samtímis. Foundation með ZURB er frábært tæki til að byggja upp frumgerðir fljótlega.

Einfaldlega að bæta frumgerð í vinnuafl þitt mun ekki vera nóg þó. Til að ná árangri í að byggja upp móttækilegar síður þarftu að stilla það sem færir okkur í næstu reglu.

Regla 3: Faðma breytingu

Þegar ég byrjaði fyrst að byggja upp vefsíður notaði ég tvær verkfæri, Photoshop og GoLive. Núna hef ég að minnsta kosti sex forrit sem ég þarf algerlega til að byggja upp síðuna. Ég nota ennþá Photoshop til að búa til grafík þætti en ég hanna aðallega í vafranum með Sublime Text 2 og ég nota forritara Safari til að skoða frumefni á IOS 6. Ég nota einnig Codekit til að safna saman fyrirfram vinnslu CSS og Terminal fyrir útgáfu stjórna í Git.

Móttækileg vefhönnun þýðir einnig að breyta því hvernig þú hönnir. Í stað þess að setja út heilan síðu í Photoshop, nota ég það Samantha Warren er flísar að móta sjónræn hönnun. Með því að hanna sjónræn vörumerki og tengiviðmið utan við raunverulegan skipulag getur þú sent hönnun beint og sameinað hana með útliti frá frumgerðinni til að búa til móttækilegan vef í vafranum.

CSS forvinnsluforrit eru einnig mikil hjálp í öllum móttækilegum vinnustraumum. Til að setja það einfaldlega, geta preprocessors verið notaðir til að untangle sumir af the fylgikvilla af the staður byggja og vellíðan mikið af endurtekningu arf að vinna í CSS. Ég kýs persónulega SCSS, en LESS er betra val fyrir suma þar sem það hefur lægri aðgangshindrun og hefur betri skjöl.

Regla 4: Mundu rætur þínar

[Vefurinn] ætti að vera aðgengileg frá hvers konar vélbúnaði sem getur tengst við internetið: kyrrstæður eða farsíma, lítil skjár eða stór. - Tim Berners-Lee

HTML og CSS eru eðlilega móttækileg. Frá upphafi HTML var ætlunin að vera nógu sveigjanleg til að vinna á hvaða vélbúnað sem er með nettengingu. Það var ekki fyrr en við sem hönnuðir og verktaki flutti til fastra skipana að þetta breyst. Þegar við leitumst að því að setja fastar víddir á vefsíður dróðum við vefinn á tölvur.

Yfirlit

Móttækilegur vefur er sá sem útskýrir hvað þú átt að segja frá því hvernig þú segir það. Taktu til dæmis nýleg hreyfing NPR í API-ekið innihaldsmódel. Með því að flytja í forritaskil til að veita efni hefur NPR tekist að stjórna safninu af forritum og vefsvæðum á samræmdan hátt. Það eina sem breytist er kynningarlagið.

Þetta er það sem móttækilegur vefur ætti að vera allt um. Átta sig á því sem þú þarft að segja og láta hvernig þú segir að það sé ekið af því. Hönnunin snýst um að takast á við þörf á þann hátt sem er sjónrænt ánægjulegt, en einnig það virkar til að mæta þörfum notandans.

Þetta er það sem móttækilegur vefur snýst um, notandinn - að búa til vefsíður sem virka fyrir fólkið sem notar þau, en þeir fá aðgang að efniinu. Að búa til síður sem geta endurvirkt sig fyrir litla skjái er bara upphafið.

Hefur þú tekið á móti móttækilegri vefhönnun enn? Hvaða reglur fyrir móttækilegri hönnun viltu bæta við? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, stærðarmynd um Shutterstock.