Een van de belangrijkste ontwikkelingen van het afgelopen jaar was de opkomst van responsive webdesign. Nu het internet zich over steeds meer apparaten verspreidt , wordt het voor designers steeds lastiger om voor al die apparaten mooie content te bieden. Voor elke mobiele telefoon een app bouwen is te duur en HTML5 biedt een aantal handige toevoegingen die een nieuwe toepassing mogelijk maken. Waarom dus niet één lay-out bieden en die vloeiend laten aanpassen aan de schermgrootte van het apparaat?
Tadaa, responsive webdesign was geboren. Maar hoe wordt het inmiddels toegepast? Nou, in Nederland nog slechts mondjesmaat. Hieronder hebben we vijftien mooie voorbeelden van Nederlandse responsive designs verzameld. Heb je zelf ook een responsive design opgeleverd? Laat het dan weten in de comments. Wil je testen of een design responsive is? Check dan de testpagina van Matt Kersley.
Studio Stomp
Orestis
About Design
De Bouwmeester Mobiliteit
Ja of nee
Eend
Herjen Oldenbeuving
Mobilism 2012
Tim Benniks
Studio With
Online Jaarverslag
Centraal Museum
Greenpeace Magazine
Athlon Flex Centre
Brand New
Een mooi overzicht. Bedankt!
Alleen twijfel ik of de meeste voorbeelden écht responsive zijn, en niet ‘slechts’ adaptive.
‘k Ben benieuwd naar de mening van anderen hierover.
Christiaan heeft helemaal gelijk. Slechts 8 van de 15 websites zijn hier responsive. En dat zijn:
- Ortesis
- Ja of nee
- Herjen Oldenbeuving
- Mobilism
- Tim Benniks
- Studio Width
- Online Jaarverslag
- Greenpeace Magazine
Één van de vereisten van responsive webdesign is namelijk het gebruik van een vloeiend grid. De breedtes van elementen worden hierin met percentages uitgedrukt.
Sommige van deze websites maken alleen gebruik van mediaqueries. Dit zijn voorwaarden die je in CSS kunt stellen m.b.t. mediatypen (bijv. screen of print) en hun eigenschappen (bijv. de breedte van de resolutie). In feite stel je dus condities binnen CSS. Hetgeen wat je ook duidelijk ziet bij de overige sites.
Deze sites krijgen een aangepaste layout met vaste breedtes (pixels) naar gelang de minimale of maximale breedte van de browser. Vandaar het woord ‘adaptive’.
Al zo’n 4 jaar gelden gebouwd op basis van responsive design, de site:
http://www.helenahoeve.nl
Zie ook: http://overdewebsite.helenahoeve.nl/ontwerpen.htm
Momenteel werk ik aan ZOMDir.com. Nog lang niet klaar, maar wellicht interessant is: http://websitequality.zomdir.com
Hans
Leuk om ook eens Nederlandse roundup te zien, zitten een aantal mooie sites tussen.
@Niels: Hoewel mij responsive beter lijkt is adaptive toch ook een prima uitvoering?
@Martijn: Als je je website wilt optimaliseren voor apparaten met een vaste resolutie dan is een vloeiend grid (opmaak) geen vereiste. Het aantal apparaten waarvoor je een site geoptimaliseerd hebt is echter wel beperkt. Met een vloeiend grid voorkom je dit en haal je het beste uit elk apparaat met welk resolutiedomein dan ook. Je design is ‘future-proof’.
Misschien vergt deze aanpak in het begin iets meer werk omdat je veel moet omrekenen van pixels naar procenten en ems, maar de efficiëntie met oog op de toekomst is vele male hoger.
Niels heeft helemaal gelijk. Een aantal sites blijkt adaptive te zijn en niet responsive. Het verschil tussen die twee is beperkt, maar wel degelijk aanwezig. Hoe dan ook, de getoonde sites laten wel zien goed nagedacht te hebben over het bereiken van alle soorten gebruikers.
Bedankt voor de feature!
Bedankt voor de feature! (De Bouwmeester Mobiliteit)
Ook Nederlands en responsive:
http://www.joomladagen.nl/2012/
Deze nederlandse sites zijn ook adaptive:
http://www.flame-vormgeving.nl
http://www.tropenmuseum.nl
Woop woop, de site van de Jan Hekmanschool is responsive!
http://janhekmanschool.nl
Was minder werk dan gedacht
Mooie collectie, kende ze nog niet allemaal.