Progressive Enhancement - MrSmarto/Anime-Smarty GitHub Wiki

Progressive enhancement is een soort werkwijze die je kan aanhouden als developer/designer. Je houd namelijk in gedachten dat jouw applicatie/website voor mensen met verschillende devices zou moeten werken. Niet iedereen gebruikt de meest nieuwste technologie, en dit houdt dan ook in dat niet elke gebruiker de content op de zelfde manier zal zien. Dit kan zijn omdat ze bijvoorbeeld geen javascript aan hebben staan en wij willen natuurlijk dat de site nog steeds goed functioneert als er bijvoorbeeld javascript niet werkt.

Progressive enchancement betekent ook dus dat je met een goede basis begint door eerst goed werkende html code te schrijven. De volgende stap is om dan de content te gaan vormgeven met CSS. Op dat moment heb je een goede basis die er goed uit ziet, dan zou je bijvoorbeeld interactieve elementen kunnen toevoegen met javascript. Ik zal je hieronder een voorbeeld laten zien, in dit voorbeeld zie je een taart met een betekenis:

  • De binnenkant van de taart = Goed werkende HTML
  • De bovenkant van de taart = Mooie styling door CSS te gebruiken
  • De accessoires van de taart = De leuke extra's door JAVASCRIPT te gebruiken

progressiveenchans

Waarom zou ik dit dan gebruiken?

Er zijn harstikke veel verschillende soorten gebruikers die allemaal een andere device gebruiken. Als ik mijn website volledig codeer met javascript, dan zouden dus de gebruikers die javascript niet ondersteunen automatisch mijn applicatie niet kunnen gebruiken. Dit is natuurlijk niet wat ik wil, daarom vindt ik het belangrijk om over progressive enchancement na te denken.

Hoe implementeer ik dit op mijn applicatie?

Ik heb als eerste mijn html opgesteld vanuit de wireframes die ik in week 2 heb gemaakt. Hierdoor had ik direct een betere applicatie structuur die ik kon gaan stylen met CSS. Ik vond het belangrijk om componenten eerst werkend te maken zoals de:

  • navigatie
  • links
  • werkende css styling

Zodat ik ook beter de server-side code kon schrijven. Deze code is voornamelijk om de routes te bepalen en welke data daarmee word gestuurd. Als laatste heb ik javascript toegepast:

anime