Responsive webdesign

webdesign delft
it-adviseur

"Mevrouw Müller heeft voor ons de herlancering van onze website verzorgd en daar zijn we erg tevreden over. De samenwerking was net als in de jaren ervoor heel fijn en erg professioneel."
Ralph Belfiore, eigenaar RSL Systemberatung e.K.

Responsive Webdesign

Veel websites zijn bijna onbruikbaar op een mobiel eindapparaat, omdat het design op vaste breedtes is ontworpen, die niet op het beeldscherm van een smartphone of tablet passen.

Er moet dus iets gebeuren in het webdesign, omdat websites sinds een paar jaar steeds vaker vanaf tablets en smartphones worden bezocht.

Het grote aantal beeldschermafmetingen – waarbij ook nog rekening moet worden gehouden met liggende of staande weergave – maakt het tegenwoordig absoluut noodzakelijk om een webdesign vanaf het begin responsive te ontwikkelen. Dat kost minder tijd en inspanning dan een bestaande website, die met een vaste lay-out voor desktop-pc's is ontworpen, responsive te maken.

beeldschermafmetingen responsive webdesign
Bij responsive webdesign moet met veel beeldschermafmetingen rekening worden gehouden.

Touchscreen in plaats van muis

Om te zorgen dat de gebruikerservaring van mobiele bezoekers niet teleurstellend is, is het absoluut noodzakelijk om het webdesign responsive te ontwerpen en rekening te houden met overige aspecten die relevant zijn voor touchscreens. Het navigatie- en gebruikersmenu moet bijvoorbeeld op touchscreens worden afgestemd en voor de bediening met de vingers in plaats van de muis worden geoptimaliseerd. (Grotere klikoppervlakken, tussenruimtes...)

Minder is meer

Pagina's met grote hiërarchieën en een ingewikkelde navigatie moeten, indien mogelijk, worden vereenvoudigd.

Ook omvangrijke tabellen zijn op smartphones niet gemakkelijk weer te geven. Er zijn weliswaar technische oplossingen om een tabel toch toegankelijk te maken op het beeldscherm van een smartphone, maar dat zijn slechts noodoplossingen omdat ze geen optimale gebruikerservaring kunnen bieden.

Een website ontwerpen voor mobiele apparaten is dus een goede gelegenheid om nog eens na te denken over het eigen contentconcept en u af te vragen welke content echt belangrijk is en welke overbodig is.

Als het niet mogelijk is om de structuren en content van de website te vereenvoudigen, kan een extra mobiele site of een oplossing voor contentaanpassing worden overwogen.

Foto's in responsive webdesign

Foto's beschikbaar stellen voor verschillende beeldschermafmetingen, resoluties en vooral ook voor langzame internetverbindingen is een uitdaging voor iedere webdesigner. Afhankelijk van de websitevereisten en het budget kunnen oplossingen als het <picture>-element, mediaquery's en Javascript-oplossingen worden gebruikt, of ook wel de one-size-fits-all-benadering.

Mobiel contentconcept

Responsive webdesign? Contentaanpassing? Of een extra mobiele website? Er zijn verschillende mogelijkheden om een website voor mobiele apparaten aan te bieden – elk met zijn voor- en nadelen.

  • Responsive Webdesign
  • Content Adaption (RESS: Responsive Web Design with Server-Side Components)
  • Een extra mobiele website

 

Responsive webdesign

  • Dezelfde website/content voor alle weergaven: daardoor minder onderhoud voor de websitebeheerder.
  • De gebruiker ziet altijd – ongeacht met welk apparaat hij de website bezoekt – dezelfde content.
  • Prestatieproblemen door eventuele slechte internetverbindingen op mobiele apparaten, omdat dezelfde content voor iedereen is gemaakt en pas op het apparaat van de gebruiker op het beeldscherm wordt afgestemd (door middel van CSS-mediaquery's).

Content Adaption

  • De server controleert van tevoren welk apparaat de website wil oproepen en zendt op basis daarvan alleen de specifiek voor dit apparaat geoptimaliseerde content. Dit gebeurt door middel van 'useragent-detectie'. Daarmee kan de laadtijd van pagina's en de gebruikerservaring worden verbeterd, omdat alleen relevante gegevens vanaf de server worden verzonden.
  • Dit vereist meer werk door de complexere techniek.

.mobi website

  • Geoptimaliseerd voor mobiele apparaten, er kan individuele content worden gemaakt.
  • Er moeten twee websites worden onderhouden.
  • Er zijn twee URL's die de websitebezoeker moet onthouden of tussen welke de bezoeker wordt omgeleid, bijvoorbeeld website.com en mobi.website.com.

Bent u ervan overtuigd dat ook uw website de stap in het responsive tijdperk moet zetten om uw websitebezoekers en uw onderneming meerwaarde te bieden?