Академический Документы
Профессиональный Документы
Культура Документы
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
71 Comments
Frameworks,
Prototyping
with
This article is the second piece in our new series introducing new, useful and freely
available tools and techniques presented and released by active members of the Web
1
design community (the first article covered PrefixFree , a new tool be Lea Verou).
ZURB are well-known for their wireframing and prototyping tools and in this post
Foundation,
Youve probably already heard about responsive design, which is website design that responds to the device
constraints of the person viewing it. Its a hot topic right now, and with good reason: alternative devices
outsell desktop PCs 4 to 1 already, and within three years more Internet traffic in the US will go through mobile
devices2 than through laptops or desktops.
All of this is forcing a convergence on what Jeremy Keith calls the one Web3 : a single Web that doesnt care
what device youre on, how youre viewing content or how youre interacting with it.
What we found at ZURB was that while the concept of one Web is strong and the need for responsive
websites great, the tools to help us quickly build that way just didnt exist. Thats why we built Foundation4 , a
framework to help you build prototypes and production code thats truly responsive.
1/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
For years at ZURB, we used and refined a global CSS file that included a nice 960 grid, typography styles,
buttons and other common elements. The trouble with our global CSS was that none of these pieces were
written to be used by others, so they required a good deal of ramping up and training, with no great
documentation.
Our CSS style guide had a lot of good global elements, but it wasnt well documented, and it certainly wasnt
ready for other devices.
The bigger problem was that it wasnt designed to be responsive or mobile-friendly in any way. We were
stuck in the same rut that a lot of designers are in: creating a 1000-pixel-wide canvas, putting a 960 grid on it,
and calling it a day. Our tools were built to support that workflow. So, we rewrote it into Foundation, a
framework for everyone to be able to rapidly prototype in a responsive way.
Foundation is an MIT-licensed framework that includes a nestable arbitrary-width responsive grid; mobile
styles, buttons and typography; layout affordances such as tabs and pagination; forms; and useful JavaScript
plugins. We wrote or packaged all of these pieces to achieve a few goals:
1. Quickly train new designers, inside and outside ZURB, to use a common framework;
2. Rapidly prototype websites for desktops and any mobile device;
3. Easily customize and complete the prototype to turn it into production code for particular
projects or clients.
http://www.smashingmagazine.com/2011/10/25/rapidprototypingforanydevicewithfoundation/
2/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
The first goal cant be overstated; the value of having a single set of styles and best practices that the team
can iterate on as a whole and communicate to our clients is tremendous. We can ramp up new designers
much more quickly, build things faster and work together more easily. On one recent project, we even got a
volunteer sufficiently up to speed on Foundation that we could collaborate on codeand it took only about
15 minutes.
The Grid
A lot of grids are floating around, including some very good ones right here on Smashing Coding6 . Grid
systems have a few issues, though, and we built Foundation to tackle them well, some of them.
FLUIDITY
One of the critical pieces of device-agnostic design is having a fluid layout that conforms to the size (and
orientation) of the device. Foundations grid is completely fluid, with percentage-based widths and margins,
and it works all the way back to IE 7 (but not IE 6philosophically speaking, acting like IE 6 doesnt exist
http://www.smashingmagazine.com/2011/10/25/rapidprototypingforanydevicewithfoundation/
3/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
makes sense at this point). The HTML markup is pretty simple. Heres an example of the grid in use, where we
nest it for a more complex layout:
<divclass="row">
<divclass="eightcolumns">
<p></p>
<divclass="row">
<divclass="sixcolumns">
<h5>AnotherSection(.six.columns)</h5>
<p></p>
</div>
<divclass="sixcolumns">
<h5>AnotherSection(.six.columns)</h5>
<p></p>
</div>
</div>
<p>Nowthenestedrowhasbeenclosed,andwe'rebacktotheoriginaleightcolumnsec
tion.</p>
</div>
</div>
You can check out the above code on this example page7 .
Here are some of the built-in grid constructs, all of which scale with the browser window.
RESPONSIVENESS
The second critical piece is for the grid to be able to easily adapt to small devices and their unique
constraints. We tackled this in three ways:
On small devices (such as phones), the grid simply stacks vertically, with every column
running the full width.
Weve also included block-grid classes, which are definitions for ULs that can be two-up
through five-up and that remain a grid even on very small devices.
And we have mobile visibility classes. These are a group of styles that enable you to
quickly try things out by hiding and showing elements on different kinds of devices. You
can attach classes like so:
http://www.smashingmagazine.com/2011/10/25/rapidprototypingforanydevicewithfoundation/
4/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
<divclass="hideonphones">
<p>Thisisaparagraphthatwedon'twanttoseeonsmalldevices.</p>
</div>
<divclass="showonphones">
<p>Thisparagraphwillbeshownonlyonphones,notontabletsordesktops.</p>
</div>
Another interesting use for the classes is to prototype a common mobile consideration: placing mobile
navigation at the bottom, as opposed to its more common placement at the top. You could do this:
<navclass="hideonphones">
<ul>
<li><ahref=#><a></li>
<li><ahref=#><a></li>
<li><ahref=#><a></li>
</ul>
</nav>
<navclass="showonphones">
<dlclass="mobiletabs">
<dd><ahref="#"></a></dd>
<dd><ahref="#"></a></dd>
<dd><ahref="#"></a></dd>
</dl>
</nav>
Foundation lets you write code once and show it on different devices easily.
SEMANTICS
This one is tricky. A very compelling case is to be made that grid systems are by nature not semantic. This is
partly true; theyre still descriptive of their function, but they do break the separation of data and display.
We didnt want to base the Foundation framework on another extension, such as LESS9 . LESS is a great tool
enabling you to use variables, shortcuts and more in your CSS, but we didnt want to have to rely on it and
add another barrier to using Foundation. The recent article we mentioned above actually fixed the data and
display issue of grids by using LESS, which is awesome, but Foundation doesnt fix that. Heres why
http://www.smashingmagazine.com/2011/10/25/rapidprototypingforanydevicewithfoundation/
5/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
All of these methods are a stopgap. The replacement technique might come out next month or next year, but
really all of these tools will change drastically in the very near future. Tools like LESS help us get a little closer
to a very clean solution, but at a higher technology and learning cost. We wanted Foundation to be the fastest
way to prototype for all kinds of devices, so we paid a small price for truly separated markup.
11
Using Foundation, we built the prototype on the left in two hours (including every screen), and then started
modifying it until it became the final website on the right.
Its not terribly pretty, but it did give us something we could click around in, add copy to and iterate on. In the
prototype, we used only a bare minimum of custom styles to more accurately represent the intended visuals.
Once we completed the prototype, we were able to complete the visual design and apply it to the existing
Foundation code base to produce the final website12 . The final website retains all of Foundations framework,
with the new styles applied on top of it.
http://www.smashingmagazine.com/2011/10/25/rapidprototypingforanydevicewithfoundation/
6/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
We recently launched an app through which to give traditional design feedback on mockups and websites. Its
called Spur13 , and it has been great fun for us; not only is it in our wheelhouse (for design feedback), but
building a responsive Web app was an awesome opportunity.
Spur has a number of tools and actions, as well as some simple forms and a fairly complex JavaScript- and
HTML-loading animation. Adapting all of this to mobile devices could have been really painful, but by starting
with Foundation, we cut down on that considerably and prototyped the app quickly.
14
7/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
FOOTNOTES
1 http://www.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
2 http://www.idc.com/getdoc.jsp?containerId=prUS23028711
3 http://adactio.com/extras/slides/thereisnomobileweb.pdf
4 http://foundation.zurb.com
5 http://foundation.zurb.com
6 http://www.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-fortomorrow/
7 http://foundation.zurb.com/grid-example2.php
8 http://foundation.zurb.com/grid-example1.php
9 http://lesscss.org/
10 http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
11 http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype.php
12 http://rcskids.org
13 http://www.spurapp.com
14 http://spurapp.com
15 mailto:foundation@zurb.com
ZURB
ZURB is a close-knit team of interaction designers and strategists that help
companies design better products & services through consulting, products,
education, books, training and events. Since 1998 ZURB has helped over 75+
clients including: Facebook, eBay, NYSE, Yahoo, Zazzle, Playlist, Britney Spears,
among others.
With a commitment to quality content for the design community. Founded by Vitaly Friedman and Sven
Lennartz. 2006-2015. Made in Germany. .http://www.smashingmagazine.com
http://www.smashingmagazine.com/2011/10/25/rapidprototypingforanydevicewithfoundation/
8/9
5/13/2015
RapidPrototypingForAnyDeviceWithFoundationSmashingMagazine
http://www.smashingmagazine.com/2011/10/25/rapidprototypingforanydevicewithfoundation/
9/9