website (goed) toegankelijk maken voor mobiele apparaten

[willemj]

Binnen twee tot vijf jaar zullen meer mensen websites bezoeken via een tablet of mobiele telefoon dan via een desktop computer [1] Ik zie op mijn websites nu al 10-20% bezoekers die een mobiel apparaat gebruiken en ben me daarom weer eens gaan verdiepen in de mogelijkheden om sites voor dat soort apparaten aan te bieden.

 

De hippe techniek op het moment heet 'responsive web design'. Technische details zal ik achterwege laten (zie links onderaan) Het belangrijkste van deze techniek is dat je zonder (al te veel) aanpassingen aan je webshop of cms één site kunt aanbieden die zowel voor een pc als mobiel apparaat goed bruikbaar is. Voor deze techniek moest je zowat twee websites bouwen. Een flinke stap vooruit dus en ook toepasbaar op kleinere sites.

 

Om een idee te krijgen van de mogelijkheden wat mooie showcases van dit soort ontwerpen op Media Queries. De afbeeldingen linken naar de site. Als je deze opent op je pc maak dan het venster van je browser langzaam smaller en je ziet hoe de site zich netjes aanpast.

 

Ik heb nu twee dagen zitten spelen met deze techniek en één site, een webshop, gaat volgende week live. Ik zal statistieken als bezoekduur, bounce rate e.d. van 'mobiele' bezoekers van voor en na deze aanpassing hier posten (als er interesse is)

 

Mijn concrete vragen:

De techniek is al weer twee jaar oud maar ik zie het weinig. Ken je (Nederlandse) sites die het toepassen? Vooral ter inspiratie.

 

Wat is het percentage van mobiele gebruikers op je site (en op welk volume bezoekers)?

 

Zie je, op je site zonder aangepaste mobiele versie, verschillen in conversie bij mobiele bezoekers?

 

Wat technische artikelen

[1] Algemeen artikel over responsive web design op a list apart.

Een lijst met tools voor responsive design.

Artikel specifiek over het schalen van afbeeldingen A list apart - Fluid images.

 

ps. post is niet commercieel bedoeld. Ik doe voornamelijk het technisch werk aan de achterkant van websites. Interesse voor het onderwerp komt vooral door vragen van bestaande klanten en omdat ik nu eenmaal techneut ben ;)

 

pps. ik ben ook aan het spelen met interfaces aan de andere kant van het spectrum; de '10 feet ui'. Als je daar goede voorbeelden van hebt graag een pm!

[De Ketchupmaker]

Alleen even een kort antwoord op je eerste vraag: dat komt omdat verschillende technieken uit css3 voortkomen en deze standaard is nog onderhevig aan discussie binnen W3C. Oudere browsers kunnen er niet altijd evengoed mee overweg, neemt niet weg dat je het wel kunt (moet?) toepassen. Als css3 standaard wordt zal het ontwikkelen van een site meer kosteneffectief worden omdat je niet meer voor elk platform, mobiel / desktop etc., een aparte versie hoeft aan te bieden.

[Sabra]

Ik maak mijn websites standaard responsive en er lijkt ook meer vraag naar te zijn. Nog steeds is de ontwikkeling in Nederland erg traag helaas. Er zijn beperkingen, maar er is ook veel vooruitgang met o.a. flexibele sliders en ander leuks. Jammer dat er voor IE 9 weer een script voor nodig is maar ik verbaas me er allang niet over.

 

 

[Sabra]

Oh, en deze site had een paar maanden terug een kleine showcase van Nederlandse responsive websites.

[willemj]

Alleen even een kort antwoord op je eerste vraag: dat komt omdat verschillende technieken uit css3 voortkomen en deze standaard is nog onderhevig aan discussie binnen W3C. Oudere browsers kunnen er niet altijd evengoed mee overweg,

 

Dank voor de aanvulling. Klopt; met name Internet Explorer 6, 7 en 8 snappen deze techniek niet. Het mooie is dat als je de site voor een gemiddelde pc met die browsers ontwerpt en de details voor mobiele apparaten via deze techniek doet het gewoon werkt (die browsers negeren dan gewoon je extra regels en je site werkt dus als een 'klassiek' ontworpen site)

[Sabra]

Nog een tip: Vorige maand het boek Head First Mobile Web gelezen en dat was best een aardig boek. Sommige hoofdstukken gaan ook over een aparte mobiele site, en webapps. Dus als je geen zin heb in tutorials, maar liever ouderwets met een boek in bed ligt is het een aanrader. ;D

 

Jullie nog boeken/artikelen die ik heb gemist en moet lezen?

[De Ketchupmaker]

Dit boek / e-book is geheel gewijd aan responsive webdesign en zeer de moeite van het lezen waard.

[Sabra]

Dit boek / e-book is geheel gewijd aan responsive webdesign en zeer de moeite van het lezen waard.

 

Sowieso moet er een mobiele telefoon naar Ethan Marcotte vernoemd worden :)

[wouterz]

Zelf ben ik vooral bezig met Joomla CMS en daarbij is het opvallend dat sinds enkele maanden de template clubs/providers steeds meer responsive templates uitbrengen. Een paar voorbeelden:

 

http://www.joomlart.com/joomla/templates/ja-wall

http://www.joomlart.com/joomla/templates/ja-elastica

http://www.joomlabamboo.com/joomla-templates/responsive-joomla-template

 

Zijn er nog wel meer te vinden. Heb dus het gevoel dat het nu echt begint te komen.

[De Ketchupmaker]

Vers van de pers: css media queries zijn nu officieel door W3C tot webstandaard gemaakt. Dat is een belangrijke stap voor het algemeen geaccepteerd krijgen van responsive design.

[Sabra]

Vers van de pers: css media queries zijn nu officieel door W3C tot webstandaard gemaakt. Dat is een belangrijke stap voor het algemeen geaccepteerd krijgen van responsive design.

 

Woehoe! :) (ik wou dat we een dansende smiley hadden!)

[Micha van Veen]

Ik ben zelf nog in het stadium om mij in te lezen in deze materie. Hoe het technisch uitgevoerd wordt heb (wil) ik zelf niet zoveel mee te maken, ik volg alleen welke mogelijkheden er zijn.

 

In de rol van designer vind ik het idg een uitdagende stap in de presentatie / schets fase. Vroeger presenteerde je de ontwerpen voor een desktop website (opmaak, FO, pagina variaties etc) en een eventuele mobiele versie. En daarin de schakering in functionaliteiten per medium. Laatst bv tegen een Retina probleem aangelopen waarin ik de bitmaps een zekere scherpte wilde laten behouden t.o.v. tekst e.d. maar dat was een technisch euvel, het voorstel naar de klant is maar een versie.

 

Hoe ga je om met de display variaties in de presentatie fase? 2048x1536, 1080p, 720p, 480x320. Buiten het feit dat het diverse ontwerpen zijn met ieder zijn variaties qua opbouw van de grafische en functionele elementen. Maar ook in de variaties uitzoeken wanneer een bepaalde functie simpelweg ongeschikt is voor een bepaalde grootte?

 

Elke variant moet met de hand worden uitgewerkt, wat dus zijn weerslag heeft op simpelweg meer uren in de ontwerp fase.

 

Met bescheiden groet,

 

Micha

 

 

PS wat zeggen de statistieken van HL op het gebied van mobiel vs desktop bezoekers?

 

[R.I.P. - Benm]

Voor een deel is het natuurlijk ook aan de makers van mobiele devices, de browsers daarvoor hebben elk hun manier om 'normale' websites zodanig weer te geven dat je de tekst kunt lezen en dergelijke. Iets als HL (de gewone versie) werkt best op een telefoon, maar het is wel een beetje tappen en zoomen om het prettig te kunnen lezen.

 

Het lastige is momenteel dat de trend is dat mobiele devices rap omhoog gaan in schermresolutie, waardoor de nieuwe types eigenlijk de gemiddelde website al normaal kunnen weergeven in landscape orientatie. Ondertussen websites ontwikkellen voor 480x320 portrait weergave lijkt daarmee een wat loze bezigheid, gezien die devices er over een paar jaar toch nauwelijks meer zijn.

 

Overigens is het bouwen van een site geschikt voor portrait orientatie wel weer een goed idee als je veel gebruikers verwacht die het op een telefoon bekijken. Bij een tablet speelt dit een veel mindere rol - voornaamste waar je mee moet oppassen zijn menu's die uitklappen als je er met de muis overheen gaat. Een klapmenu vervangen voor een statisch exemplaar indien de bezoeker met een touchscreen device binnenkomt lijkt me een handige zet.

 

 

[Sabra]

 

In de rol van designer vind ik het idg een uitdagende stap in de presentatie / schets fase. Vroeger presenteerde je de ontwerpen voor een desktop website (opmaak, FO, pagina variaties etc) en een eventuele mobiele versie. En daarin de schakering in functionaliteiten per medium.

 

 

Dat is ook zo'n probleem waar ik vaak tegen aan loop. In Amerika bijvoorbeeld, zijn ze al zo gewend aan mobile design dat ze helemaal niet raar opkijken als je een mobile first FO presenteert. Maar als je dat hier in Nederland doet kijken ze je aan alsof je simpel bent.

 

Voor een deel is het natuurlijk ook aan de makers van mobiele devices, de browsers daarvoor hebben elk hun manier om 'normale' websites zodanig weer te geven dat je de tekst kunt lezen en dergelijke. Iets als HL (de gewone versie) werkt best op een telefoon, maar het is wel een beetje tappen en zoomen om het prettig te kunnen lezen.

 

Het lastige is momenteel dat de trend is dat mobiele devices rap omhoog gaan in schermresolutie, waardoor de nieuwe types eigenlijk de gemiddelde website al normaal kunnen weergeven in landscape orientatie. Ondertussen websites ontwikkellen voor 480x320 portrait weergave lijkt daarmee een wat loze bezigheid, gezien die devices er over een paar jaar toch nauwelijks meer zijn.

 

Overigens is het bouwen van een site geschikt voor portrait orientatie wel weer een goed idee als je veel gebruikers verwacht die het op een telefoon bekijken. Bij een tablet speelt dit een veel mindere rol - voornaamste waar je mee moet oppassen zijn menu's die uitklappen als je er met de muis overheen gaat. Een klapmenu vervangen voor een statisch exemplaar indien de bezoeker met een touchscreen device binnenkomt lijkt me een handige zet.

 

 

 

Klopt, maar bij complexere en vooral zwaardere websites kunnen media queries een mooie rol spelen. Website die graag hun slider, video's en afbeeldingen behouden maar toch de bandbreedte willen verminderen voor mobiele gebruikers. Ook voor de hogere resolutie telefoons in landscape kan dit toch voordelig zijn omdat veel mensen per Gb afrekenen.

 

[willemj]

Hoe ga je om met de display variaties in de presentatie fase? 2048x1536, 1080p, 720p, 480x320. Buiten het feit dat het diverse ontwerpen zijn met ieder zijn variaties qua opbouw van de grafische en functionele elementen. Maar ook in de variaties uitzoeken wanneer een bepaalde functie simpelweg ongeschikt is voor een bepaalde grootte?

 

Ik zou uitgaan van de resoluties waarop je site verandert qua functionaliteit. Niet van een paar vaste scherm groottes. Bij de site waar ik mee aan experimenteren ben past de navigatiekolom bij 800 pixels niet meer naast de inhoud en krijgt de bezoeker alternatieve navigatie. Bij 520 pixels past een ander element niet meer. Dat zijn dus 3 'versies' voor grote schermen, medium schermen en kleine schermen.

 

Elke variant moet met de hand worden uitgewerkt, wat dus zijn weerslag heeft op simpelweg meer uren in de ontwerp fase.

 

Uiteraard. Voordeel van deze techniek is dat het eenvoudiger en véél flexibeler is om voor verschillende resoluties te ontwerpen (althans de technische kant)

 

Mijn vraag is dan ook of het inmiddels rendabel is. Ik heb inmiddels een idee hoeveel tijd het kost en hoeveel bezoekers met kleine(re) schermen een site ongeveer heeft. Nu nog het effect van een aangepaste site op de conversie te weten komen.

 

Voor een deel is het natuurlijk ook aan de makers van mobiele devices, de browsers daarvoor hebben elk hun manier om 'normale' websites zodanig weer te geven dat je de tekst kunt lezen en dergelijke. Iets als HL (de gewone versie) werkt best op een telefoon, maar het is wel een beetje tappen en zoomen om het prettig te kunnen lezen.

 

Volgens mij draai je het om. Designers en bouwers maakten sites alleen voor grote schermen en makers van mobiele apparaten hebben kunstgrepen uitgehaald om te zorgen dat die sites met wat extra onhandige handelingen enigszins bruikbaar zijn. Het is aan de site bouwers om te zorgen dat dat niet niet nodig is.

 

Ik realiseerde me na het zien van de site van het Centraal Museum dat het de andere kant op, grotere schermen dus, net zo goed werkt. Verkeerde titel gekozen dus.

[Sabra]

Hier is nog een artikel van Jason Grigsby uit 2011 over responsive images. Ergens onder aan het artikel stelt hij ook de vraag of er een oplossing moet komen voor het dilemma van hoge resolutie vs. trage verbinding.

 

Ook ik bouw m'n responsive sites nog standaard tot < 480 px flexibel maar dat is meer uit gewoonte dan dat het werkelijk nut heeft. Het neemt niet weg dat ik het wel een prettige manier van werken vind: beginnen bij klein en functioneel, en dan verder uitbouwen. Het zorgt er op de een of andere manier voor dat mijn FO's gestructureerder en gebruiksvriendelijker zijn. Uiteraard is dat voor iedereen persoonlijk weer anders, maar voor was het echt een openbaring.

 

 

Ik realiseerde me na het zien van de site van het Centraal Museum dat het de andere kant op, grotere schermen dus, net zo goed werkt. Verkeerde titel gekozen dus.

 

Responsive design is eigenlijk gewoon een flexibel design. Want aan de andere kant van het spectrum worden de grotere beeldschermen ook weer hoger in resolutie.

 

Vroeger was het makkelijker. Toen maakte ik al m'n tabellen gewoon 100% breed en hoefde ik me nergens zorgen over te maken. Ik word oud. >;( ::) ;D

[De Ketchupmaker]

Ik weet niet of je oud bent ;) Maar nu zet je je div'jes op een percentage, is iets meer typen. En voor responsive images kun je max-width 100% gebruiken, dar kom je al een eind mee.

[Sabra]

Ik weet niet of je oud bent ;) Maar nu zet je je div'jes op een percentage, is iets meer typen. En voor responsive images kun je max-width 100% gebruiken, dar kom je al een eind mee.

 

Nah, valt wel mee. Maar oud genoeg om het tabellen tijdperk te hebben meegemaakt. :)

 

Het dilemma waar ik het over had mbt responsive images is niet zo zeer het aanpassen van de dimensie, maar het kunnen laden van een lagere danwel hogere resolutie afhankelijk van de resolutie van het apparaat, voordat de browser daadwerkelijk gaat laden.

[De Ketchupmaker]

Ook ik ben begonnen in het tabeltijdperk. Lijkt wel een eeuwigheid geleden. Over de responsive images: ik kwam pas geleden deze site tegen. Heb er nog geen ervaring mee, ziet er wel goed uit. Misschien dat dit een oplossing voor je dilemma dichterbij brengt?

[Sabra]

Ook ik ben begonnen in het tabeltijdperk. Lijkt wel een eeuwigheid geleden. Over de responsive images: ik kwam pas geleden deze site tegen. Heb er nog geen ervaring mee, ziet er wel goed uit. Misschien dat dit een oplossing voor je dilemma dichterbij brengt?

 

Thanks voor de link, ik gebruik momenteel een ander script hiervoor maar ik ga eens kijken of dit misschien voordelen heeft.

 

Nee, het 'probleem' waar ik op doel is als volgt (misschien ben ik een beetje warrig, sorry); Het was gebruikelijk om lage resolutie beelden aan te bieden aan apparaten met diezelfde lage resolutie. Dit, omdat aangenomen werd dat een apparaat met een lage resolutie over het algemeen ook een trage internet verbinding had. Tegenwoordig strekt de iPhone 4 al 980 pixel in landscape. En wordt dus niet herkend als apparaat met een lage resolutie. Hence, de hoge resolutie versie wordt geladen, terwijl de mobiele internet verbinding nog steeds niet om over naar huis te schrijven is.

 

Het aanbieden van lagere resolutie beelden dmv javascript is dus eigenlijk over een tijdje al weer achterhaald, omdat de resoluties stelselmatig omhoog gaan. Als dat nou ook zo was voor de verbinding... ::)

[Kena]

Ik heb even door jullie berichten gelezen, maar bij 'responsive site' ben ik al afgehaakt (sorry..) .. geen idee wat dat is.

 

Ik heb een heel algemene vraag (en ik ben een totale leek op het technische vlak):

 

1) Als je je site geschikt wil laten maken voor mobiel gebruik: is dat iets heel ingewikkelds? Moet de hele site (alle pagina's) opnieuw geprogrammeerd worden?

 

2) Moet je je mobiele site separaat onderhouden? Of worden later alle aanpassingen, die je op je 'normale' website doet ook automatisch toegepast op je mobiele site?

 

 

[De Ketchupmaker]

Je kunt kiezen voor twee sites, een voor de pc en een voor mobiele platforms. Beide sites worden dan apart onderhouden. Je kunt ook kiezen voor een site die goed functioneert en op pc's en op mobiele platformen, de zogenoemde responsive site. En je kunt kiezen voor een site die daar het midden tussen houdt. Maar wat let je om je je door een webbureau in een gesprek te laten voorlichten? Dan kan aan de hand van voorbeelden de (on)mogelijkheden en voor- nadelen van iedere wel of niet responsive worden besproken. En iedere oplossing heeft natuurlijk zijn eigen kostenplaatje.

[Joklelab]

Hallo!

 

Dit is geen concreet antwoord op je vraag, maar wel een manier om relatief eenvoudig een responsive site ge maken:. Als je bekend bent met jQuery, kun je de masonry plugin gebruiken: http://masonry.desandro.com/

Tevens vind je hier veel voorbeelden naar responsive sites.

 

Een Nederlandse site (waar ik zelf aan heb meegewerkt) die dit toepast is bijvoorbeeld: http://www.kumulus.nl

Helaas heb ik geen statistiek informatie voor je.

[Zomaar iemand]

In mijn zoektocht ben ik ook nog wel een handige website gevonden, waarin uitgelegd wordt hoe het selecteren van de breedte van de browser werkt en hoe je dat in een script verwerkt:

http://www.websitedelivery.nl/responsive-webdesign-nader-bekeken/

[Zomaar iemand]

Ik heb me vergist, de vorige tut is niet echt compleet, ik kan mijn post alleen niet aanpassen.

 

Deze is een stuk beter:

http://www.opleidingwebdesigner.be/tutorial/responsive-webdesign

[R.I.P. - Benm]

Het dilemma waar ik het over had mbt responsive images is niet zo zeer het aanpassen van de dimensie, maar het kunnen laden van een lagere danwel hogere resolutie afhankelijk van de resolutie van het apparaat, voordat de browser daadwerkelijk gaat laden.

 

En daar zijn weer diverse oplossingen voor. Uiteraard kun je via css definieren dat een ander bestand gebruikt moet worden indien men bij een lage resolutie kijkt, maar dat vereist wel dat je meedere versies van iedere afbeelding maakt (niet dat dat niet automatisch kan, maar handig is anders).

 

Eigenlijk zou de beste oplossing misschien nog wel zijn om eindelijk eens te stoppen met JPG, en te kiezen voor een formaat met betere compressie waarbij je bovendien zelf kunt aangeven hoeveel detail je wilt tegen welke bandbreedte.

 

Helaas nekt backward-compatibility je altijd als je een dergelijke verbetering wilt doorvoeren. Digitale camera's slaan standaard hun foto's op als jpg, en je wilt standaard mp3 tjes voor muziek omdat die gewoon op ieder apparaat werken. Dat het bij gelijke kwaliteit allemaal de helft kleiner kan slaat daar geen deuk in. Niet dat dat hoeft, bandbreedte en opslagruimte lijken (per betaalde euro) snel genoeg te blijven groeien om het allemaal maar bij het oude te laten.