Najboljše prakse za postopno izboljšanje spletnega oblikovanja

Oblikovanje spletnih strani je izjemno zapleteno s številnimi hitro spreminjajočimi se deli. Cilj skupnosti za spletno oblikovanje je zmanjšati kompleksnost, in zmanjšanje možnosti napak v vsaki fazi procesa ustvarjanja.

Progressive enhancement je takšna ideja v spletnem oblikovanju, ki si prizadeva zmanjšanje napak in zagotavljajo dosledno uporabniško izkušnjo povsod. Koncept ima svojo stran Wikipedije, ki jo razlaga kot metodo popolnoma dostopne vsebine, prikazovanje izboljšanih funkcij samo, če jih podpira brskalnik.

To je enostavno razumeti postopno izboljšanje, vendar ga ni mogoče enostavno uporabiti neposredno pri oblikovanju. Nekaj ​​bi rad pokril najboljše prakse za postopno izboljšanje projektov v resničnem svetu do pomagajo oblikovalcem, da bolj trajnostno razmišljajo o svojem delovnem procesu.

1. Razumevanje naprednega izboljšanja

Teorija progresivnega izboljšanja priporoča začnite s preprosto spletno stranjo ki deluje v vseh brskalnikih dostopna vsakemu obiskovalcu. Nato dodajte funkcije, kadar je to mogoče.

To je ravno nasprotno od elegantne degradacije, ki privzeto vključuje vse funkcije, nato pa se razgradi, ko nekaj ne deluje.

Napredna izboljšava je boljša za celotno uporabniško izkušnjo, saj je v bistvu naloži samo potrebne elemente. Vsak spletni brskalnik lahko podpira besedilo (običajno slike). Brez kakršnega koli CSS-a bodo te informacije videti voljne in brez okusa, vendar bodo dostopne.

To Seznam Apart članek trdi, da je progresivna izboljšava najprej vsebino z stilov in dinamičnih komponent. Vsebino v semantičnem HTML-ju je treba dostaviti pred vsem drugim.

Napredne CSS in JavaScript, ki jih uporabljamo danes, imajo široko podporo, če pa želimo slediti načelom progresivnega izboljševanja, jih moramo obravnavati kot luksuzne predmete..

Tukaj je splošni pregled glavnih značilnosti progresivnega izboljševanja, ki ga morate upoštevati:

• Semantična oznaka za vso vsebino
• Uporabniki " nastavitve brskalnika spoštovati
• Vsebina in osnovne funkcije bi morale biti vsem uporabnikom
• Nevsiljiv JavaScript je naložen samo v okoljih, ki ga podpirajo

Tehnološke omejitve v razvoju front-end določajo predvsem združljivost brskalnikov. Progresivna izboljšava vas vrne k osnovam, ki razmišljajo o tem, kako najenostavnejša spletna stran lahko izgleda. Od tam lahko načrt za bolj napredne funkcije, podobne lastnosti CSS3.

Kaj pa brskalniki, ki ne podpirajo modernega CSS3? Tukaj pridejo v poštev mesta, kot sem lahko uporabljam. Odločite se, katere značilnosti je vredno izvajati in na podlagi katerih temeljijo presoje na ciljno skupino vašega spletnega mesta.

2. Preživljanje v slogovnih predlogih

Večina brskalnikov danes podpira vse osnovne lastnosti, ki jih potrebujete. Toda napredni CSS3 je še vedno problem za starejše uporabnike, in napredna izboljšava ponuja rešitev.

Namesto da bi iskali nadomestne metode, da bi ohranili te nove funkcije, se najprej posvetite pravilne razporeditvene strukture.

Napišite semantični HTML in oznako CSS, ki deluje v čim več aktivnih brskalnikih (podpora za starejše brskalnike, kot je podpora za IE5, ni potrebna).

Vzemite na primer ta JSFiddle, ki uporablja plavajoče z dvema stranskima trakama (.fiksno) in območje z vsebnostjo tekočin (.tekočine). Če izbrišete vse CSS in znova zaženete kodo, boste opazili, da se vse skupaj lepo ujema s prvim stolpcem, nato pa z drugim in nazadnje zadnjim.

Nekateri razvijalci bi raje imeli stolpec z vsebino (.tekočine) se najprej pojavijo v HTML-ju. Na tem mestu pride do napredne izboljšave in alternativne rešitve CSS postanejo izvedljive.

Dva glavna cilja HTML-ja sta:

• Popolnoma semantično in veljavno Koda
• A dosledne izkušnje za vsakogar

Najbolj preprost način za doseganje teh ciljev je začeti iz nič in delo, kot bi to priporočili večini zagovornikov naprednega napredovanja.

Če vaša koda izgleda dobro, če je CSS onemogočen in omogočen, potem ponuja razumno rešitev za vse.

Prav tako je vredno razmisliti na kateri točki spustite podporo za nekaj. Microsoft je že zmanjšal veliko podporo za IE6, zato uporabniki, ki uporabljajo ta brskalnik, morda niso vredni svojega časa.

Toda še vedno obstaja eno veliko vprašanje: če brskalnik ne podpira mojega modernega CSS, kaj naj naredim?

Vi preprosto napišite kodo, ki deluje brez to, in sodobni CSS obravnavajo kot progresivno izboljšavo. To je lepota progresivne metodologije.

Ne potrebujete vrzeli, ker ste v bistvu predpostavljamo, da nič ne podpira privzeto.

Postopki napredne izboljšave se nanašajo na to, da je spletno mesto uporabno tudi v primerih, ko nekaj ni podprto - če pa je podprto, toliko bolje.

Morate razmisliti kako vsebina dejansko teče brez CSS. Na primer, ko onemogočim CSS na spletnem mestu prenosa, vsebina še vedno poteka organsko po strani.

Da, grdo je in zdi se mi, da smo izgubili dvajset let napredka ... vendar deluje.

3. Ravnanje z JavaScriptom

Omeniti je treba, da je vsaka težava z JavaScriptom, na katero lahko naletite med razvojnim procesom, zapletena in edinstvena. Ko gradite nov projekt s progresivnim izboljšanjem, morate našteti vse potrebne funkcije, ki temeljijo na JS, in razmisliti, kako bi lahko deluje brez JavaScripta.

To bo zahtevalo veliko spletnih raziskav za iskanje veljavnih rešitev. Aaron Gustafson je napisal odlično objavo v blogu z rešitvami za različne težave, kot je zamenjava Ajaxa z meta osvežitvijo za vsebino znotraj iframea.

Tudi, ko ustvarjate zavihke JavaScript, je to dobra ideja uporabite sidrne povezave s pravimi vrednostmi ID. Tako lahko, ko je JavaScript onemogočen, zavihke še vedno vidne in dostopne s sidrno vrednostjo. Aaron je na seznamu A list napisal še en del, ki pokriva bolj splošen pregled o tem, kako bi morali razmišljati o teh problemih.

Tu je še en primer. Recimo, da imate povezavo, ki dinamično nalaga vsebino. The href vrednost je prazna, ker se vse prek Javascripta naloži z metodo preventDefault ().

Namesto tega bi bilo pametno določiti href lastnine pokažite na drugo stran kjer se vsebina lahko naloži naravno, vendar obiskovalec to stran vidi samo, če je JavaScript onemogočen.

Napredna izboljšava je več kot JavaScript, vendar z razvojem spleta, ki vsako leto napreduje, ni dvoma, da ima JavaScript pomembno vlogo.

Delujte pod predpostavko, da vse je bilo onemogočeno, in od tam povečati. To lahko vključuje težave z vdelanimi pripomočki, ki so izven vašega nadzora

Razmislite tudi o funkcijah JavaScripta, ki pomanjkanje celovite podpore brskalniku. To vključuje API za pridobivanje, API API, sintakso funkcije puščice ali celo brskalnike brez podpore za moderne knjižnice, kot je jQuery.

Vsaka funkcija zahteva individualno testiranje z individualno rešitvijo.

Bistvo postopno povečanega JavaScripta je gradite vsebino, ki deluje brez skriptov. To lahko povzroči osnovno uporabniško izkušnjo, vendar je to v redu, dokler je spletno mesto uporabno in je vsebina dostopna.

Če želite opraviti testiranje v živo, lahko običajno onemogočite CSS in JavaScript v vseh večjih brskalnikih da vidite, kako deluje vaša spletna stran. Prav tako je vredno razmisliti o uporabi razširitev kot je A-Tester za skladnost WCAG.

JavaScript s postopnim izboljševanjem je velika tema. Tukaj je nekaj objav, ki vam bodo pomagale kopati globlje:

• Napredna izboljšava! = “Brez JavaScripta”
• Interakcija je ključna: napredna izboljšava in JavaScript
• Napredna izboljšava: gre za vsebino
• Kako uporabljati Progressive Enhancement Ko JavaScript izgleda kot zahteva

Kjer se progresivno izboljšanje zmanjša

Čeprav je progresivna izboljšava odlična ideja za skoraj vsako vrsto sodobne spletne strani, preprosto lahko ne veljajo za projekte, ki si prizadevajo za omejitev spletne tehnologije.

Ta metodologija na primer ni dobra rešitev za spletne aplikacije, ki delujejo samo na klicih Ajaxa. Je to dobra izbira za dostopnost? Ne, seveda ne. Toda če bi bilo tako, večina vaj Codropov ne bi niti obstajala. Moraš se spomnite ciljne publike.

Poslovna spletna stran verjetno nima občinstva, ki bi skrbelo za nove nepremičninske lastnosti CSS3, toda spletni razvijalci so lahko popolna občinstvo za takšne napredne funkcije.

Progresivna izboljšava ne zadostuje samo za spletne aplikacije preprosto ne skrbi vrnitev v preteklost. Zavedam se, da so te spletne aplikacije malo in daleč, vendar razvijalci radi napredujejo, v nekaterih primerih pa je lahko smiselno nadaljevati z novimi tehnologijami, ki zapuščajo zaostale osebe.

Sem zagovornik progresivnega izboljševanja (ali celo elegantne degradacije, vaše izbire) za splošne spletne projekte. Toda tudi jaz se zavedam, da ni popolna rešitev za vse. Pravzaprav ni popolne rešitve. Vse se ujema s potrebami občinstva in cilji projekta.

Nadaljnje branje

Če nenehno gradite spletne projekte, razmislite o postopnem izboljšanju dela. To je veliko lažje, kot se zdi na prvi pogled, in vse se začne z osnovami. Večina tem, ki obkrožajo progresivno izboljšanje, zahtevajo samo prakso in testiranje. Preizkusite predloge iz tega članka in si oglejte, kaj je najbolje za vaš potek dela.

Če želite izvedeti več o napredni izboljšavi, si oglejte te povezane objave:

• Razumevanje naprednega izboljšanja
• Progresivna krepitev: kaj je in kako jo uporabljati?
• Odziv za odvisnost od JavaScripta: progresivno izboljšanje mitov