Progresivno poboljšanje je tehnika koja pomaže osigurati da vaš softver bude robustan i pristupačan. Slijedeći ga, možete osigurati da će što više ljudi moći koristiti vašu web stranicu ili aplikaciju.
Započnite s minimalno održivom verzijom svog web dizajna i osigurajte da funkcionira prema potrebi. Zatim dodajte dodatnu funkcionalnost i stil kako bi sposobniji preglednici mogli imati koristi.
Kako funkcionira progresivno poboljšanje?
Zbog svoje ekstremno distribuirane prirode, web je oduvijek trebao podržavati ogroman raspon uređaja. Od osnovnih računala iz 1970-ih do sposobnih modernih stolnih računala, tableta i televizora, web stranice su prešle dug put.
U srcu svega je HTML. Budući da je to jezik koji "oprašta", preglednici će prikazati HTML onoliko koliko ga razumiju. Obično će ignorirati sve što ne podržavaju.
To može biti korisno sa stajališta programera, ali može uzrokovati probleme čitateljima. Ako vaša stranica prikazuje praznu stranicu kada se JavaScript ne može pokrenuti, korisnici nemaju drugog izbora nego da je napuste. Progresivno poboljšanje potiče vas da isporučite osnovni sadržaj svima koji mu mogu pristupiti, a zatim poboljšate taj sadržaj pomoću odgovarajućih tehnologija, kao što su CSS i JavaScript.
Progresivni pristup oblikovanju stila
CSS je stilski jezik weba koje možete koristiti za prilagođavanje boja, fontova, rasporedii mnoge druge vizualne aspekte vaših stranica. Možete ga koristiti za poboljšanje zadanog izgleda vašeg sadržaja, ali to ne znači da ne biste trebali ispravno strukturirati svoj sadržaj.
Uzmimo traku izbornika, na primjer; možete ga strukturirati ovako:
<nav>
<a href="/register">Registar</a>
<a href="/login">prijaviti se</a>
<a href="/about">o nama</a>
<a href="/contact">kontakt</a>
</nav>Za prikaz horizontalnog izbornika, sa svakom vezom koja izgleda poput gumba, možete ga stilizirati pomoću ovog CSS-a:
nav a {
tekst-ukras: nema;
prikaz: inline-block;
podstava: 0.5em 1em;
rub: 1px čvrsta;
rubni radijus: 8px;
margina-desno: 1em;
}Kada preglednik ovo u potpunosti renderira, trebalo bi izgledati ovako:
Međutim, ako CSS nije dostupan, izbornik će se prikazati ovako:
Primijetite kako ovo ne izgleda nimalo poput izbornika i nije baš jednostavno za korištenje jer se veze spajaju u jednu.
Možete koristiti alternativnu strukturu kako biste dizajn učinili robusnijim:
<nav>
<ul>
<li><a href="/register">Registar</a></li>
<li><a href="/login">prijaviti se</a></li>
<li><a href="/about">o nama</a></li>
<li><a href="/contact">kontakt</a></li>
</ul>
</nav>Budući da ovo označavanje koristi neuređeni element popisa, puno je upotrebljivije u nedostatku CSS-a:
Imajte na umu koliko je lakše brzo skenirati i razumjeti ove veze, čak i sa zadanim stilom preglednika. Ovaj pristup će zahtijevati da dodate malo više CSS-a, kako biste nadjačali zadane stilove popisa:
navli { prikaz: u redu; }Iako su konačna struktura i stil složeniji, a većina korisnika će imati omogućen CSS, ovaj je pristup robusniji. Bit će prijateljskiji prema korisnicima čitača zaslona i terminalski preglednici.
Postupno uvođenje funkcionalnosti
Progresivno poboljšanje najvažnije je kada se radi o funkcioniranju web-mjesta ili aplikacije. Načelo kaže da, bez obzira na sve, vaša web stranica treba funkcionirati što je moguće bolje.
U praksi se to obično odnosi na JavaScript. Ako uvedete ponašanje na strani klijenta, ono bi trebalo staviti funkcionalnost na vrh stranice ili aplikacije koja već radi bez toga.
Vrlo čest slučaj je obrada događaja. Zamislite stranicu koja učitava dodatni sadržaj na zahtjev. To može biti ručno beskonačno pomicanje, ugrađivanje komentara ili slično.
<tijelo>
<!--... -->
<gumb onclick="Učitaj više();">
Opterećenje Više
</button>
<!--... -->
</body>Gumb je na klik atribut sadrži JavaScript kod koji će se pokrenuti kada netko klikne gumb. Međutim, ako JavaScript nije dostupan, ovaj gumb neće učiniti ništa. Korisnik će kliknuti lijevom tipkom na ovaj gumb bez povratne informacije i ideje o tome što nije u redu. Daleko bolji pristup koristi progresivno poboljšanje:
<tijelo>
<!--... -->
<a id="p2" href="/page/2">stranica 2</a><skripta>
funkcijaUčitaj više() { konzola.log("!"); }
/* Zamijeni vezu gumbom */
var poveznica = dokument.getElementById("p2");
var gumb = dokument.createElement("gumb");
button.innerText = "Učitaj više";
button.addEventListener("klik", Učitaj više);
dokument.tijelo.umetnutiprije(dugme, veza);
veza.parentNode.ukloniDijete(veza);
</script>
</body>
Ovaj kod transformira osnovnu vezu u gumb s rukovateljem događaja. Uvođenjem ovisnosti o JavaScriptu koristeći sam JavaScript, možete biti sigurni da će raditi. A tu je i funkcionalno zadano ponašanje koje funkcionira, u obliku standardne veze na /page/2.
Je li progresivno poboljšanje stvarno potrebno?
Svatko koristi preglednike s CSS-om i JavaScriptom, pa zašto se brinuti za situaciju koja se ne dogodi? Pa, postoji nekoliko razloga zašto biste trebali usvojiti dobru praksu progresivnog poboljšanja.
- Prvo, ne koriste svi koji posjećuju vašu web stranicu preglednik. Neki će posjetitelji biti botovi, poput indeksatora tražilice, a oni možda uopće ne razumiju CSS ili JavaScript.
- Drugo, neće svaka osoba koja posjeti vašu stranicu koristiti preglednik sa CSS-om i JavaScriptom. Neki posjetitelji mogu koristiti preglednik temeljen na terminalu, koji prikazuje običan tekst s minimalnim oblikovanjem. Drugi mogu koristiti čitač zaslona.
- Treće, čak i ako preglednik podržava CSS i JavaScript, stvari idu po zlu. Neispravna veza ili loša mrežna veza mogu rezultirati nedostatkom .css ili .js datoteke. Greška u JavaScriptu može uzrokovati da se drugi kod uopće ne pokrene.
- Konačno, neki posjetitelji mogu aktivno odlučiti onemogućiti CSS ili JavaScript. To mogu učiniti zbog zabrinutosti za privatnost ili zato što su na sporoj vezi ili vezi koja se plaća po upotrebi.
Progresivno razmišljanje čini čuda
Iznad svega, progresivno poboljšanje potiče vas da usvojite pristup kojem je sadržaj na prvom mjestu. Sadržaj je kralj, stoga bi vaš tekst i slike uvijek trebali biti dostupni, svima, bez obzira na to kako pristupaju vašoj stranici.
Pružajući svim čitateljima najbolje moguće iskustvo, a zatim ga čineći još boljim za one koji mogu imati koristi, možete imati najbolje od svih svjetova. Progresivno poboljšanje samo je jedna ključna komponenta dobre prakse pristupačnosti i upotrebljivosti.
