Toegankelijkheid van websites op tablet en telefoon

Omdat websites steeds vaker niet alleen op computerschermen ook op mobiele telefoons en tablets worden bekeken, is het logisch dat er bij de bouw van een site nagedacht wordt over toegankelijkheid van de site op alle apparaten. Het toverwoord is “Responsive design” waarbij de site zich automatisch aanpast aan het apparaat waarop de pagina’s worden geladen. Maar de verschillen in schermformaten en resoluties zijn enorm. Daarbij gaat het niet alleen om de laatste modellen die nu in de winkel liggen, maar ook om oude meuk die nog steeds gebruikt wordt.
Het is een illusie om te  denken dat zo’n “one size fits all” de site optimaal zou kunnen weergeven op zowel een oude iPhone (320x480 pixels) als op de nieuwste iMac met een 27 inch scherm (5120x2880 pixels).

De enkelvoudige responsive site blijft gericht op een computerscherm, met de complexiteit van dien. De elementen ervan gaan zich geheid raar gedragen op een klein telefoonscherm. Daarbij moet zo’n hele site worden geladen via de vaak langzamere verbinding op telefoons.

Muse’s alternate layouts

Adobe’s Muse heeft een geheel andere benadering: alternate layouts. Als je het in een hokje wil stoppen is het een soort van “Adaptive design”, het alternatief voor “Responsive design”. Nu ben ik een enorme fan van Muse, dus niet helemaal objectief, maar ik vind er wel wat voor te zeggen om de enorme variëteit aan schermen op te delen in drie categorieën. In Muse heb je naast de gebruikelijke computer layout de keuze om alternatieve layouts toe te voegen voor tablet en telefoon. Deze layouts, omgezet in aparte html-pagina’s, worden automatisch weergegeven op de betreffende apparaten, overigens gewoon onder dezelfde domeinnaam.
Door de aangepaste layout is de weergave veel optimaler dat een enkele site voor alle apparaten kan zijn. Daarbij kun je de inhoud aanpassen aan de specifieke functie van het betreffende apparaat. Tablets hangen er letterlijk en figuurlijk tussenin, maar op een telefoon is gerichte informatie voor onderweg (zoals een belknop en een ingebedde Google maps plattegrond voor het bezoekadres) zinniger dan de hele site in een klein scherm te proppen.

Wel meer werk

Responsive design heeft het grote voordeel dat er maar een enkele versie van de site is. Ook al wordt die niet overal vlekkeloos weergegeven, bouwen en wijzigen is als vanouds enkelvoudig. De alternate layouts van Muse zijn aparte pagina’s en dit brengt extra werk met zich mee, zowel in de bouw- als de onderhoudsfase. Ga je net als ik mee in Adobe's filosofie van de specifieke functie van de mobiele versie, dan is de telefoon layout het probleem. Deze is vooral gericht op onderweg en daardoor beknopt.

 Maar op een tablet kan de bezoeker wel degelijk rustig lezen en dus zul je je content ook daarop aan willen bieden. Uiteraard kan er veel worden gekopieerd en geplakt uit de computer versie, maar het omzetten naar de tablet layout is een flinke klus die eigenlijk niet onderdoet voor een geheel nieuwe website bouwen.

Heb je veel dynamische content, dan is dit weer eens te meer een reden om deze goed te scheiden van de pagina’s met meer eeuwigheidswaarde, want ook wijzigingen zul je in beide layouts moeten aanbrengen.