Bright Answers

Bright Answers biedt branchespecifieke ICT oplossingen en maatwerk aangepast op jouw bedrijfsvoering. Wij helpen bedrijven op het gebied van:

Gerelateerde onderwerpen

HTML5 en responsive design: een introductie

Dit artikel is gepubliceerd op: 30-10-2015

Wie zich bezig houdt met de wereld van website ontwikkeling en webdesign, komt al snel in aanraking met de termen ‘HTML 5’ en ‘responsive design’. De reden dat deze termen veelvuldig naar voren komen als je je verdiept in het ontwikkelen van een website, heeft te maken met het feit dat deze termen op dit moment een grote rol spelen in de branche van websiteontwikkeling en webdesign.

Lees je regelmatig over HTML 5 en responsive designs en ben je benieuwd wat deze termen precies inhouden? Lees dan in dit artikel meer over beide termen en gebruik de kennis in dit artikel om meer inzicht te krijgen in het ontwikkelen van websites. Zeker als je van plan bent om een website te (laten) ontwikkelen op korte termijn, is het lezen van dit artikel een aanrader.

Officiële logo van HTML5
Officiële logo van HTML5

Om je een duidelijker beeld te geven van wat HTML 5 precies is, is het belangrijk om je eerst een duidelijker beeld te geven van HTML. HTML is een programmeertaal die gebruikt wordt om de inhoud van een webtekst te structureren met kopjes, paragrafen en bijvoorbeeld afbeeldingen. Zo wordt de programmeertaal HTML gebruikt om de structuur van een webpagina te verzorgen, ofwel simpelweg een website te bouwen. Het betreft een ingewikkelde programmeertaal die zeker niet eenvoudig is om te leren en enkel door gespecialiseerde programmeurs toegepast kan worden om een website te maken.

HTML 5 is een vrij nieuwe variant van HTML die op dit moment gebruikt wordt om websites te bouwen. HTML 5 heeft een aantal belangrijke verschillen ten opzichte van eerdere versies. Bijvoorbeeld dat een nieuw Document Object Model is geintroduceerd waardoor pagina’s sneller ingeladen kunnen worden, doordat video en audio bestanden rechtstreeks in de browser afgespeeld kunnen worden, doordat minder code nodig is voor hetzelfde resultaat. 

HTML 5 is inmiddels de nieuwe standaard is voor het ontwikkelen van websites. De nieuwe standaard bevat nieuwe elementen, deze zijn samengesteld aan de hand van classes & id's die op miljarden websites het meest voorkwamen. Zie hierover onder andere een artikel van Google.

Nieuwe elementen in HTML5: 

  • <header>
  • <footer>
  • <nav>
  • <article>
  • <section>
  • <time>
  • <aside>
  • <hgroup>
  • <figure>  &  <figcaption>

Zie voor meer diepgang over deze elementen deze pagina Dit artikel bevat slechts een introductie.

In het artikel  'Het onvermijdbare HTML5: een geduchte concurrent voor native apps'   vertellen we ook nog meer over HTML5 en gaan we dieper in op de nieuwe mogelijkheden. 

Maak kennis met een responsive design

Nu je iets meer weet over de betekenis van HTML 5, rest ons enkel nog de uitleg van het begrip ‘responsive design’ te geven. Een responsive design wordt ook wel een responsive web design (RWD) genoemd en is de nieuwe standaard voor het maken van webdesigns. Zo wordt het responsive design gebruikt om de ideale gebruikerservaring te creëren op verschillende schermgroottes, zoals de schermgrootte van een computer, de schermgrootte van een tablet en de schermgrootte van een tablet. In feite is een responsive design dus simpelweg een design dat zo ontwikkeld is dat het op diverse apparaten op de beste manier getoond kan worden, zodat de gebruikerservaring van bezoekers op een website (op wat voor device dan ook) optimaal wordt.

Het belang van een responsive design

Voorheen werden websites voornamelijk bekeken door gebruik te maken van computers en laptops, maar door de opkomst van tablets en smartphones is dit tegenwoordig we anders. Zo worden websites tegenwoordig niet enkel meer bezocht vanuit de vaste computer in de woonkamer of op kantoor, maar gebruiken ook steeds meer mensen hun tablet of telefoon om online informatie te raadplegen.

Omdat er zo veel verschillende apparaten op de markt zijn en deze apparaten stuk voor stuk  gebruikt kunnen worden om websites te bezoeken, is het onmogelijk om een standaard beeldscherm resolutie te gebruiken bij het tonen van een website. Door gebruik te maken van een responsive webdesign, wordt dit probleem opgelost. Een responsive design zorgt er namelijk voor dat een website altijd goed getoond wordt, of de bezoeker de website nu bekijkt op een groot computerbeeldscherm of een klein beeldscherm van een smartphone.

De voordelen van een responsive design

Het implementeren van een responsive design is voor veel website ontwikkelaars de nieuwe standaard geworden bij het maken van een website. De reden dat het responsive design steeds meer gebruikt wordt bij het maken van websites, heeft te maken met het feit dat het gebruik van dit design enkele voordelen met zich meebrengt.

Het eerste voordeel van het gebruiken van een responsive design in HTML 5 is het feit dat de gebruikersvriendelijkheid van een website veel hoger wordt met dit design in plaats van een design met een standaard resolutie.

'Misschien heb je het zelf wel eens meegemaakt: je bezoekt een website op je mobiele telefoon die helemaal niet op de juiste manier wordt weergegeven. Hierdoor kun je niet vinden wat je wil vinden, duurt het langer voor je daadwerkelijk gebruik kunt maken van de informatie op de website of klik je de website maar helemaal weg omdat je niet uit de voeten kunt met het design van de site'. 

Kortom: de gebruikerservaring van de website zorgt ervoor dat je geen gebruik kunt maken van de informatie op de website en uiteindelijk afhaakt. Had de eigenaar van de betreffende website gebruik gemaakt van een responsive design, dan was de website wel op de juiste manier getoond op jouw mobiele telefoon. Hierdoor was de gebruikerservaring duidelijk beter geweest, waardoor jij de website gewoon op je mobiele telefoon kon gebruiken zoals je de website op je computer zou gebruiken.

Een ander voordeel is dat je met jouw website met een responsive design in HTML 5 helemaal meegaat met de tijd. In Amerika wordt het steeds normaler om geen desktopcomputer meer in huis te hebben, maar enkel gebruik te maken van tablets en smartphones. Dit betekent dat het belang van een responsive design voor een website in Amerika wel erg groot is geworden en men eigenlijk geen gebruik meer kan maken van een design met een standaard resolutie.

In Nederland is het nog niet zo dat de vaste computer buiten de deur wordt gezet, maar er is zeker een stijging waar te nemen in het aantal mobiele bezoekers van een website. Zelfs het aantal online shoppers dat aankopen doet op een tablet of mobiele telefoon. Wil je profiteren van deze trends, dan is het implementeren van een responsive design een must.

Tot slot kan content op een website met een responsive design veel gemakkelijker via social media gedeeld worden dan content op een website met een standaard formaat. De reden dat content op een website met een responsive design eenvoudiger gedeeld kan worden, heeft te maken met het feit dat social media buttons voor het delen van content op mobiele telefoons beter getoond worden als er gebruik gemaakt wordt van een responsive design. Hierdoor worden de buttons vaker gebruikt, waardoor content sneller en vaker gedeeld wordt en het bereik van een bepaalde website dus groter is. 

Website bouwen? Kies voor HTML 5 met een responsive design

Wie een nieuwe website wil (laten) bouwen, wordt aangeraden om te kiezen voor de combinatie tussen het gebruik van HTML 5 en een responsive design. Wordt er gebruik gemaakt van de codetaal HTML 5 om een website te maken, dan weet je namelijk zeker dat je de beste en meest vernieuwde codetaal van dit moment gebruikt om jouw website te (laten) bouwen. Door gebruik te maken van een responsive design voor jouw website, weet je zeker dat je een website hebt die op iedere device op de beste manier getoond wordt en op deze manier zorgt voor de beste gebruikersvriendelijkheid. Een combinatie van HTML 5 en een responsive design is dan ook de beste keuze voor het (laten) ontwikkelen van een nieuwe website.

HTML 5 en responsive design: de producten van Rivium

De producten van Rivium worden altijd volgens de laatste trends en ontwikkelingen in de branche ontwikkeld. Dit betekent dat producten als ons ServicePunt altijd in de meest recente codetaal worden gemaakt en geïmplementeerd en dat er tevens altijd wordt gezorgd voor een responsive design. Kijk je bijvoorbeeld naar ons ServicePunt, dan zie je dat dit product voor diverse apparaten met diverse schermgroottes is gemaakt en dus op verschillende devices gebruikt kan worden.  

Een andere manier om ervoor te zorgen dat een bepaalde webpagina of een bepaalde service op de beste manier wordt getoond op mobiele devices als smartphones en tablets, is door een applicatie te bouwen. Gebruik je een applicatie, dan weet je namelijk zeker dat de inhoud van deze applicatie volledig afgestemd is op apparaten als tablets en smartphones zonder dat je hier een website met een responsive design voor nodig hebt. Rivium biedt een uitgebreide AppBuilder die je kunt gebruiken om zelf apps te maken voor tablets en smartphones.


Gerelateerde onderwerpen

ComputertalenDesign


 

Reacties

Er zijn nog geen reacties.

 

Plaats nieuwe reactie

Velden met een gemarkeerd met een * zijn verplicht.
 
 
 
­