Progressive Enhancement findings - TristanVarewijck/Block-Tech GitHub Wiki

Wat is progressive Enhancement?

Progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code. (Sep 15, 2020, by MDN contributors)

Progressive Enhancement is dus een design filosofie die gericht is op content first. Het is de bedoeling dat iedereen de 'basic content' ziet van de webpagina maar mensen met een nieuwe browser of snel internet zien de enhanced versie van deze webpagina. (Wikipedia, the free encyclopedia)

Principes

Wanneer je gaat ontwerpen/bouwen op een progressive enhancement manier is de bedoeling dat je op deze principes let
(November 26, 2018, freeCodeCamp):

  • Basic content should be accessible to all web browsers
  • Basic functionality should be accessible to all web browsers
  • Sparse, semantic markup contains all content
  • Enhanced layout is provided by externally linked CSS
  • Enhanced behavior is provided by unobtrusive, externally linked JavaScript
  • End-user web browser preferences are respected

Voorbeelden van progressive enhancement

(November 26, 2018, freeCodeCamp):

  1. Web Fonts
    Het kan zijn dat je op jouw website een specifiek font gebruikt omdat, dat font goed bij jouw huisstijl past. Dus heb je dit font gedownload of ingeladen van een website zoals: https://fonts.google.com/. Dit staat heel mooi maar het kan zijn dan iemand een browser gebruikt misschien Internet Explorer die met geen mogelijkheid jouw custom-font kan inladen... wat nu? het mag niet zo zijn dat de gebruiker nu geen content meer ziet, omdat jouw font niet bestaat in deze browser. Wanneer je de principes goed hebt gevolgd dan heb je ervoor gezorgd dat er een ander font wordt ingeladen (bijv. arial) in plaats van jouw custom-font op deze manier is de content van jouw webpagina nog steeds beschikbaar (basic content) wat natuurlijk het belangrijkst is. Wanneer deze gebruiker overstapt naar een nieuwere browser zoals Google Chrome dan ziet de gebruiker nu waarschijnlijk wel jouw custom-font wanneer hij/zij jouw website bezoekt.

  2. Initial HTML
    Wanneer je een website hebt gemaakt met enkel scripts kan het zijn wanneer een gebruiker slecht internet heeft hij/zij niks te zien krijgt behalve een witte webpagina. Je zal daarom meer voldoen aan progressive enhancement als je ervoor zorgt dat je een losse HTML sheet maakt waar de basic content opstaat. Wanneer de script nu niet laden krijgt de gebruiker tenminste de HTML te zien en kan de hij/zij wel bij de basic content van jouw website.

Source list:

⚠️ **GitHub.com Fallback** ⚠️