Progressieve verbetering is een techniek die ervoor zorgt dat uw software robuust en toegankelijk is. Door het te volgen, zorg je ervoor dat zoveel mogelijk mensen je website of app kunnen gebruiken.
Begin met een minimaal haalbare versie van uw webdesign en zorg ervoor dat deze naar behoren functioneert. Voeg vervolgens extra functionaliteit en styling toe, zodat meer capabele browsers hiervan kunnen profiteren.
Hoe werkt progressieve verbetering?
Vanwege zijn extreem gedistribueerde aard heeft het web altijd al een enorm scala aan apparaten moeten ondersteunen. Van eenvoudige computers uit de jaren 70 tot capabele moderne desktops, tablets en televisies, websites hebben een lange weg afgelegd.
De kern van alles is HTML. Omdat het een "vergevingsgezinde" taal is, zullen browsers HTML net zo goed weergeven als ze het begrijpen. Meestal negeren ze alles wat ze niet ondersteunen.
Dit kan handig zijn vanuit het oogpunt van een ontwikkelaar, maar het kan problemen veroorzaken voor lezers. Als uw site een lege pagina weergeeft wanneer JavaScript niet kan worden uitgevoerd, hebben gebruikers weinig andere keus dan deze te verlaten. Progressieve verbetering moedigt u aan om kerninhoud te leveren aan iedereen die er toegang toe heeft, en die inhoud vervolgens te verbeteren met behulp van geschikte technologieën, zoals CSS en JavaScript.
Een vooruitstrevende benadering van styling
CSS is de stijlbladtaal van het web die u kunt gebruiken om kleuren, lettertypen, indelingen, en vele andere visuele aspecten van uw pagina's. U kunt het gebruiken om het standaard uiterlijk van uw inhoud te verbeteren, maar dat betekent niet dat u uw inhoud in de eerste plaats niet goed moet structureren.
Neem bijvoorbeeld een menubalk; je zou het als volgt kunnen structureren:
<navigatie>
<een href="/register">register</A>
<een href="/login">Log in</A>
<een href="/about">over ons</A>
<een href="/contact">contact</A>
</nav>Om een horizontaal menu weer te geven, waarbij elke link een beetje op een knop lijkt, kun je het opmaken met deze CSS:
nav een {
tekstversiering: geen;
weergave: inline-blok;
opvulling: 0.5em 1em;
rand: 1px vast;
grensstraal: 8px;
marge-rechts: 1em;
}Wanneer de browser dit volledig weergeeft, zou het er als volgt uit moeten zien:
Als CSS echter niet beschikbaar is, wordt het menu als volgt weergegeven:
Merk op hoe dit in niets op een menu lijkt en het is niet erg gemakkelijk te gebruiken omdat de links samenvloeien tot één.
U kunt een alternatieve structuur gebruiken om het ontwerp robuuster te maken:
<navigatie>
<ul>
<li><een href="/register">register</A></li>
<li><een href="/login">Log in</A></li>
<li><een href="/about">over ons</A></li>
<li><een href="/contact">contact</A></li>
</ul>
</nav>Omdat deze opmaak een ongeordend lijstelement gebruikt, is het veel bruikbaarder zonder CSS:
Merk op hoeveel gemakkelijker het is om deze links snel te scannen en te begrijpen, zelfs met de standaardstijl van de browser. Voor deze aanpak moet je wat meer CSS toevoegen om de standaard lijststijlen te overschrijven:
navigatieli { weergave: in lijn; }Hoewel de uiteindelijke structuur en vormgeving ingewikkelder zijn en de meeste gebruikers CSS hebben ingeschakeld, is deze aanpak robuuster. Het zal vriendelijker zijn voor gebruikers van schermlezers en terminal-gebaseerde browsers.
Geleidelijk functionaliteit introduceren
Progressieve verbetering is het belangrijkst als het gaat om het functioneren van een site of app. Het principe stelt dat je website hoe dan ook zo goed mogelijk moet functioneren.
In de praktijk is dit meestal van toepassing op JavaScript. Als u client-side gedrag introduceert, moet het functionaliteit bovenop een site of applicatie leggen die al zonder werkt.
Een veel voorkomend geval is het afhandelen van gebeurtenissen. Stel je een pagina voor die op verzoek extra inhoud laadt. Dit kan een handmatige oneindige scroll zijn, een ingesloten opmerking of iets dergelijks.
<lichaam>
<!--... -->
<knop onclick="meer laden();">
Laden Meer
</button>
<!--... -->
</body>De knoop bij klikken attribuut bevat JavaScript-code die wordt uitgevoerd wanneer iemand op de knop klikt. Als JavaScript echter niet beschikbaar is, doet deze knop niets. Een gebruiker blijft op deze knop klikken zonder feedback en zonder enig idee van wat er fout gaat. Een veel betere benadering maakt gebruik van progressieve verbetering:
<lichaam>
<!--... -->
<een id="p2" href="/page/2">Pagina 2</A><script>
functiemeer laden() { troosten.log("!"); }
/* Vervang link door knop */
var koppeling = document.getElementById("p2");
var knop = document.createElement("knop");
button.innerText = "Meer laden";
knop.addEventListener("Klik", meer laden);
document.lichaam.insertBefore(knop, koppeling);
koppeling.parentNode.verwijderKind(koppeling);
</script>
</body>
Deze code verandert de basislink in een knop met een gebeurtenishandler. Door de afhankelijkheid van JavaScript te introduceren met behulp van JavaScript zelf, kunt u er zeker van zijn dat het zal werken. En er is een functioneel standaardgedrag dat werkt, in de vorm van de standaardlink naar /page/2.
Is progressieve verbetering echt nodig?
Iedereen gebruikt browsers met CSS en JavaScript, dus waarom zou je je druk maken over een situatie die zich niet voordoet? Welnu, er zijn verschillende redenen waarom u de goede praktijk van progressieve verbetering zou moeten toepassen.
- Ten eerste gebruikt niet iedereen die uw website bezoekt een browser. Sommige bezoekers zullen bots zijn, zoals een zoekmachine-indexer, en deze begrijpen CSS of JavaScript misschien helemaal niet.
- Ten tweede zal niet iedereen die uw site bezoekt een browser met CSS en JavaScript gebruiken. Sommige bezoekers kunnen een terminalgebaseerde browser gebruiken, die platte tekst met minimale opmaak weergeeft. Anderen kunnen een schermlezer gebruiken.
- Ten derde, zelfs als een browser CSS en JavaScript ondersteunt, gaat het mis. Een verbroken link of slechte netwerkverbinding kan resulteren in een ontbrekend .css- of .js-bestand. Een fout in JavaScript kan ervoor zorgen dat andere code helemaal niet wordt uitgevoerd.
- Tot slot kunnen sommige bezoekers er actief voor kiezen om CSS of JavaScript uit te schakelen. Ze kunnen dit doen uit privacyoverwegingen of omdat ze een trage of betalende verbinding hebben.
Een vooruitstrevende mentaliteit doet wonderen
Bovenal moedigt progressieve verbetering u aan om een content-first-benadering te hanteren. Inhoud is koning, dus uw tekst en afbeeldingen moeten altijd beschikbaar zijn, voor iedereen, hoe ze uw site ook bezoeken.
Door alle lezers de best mogelijke ervaring te geven en het vervolgens nog beter te maken voor degenen die hiervan kunnen profiteren, kunt u het beste van alle werelden hebben. Progressieve verbetering is slechts één belangrijk onderdeel van goede praktijken op het gebied van toegankelijkheid en bruikbaarheid.
