Webinar - Je website toegankelijk maken
Jurrien heeft onlangs een webinar gegeven over het toegankelijk maken van je website. Bekijk de webinar hier terug.
De mobiele website is dood. Lang leve Responsive Webdesign! Hoe het maken van websites totaal is veranderd door een nieuwe techniek.
We gaan een tijdperk in met allerlei nieuwe apparaten waarop een website bekeken kan worden (smartphones, e-reader, tablets, etc). Het is onmogelijk om voor elk apparaat een specifieke versie van jouw website te maken. Responsive Webdesign lost dit probleem op. In dit artikel leg ik uit wat Responsive Webdesign is en waarom een aparte mobiele website overbodig is.
Een mobiele website is een versie van jouw website die geschikt gemaakt is voor een mobiel apparaat. En dat is meteen het probleem: wat is een mobiel apparaat? Is dat een oude Nokia 3310? Is dat een iPhone? Of is het een tablet? Omdat je hier geen eenduidig antwoord op kan geven is het ook heel moeilijk om een mobiele versie van een website te maken die geschikt is voor al deze apparaten. Wat je meestal ziet is dat er een consensus wordt gedaan. De mobiele website wordt geschikt gemaakt voor een paar apparaten maar op de rest ziet het er niet uit.
Ook een webdesign expert worden? Schrijf je in voor onze nieuwsbrief
Daarnaast wordt de mobiele versie vaak uitgekleed qua content. Het idee is dat mensen mobiel zijn dus slechts beperkt content willen zien. Denk bijvoorbeeld aan een restaurant die alleen contactgegevens en een routebeschrijving laat zien op hun mobiele website. Maar onderzoek wijst uit dat steeds meer mensen het "mobiele web" benaderen terwijl ze gewoon thuis op de bank zitten. En dan willen ze misschien juist wel foto's of de menukaart van het restaurant zien.
De twee bovenstaande problemen zorgen ervoor dat het maken van een mobiele website een moeizaam en vervelend proces is. Gelukkig zijn die tijden voorbij...
Er is maar één website! Er is geen aparte versie voor je smartphone of je tablet. Je website reageert op het apparaat waarop de website bekeken wordt (dus responsive). Als de website bijvoorbeeld op een smartphone met een resolutie van 320px bekeken wordt dan past de website zich automatisch aan. Het content vlak wordt smaller, het font wordt groter en de afbeeldingen schalen automatisch mee. Daarmee is je website klaar voor de toekomst. Want wie weet waar we over een jaar websites op bekijken.
Misschien breekt internet op TV eindelijk door (Google TV, Apple TV of Boxee) of geen we voortaan op ons horloge websites bekijken.
Andere voordelen zijn dat je nu niet een aparte mobiele website en een 'normale' website moet onderhouden. Daarnaast hoef je ook geen moeilijke keuzes te maken over welke content je de mobiele gebruiker voorschotelt. Het mooie aan Responsive Webdesign is dat het gedaan kan worden met technieken die nu al bestaan (HTML+CSS3). Er hoeven dus geen extra scripts of modules geïnstalleerd te krijgen. Elke beetje moderne (mobiele) browser past de website dus automatisch aan!
Er zijn echter uitzonderingen. In 99% van alle gevallen zal een responsive website altijd een betere keuze zijn dan een mobiele website. Maar soms wil je een website die helemaal toegespitst is op een mobiele gebruiker. Zo een soort website kun je dan eigenlijk ook beter vergelijken met een App. Denk bijvoorbeeld aan een website voor een evenement waar mensen die op het evenement zijn vragen kunnen stellen aan een spreker via de mobiele website.
Wil je meer informatie over Responsive webdesign dan raad ik dit boek aan. Het legt uit wat Responsive webdesign is, waarom je het moet gebruiken en hoe je het ook daadwerkelijk kan toepassen op jouw website. Wat vind jij? Heb ik gelijk dat ik het mobiele web dood verklaar of zit ik er helemaal naast? Ga de discussie met mij aan in het commentaar!
Wij delen graag de kennis die we in huis hebben
Responsive webdesign is alleen van toepassing op de bovenste laag, namelijk HTML en CSS. Dit heeft geen enkele invloed op de technische onderliggende laag; oftewel het CMS of de Software die de website genereert.
Je kan met Open Source pakketten zoals Joomla, Drupal en Wordpress gewoon gebruik maken van Responsive webdesign.
Je kan eventueel uitzonderingen voor bepaalde afbeeldingen waarvan je juist wil dat ze niet geschaald worden (zoals bijvoorbeeld een infographic die onleesbaar wordt zodra deze kleiner wordt). Maar over het algemeen heb ik weinig problemen met het schalen van afbeeldingen in FF of IE9.
Hoe zie je dit in het kader van open source software? Dit is hier toch niet voor gebouwd?
Mobiele web, laptop web, tablet web, horloge web; responsive webdesign is een logisch antwoord op een logische vraag. De evolutie van de techniek schrijdt voort, the internet of things komt dichterbij.
Je kan eventueel uitzonderingen voor bepaalde afbeeldingen waarvan je juist wil dat ze niet geschaald worden (zoals bijvoorbeeld een infographic die onleesbaar wordt zodra deze kleiner wordt). Maar over het algemeen heb ik weinig problemen met het schalen van afbeeldingen in FF of IE9.
Ja klint perfect! Echter lijkt het me geen goed idee om afbeeldingen te schalen?
IE 9 en FF kunnen hier gewoon nog niet mee overweg, ik denk dat je theorie in de nabije toekomst zeker realiteit word, maar praktisch gezien is het daarvoor nog net te vroeg, denk ik..
Gr Coen,
Helemaal mee eens!
Kom veel mobiele sites tegen die slecht worden weergegeven en waar veel functionaliteit wegvalt.
Je schrijft dat een mobiele website niets anders is dan een gewone website. En je geeft aan dat je er dus geen nodig hebt. De gebruikerservaring van een website die mobiel geschikt is minder dan 1 minuut. En dat is dan nog lang. Wil je dus je belangrijkste informatie overbrengen, dan moet je een hele andere website maken dan je huidige. Je boodschap moet kort en bondig overgebracht worden. Een mobiele website is dan ook niet een vervanger maar een toevoeging aan je huidige website.
Ik ben het met je eens dat je mobiele website geen vervanger is van je huidige website. Nee, je mobiele website IS je website. Of met andere woorden, de term en het concept 'mobiele' website is achterhaald. Ten eerste zit je met het probleem van wanneer je iemand een mobiele website of de normale website voorschotelt. Neem bijvoorbeeld gebruikers op een iPad of een 7 inch tablet. Krijgen deze een mobiele website te zien? Dan missen ze veel essentiële content.
Responsive webdesign gaat uit van het idee dat het niet uitmaakt op wat voor een type apparaat de gebruiker je website bezoekt, je website moet er altijd goed uitzien. Jij geeft aan dat je met een mobiele website alleen de belangrijke content moet laten zien.
Maar als je content hebt die niet belangrijk is, waarom vermoei je er een Desktop gebruiker dan mee?
@rroose
Helemaal met je eens. Ik had het zelf niet beter kunnen vertellen. Wat ik wel wil toevoegen is dat je op een responsive design website altijd de link naar social kanalen moet hebben. Dit is in het kader van seo heel belangrijk. Een website die goed is op mobiel met links naar social zijn de nieuwe pijlers onder een sterke website. Ik vraag me wel af wat jullie het beste Wordpress template voor mobiel vinden. Iemand hier ervaring mee?
In welk opzicht zou het gunstig kunnen zijn voor je SEO om links naar je sociale kanalen (prominent) op je website te zetten? Je zorgt er toch eigenlijk voor dat bezoekers dan juist weggaan van jouw website naar jouw social media kanaal (dus minder time on site)?
De beste (responsive) templates/themes voor Wordpress, Drupal en Joomla worden altijd op maat gemaakt.