Smashing Book 5: Real-Life Responsive Web Design — Part 1

’ve seen teams create three (or more) separate prototypes — for mobile, tablet and desktop — and then proceed to test each one independently. When this happens, each of these separate experiences will evolve on its own, usually resulting in three unique experiences which will be very difficult (if not impossible) to build in a responsive way.

These days, the tools available for rapid prototyping are tremendously capable: frameworks like Bootstrap34 and Foundation35; CSS (or Sass36 and LESS37) toolkits like Bourbon38 and Pure CSS39; visual prototyping tools like InVision40 and Marvel41. Even visual web design and development tools like Macaw42 or presentation tools like Keynote43 can be used to create very

Samantha has a handful of examples on the style tiles site, and there are a few great resources listed below which cover their use in real-world process:
•“Get Your (Visual) Style On46”: Yesenia Perez-Cruz, Dan Mall and my presentation at Artifact Conference in Austin, Texas (May 13, 2013).
•“Faster Design Decisions with Style Tiles47”: Samantha Warren at An Event Apart in Austin, Texas (February 2015).
•The Style Guide Podcast with Samantha Warren48
Because of their static nature, we don’t use them too often. Our initial design direction is typically established with an element collage or a style prototype, both covered next.