Móttækileg vefhönnun hefur orðið grípa til allra tíma til að gera vefsíðuna þína vel í lágmarki.
Smartphones gjörbylta farsímavefinn og töflur eru að kasta öðrum skiptilyklum í gírin með vaxandi vinsældum sínum. Með allt sem talið er gæti verið að vefsvæði í dag sé upplifað í litlum upplausnartólum, miðlungsupplausnartafla eða háskerpu skrifborði eða fartölvu. Þegar þú kastar sjónhimnuskjám í blanda er fjöldi hugsanlegra skjástærðarmanna svimandi. Fullkomlega, vefsvæðið þitt mun líta út og virka tignarlega á öllum ofangreindum, í hvaða upplausn sem er.
Móttækileg vefhönnun í sjálfu sér er ferlið við að búa til vefvinnu á mjög litlum skjáum, mjög stórum skjáum og við hvaða upplausn þar á milli.
Á undanförnum árum hefur iðnaðurinn sameiginlega þróað skáldsögu af algengum bestu starfsvenjum. Mörg þessara starfshætti leggur áherslu á að uppfæra vefsíður sem eru ætlaðar til háskerpu niður í lægri stærð. Aðrir byrja á farsímanum og vinna upp á stærri sýnapartana, fínstilla eftir þörfum. Öll þessi venjur geta almennt verið flokkuð sem annaðhvort móttækileg eða aðlögunarhæf skipulag.
Móttækileg skipulag virkar almennt betur en aðlögunarskipulag, en í sumum tilfellum (flókin vefforrit til dæmis) gæti aðlögunaraðferðin þjónað notendum betur. Hvort heldur sem er, er markmiðið að gera vefsíðuna þína alltaf að líta betur út í viðkomandi upplausn.
Flestir kjósa að nota fjölmiðlafyrirspurnir til að gera þetta, eins og Þeir eru rokk solid nema þú þurfir stuðning við IE8 eða hér að neðan. Fyrir þá sem enn hafa áhorfendur í IE6 - 8 þó, Scott Jehl hefur búið til JavaScript polypyfill heitir Respond.js Það mun gera hlutina virka.
Áður hafði margar vefhönnuðir haft lágmarks samskipti við hönnuði þar til handoff. Nú þurfa hönnuðir og verktaki að vinna saman með bæði hönnun og þróun í því skyni að allt gengi vel. Frá notendagreiningar til þess sem hægt er eða ekki er hægt að endurskipuleggja þegar breytingarnar eru sýndarhönnuðir og verktaki eru nær en nokkru sinni fyrr, ef ekki sama manneskjan. Ef þú ert að leita að innblástur um hvað móttækileg eða aðlögunarhæf skipulag lítur út, MediaQueri.es er vinsælt vefhönnunar gallerí sem sýnir fjórar skoðunarferðir á vefsíðu.
Þegar hugmyndin um móttækileg vefhönnun byrjaði fyrst að ná jörðu, einkenndust aðlögunarhæfar aðferðir í smá stund. Það er auðveldara að skipta yfir í að hanna og þróa fyrir þessar skipulag, þótt þeir krefjast meiri vinnu en móttækilegu samhengi þeirra. Þetta er líka leiðin sem margir taka þegar þeir setja upp nýjan vef til að vera hreyfanlegur vingjarnlegur. Vegna eðli aðlögunarbúnaðarins gefur þeim miklu meiri stjórn á hönnun vefsins. Þú þarft aðeins að hanna fyrir tilteknar skoðunarferðir, og vafrar sýna aðeins hæsta sem passar í breidd þess. Þessar skipulag eru þær sem "smella" þegar þú stillir þegar þú breyttir vafranum þínum. Reyndar ef þú breytir gluggum þínum til að vera minni en 1024 punktar, muntu sjá þessa skyndilega breytingu sem ég er að tala um þar sem skipulag þessa vefsíðu er aðlagast til að einbeita sér að miðlungsupplausn viewport.
Þegar unnið er að aðlögunaraðferðaraðferð er verkið nokkuð auðvelt. Áður en móttækilegur webdesign varð hlutur, gerði þú einfaldlega hannað eina skipulag og þróaði það síðan. Nú verður þú að hanna fyrir marga skoðunarferðir og þróa þau. Almennt er auðveldara að byrja á myndavélum með litlum upplausn og vinna þig upp. Ef þú byrjar með sjónarhornum með mikilli upplausn og farið niður, gæti það endað smá ... samningur. Og þegar þú nærð farsíma, ringulreið.
Fjöldi sjónvarpsþáttanna sem þú hanna fyrir er algjörlega undir þér komið og verktaki, útbúið bardagaáætlun sem byggir á notendum þínum. Ef núverandi síða greiningar sýna notendum að mestu með því að nota lítil og meðalstór upplausn viewports, áætlun fyrir þá. Þú vilt að minnsta kosti þrjú: Einn fyrir lítil upplausn (smartphones), miðlungs upplausn (portfarar) og einn fyrir skjámyndir með háum upplausn (skjáborð og fartölvur). Helst er áætlanagerð fyrir sex staðalinn, með hár og lág upplausnarsnið fyrir hverja þrjá sjónvarpsþáttana sem taldar eru upp hér að ofan. Hins vegar hafa of margir fleiri en það mun gera þróun og viðhald of mikið til að takast á við, svo vertu varkár.
Þróun aðlögunarbúnaðar er í raun mjög einfalt. Miðað við að þú hafir unnið með hönnuði (eða er hönnuður) frá farangri, er það bara eins og að þróa hefðbundna vefsíðu. Þú byrjar með því að þróa síðuna í farsímaútgáfu með litlum upplausn. Þegar þú færð það gert munum við nota fjölmiðlafyrirspurnir til að auka útlitið fyrir sjónarhornir með meiri upplausn. Hér fyrir neðan eru litlar, miðlungs og háar upplausnarmyndir með fjölmiðlum:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Þetta er þar sem "snap" kemur frá í aðlagandi nálgun. Þar sem við erum að miða á margar algengar sjónarhornsupplausnir, getur farið frá einum til annars þegar stærð á gluggann breytist, til þess að skipulag geti hoppað. Eins og ég nefndi áður, aðlögunarhæfni hönnun og þróun er aðeins mjög gagnlegt til að endurnýja eða fyrir flókna vefforrit. Hönnun og þróun fyrir þessa mörgu skipulag fyrir sjálfstæða skoðunarferðir er miklu meira þræta ef það er ekki þörf.
Frá og með í dag, er móttækilegur hönnun og þróun sú de facto nálgun að nota. Þó að það býður upp á minna stjórn á útliti miðað við aðlögunaraðferð, þá er það miklu minna að vinna að því að innleiða og viðhalda eins og þú hefur tæknilega eina skipulag. Það er líka sérsniðið fyrir vefsíðuna líka, og þetta er lykillinn að selja. Þú verður að geta búið til eigin brotalínur miðað við hvenær hönnunin brýtur eða lítur ekki út eins og ætlað er.
Móttækilegur skipulag inniheldur einnig vökvaútlit. Áður en móttækilegur vefur hönnuðist, vökvakerfi voru vinsælar - skipulag með því að nota prósentur fyrir breidd. Þó að þeir vissu vissulega vel í flestum tilfellum, það var áður en við höfðum smartphones og töflur. Nú eru flestar vökvaútlit aukin með fjölmiðlafyrirspurnum á mjög lágu og mjög háum upplausn. Annars gæti þú endað með mjög samningur eða ótrúlega stórum skipulagi.
Þó að þú hafir mjög einföld leiðarvísir til að fylgja með aðlögunarhæfri hönnun, er móttækileg hönnun ekki svo skýr skera. Það er upphitað umræða að hanna í vafranum er besta leiðin til að fara um það-hanna og þróa á sama tíma. Þar sem þú ert í raun að fara að taka tillit til allrar skoðunarports þegar þú ert að hanna, þá er meiri vinna að hönnunarsíðunni. Helst viljum við halda sjónarhornum í huga, en ekki hönnun fyrir neina sérstaka. Ef mögulegt er skaltu reyna að mæta á miðjum vettvangi; Leggðu áherslu á sjónarhorn í miðjuupplausn en hafðu í huga að skipulagið verður að laga fyrir lægri og hærri upplausn seinna.
Það er afar mikilvægt að nota núverandi notandagreiningar ef þú hefur það. Ef vefsvæðið þitt hefur nú þegar greiningu sem sýnir að áhorfendur þínir les fyrst og fremst frá sjónarhornum með litla upplausn, hanna með áherslu á þau. Markaðu áhorfendur þína , jafnvel þótt það þýðir að hunsa nokkrar af bestu starfsvenjum þarna úti. Að lokum er vefsvæðið þitt að þjóna þeim, ekki fólkið sem samanstendur af þessum "bestu" venjum.
Þegar hönnunarstigið er lokið er þróun þar sem raunverulegur gaman hefst. Eins og áður hefur komið fram, ef þú hefur greiningarupplýsingar um dæmigerða áhorfendur þínar skaltu byrja þar. Þegar þú hefur fengið útlitið þitt þróað, notarðu fjölmiðlafyrirspurnir til að gera það móttækilegt. Í stað þess að skilgreina settar skoðunarportar þótt þú setjir í stað handvirkt vafrann þangað til skipulagið brýtur. Þegar það gerist, þá er það breiddarbrettur þinn - bætið við fjölmiðlafyrirspurn til að laga brotið í hönnun og halda áfram að búa til stærri stærð. Helst verður þú að gera þetta úr háupplausnartæki svo þú getir séð alla sjónarhorn. Þegar þú hefur tryggt að þú sért með stuðning fyrir lítil og stór upplausn, þá skaltu halda áfram að prófa.
Sjaldan getur þú lent í vefsíðu sem notar sérsniðna lausn, svo sem {$lang_domain} . Almennt talar meirihluti vefsins í annaðhvort móttækilegur eða aðlögunarhæfur hópar eins og lýst er hér að ofan, en stundum verða menn skapandi og búa til eigin lausn. {$lang_domain} gerir það með því að byrja með venjulegu lágmarki, miðlungs og háum punktum og síðan viðbót eftir þörfum milli þess þegar skipulagið brýtur. Að auki er uppsetningin einnig vökvi í náttúrunni upp í hámark upplausn. Með þessu í huga, gerðu skapandi og byggðu eitthvað sem brýtur í bága við norm!
Því miður, það er í raun ekki góð lausn á vafra sem prófar þessar skipanir ennþá. Besta leiðin til að prófa er að gera það handvirkt: hleðsla blaðsíðunnar á símanum, spjaldtölvunni, fartölvu og öllu öðru í kringum þig. Þú getur líka notað skoðunarpósti í vafranum þínum ef það styður slíkan viðbót. Ripple Emulator er framlengingu sem ég nota í króm til að prófa nokkrar myndavélar með lágupplausn. Þótt það sé vissulega óþægilegt að prófa tæki með höndunum handvirkt, gefur það nákvæmari sýn á virkni vefsvæðisins þíns. HÍ sem lítur vel út í keppinaut, getur í raun verið mjög slæmt á raunverulegu tæki.
Eins mikið og þessi grein er, er þetta einfaldlega grunnur að því er varðar skipulag gerða. Það er mikið af upplýsingum um móttækilegar vefhönnun aðferðir ekki innifalinn í þessari grein; Hagræðing UI-þættir og leturfræði, móttækilegar myndir og fjölmiðlar, pixlahlutföll fyrir tæki og margt fleira er ekki útskýrt hér. Hins vegar eru margar heimildir fyrir slíkri þekkingu, í miklu meiri upplýsingar þéttum formum. Þar sem hugmyndin um móttækileg vefhönnun kom í kring, höfum við stuðlað að afar miklum víðtækri þekkingu um efnið. Ég vona að með því að útskýra mismuninn á skipulagstegundum hérna, muntu geta betur séð um hugmyndina um móttækilegan vef ... án þess að glata niður kanínuleiðinu.
Samfélagið skapar stöðugt nýjar aðferðir og skapar skapandi lausnir á vandamálum sem við erum bara að byrja að lenda í. Svo á meðan það er mikið fé af upplýsingum sem eru tiltækar um móttækilegan vefhönnun þarna úti, er það hugtak ennþá í fæðingu hennar. Þó að bestu starfsvenjur og algengar tilfelli séu auðveldar í samræmi við það, að vera skapandi og paving, þá er eigin lausn þín alltaf hvatt. Ef þú hefur einhverjar ábendingar eða uppástungur fyrir þá sem við komumst bara inn, eða efla þekkingu okkar á móttækilegri vefhönnun og þróun, neyðu umfjöllun hér að neðan!
Valin mynd / smámynd, notar móttækileg mynd um Shutterstock.