Responsive web design was één van de buzzwords van 2011 en we hebben het gevoel dat we er in 2012 en daarna veel meer van gaan horen. Het besef wordt namelijk steeds groter dat content in willekeurige volgorde gedeeld wordt tussen mobiel, tablet en desktop en het dus belangrijk is dat de content op alle devices goed zichtbaar moet zijn. (Wij hebben onze aanpak en een aantal cases voor je op een rijtje gezet.)
Het voordeel van Responsive web design is dat de klant niet meer perse voor ieder apparaat een aparte app of website hoeft te laten maken en het dus kosten kan besparen. Voor bezoekers van websites is het fijn omdat de website op ieder apparaat dat ze in handen hebben goed te bekijken is.
Tijd voor een paar goede ontwerptools voor responsive design. Zoals je gewend bent (zie hier eerdere tools) willen we graag ons steentje bijdragen. Eerder al heeft Matt Stow een goede tool voor Fireworks ontwikkeld.
Onze oplossing is iets eenvoudiger en ideaal voor als je snel een ontwerp met de klant wilt delen of een hele simpele oplossing wilt, of niet met Fireworks werkt (!?)
We willen ook niet beginnen met een lijst met voorbeelden, maar delen we een simpele “tool” waarmee je eenvoudig en snel je ontwerpen kunt presenteren op verschillende formaten en apparaten, zodat je direct je (responsive) design kunt demonstreren aan je klant of aan wie het maar zien wil.
Met de bestanden in het bijgevoegde zip archief is het heel eenvoudig één pagina in 3 verschillende formaten te presenteren.
Probeer zelf:
Hoe werkt het?
Je maakt je design in 3 verschillende afmetingen( 320px breed, 768px breed en 1024px breed).
Open het zip archief, hierin vind je een HTML pagina, een css bestand en een viertal afbeeldingen. Vervang de afbeeldingen in de map ‘images’ met jouw eigen afbeeldingen (maar laat de spacer.png staan)
De HTML pagina is klaar voor gebruik, hier hoef je niets aan te veranderen. Het is misschien wel zo aardig en zo volledig om de naam van de klant of het project in de titel van het document te zetten.
De stylesheet is nu op 3 formaten ingesteld, 1024px (desktop en iPad in landscape ), 768px (iPad in portrait) en 320px breed (iPhone in portrait en landscape).
Het enige wat je in de stylesheet hoeft aan te passen zijn de bestandsnamen van de afbeeldingen zodat deze overeenkomen met de bestandsnamen van jouw afbeeldingen en het geheel online te zetten.
Dat is alles, het enige wat je nu nog hoeft te doen is je klant verbaasd doen staan van je ontwerp!
Ok, vooruit een paar voorbeelden dan van responsive websites:
Voor een volledige lijst kun je deze geweldige website er op naslaan:
Posted: 16:40 on 2 February 2012:
2 February 2012 on 16:40:
Handige tool!
Misschien nog een goede aanvulling om een klein stukje JavaScript toe te voegen aan de index.htm, waarmee de adresbalk uit het zicht verdwijnt als de pagina is geladen (de pagina scrollt dan eigenlijk een stukje naar beneden) De code is te vinden op dit blog: davidwalsh.name/hide-address-bar
Ik heb het uitgetest op een iPhone en het werkt perfect.
Cheers, Gijs
Posted: 02:57 on 28 January 2014:
28 January 2014 on 02:57:
Hi! Is there an english version of this article/tool available?
thanks
Josh