De laatste maanden is er veel gezegd en geschreven over responsive web design. De term zelf refereert naar een techniek die er voor zorgt dat websites intelligent hun layout aanpassen op basis van de schermgrootte van de bezoeker.
Op je desktop heb je wellicht een groot scherm, met toch tenminste een resolutie van 1024 op 768 pixels. Als je op je gsm kijkt is dat niet meer het geval: je scherm is kleiner en niet alle inhoud past er op. De CSS magie via @media queries zorgt ervoor dat je niet meer moet inzoomen maar dat de inhoud netjes in je 320 pixels brede scherm past.
In dit interessante artikel argumenteert James Pearce dat dit geen goede oplossing is. Hij vreest dat, omdat onze webdesignhelden dit als een oplossing aanhalen, de wereld snel zal volgen; en dat dat absoluut geen goed idee is.
Twee hoofdredenen worden aangehaald. De eerste is de snelheid van de website: ook al zie je een "mobiel geoptimaliseerde website" worden alle bestanden nodig voor de volledige website ingeladen.
Neem nu de website van St. Paul's school als voorbeeld. In de blogpost van Jeremy Keith hierover kan je zien wat er gebeurt als je je browserscherm verkleint. Ongeacht of je de website nu laadt op een snelle PC met groot scherm en breedbandverbinding, of de site wilt inladen via een miserabele EDGE-connectie in Brussel; dezelfde resources worden ingeladen. Op dit moment 1,1 Mb: ik zou het zelfs niet proberen.
De tweede reden: in de mobiele context heb je als bezoeker andere behoeften. In het geval van de website van een KMO: je gaat op je smartphone wellicht niet de hele geschiedenis van het bedrijf uitpluizen. Wel is de kans groot dat je op zoek bent naar hoe je daar nu moet geraken (je hebt misschien een afspraak); of een telefoonnummer.
Deze redenering hebben we meegenomen toen we de mobiele website van Netlash bouwden: op de homepage zie je meteen een link naar een kaart (opent de Google maps applicatie) en ons telefoonnummer. De inhoud is ingekort tot de essentie.
Ik ben van mening dat een bedrijf een website en een aparte mobiele website nodig heeft. De responsive web design-techniek is slechts een pleister bij gebrek aan tijd en budget. Zoals Pearce aanhaalt hoop ik dat webdesign cowboys deze techniek niet promoten om snel-snel een "mobiele" website af te leveren.
Door Xavier 29/10/10 (2 dagen geleden)
re: Responsive web design
Met andere woorden: we moeten checken met welke soort verbinding in combinatie met welk soort toestel iemand naar de site surft en op basis daarvan de inhoud weergeven: we zijn dus terug bij websemantics in combinatie met paradigma aanbeland. Responsive webdesign is wel interessant om te scalen tussen iPad- en 30" cinema display-resoluties op een breedbandverbinding. Verder denk ik dat je absoluut gelijk hebt.
Ik ben wel eens benieuwd naar welke criteria jullie gebruiken om te bepalen wat een mobiele gebruiker interessant vindt en wat niet. Mostly gut feeling?
Door Johan 29/10/10 (2 dagen geleden)
re: Responsive web design
@Xavier dit hangt van de website af, bij een brochurewebsite zullen het wellicht contact en plaatsgegevens zijn; bij een applicatie e.g. http://tagger.fm/ is het belangrijkste de hoofdfunctionaliteit van de applicatie; in het geval van dit voorbeeld het "taggen".
Door Thomas Deceuninck 29/10/10 (2 dagen geleden)
re: Responsive web design
Interessant artikel.
Ik volg je mening over de mobiele websites: er zou een aparte website moeten voorzien worden met minder content en enkel de essentie.
Toch zijn de @media-queries handig om je website aan te passen aan verschillende resoluties zodat elke bezoeker toch een degelijke weergave van de website heeft, aangepast aan de resolutie van zijn scherm.
Als je bijvoorbeeld met een 27" iMac op het web surft, kunnen sommige websites wel eens tegenvallen ... Hetzelfde geldt voor een oud scherm dat nog een lagere resolutie heeft dan 1024x768. Met de media-queries kun je hier leuke oplossingen voorzien.
Door Johan 29/10/10 (2 dagen geleden)
re: Responsive web design
Addendum: "Ik ben van mening dat een bedrijf een website en een aparte mobiele website nodig heeft." - dit gaat over het geval dat er voor een mobiele website gekozen wordt; niet élke website heeft een mobiel specifieke website nodig.
Door Thomas Byttebier 29/10/10 (2 dagen geleden)
re: Responsive web design
Niet volledig mee eens: voor alles wat een scherm heeft groter dan een gsm, is responsive web design in mijn ogen een uitstekende oplossing. Als je de website grafisch goed ineen steekt, dan is het ook perfect mogelijk om niet teveel onnodige kb's mee te sturen.
Wel mee eens wat mobile betreft: hier moet het inderdaad snel gaan en onnodige kb's meesturen is uit den boze. Op dat vlak is de blogpost waarnaar je verwijst én je eigen visie uiteraard niets nieuws.
Dat de gebruiker ook met een ander doel naar de site komt, klopt soms wel en soms niet. Tenminste als ik hier mijn eigen ervaringen mag volgen. Handiger zou zijn om dan op de mobiele responsive versie duidelijke links te tonen naar die dingen die op dat moment volgens jou belangrijk zijn (kaartjes, telefoonnummers...).
(Het spreekt voor zich dat bepaalde sites, vooral apps hierop uitzonderingen zijn!)
Maar om een volledig nieuwe mobiele site te maken: liever niet. Uiteraard heb ik voor de extra kb's ook geen oplossing. Maar er moet toch iets te vinden zijn dat dit probleem oplost? Want als dat van de baan is, dan pas is het een echte killer techniek voor 80% van de websites.
Samen zoeken? :)
Door Jochen Vandendriessche 29/10/10 (2 dagen geleden)
re: Responsive web design
Volledig mee eens met de aparte mobiele website, maar als er een link voorzien wordt naar de 'normale website' kunnen media queries er wel voor zorgen dat alles er op een treffelijke manier op staat. De gebruiker kiest dan zelf of hij 1.1 MB aan files wil binnenhalen, mss zit hij wel op een draadloos netwerk en wil hij een product of specifieke pagina tonen aan iemand.
Op fronteers had ik een gesprek met PPK over hoe hij een website zou optimaliseren voor mobile devices. Hij opteerde om de lowres images in te laden en die met behulp van javascript te replacen naar de originile logo's. Nadeel hiervan is dat een groot deel bezoekers eerst de blurry images zien en dan pas de normale resolutie. Een echt nadeel vind ik dat niet, aangezien JPEGS progressief kunnen ingeladen worden denk ik dat het effect visueel min of meer hetzelfde is.
Door Willem Van Bockstal 29/10/10 (2 dagen geleden)
re: Responsive web design
Akkoord met Thomas 1 & 2. Mijn browser staat quasi nooit fullscreen, en responsive design is dan proper om horizontale scrollbars te vermijden — of toch geen kille leegte te presenteren op grotere schermen. Het lijkt me dus een uitgelezen techniek voor herschaalbare vensters op grotere schermen.
Hoewel een aparte mobiele site mij in sommige gevallen een goed idee lijkt, betrap ik me er toch op dat ik vaker een volledige website op een mobiel toestel wil zien. En zelfs dan heeft responsive design zijn plaats. Horizontaal of verticaal lezen op vb. een iPhone blijft een andere ervaring, met andere mogelijkheden.
Ik zoek dan vb. richting:
Goede pagina-semantiek, geen sprites overkill, server-detectie voor mobiel die andere stylesheets presenteert en kleiner beeldmateriaal genereert, en als afwerking een apart reponsive design voor zowel mobiel als groter scherm?
En dat is dan weer veel werk...
Door Johan 29/10/10 (2 dagen geleden)
re: Responsive web design
Ik ga akkoord dat responsive web design vooral geldt als oplossing voor de veelvoud aan desktopschermen - om toch iets beters te doen in de range 1024 vs 2560.
Ik browse nooit fullscreen op mijn 27" scherm thuis omdat het een hatelijke ervaring is.
Anderzijds zoom ik dan weer veel websites een tikje in zodat ze weer goed staan. (enkel de images worden dan wat blurry. SVG anyone?)
Het punt valt ook te maken dat, als je er een beetje op voorhand over hebt nagedacht als je je website ontwierp, het niet zo ingrijpend is om @media queries te implementeren. Een echte mobiele website is meteen veel meer werk.
(Zeker als het klant kan content beheren/CMS verhaal hierin vermengd wordt - weinig CMS'en voorzien dit op een goede manier)
Dat er een switch moet zijn tussen de versies: absoluut!
Door Jeremy Keith 29/10/10 (2 dagen geleden)
re: Responsive web design
Oh, for fuck's sake.
I never once said that the *small screen* layout for St. Paul's was supposed to be a mobile solution. I'm getting pretty fed up of people either ignoring or disregarding what I've written.
You're conflating two different things: narrow screen size and narrow bandwidth. A solution for one is not a solution for the other. Neither I, nor anyone else is claiming otherwise.
Door Xavier 29/10/10 (2 dagen geleden)
re: Responsive web design
@Jeremy nobody is accusing you of having said so, it was merely an example in the above article, used to make a point. I blame Google Translate for not being sensitive enough to webdesigner's feelings? ;)
@Johan maar jullie gebruiken dus geen studies of dergelijke om die beslissing te maken? Wellicht bestaan er helemaal nog geen studies over, tijd om de faculteit gedragswetenschappen eens wakker te schudden!
Door Bram Vanderhaeghe 29/10/10 (2 dagen geleden)
re: Responsive web design
@Jeremy: don't panic. This article does *not* state that according to you the small screen layout for St. Paul's is a good mobile solution.
And you're right: bandwidth and screen size issues ask for different solutions.
What matters even more is what people's needs are.
If mobile users only want your opening hours, a map and a phone number than optimizing all content for a small screen is a non-issue.
Door Karl Gilis 29/10/10 (2 dagen geleden)
re: Responsive web design
Doet me denken aan een interessante discussie die ik ooit had met Wolf (Johan dus?) Zie de comments op dit artkel: http://webusability-blog.com/screen-resolution-statistics-and-tips/, een artikel over wat ik als zeer oude mens schaalbare of liquid lay-out noem.
Zeer blij te zien in de reacties dat velen iets voelen voor wat nu responsive web design wordt genoemd, maar in sé over hetzelfde gaat. Mooi, mooi :-)
Ik ben het wel eens met het uitgangpunst van het artikel dat (voorlopig) mobile en site gescheiden worden omwille van bandbreedte.
Het andere argument, van de andere behoeften, volg ik niet. Op veel websites staat nu gewoon te veel zever. Over ons en de geschiedenis is nooit belangrijk genoeg om op de homepage te staan... Als mobiel helpt om daarin verandering te brengen: joepie!
Door Robert Joss 29/10/10 (2 dagen geleden)
re: Responsive web design
Is interessant zoals door vorigen gezegd enkel en alleen als er nood aan is, velen zouden als eens kunnen starten met een goed website ipv denken aan een mobiele versie
Door Thijs Visser 29/10/10 (2 dagen geleden)
re: Responsive web design
Websites moeten op meer dan alleen resolutie geoptimaliseerd worden. Akkoord. Maar is responsive webdesign niet een stap voorwaarts? Wat is het alternatief? Zonder responsive webdesign heb je nog steeds geen optimalisatie voor zowel resolutie, bandbreedte en gebruikersdoelen.
Waar we naar toe moeten is optimalisatie voor alle drie. Het is niet een kwestie van of-of, maar en-en. Responsive webdesign vult die functie van resolutie-optimalisatie.
Niemand zei ooit dat die de functie van bandbreedte zou vervullen. Ik denk dat veel mensen die bezig zijn met responsive webdesign daar mee in hun maag zitten. Toch kiezen ze dan wel voor responsive, omdat het beter is dan niets.
Nu nog optimaliseren voor bandbreedte en gebruikersdoelen.
Door Thomas Deceuninck 29/10/10 (2 dagen geleden)
re: Responsive web design
@Thijs: Niemand heeft hier beweerd dat de media queries de functie van bandbreedte zou vervullen maar we stellen wel vast dat mensen het daar soms voor gebruiken. Ze toepassen is een stap in de goeie richting maar je moet ze natuurlijk wel voor het juiste doel gebruiken.
Nu inderdaad nog optimaliseren voor bandbreedte en gebruikersdoelen. Je moet natuurlijk ergens beginnen en responsive webdesign helpt daarbij als je het op een correcte manier gebruikt.
Door Wolf 29/10/10 (2 dagen geleden)
re: Responsive web design
@Xavier je kan je ervaring gebruiken, je baseren op een usability test, AB testen, een onderzoek uitvoeren - al die zaken kunnen maar worden helaas weinig gedaan.
De beslissingen over wat wel en wat niet worden bij Netlash genomen door de samenspraak tussen klant en het team dat zijn site maakt (de informatiearchitect heeft hier de grootste impact).
@Karl Johan is de naam en Wolf is de nickname. Responsive web design is in sé een beter regelbare liquid layout (die veel van de argumenten tegen liquid overboord gooit)
@Jeremy I'm only taking a Clearleft website as an example since there are so few responsive designs out there. You shouldn't feel "attacked".
The main point of the article is that media queries do not make a mobile website; I never claimed you said anything like that.
@Thijs Het is zeker een stap voorwaarts, het betrekkelijke nut ervan wordt echter zwaar overdreven. Inderdaad: we moeten rekening houden met alles. Niet of, maar en.
Door webdesign 31/10/10 (20 uren geleden)
re: Responsive web design
Een bedrijf van 100 tot 1000 werknemers die actief op internet bezig zijn moeten tegenwoordig eigenlijk wel een mobile website hebben. Het mag niet meer zo zijn dat je op een mobile van links naar rechts moet scrollen.
De schermen worden daarentegen wel steeds beter van telefoons waardoor 1024 al makkelijk op een telefoon scherm past.
Door netlash 29/10/10 (2 dagen geleden)
Mooie mening van @wolfr_ over responsive web design: http://ntl.sh/auSFkJ
Door wolfr_ 29/10/10 (2 dagen geleden)
leuke discussie op http://www.netlash.com/blog/detail/responsive-web-design
Door decthomas 29/10/10 (2 dagen geleden)
RT @wolfr_: leuke discussie op http://www.netlash.com/blog/detail/responsive-web-design