Cele mai bune practici pentru îmbunătățirea progresivă în Web Design

Amenajarea site-urilor de construcție este incredibil de complexă, cu multe părți în schimbare rapidă. Scopul comunității de design web este de a reduce complexitatea, și reduce potențialul de eroare în fiecare etapă a procesului de creare.

Îmbunătățire progresivă este o astfel de idee în designul web care are ca scop reducerea erorilor și asigură o experiență consistentă a utilizatorului peste granita. Conceptul are o pagină proprie Wikipedia care o explică ca pe o metodă de conținut complet accesibil, oferind caracteristici îmbunătățite numai atunci când sunt acceptate de browser.

Este ușor de înțeles o îmbunătățire progresivă, dar nu este atât de ușor de aplicat direct la lucrarea de proiectare. Aș vrea să acopăr câteva cele mai bune practici pentru îmbunătățirea progresivă în proiectele din lumea reală la ajuta designerii gândesc mai susținut cu privire la fluxul lor de lucru.

1. Înțelegerea îmbunătățirii progresive

Teoria îmbunătățirii progresive recomandă începeți cu un simplu site web care funcționează în toate browserele, făcând-o accesibile pentru fiecare vizitator. Apoi adăugați caracteristici ori de câte ori este posibil.

Acesta este opusul degradării grațioase care include toate funcțiile implicit, apoi se degradează atunci când ceva nu funcționează.

Îmbunătățirea progresivă este mai bună pentru experiența generală a utilizatorilor, deoarece la baza acesteia este ea încarcă numai elementele necesare. Fiecare browser web poate suporta text (și de obicei imagini). Fără CSS, aceste informații vor părea blande și fără gust, dar vor fi accesibile.

Acest Lista Apart articolul susține că este o îmbunătățire progresivă conținut mai întâi cu stiluri și componente dinamice adăugate ulterior. Conținutul în HTML semantic ar trebui să fie livrat înainte de orice altceva.

CSS-ul avansat și JavaScript pe care îl folosim astăzi sunt susținute pe scară largă, dar dacă vrem să urmăm principiile de dezvoltare progresivă, ele ar trebui considerate luxuriante.

Iată o descriere generală a principalelor caracteristici ale îmbunătățirii progresive, pe care ar trebui să le țineți cont:

Semantic marcare pentru tot conținutul
Utilizatori preferințele browserului trebuie să fie respectată
Conținutul și funcționalitatea de bază ar trebui să fie disponibil tuturor utilizatorilor
JavaScript neobișnuit este încărcat numai în medii care îl pot sprijini

Restricțiile tehnologice în dezvoltarea front-end sunt determinate în primul rând de compatibilitatea browser-ului. Îmbunătățirea progresivă vă aduce înapoi la elementele de bază care se gândesc la modul în care o pagină mai slabă a oaselor goale ar putea să arate. De acolo, puteți plan pentru caracteristici mai avansate, cum ar fi proprietățile CSS3.

Dar ce despre browserele care nu acceptă CSS3 modern? Aici se pot juca site-uri precum I Can Use. Ar trebui să decideți ce caracteristici merită implementate și să faceți judecăți pe bază pe publicul țintă al site-ului dvs. web.

2. Subzistența în foile de stil

Majoritatea browserelor de astăzi suportă toate proprietățile de bază de care aveți nevoie. Dar CSS3 avansată este încă o problemă pentru utilizatorii vechi, și îmbunătățirea progresivă oferă o soluție.

În loc de a căuta metode de rezervă pentru a menține aceste caracteristici noi, îngrijorați-vă mai întâi cu structurile de structură corespunzătoare.

Scrieți semantic HTML și CSS markup care funcționează în cât mai multe browsere active posibil (suport pentru browserele vechi cum ar fi suportul IE5 nu este necesar).

Luați, de exemplu, acest JSFiddle care utilizează plutitoare cu două bare laterale (.fix) și o zonă cu conținut fluid (.fluid). Dacă ștergeți toate CSS-urile și repetați codul, veți observa că totul stivează bine cu prima coloană, apoi cu al doilea și în final cu ultima.

Unii dezvoltatori ar prefera să aibă coloana de conținut (.fluid) apar mai întâi în HTML. Aici intră în joc îmbunătățirea progresivă, iar soluțiile alternative CSS devin viabile.

Cele două obiective principale ale codului dvs. HTML sunt următoarele:

Complet semantic și valid cod
A experiență constantă pentru toti

Cea mai simplă modalitate de a atinge aceste obiective este pleacă de la nimic și lucrați, deoarece cei mai mulți avocați ai dezvoltării progresive ar recomanda acest lucru.

Dacă codul dvs. arată bine cu CSS atât dezactivat, cât și activat, atunci acesta oferă o soluție rezonabilă pentru toată lumea.

Este, de asemenea, demn de luat în considerare în ce moment renunți la ceva. Microsoft a renunțat deja la suportul major pentru IE6, astfel încât utilizatorii care rulează acest browser ar putea să nu merite timpul.

Dar există încă o mare întrebare: dacă un browser nu acceptă CSS-ul meu modern, ce ar trebui să fac?

Pur și simplu scrie codul care funcționează fără aceasta, și să considere CSS modernă ca o îmbunătățire progresivă. Aceasta este frumusețea metodologiei progresive de îmbunătățire.

Nu aveți nevoie de muniții, pentru că sunteți în principiu presupunând că nimic nu este acceptat în mod implicit.

Metodele de îmbunătățire progresive vizează realizarea utilizării site-ului chiar și în cazurile în care ceva nu este suportat - dar dacă este susținut, cu atât mai bine.

Trebuie să vă gândiți modul în care conținutul efectiv curge fără CSS. De exemplu, atunci când dezactivez CSS pe site-ul web al Transmit, conținutul continuă să curgă organic pe pagină.

Da, e urât și da, se pare că am pierdut douăzeci de ani de progres ... dar funcționează.

3. Manipularea JavaScript

Merită menționat faptul că fiecare problemă de JavaScript pe care ați putea intra în timpul procesului de dezvoltare este dificilă și unică. Când construiți un nou proiect cu îmbunătățiri progresive, ar trebui să listați toate funcțiile JS necesare și să vă gândiți cum ar putea funcționează fără JavaScript.

Acest lucru va necesita o mulțime de cercetări online pentru a găsi soluții valide. Aaron Gustafson a scris un post de blog mare cu soluții la diverse probleme, cum ar fi înlocuirea lui Ajax cu o meta refresh pentru conținut într-o iframe.

De asemenea, când creați fișiere JavaScript, este o idee bună utilizați legăturile ancoră cu valori reale ID. Astfel, atunci când JavaScript este dezactivat, puteți avea în continuare filele vizibile și accesibile prin valoarea de ancorare. Aaron a scris o altă piesă pe A List Apart care acoperă o imagine mai generală a modului în care ar trebui să vă gândiți la aceste probleme.

Iată un alt exemplu. Să presupunem că aveți un link care încarcă dinamic conținutul. href valoarea este goală, deoarece totul se încarcă prin JavaScript cu metoda prevenDefault ().

În schimb, ar fi înțelept să setați href proprietate la indicați o pagină diferită în cazul în care conținutul ar putea încărca în mod natural, dar vizitatorul vede numai acea pagină când JavaScript este dezactivat.

Îmbunătățirea progresivă este mai mult decât JavaScript, dar cu dezvoltarea web avansată în continuare în fiecare an, nu există nici o îndoială că JavaScript joacă un rol semnificativ.

Operați sub ipoteza că totul a fost dezactivat, și scară de acolo. Aceasta ar putea include probleme cu widget-urile încorporate care nu se află în controlul dvs.