Í mörg ár hafa vefhönnuðir notið tignarlegra niðurstaðna til að ganga úr skugga um að gestir í eldri vöfrum geti að minnsta kosti séð efni á vefsíðum sínum, jafnvel þótt þeir sjái ekki nákvæmlega hvernig hönnuður ætlaði.

Graceful niðurbrot leyfa hönnuðum hönnun fyrir nýjustu og bestu vafra án þess að alienating þeim sem nota eldri útgáfur vafra.

Og bara vegna þess að þeir sem eru með eldri vöfrum, sem oft eru með minna en ákjósanlegan notendavara, hindraðu ekki hönnuðir frá því að setja áherslu sína á nýjustu tækni og tækni, en það er að rökræða að þeir sem nota eldri vafra voru annað hvort notaðir við það eða ætti bara að uppfæra.

Progressive enhancement gefur okkur betri möguleika. Frekar en að einbeita sér að tækni og stuðningi vafra, leggur áherslu á efni á PE.

Eins og flestir hönnuðir myndu vissulega sammála, er efni mikilvægasti hluti af nánast öllum vefverkefnum. En mikið af hönnuðum skilur ekki fullkomlega framsækið aukning, hvernig það virkar og hvers vegna það er betra líkan en tignarlegt niðurbrot.

Lestu áfram um svör við þessum spurningum og upplýsingum um hvernig á að nota framsækið aukning á næsta vefhönnun verkefnis.

Hver ávinningur af framsæknum aukahlutum?

Mörg hönnuðir telja framsækin aukning bætir einungis þeim notendum sem nota gamaldags vafra en aðrir notendur njóta góðs af því. Farsímar eru líklegastir til að nýta fullan árangur af framsæknum aukahlutum. Ástæðurnar fyrir þessu eru tvöfalt. Í fyrsta lagi geta farsímavafrar, sem styðja ekki CSS eða JavaScript, ennþá birt innihald vefsvæðis þíns. Þó að flestir nútíma snjallsímar viti að minnsta kosti einn af þeim, þá eru ekki allir vafrar fyrir undirstöðu farsímar.

Önnur leiðin sem farsímanotendur njóta góðs af eru að vefsvæði sem eru byggð með framsæknum aukahlutum geta auðveldlega fært í farsímaútgáfu. Eftir allt saman mun grunn HTML virka óháð CSS lagskiptum ofan á það. Svo þarf að búa til sérsniðið stíllark fyrir farsíma vafra, en þarfnast ekki mikið af aukaverkunum.

Skjálesarar hafa einnig miklu auðveldari tíma ef grunn HTML er vel uppbyggt og merkingartækni. Þetta gerir síðuna þína miklu aðgengilegri fyrir þá sem ráða skjálesara. Leitarvélar geta auðveldara að skanna vel sniðinn HTML en illa kóðaðar síður, sem geta þýtt miklu betri leitarvél staðsetningar fyrir síðuna þína.

Önnur ávinningur af framsækinni aukningu

Fyrir utan strax ávinninginn af betri notendavandanum eru síður byggðar með framsæknum aukahlutum almennt auðveldara að viðhalda en aðrar síður.

Vegna þess að grundvallar innihald og virkni er haldið aðskilið frá sjónrænum þáttum síðunnar, ætti að gera breytingar á útliti vefsvæðisins ekki einu sinni áhrif á hvernig vefsvæðið virkar eða efnið inniheldur það. Endurtaka síðuna þína er svo miklu auðveldara vegna þessa. Allt sem þú þarft að gera er að breyta CSS skrám.

Og hreinskilnislega ættum við ekki að sjást yfir ávinninginn af vefsvæðinu sem er sýnilegur í flestum vöfrum þarna úti.

Þó að allir munu ekki fá sömu reynslu, þá gæti sú staðreynd að einhver sem notar óákveðinn eða úreltan vafra ennþá skoðað efni vefsvæðisins þíns geta leitt til fleiri gesti eða viðskiptavina. Síður sem taka við nálgun sem hefst með framsæknum aukahlutum þarf ekki að gera neitt viðbótarstarf til að gera þetta mögulegt.

Byggja frá innri út

Progressive enhancement er ekki einblína á vafra samhæfni á sama hátt tignarlegt niðurbrot gerir. Í staðinn leggur það fyrst áherslu á efnið, þá á framsetningu þess efnis, og síðan á hvaða forskriftarþarfir. Þannig, án tillits til tækisins eða vafrans sem gestur notar, geta þeir séð efni þitt án nokkurra mála.

Progressive enhancement getur einnig haft ávinning fyrir aðgengi og jafnvel leitarvél hagræðingu. Með því að byrja með vel skipulagt, merkingartækni HTML, verður þú að veita góðan grunn til að byggja upp hönnun vefsvæðis þíns. Og þetta grundvallar HTML er auðvelt að túlka af skjám lesendum og leitarvél köngulær.

Settu inn efni fyrst

Í hvert skipti sem þú ert að byrja á nýju vefsíðuverkefni ættir þú fyrst að einbeita þér að innihaldsefnum. Með því að búa til vel skipulögð, merkingartækni HTML sem grunn á vefsíðunni þinni, hefurðu auðveldara með kynningu á hönnun þinni.

Vel hugsað HTML hefur þann kost að þú þurfir ekki að kynna kynningarlag til að vera vit. Það þýðir að skjálesarar, leitarvél köngulær, og þeir sem eru á grunnflugum geta skoðað efni þitt án þess að trufla sniðmát fyrir sniðið.

Þú getur séð hér að ofan hvernig MSNBC heldur öllu innihaldi sínum í u.þ.b. sömu röð, jafnvel án CSS. Þessi síða er fullkomlega nothæf, jafnvel án kynningarlagsins.

Þó að uppbygging vefsvæðis sé háð efni tiltekins vefsvæðis, þá eru nokkrar leiðbeiningar sem þú ættir að nota fyrir grunn vefsvæði.

Byrjaðu með hausnum, þá aðalleiðsögnin, fylgt eftir með innihaldi. Eftir innihald þitt verður þú að setja frekari viðbótarupplýsingar um skenkur eða tengla og síðan upplýsingar um fótinn þinn.

Þannig birtast auðkennandi upplýsingar fyrir síðuna þína fyrst og síðan með flakki (ef einhver vill fara beint á annan síðu, eins og tengiliðinn þinn eða um síðuna), þá kemst það beint í efnið sem er líklegt hvað flestir eru á síðuna þína fyrir í fyrsta sæti. Breyttu þessu líkani eftir þörfum fyrir vefsvæðið þitt, en hafðu alltaf í huga nákvæmlega hvað er að mestu áhuga þinnar á gestunum þínum og settu það eins nálægt toppnum og hægt er.

Gakktu úr skugga um að allir virkni á síðuna þína sé möguleg í þessu grunnlagi. Það þýðir að eyðublöð og forrit ættu að vera nothæfar með bara forskriftarþarfir HTML og framreiðslumaður. Þó að líklegt sé að virkni sé ekki eins vel kynnt eins og þú vilt eða eins og notendavænn, ætti það að vera nothæft í lágmarki.

Kynningin er Næst

Þegar HTML og grundvallarvirkni þín hefur verið stillt þarftu að snúa til kynningarþátta. Mikill meirihluti vafra, þar á meðal margir farsímavafrar, styðja CSS (þó ekki öll þau styðja alla þætti CSS, sérstaklega CSS3). Kynningarnúmerið ætti að efla innihaldið. Það ætti að auðvelda að skoða og nota og bæta reynslu notenda.

Að einhverju leyti hér geturðu haft fleiri en eitt lag af CSS aukahluti. Fyrst ætti að einbeita sér að undirstöðu stílum sem eru viðurkennd af nánast öllum nútíma vafra. Útlit þitt, leturfræði og litasamsetning ættu öll að vera með í þessu lagi ásamt öðrum stílfræðilegum valkostum.

Þá skaltu bæta við öðru lagi ofan á það sem nýtur háþróaða eiginleika sem ekki er hægt að styðja við alla vafra þarna úti en mun bæta við notendavandanum fyrir þá sem nota vafra sem fela í sér stuðning.

JavaScript ætti að vera síðasta

Stundum virðist það eins og JavaScript sé notað í nánast öllum nýjum vefsvæðum sem eru búnar til. JavaScript getur stórlega lagt sitt af mörkum við notagildi og notendaupplifun á vefsíðu eða vefur app.

Ajax hefur gjörbylta hvernig margar síður vinna og hefur gert mikla mun á því sem við gerum núna á netinu. En vefsvæðið þitt eða appin ætti að virka án JS. Það ætti alltaf að vera forskriftarorð fyrir HTML eða framreiðslumaður, sérstaklega þegar við erum að tala um almennar vefsíður frekar en vefforrit.

Gakktu úr skugga um að vefsvæðið þitt sé nothæft án JavaScript. Þó að flestir notendur hafi JS virkt í vafranum sínum þá eru enn dæmi þar sem JavaScript er óæskilegt. Ekki sérhver hreyfanlegur vafri þarna úti hefur góða stuðning við JavaScript. Það er oft ekki aðgengilegt fyrir skjálesendur. Og það eru nokkrir aðrir þarna úti sem enn hafa ekki JavaScript virkt í vafra þeirra.

Eins og sjá má á skjámyndunum hér fyrir neðan, þá er engin aðgerð tapað milli JavaScript-virkt útgáfu af Alfred app vefsíðunni og sá sem hefur JavaScript slökkt. Eini raunverulegur munurinn er sá að skilmálar og skilyrði eru festir neðst á síðunni frekar en að opna í modal glugga þegar smellt er á tengilinn. En í báðum tilvikum eru þau tengd og að fullu læsileg.

Hér er fullkomlega hagnýtur útgáfa af the staður, með modal gluggann.

Hér er útgáfa með JavaScript óvirkt, með skilmálunum sem birtast rétt fyrir ofan fótinn. Það er ennþá tengt frá sama stað í innihaldi.

Framkvæmd framsækinna aukahluta

Við höfum talað um PE á kenningarstigi hér að ofan. En við skulum komast inn í hagnýta þætti við framkvæmd hennar á vefsíðuverkefni. The fyrstur hlutur til gera er reikna út upplýsinga arkitektúr fyrir síðuna þína.

Horfðu á innihald sem er tiltækt og hvernig það ætti að vera skipulagt. Búðu til nokkrar vísbendingar um hvernig þú vilt sýna innihald, staðsetningu mismunandi þátta osfrv. Forgangsraða þeim á þessum tímapunkti, með því sem ætti að birtast næst efst á kóðanum (mikilvægustu þættirnir) og hvað getur farið niður niður.

Þessar upplýsingar arkitektúr skref er mikilvægt með framsækið aukning. Þegar þú veist hvað þarf að fara þar, getur þú byrjað erfðaskrá. Gakktu úr skugga um að þú setjir HTML kóða þinn í réttri röð, í samræmi við það sem skiptir mestu máli. Þetta er ekki endilega að fara saman fullkomlega með þeirri röð sem hlutirnir birtast á vefsíðunni þinni sem lokið er, en það mun líklega ekki vera of langt frá (haus efst, efni í miðju, fæti neðst).

Gakktu úr skugga um að HTML sem þú ert að kóða hér er merkingartækni. Notaðu rétt

,
,
tags, osfrv., sem og rétt að nefna deilurnar þar sem innihaldið birtist. Þetta gerir það ekki aðeins aðgengilegt, heldur einnig að viðhalda kóðanum þínum og kóðun CSS þinn miklu auðveldara.
Þú þarft einnig að kóðast í hvaða virkni sem er á þessum tímapunkti með því að nota forskriftir framreiðslumaður. Þó að lokasíðan þín gæti notað Ajax fyrir aðalstarfsemi, þá er það enn mikilvægt að taka öryggisafrit af netþjónum, bara í tilfelli.
Þegar grunn HTML er lokið verður þú að flytja til kynningarlagsins. Fara um þetta að miklu leyti eins og þú myndir hönnun hvers viðbótarverkefnis. En vertu viss um að þegar þú færð að í raun að kóða CSS að þú haldi hugmyndinni að ekki muni hver CSS eign virka í öllum vafra. Gakktu úr skugga um að jafnvel þótt sumar valsmenn þínir virka ekki mun heildar kynningin þín verða óbreytt.
Svolítið tignarlegt niðurbrot gæti verið viðeigandi fyrir suma af CSS þínum, fyrir þá tilvikum þegar þú vilt virkilega að nota ákveðna tækni sem er ekki mikið studd. Það er ekkert athugavert við að nota það sértækt, í sérstökum tilvikum. En markmiðið er að reiða sig á góða, staðla-undirstaða kóðun og merkingartækni til að gera tignarleg niðurbrot óþarfa.
Það hefur verið einhver umræða um hvort notkun margra stiknablöðva fyrir framsækið aukning sé góð hugmynd. Aðgreina mismunandi þætti kynningar þinnar (skipulag, leturfræði, lit osfrv., Eins og mismunandi stílstafir fyrir hluti eins og prenta eða farsímaútlit) geta skilið, sérstaklega ef stíllinn þinn er langur eða flókinn.
Aðgreina stíllblöð gerir það auðveldara að finna tiltekna hluti og geta gert það bæði auðveldara og flóknara til að viðhalda vefsvæðinu. Eftir allt saman, ef þú vilt bara breyta lit, er auðveldara að opna litarstílinn þinn og finna allar tilvik þess litar og vita að þú hefur ekki saknað neitt. En við skulum segja að þú viljir breyta lit og letri á tiltekinni tegund af frumefni á síðunni þinni (eins og allar H1, eða hliðarbendilinn þinn). Þú þarft að opna margar stílblöð til að gera breytingarnar. Hvort sem þú notar marga CSS skrár eða ekki kemur niður meira að eigin vali en nokkuð annað.
Þegar CSS þín er allt dulmáli og allt hefur verið prófað, þá er kominn tími til að bæta við hvaða forskriftarþarfir viðskiptavinarins. Á þessum tímapunkti ætti vefsvæðið þitt að vinna með eða án JavaScript. En að bæta JS getur bætt verulega reynslu notenda og ánægju. Þegar þú hefur bætt við öllum nauðsynlegum forskriftir, vertu viss um að prófa síðuna aftur með því að handritið slökkti, bara til að ganga úr skugga um að allt virkar enn á viðunandi hátt.
Sannfæra viðskiptavini þína
Þegar þú vinnur á eigin spýtur, eru persónulegar vefsíðuverkefni, framsækin aukahlutur eitthvað sem þú getur framkvæmt án vandræða. Þegar við takast á við viðskiptavini getur það þó orðið svolítið erfiður. A einhver fjöldi af viðskiptavinum er enn fastur á þeirri hugmynd að vefsvæði þeirra þarf að birtast nákvæmlega það sama í öllum vafra sem þeir hafa notað. Alltaf.
Útskýrið ávinninginn af framsæknum aukahlutum fyrir viðskiptavini þína. Segðu þeim að það sé hraðari og ódýrara fyrir þá að hafa þig að hanna síðuna með framsæknum aukahlutum í huga og að gestir þeirra líklega muni ekki hugsa hvort heldur sem er, svo lengi sem innihaldið er í boði.
Ef þeir standast ennþá, segðu þeim að þú þarft að stilla tilvitnun þína í samræmi við það til að bæta fyrir aukakóðunartímann og fyrirhöfnina sem þarf.
Í mörgum tilvikum, þegar viðskiptavinur sér að framsækið aukahlutur muni spara þeim peninga án skaðlegra áhrifa fyrir gesti sína, þá eru þeir meira en fúsir til að hanna síðuna sína með þeim hætti.
Framfarir í framhaldsskóla
Ég er viss um að það eru nokkrir meðal þín sem lesa þessa grein og hugsa: "En þetta er hvernig ég hanna vefsíður engu að síður!" Margir hönnuðir þarna úti hönnuðu vefsíður sínar í kringum efnið og ganga úr skugga um að hvert lag sé hagnýtt áður en það er bætt við öðru lag.
HTML þeirra er vel skipulögð, CSS þeirra virkar sem heild eining en lítur enn vel út, jafnvel þó að ein eða tveir þættir virka ekki rétt, og jafnvel án þess að skrifa fyrir viðskiptavini, virkar allt enn.
Sumir hönnuðir hafa náttúrulega tekið framsækið aukningarsnið á vefhönnun. Fyrir þá hönnuði virðist þessi grein eins og gömul hattur.
En fyrir þá sem eru þarna úti sem taka gagnstæða nálgun, annaðhvort með tignarlegu niðurbroti eða bara að hanna fyrir lægsta sameiginlega nefnara og ekki trufla með háþróaðri tækni, íhuga framfarandi aukning fyrir næsta verkefni.

Skrifað eingöngu fyrir WDD eftir Cameron Chapman .
Heldurðu sjálfkrafa vefsvæðum með framsæknum aukahlutum í huga? Eða viltu frekar taka graceful niðurbrot nálgun? Vinsamlegast taktu aðferðir þínar í athugasemdum!

hönnun notagildi hvernig á að framsækin aukning niðurbrot

A Complete Guide til Progressive Enhancement