Front end: Progressive Enhancement Findings - lottekoblens/matching-application GitHub Wiki

Progressive Enhancement findings

Progressive Enhancement is als het ware een bepaalde ontwerpfilosofie, deze filosofie is de basislijn van de essentiële inhoud en biedt functionaliteit aan zoveel mogelijk gebruikers. De best mogelijke ervaring is dan alleen bruikbaar voor de gebruikers van de meest moderne browsers die dus in staat zijn om alle vereiste code uit te kunnen voeren.
Iedereen heeft dus toegang tot de basisinhoud en functionaliteiten van een website. Hierbij maakt het niet uit via welke browser dit gebeurt of hoe goed de internetverbinding is. Wanneer iemand dus gebruik maakt van een moderne, geavanceerde browser dan wordt er een betere versie van de pagina getoond.

Kernprincipes van Progressive enhancement:

  • De basisinhoud van een webpagina moet toegankelijk zijn voor alle webbrowsers

  • De basis functionaliteiten van een webpagina moeten ook toegankelijk zijn voor alle webbrowsers

  • Alle inhoud zit in ‘dunne’, semantische opmaak

  • Verbeterde lay-out wordt geleverd door CSS dat extern is gekoppeld

  • Verbeterde enhancement wordt geleverd door extern gekoppelde JavaScript
  • Er wordt rekening gehouden met de voorkeuren van de webbrowser van de eindgebruiker

Progressive enhancement wordt op de volgende manier toegepast in de praktijk: voor een website wordt eerst alleen een basiservaring ontwikkelt die toegankelijk is voor alle browser. Hierbij wordt alleen gebruik gemaakt van HTML en CSS en niet van JavaScript. Wanneer de browser ‘modern’ is dan pas wordt de JavaScript ingeladen.

Tevens verbeter je door Progressive enhancement ook de SEO. Je zorgt met PE er namelijk voor dat de basisinhoud ook altijd toegankelijk is voor de spiders van de zoekmachines. Je voorkomt dat er dynamische content wordt getoond die de spider kan hinderen bij het crawlen van de inhoud van de webpagina.

Progressive Enhancement in mijn applicatie:

In mijn applicatie heb ik ook Progressive Enhancement toegepast. Wanneer de gebruiker alleen de html kan laden, dan staat er tekst op de buttons, zodat het voor de gebruiker nog steeds duidelijk is wat er gebeurt als er op de button geklikt wordt. En doordat ik de afbeeldingen heb opgeslagen met een bepaald formaat, worden deze ook in de juiste grootte op de pagina's getoond. Hierdoor is de applicatie ook goed te gebruiken wanneer alleen de html geladen wordt.

Alleen html:

Like pagina met alleen html Homepagina met alleen html

Html + CSS:

Wanneer de CSS wordt toegevoegd, hebben de buttons geen tekst meer maar krijgen deze een afbeelding. Ook zorg ik ervoor dat alles op de juiste positie gezet wordt en er mooier uitziet.

Homepagina met Html en CSS Like pagina met Html en CSS

Html + CSS + JavaScript:

Met JavaScript heb ik ervoor gezorgd dat er een pop-up in beeld komt wanneer iemand op de like button klikt. Dat heb ik gedaan met onderstaande code. Wat er dus gebeurt is wanneer er op de like knop wordt geklikt dan wordt het formulier gesubmit en dan wordt de functie clickedLike() aangeroepen. Met de functie clickedLike() wordt er dan een class show toegevoegd en er wordt een window.setTimeout gebruikt. Dit houdt in dat na 8000ms de functie hidePopup() wordt aangeroepen. Met de functie hidePopup() wordt de class show dan weer verwijdert en zal de popup weer verdwijnen.

testFormSubmit();

function testFormSubmit() {
  document.getElementById('like').addEventListener('submit', clickedLike);
}

function clickedLike() {
  document.getElementById('LikedPopup').classList.add('show');
  window.setTimeout(hidePopup, 8000);
}

function hidePopup() {
  document.getElementById('LikedPopup').classList.remove('show');
}

Homepagina met Html, CSS en JavaScript

Bronnen: