Progressieve verbetering dwingt webontwikkelaars zich te concentreren op het bouwen van een website die toegankelijk, zichtbaar en bruikbaar is voor alle gebruikers. Je kunt progressieve verbetering zien als een solide basis en later het toevoegen van verbeteringslagen (Mozilla, 2020).

Fase 1 - HTML

Structural

In deze fase wordt op HTML gericht. De inhoud van de pagina bestaat uit goed opgemaakte semantische HTML code. Je schrijft dus mooie, goede en semantische HTML. Als een pagina goed semantisch opgemaakt is met HTML zorgt dat voor een goede gestructureerde inhoud.

Fase 2 - CSS

Presentational

Met CSS wordt de pagina meer aantrekkelijker voor de gebruiker. Met CSS worden kleuren, afbeeldingen, posities, effecten, animaties en andere stijgingen gemaakt. In deze fase ga je beginnen met CSS aan te brengen voor je pagina. Hierdoor wordt de gebruikerservaring en de uiterlijk van de pagina verbeterd.

Fase 3 - JavaScript

Behavioral

In deze fase wordt de eerste en de tweede fase verzameld. Hierdoor wordt de pagina meer interactief en meer gebruiksvriendelijker voor de gebruiker. Deze fase richt zich op de prestaties van het web ontwerp.

Toegepast in Game Buddy applicatie

HTML

In de onderstaande afbeeldingen is visueel te zien hoe de oproepen pagina van de applicatie eruit ziet zonder CSS of JavaScript. In de HTML wordt aangegeven dat de infromatie per persoon in een kaart weergegeven wordt.

CSS

Na de HTML basis laag komt er een CSS laag overheen. In deze laag komt het er er mooi uit te zien, zie onderstaande afbeeldingen. Hier wordt dus ook de gamer style aan de Game Buddy applicatie toegevoegd.

JavaScript

Vervolgens wordt de JavaScript toegepast, als voorbeeld de filter functie. De gebruiker kan een bepaalde filter selecteren en krijgt op basis daarvan resultaat te zien. Op deze manier is er veel meer interactie met de gebruiker.