Najlepšie postupy pre progresívne vylepšenie v webovom dizajne

Vybavenie stavebných webových stránok je neuveriteľne zložité s mnohými rýchlo sa meniacimi časťami. Cieľom komunity webového dizajnu je zmiernenie zložitosti, a znížiť možnosť vzniku chýb v každej fáze procesu tvorby.

Progresívne vylepšenie je taká myšlienka vo web dizajne, ktorej cieľom je znížiť chyby a poskytovať konzistentnú používateľskú skúsenosť cez palubu. Koncept má vlastnú stránku Wikipedia, ktorá ju vysvetľuje ako metódu plne prístupný obsah, vylepšovanie funkcií iba vtedy, ak ich podporuje prehliadač.

Je to ľahké pochopiť progresívne vylepšenie, ale nie je také jednoduché ho priamo aplikovať na projektovú prácu. Rád by som niektoré pokryla osvedčené postupy pre postupné zdokonaľovanie projektov v reálnom svete na pomôcť návrhárom premýšľať viac o ich pracovnom toku.

1. Pochopenie progresívneho vylepšenia

Teória progresívneho zlepšovania odporúča začnite jednoduchou webovou stránkou ktorý funguje vo všetkých prehliadačoch, takže je prístupné pre každého návštevníka. Potom pridajte funkcie vždy, keď je to možné.

Je to opak opodstatnenej degradácie, ktorá zahŕňa všetky funkcie v predvolenom nastavení, a potom sa degraduje, keď niečo nefunguje.

Progresívne vylepšenie je lepšie pre celkovú skúsenosť používateľa, pretože v jeho jadre načíta iba potrebné prvky. Každý webový prehliadač môže podporovať text (a zvyčajne obrázky). Bez akejkoľvek CSS tieto informácie budú vyzerať bezvýrazne a bez chuti, ale budú dostupné.

toto Zoznam apart článok tvrdí, že progresívne zlepšenie je Obsah-first s štýly a dynamické komponenty pridané neskôr. Obsah v sémantickom HTML by mal byť dodaný pred akýmkoľvek iným.

Pokročilé služby CSS a JavaScript, ktoré dnes používame, sú široko podporované, ale ak chceme dodržiavať zásady progresívneho zlepšovania, mali by sa považovať za luxus.

Tu je všeobecné opis hlavných funkcií progresívneho zdokonaľovania, ktoré by ste mali brať do úvahy:

• Sémantická značka pre celý obsah
• užívatelia preferencie prehliadača je potrebné rešpektovať
• Obsah a základné funkcie by mali byť k dispozícii všetkým používateľom
• Nenápadný JavaScript sa načíta iba v prostrediach, ktoré ju podporujú

Technologické obmedzenia v rozvoji front-end sú určené predovšetkým kompatibilitou prehliadača. Postupné zdokonaľovanie vás vráti k základom premýšľaním o tom, ako holé kosti najjednoduchšie webové stránky môže vyzerať. Odtiaľ môžete plán pre pokročilejšie funkcie, ako vlastnosti CSS3.

Čo však s prehliadačmi, ktoré nepodporujú moderný CSS3? Toto je miesto, kde sa môžu hrať stránky ako Môžem použiť. Mali by ste sa rozhodnúť, ktoré funkcie majú byť vykonané a robiť úsudky na cieľovej skupine vašich webových stránok.

2. Životnosť v štýlových kartách

Väčšina prehliadačov dnes podporuje všetky základné vlastnosti, ktoré potrebujete. ale pokročilý CSS3 je stále problém pre starších používateľov, a progresívne vylepšenie ponúka riešenie.

Namiesto hľadania záložných metód na udržanie týchto nových funkcií sa najprv zaoberajte správne štruktúry usporiadania.

Napíšte sémantický značkovanie HTML a CSS, ktoré funguje v čo najväčšom počte aktívnych prehliadačov (podpora starých prehliadačov, ako je podpora IE5, nie je potrebná).

Vezmite napríklad tento JSFiddle, ktorý používa plaváky s dvoma bočnými lištami (.fixné) a obsah tekutiny (.tekutina). Ak vymažete všetky CSS a zopakujete kód, všimnete si, že všetko sa stáva pekne s prvým stĺpcom, potom s druhým a nakoniec s posledným.

Niektorí vývojári by radšej mali mať stĺpec s obsahom (.tekutina) sa objavia ako prvé v jazyku HTML. Toto je miesto, kde sa premieta progresívne vylepšenie a alternatívne riešenia CSS sa stávajú životaschopnými.

Dva hlavné ciele vášho HTML sú nasledovné:

• plne sémantický a platný kód
• konzistentné skúsenosti pre každého

Najjednoduchší spôsob dosiahnutia týchto cieľov je začať od ničoho a vypracovať, ako to odporúčajú najprogresívnejšie advokáti.

Ak váš kód vyzerá dobre s CSS zakázaným aj povoleným, potom ponúka všetkým primerané riešenie.

Je tiež potrebné zvážiť v ktorom momente klesnete podporu pre niečo. Spoločnosť Microsoft už zrušila veľkú podporu pre IE6, takže používatelia s týmto prehliadačom nemusia mať čas.

Ale je tu ešte jedna veľká otázka: ak prehliadač nepodporuje môj moderný CSS, čo mám robiť?

Jednoducho napíšte kód, ktorý funguje bez to, a považujú moderné CSS za progresívne zlepšenie. Toto je krása progresívnej metodiky zlepšovania.

Nepotrebujete zálohovanie, pretože ste v podstate za predpokladu, že nič nie je štandardne podporované.

Progresívne metódy vylepšenia sa týkajú toho, aby sa stránka použila aj v prípadoch, keď niečo nie je podporované - ale ak je podporované, tým lepšie.

Musíte zvážiť ako skutočne tok obsahu bez CSS. Napríklad, keď zakážim CSS na webových stránkach spoločnosti Transmit, obsah stále preteká organickou stránkou.

Áno, je to škaredé, a áno, zdá sa, že sme stratili dvadsať rokov pokroku ... ale to funguje.

3. Zaobchádzanie s jazykom JavaScript

Stojí za zmienku, že každá otázka jazyka JavaScript, s ktorou sa môžete počas vývoja dostať, je zložitá a jedinečná. Pri vytváraní nového projektu s progresívnym vylepšením by ste mali uviesť všetky požadované funkcie založené na JS a zvážiť, ako môžu fungovať bez JavaScript.

To si bude vyžadovať veľa on-line výskumu na nájdenie platných riešení. Aaron Gustafson napísal skvelý blogový príspevok s riešeniami na rôzne problémy, ako je nahradenie Ajaxu meta refresh pre obsah v rámci iframe.

Taktiež, keď vytvárate karty JavaScript, je to dobrý nápad používajte ukotvenie s skutočnými hodnotami ID. Týmto spôsobom, keď je vypnutý jazyk JavaScript, môžete stále zobraziť karty a prístupné podľa hodnoty kotvy. Aaron napísal ďalší zoznam na A List Apart, ktorý obsahuje všeobecnejší prehľad o tom, ako by ste mali tieto problémy premýšľať.

Tu je ďalší príklad. Povedzme, že máte odkaz, ktorý dynamicky načíta obsah. href hodnota je prázdna, pretože všetko sa načíta prostredníctvom jazyka JavaScript pomocou metódy preventDefault ().

Namiesto toho by bolo rozumné nastaviť href majetok do prejdite na inú stránku kde sa obsah mohol prirodzene načítať, ale návštevník iba vidí túto stránku, keď je vypnutý JavaScript.

Progresívne vylepšenie je o viac ako JavaScript, ale s rozvíjaním webových stránok, ktoré sa každoročne rozširujú, nie je pochýb o tom, že JavaScript hrá významnú úlohu.

Operujte za predpokladu, že všetko bolo zakázané, a rozširovať odtiaľ. Môže to zahŕňať problémy so zabudovanými miniaplikáciami, ktoré sú mimo vašej kontroly

Tiež premýšľať o funkciách JavaScript, ktoré chýba komplexná podpora prehliadača. Zahŕňa API načítania, API push, syntax funkcií šípok alebo dokonca prehliadače bez podpory pre moderné knižnice, ako je jQuery.

Každá funkcia vyžaduje individuálne testovanie s individuálnym riešením.

Podstatou progresívne vylepšeného jazyka JavaScript je vytvárať obsah, ktorý funguje bez akéhokoľvek skriptovania. To môže viesť k rudimentárnemu používateľskému zážitku, ale to je v poriadku, ak je webová stránka použiteľná a obsah je prístupný.

Ak chcete robiť živé testovanie, môžete zvyčajne Zakázať CSS a JavaScript v každom hlavnom prehliadači aby ste zistili, ako funguje vaša webová stránka. Je tiež potrebné zvážiť použitie rozšírení ako A-Tester pre splnenie požiadaviek WCAG.

JavaScript s progresívnym rozšírením je obrovská téma. Tu sú niektoré príspevky, ktoré vám pomôžu prehĺbiť:

• Progresívne vylepšenie! “Bez JavaScript”
• Interakcia je kľúčom: progresívna vylepšenie a JavaScript
• Progresívne vylepšenie: ide o obsah
• Ako používať progresívne vylepšenie, keď sa zdá, že JavaScript je ako požiadavka

Kde klesá progresívna vylepšenie

Aj keď je progresívne vylepšenie skvelým nápadom pre takmer každý typ modernej webovej stránky, jednoducho to môže sa neuplatňuje na projekty, ktorých cieľom je presun limitov webových technológií.

Napríklad, táto metodika nie je dobrým riešením pre webové aplikácie, ktoré fungujú výlučne na Ajaxových hovoroch. Je to dobrá voľba pre prístupnosť? Nie, samozrejme, že nie. Ale keby to bol taký prípad, väčšina tutoriálov programu Codrops by ani neexistovala. Musíš nezabudnite na cieľové publikum.

Obchodná webová stránka pravdepodobne nemá publikum, ktoré sa stará o nové očarujúce vlastnosti CSS3, ale vývojári webu môžu byť dokonalým publikom pre takéto pokročilé funkcie.

Progresívne vylepšenia sú pre webové aplikácie len nedostatočné jednoducho sa nestará o návrat v čase. Uvedomujem si, že tieto webové aplikácie sú málo a ďaleko, ale vývojári milujú pokrok a v niektorých prípadoch môže byť rozumné pokračovať v nových technológiách,.

Som zástancom progresívneho zdokonaľovania (alebo dokonca pôvabného zhoršenia, podľa vášho výberu) pre všeobecné webové projekty. Ale tiež si uvedomujem, že to nie je dokonalé riešenie pre všetko. V skutočnosti neexistuje žiadne dokonalé riešenie. Všetko sa zrýchľuje na potreby publika a ciele projektu.

Ďalšie čítanie

Ak neustále vytvárate webové projekty, mali by ste zvážiť uplatnenie progresívneho vylepšenia vo vašom pracovnom procese. Je to oveľa jednoduchšie, ako sa zdá na prvý pohľad, a to všetko začína základmi. Väčšina tém, ktoré sa týkajú progresívneho zdokonaľovania, vyžaduje len prax a testovanie. Vyskúšajte návrhy z tohto článku a zistite, čo najlepšie funguje pre váš pracovný postup.

Ak sa chcete dozvedieť viac o progresívnom vylepšení, prečítajte si tieto súvisiace príspevky:

• Pochopenie progresívneho vylepšenia
• Postupné vylepšenie: čo to je, a ako to používať?
• JavaScript závislosť závislosť: Mýtus-Busting progresívne vylepšenie