Móttækileg hönnun er tiltölulega ný orð í vefhönnun. Það var aðeins myntslátt fyrir þremur árum síðan í maí 2010, þegar vefhönnuður Ethan Marcotte notaði hugtakið í grein hans fyrir lista í sundur.

Í dag, það er jafnvel lítill umræða að fara um hvað varðar móttækileg hönnun er hér til að vera eða hvort það er bara glampi í pönnu. Aðeins tími mun segja, en nú er ljóst að móttækilegur hönnun reynir að gera notendaviðmótin eins þægileg og mögulegt er.

Móttækileg hönnun er hugmyndafræði vefhönnunar sem leggur áherslu á að búa til síður sem gefa notendum upplifaðri skoðun. Þetta felur í sér aðgerðir eins og áreynslulaust siglingar og lestur, og að minnsta kosti að breyta vafranum, fletta og panning. Allt þetta fer fram á ýmsum tækjum, frá skjáborðum til snjallsíma.

Þar sem þessi vefhönnun nálgun er enn í fledgling ríki, getur þú ekki verið alveg skýr um hvað móttækilegur hönnun snýst um. Er það meira um óaðfinnanlega að birta efni á mörgum kerfum eða er það aðallega að hjálpa fyrirtækjum að byggja upp fleiri aðlaðandi síður til að auka sölu þeirra með betri notendavara?

Mashable hefur þegar farið út á útlim og kallað 2013 árið móttækilegur hönnun. Þó að það sést ennþá, eru nokkrar grundvallarþættir móttækilegrar hönnun staðlar sem munu aldrei fara í burtu. Hér eru mikilvægustu móttækilegu hönnunaratriði til að kynnast þér.

Það er munur á móttækilegri hönnun og farsímahönnun

Þú vilt fyrirgefið að hugsa að móttækilegur hönnun og hreyfanlegur hönnun séu eins og þau - en þau eru ekki. Viss, móttækileg hönnun skapar vefsíður þannig að þau svari bæði stærð vafrans og eru hreyfanlegur-vingjarnlegur, en móttækilegur hönnun er í raun heildarhönnun. Vandamálið með því að vísa til þessa vefhönnunaraðferðar sem farsímahönnun er sú að það er í eðli sínu takmörkuð, sem felur í sér slíka þjónustu.

Áhrifaríkustu móttækilegu vefsíðurnar má skoða eins og þau voru ætluð til að vera, á ýmsum framförum. Þetta felur í sér allt frá venjulegu 1024 × 768 punktum til 1920 × 1080 skjám og allt á milli. Síður eins og þessar eru einnig glæsilegir á töflum (bæði sjónhimnu og venjulegu sýna), sem og á snjallsímum. Ef vefhönnuður lítur á móttækilegan hönnun eingöngu með samhengi farsíma, þá er hann hugsanlega vantar út á víðtækari notendavandann.

Á sama tíma er farsíma mjög hentugur upphafspunktur fyrir alla móttækilegu hönnunarsamráð. Það hefur verið normurinn að byrja með farsímakerfi og þá auka þessa hönnun til viðbótar stærðir sem móttækilegur vefsíða er þróaður. Margir hönnuðir telja að það sé einfaldara að vaxa myndefni frekar en að lágmarka þær.

Gæði og myndastærð eru forgangsröðun

Ef það er regla sem vefhönnuðir ættu að fylgja, þá er það að myndgæði er allt miklu meira mikilvægt en raunverulegur fjöldi mynda. Ástæðan er sú að lítil gæði mynd lítur einfaldlega ekki á aðlaðandi í hvaða stærð sem er. Tíminn sem það tekur á síðuna til að hlaða mynd er næstum jafn mikilvægt og stærðin. Hreyfanlegur notandi mun sammála þessu vegna þess að þeir hafa takmarkaðan bandbreidd sem á að eiga við.

Hvað er vefur hönnuður að gera? Einfaldlega náðu góðu jafnvægi á milli hleðslutíma og gæða. Þetta felur í sér stigstærðarmynd með CSS hæðar- og breiddareiginleika, stýringu án þess að hlaða í fullri stærð og hagræða myndum fyrir internetið. Fyrir upphleðslu er mjög ráðlagt að skera myndir og vista hverja mynd með minnsta stærð möguleg, svo lengi sem það heldur áfram skörpum sjónrænum gæðum.

Athuga Heimasíða Sony USA . Athugaðu hvernig allar myndirnar eru frábærar skarpar í gæðum, sama hvaða stærð þeir eru. Þegar þú hefur heimsótt síðuna eða hreinsað heimasíðuna skaltu einnig huga hversu hratt myndirnar eru hlaðið. Þú þarft ekki að bíða meira en sekúndu fyrir allt að koma í fókus mjög mikið.

Hönnuðir hafa margar ákvarðanir þegar þeir taka myndir í móttækilegum stillingum. Þeir geta aðeins notað nokkrar myndir; draga úr notkun á myndum innan farsímabundinna kerfa; leyfa myndum að gríma sig í farsímanum; eða nýta ýmsar skrár stærðir og útgáfur. Þessi valkostur mun virka á árangursríkan hátt, þótt sumir forritarar séu í veg fyrir að fela myndir, því að notandinn verður samt að hlaða myndunum þrátt fyrir að þær séu ósýnilegar.

Við skulum tala um móttækileg gerð

Gerð ætti ekki að vera ein stærð passar allt. Ein tegund af leturgerð sem lítur vel á augað á skjáborðinu þínu getur verið horrid á snjallsímanum þínum. Typography verður að fylgja sömu reglum og öðrum þáttum móttækilegrar hönnun.

Mikilvægasti þáttur móttækilegur leturfræði er línan lengd. Til að tryggja slétt læsileika ætti gerð að hagræða á grundvelli breiddar skjásins. Þumalputtareglan, fyrir skrifborð vefsíður, er að á milli 50 og 75 stafir línu er tilvalin; fyrir farsíma, bara 35-50 stafir eru tilvalin.

Gerð verður einnig að vera auðvelt að lesa lóðrétt. Margir síður nota línuna sem er allt að 140 prósent af punktarstærð skjásins fyrir stærri textabrot. Ef skjárinn er minni ætti meira pláss að vera bætt við.

Jafnvel sérstakt leturgerð sem er notað er þýðingarmikill. Fínt leturgerðir og nýjungar letur hafa getu til að líta sjónrænt aðlaðandi á stærri skjái, en þeir eru erfitt að lesa ef punktastærðin er lítil. Þessi tegund af letur ætti að hafa mikið pláss á milli þeirra. Þegar þú vinnur með smærri stærðum er auðveldasta að nýta venjulegan sans serif stíl og jafnvel högg.

Á Vefsvæði Hardwooled Web Design , þú getur séð mikið af þessum meginreglum að fylgja og gera góða svörun. Athugaðu hvernig lína lengd textans á skjáborði - en að meðaltali meiri en tilvalin tilmæli 50 til 75 stafir - samanstendur af letri sem er hreint og auðvelt að lesa. Að auki er lína rúmið einnig stærra en punktar stærð letursins. Á farsímum gerir svörun vefsvæðisins enn betra: Á iPhone 5 skjánum var fjöldi stafa á línu um það bil 67, sem er aðeins hluti af hugsjóninni á milli 35 og 50 stafir.

Ekki gleyma um leiðsögn

Þegar það kemur að notendavandanum - sem er ein mikilvægasta þættir sem vefhönnuðir ættu að hugsa um - siglingar eru í toppi forgangsröðunar. Leiðsögn þarf að vera slétt og skilvirk til að tryggja þægilegan notendaupplifun.

Árangursrík móttækileg hönnun verður að tryggja þetta með því að fylgjast sérstaklega með tiltekinni breidd tiltekins vafra. Vefsvæði sem notar móttækilegan hönnun vel mun leggja fram siglingar sínar á mismunandi sviðum, allt háð breidd vafrans. Ein besta dæmi um þetta er Food Sense Síða flakk.

Það væri mistök fyrir móttækilegri hönnun að mæla svæðisleiðsögnina í stærri hlutföllum á tækjum með stærri skjái.

The takeaway af móttækilegri hönnun

Svo þegar þú heyrir vefhönnuðum að tala um móttækilegan hönnun, muntu vita að það snýst ekki bara um að gera vefsíðu líta vel út og keyra vel á minni, farsíma skjái. Þú munt vita að þessi hönnun nálgun byggist á þeirri grundvallarreglu að gera vefsíður af öllum stærðum bjóða upp á ákjósanlegasta reynsluna fyrir notandann - sama hvað þeir nota til að skoða síðuna.

Móttækileg hönnun er enn tiltölulega nýtt hugtak, að minnsta kosti flestir sem bara skoða vefsíður á internetinu. Þess vegna er svo margir ennþá ekki sammála um hvað gerir móttækilega hönnun ... móttækileg hönnun. Er það um að sjá allt almennilega á farsímaskjánum? Er það bara um álagstíma og hágæða myndir sem vilja gleðja augað? Er það um hreint hönnun og auðvelt að lesa leturgerðir?

Það er allt þetta og fleira. Þeir eru bara grundvallaratriði þessa vefhönnunaraðferðar, en móttækilegur hönnun er enn að þróast og breytast, svo líkurnar eru góðar að viðbótarþættir verði einnig talin. Í lokin snýst það um að auka reynslu notenda, því að enginn vill takast á við vefsíðu sem er hægur, óskýr, erfitt að lesa, ringulreið eða erfitt að sigla.

Er móttækilegur hönnun bara stefna? Hverjir eru lykilatriði við móttækilegri hönnun? Láttu okkur vita af hugsunum þínum í athugasemdunum.

Valin mynd / smámynd, í gegnum s58y