Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Îmbunătățirea progresivă este o tehnică care vă ajută să vă asigurați că software-ul dvs. este robust și accesibil. Urmându-l, vă puteți asigura că cât mai mulți oameni vor putea să vă folosească site-ul sau aplicația.

Începeți cu o versiune minim viabilă a designului dvs. web și asigurați-vă că funcționează după cum este necesar. Apoi, puneți un strat suplimentar de funcționalitate și stil, astfel încât browserele mai capabile să poată beneficia.

Cum funcționează îmbunătățirea progresivă?

Datorită naturii sale extrem de distribuite, web-ul a avut întotdeauna nevoie să accepte o gamă largă de dispozitive. De la computerele de bază din anii 1970 la desktop-uri, tablete și televizoare moderne capabile, site-urile web au parcurs un drum lung.

În centrul tuturor se află HTML. Deoarece este un limbaj „îngăduitor”, browserele vor afișa HTML așa cum îl înțeleg. De obicei, ei vor ignora orice nu acceptă.

instagram viewer

Acest lucru poate fi util din punctul de vedere al dezvoltatorului, dar poate cauza probleme cititorilor. Dacă site-ul dvs. afișează o pagină goală atunci când JavaScript nu poate rula, utilizatorii nu au de ales decât să o abandoneze. Îmbunătățirea progresivă vă încurajează să furnizați conținut de bază tuturor celor care îl pot accesa, apoi să îmbunătățiți acel conținut folosind tehnologii adecvate, cum ar fi CSS și JavaScript.

O abordare progresivă a stilului

CSS este limbajul pentru foile de stil pentru web pe care le puteți folosi pentru a personaliza culorile, fonturile, machete, și multe alte aspecte vizuale ale paginilor dvs. Îl puteți folosi pentru a îmbunătăți aspectul implicit al conținutului dvs., dar asta nu înseamnă că nu ar trebui să vă structurați corect conținutul în primul rând.

Luați o bară de meniu, de exemplu; l-ai putea structura astfel:

<nav>
<a href="/register">Inregistreaza-te</A>
<a href="/login">log in</A>
<a href="/about">despre noi</A>
<a href="/contact">a lua legatura</A>
</nav>

Pentru a afișa un meniu orizontal, cu fiecare link care arată un pic ca un buton, îl puteți stila folosind acest CSS:

nav a {
text-decor: niciuna;
display: inline-block;
căptușeală: 0.5em 1ei;
chenar: 1px solid;
chenar-rază: 8px;
margine-dreapta: 1em;
}

Când browserul redă complet acest lucru, ar trebui să arate astfel:

Cu toate acestea, dacă CSS nu este disponibil, meniul se va afișa astfel:

Observați că acesta nu seamănă deloc cu un meniu și nu este foarte ușor de utilizat, deoarece linkurile se îmbină într-unul singur.

Puteți utiliza o structură alternativă pentru a face designul mai robust:

<nav>
<ul>
<li><a href="/register">Inregistreaza-te</A></li>
<li><a href="/login">log in</A></li>
<li><a href="/about">despre noi</A></li>
<li><a href="/contact">a lua legatura</A></li>
</ul>
</nav>

Deoarece acest marcaj folosește un element de listă neordonat, este mult mai utilizabil în absența CSS:

Rețineți cât de ușor este să scanați și să înțelegeți rapid aceste linkuri, chiar și cu stilul implicit al browserului. Această abordare vă va cere să adăugați puțin mai mult CSS, pentru a înlocui stilurile implicite de listă:

navli { afişa: în linie; }

Chiar dacă structura și stilul final sunt mai complicate și majoritatea utilizatorilor vor avea CSS activat, această abordare este mai robustă. Va fi mai prietenos pentru utilizatorii de cititoare de ecran și browsere bazate pe terminale.

Introducerea progresivă a funcționalității

Îmbunătățirea progresivă este cea mai importantă atunci când vine vorba de funcționarea unui site sau a unei aplicații. Principiul spune că, indiferent de ce, site-ul tău ar trebui să funcționeze cât mai bine posibil.

În practică, acest lucru se aplică de obicei JavaScript. Dacă introduceți un comportament la nivelul clientului, acesta ar trebui să suprapună funcționalitatea peste un site sau aplicație care funcționează deja fără ea.

Un caz foarte frecvent este gestionarea evenimentelor. Imaginați-vă o pagină care încarcă conținut suplimentar la cerere. Acesta poate fi un derulare manual infinit, un comentariu încorporat sau similar.

<corp>
<!--... -->
<butonul onclick="incarca mai mult();">
Sarcină Mai mult
</button>
<!--... -->
</body>

Butonul onclick Atributul conține cod JavaScript care va rula atunci când cineva face clic pe buton. Cu toate acestea, dacă JavaScript nu este disponibil, acest buton nu va face nimic. Un utilizator va fi lăsat să facă clic pe acest buton fără feedback și fără idee despre ce nu merge bine. O abordare mult mai bună folosește îmbunătățirea progresivă:

<corp>
<!--... -->
<un id="p2" href="/page/2">Pagina 2</A>

<scenariu>
funcţieincarca mai mult() { consolă.Buturuga("!"); }

/* Înlocuiește legătura cu butonul */
var link = document.getElementById("p2");
var butonul = document.createElement(„buton”);
button.innerText = "Incarca mai mult";
button.addEventListener("clic", incarca mai mult);
document.corp.inserați Înainte(buton, legătură);
legătură.parentNode.eliminăCopilul(legătură);
</script>
</body>

Acest cod transformă legătura de bază într-un buton cu un handler de evenimente. Prin introducerea dependenței de JavaScript folosind JavaScript în sine, puteți fi sigur că va funcționa. Și există un comportament implicit funcțional care funcționează, sub forma linkului standard către /page/2.

Este cu adevărat necesară îmbunătățirea progresivă?

Toată lumea folosește browsere cu CSS și JavaScript, așa că de ce să vă deranjați pentru o situație care nu apare? Ei bine, există mai multe motive pentru care ar trebui să adoptați buna practică a îmbunătățirii progresive.

  1. În primul rând, nu toți cei care vă vizitează site-ul web folosesc un browser. Unii vizitatori vor fi roboți, cum ar fi un indexator de motoare de căutare, iar aceștia ar putea să nu înțeleagă deloc CSS sau JavaScript.
  2. În al doilea rând, nu orice persoană care vă vizitează site-ul va folosi un browser cu CSS și JavaScript. Unii vizitatori pot folosi un browser bazat pe terminal, care afișează text simplu cu formatare minimă. Alții pot folosi un cititor de ecran.
  3. În al treilea rând, chiar dacă un browser acceptă CSS și JavaScript, lucrurile merg prost. O legătură întreruptă sau o conexiune de rețea defectuoasă poate duce la lipsa unui fișier .css sau .js. O eroare în JavaScript poate face ca alt cod să nu ruleze deloc.
  4. În cele din urmă, unii vizitatori pot decide în mod activ să dezactiveze CSS sau JavaScript. Ei pot face acest lucru din motive de confidențialitate sau pentru că se află într-o conexiune lentă sau cu plată după utilizare.

O mentalitate progresivă face minuni

Mai presus de toate, îmbunătățirea progresivă vă încurajează să adoptați o abordare bazată pe conținut. Conținutul este rege, așa că textul și imaginile dvs. ar trebui să fie întotdeauna disponibile, pentru toată lumea, indiferent de ce accesează site-ul dvs.

Oferind tuturor cititorilor cea mai bună experiență posibilă, apoi făcând-o și mai bună pentru cei care pot beneficia, puteți avea ce este mai bun din toate lumi. Îmbunătățirea progresivă este doar o componentă cheie a bunei practici de accesibilitate și utilizare.