Responsive prototype tool

Datum: 27 januari 2012 | Door: Bart | Categorie: Blog, Tools | Tags: Interaction Design, prototyping, responsive web design, Tools, Webdesign| 1 reactie

Responsive web design was één van de buzzwords van 2011 en we hebben het gevoel dat we er in 2012 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.

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.

 

 

 

 

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:

• Designmadeingermany.de magazin 5
• Hicks design
• Foodsense

Voor een volledige lijst kun je deze geweldige website er op naslaan:

• Mediaqueries

 

 

1 reactie

---