This article shows you how to use Foundation, a new, responsive
open source framework, to quickly build a prototype you can test and
build onto for any device
Hopefully you have ever Let’s sum up where we are in a few simple truths:
The number and type of devices people can use to get online is increasing every day
Building a different interface for every device is impossible
Not considering devices when you build is a death sentence for your site or app
Cheery,
right? Don’t worry, we’ll get through this together. The reason we say
this is ‘a poorly-realised present’ is that different devices and
screens has always been a problem, we’ve just ignored it for years and
kept building 960 grid system sites.
What we need now is a way to
quickly build out prototypes that work on all devices, not just laptops
and desktops. That’s why we developed Foundation, an open source
front-end framework to help you rapidly prototype for any kind of
device, and then take that prototype and extend it into a
production-ready site. If you’re curious, you can check out foundation.zurb.com and
see what the framework is all about. If you’re a total boss, though,
follow along while we build a quick prototype that we can test out on
whatever device we have at hand.
Off we go!
Getting started
To begin, download the code pack from foundation.zurb.com - it’s the big blue button right there on the homepage. That’ll give us a simple directory with a few pieces in it:
index.html - We’ll be building our first page right here.
javascripts/ and stylesheets/ - These are the main files for Foundation to work, including jQuery and a swath of handy global styles.
humans.txt and robots.txt - Nice boilerplate elements you can use and peruse at your leisure.
For
our purposes today don’t worry about the JavaScript. However, inside
the stylesheets folder are some files we’re interested in:
global.css
- This is the meat of Foundation. It includes the styles for the grid, a
12-column, arbitrary width, nestable tool for quickly building complex
layouts. It also includes typography, some layout tools, and various
common elements.
ui.css - We’ll be using this as well, as it includes a number of other elements useful for quickly putting together a prototype.
mobile.css - Finally, this guy helps the prototype we build on our desktop adjust itself to mobile devices.
Load
up the directory for the downloaded Foundation files in your editor of
choice (we like Coda or Textmate, but your call) and go ahead and open
up index.html, both there and in your browser. You’ll notice in your
browser that the index file starts with a few elements already in place
to get your feet wet: we’ll start by looking at the grid.
The grid
We
mentioned the grid when we talked about global.css: let’s look at how
it works. If you’re familiar with a 960 grid system such as 960.gs or Blueprint, the Foundation grid syntax should feel pretty standard. Here’s an example:
The grid comprises three elements: containers, rows, and columns. The
container element does nothing more than add left and right padding to
the page, so as a window scales down your content doesn’t run into the
edge.
Rows are made to contain columns, and they have an arbitrary
max-width that prevents your layout from stretching all the way out on
very large displays (you can, however, remove that constraint for a
truly fluid layout).
Finally, columns hold your content, and there
can be up to 12 of them in total in a row. In the example above we’ve
created a simple thirds layout, two-thirds and then one-third content
sections. We could reasonably title our sections above like so:
You can see some more examples of the grid on the Foundation site, including this one: http://foundation.zurb.com/grid-example2.php. All set? Good; let’s spend the rest of our time together actually building something!
We do mean ‘rapid’ prototyping
For
this example we’re going to put together two pages of a simple content
site, a very basic news site. We’ll do the homepage and an article page
so we can see not only how to use Foundation to do this crazy-fast, but
also how to modify it for different devices.
We’ll base the homepage on this sketch we did for the desktop view of the site: You
can see we have a header area, a main article, several secondary
articles, and then a row of featured content. For this page we’ll use
several Foundation constructs and one nifty outside service:
The layout will be created using the grid that we’ve already talked about
The main nav will be created using Foundation’s built-in tabs
The
image placeholders we’ll fill in using placehold.it, a totally sweet
service that returns filler blocks based on any dimensions. For our
purposes the dimensions almost don’t matter, and we’ll talk about why.
Let’s
do it! We’ll start with the header, and we’ll use the HTML5 header
element (which Foundation manages for older browsers). We’ll give the
header a class of ‘row’ so it can stand in for our row object, and
inside that we’ll place a few columns.
You can see that we open the container, then place a row, and inside
the row we place our columns. The columns can be any combination that
doesn’t exceed 12. Inside our columns we’ll drop placeholders, and in
the middle we’ll drop in an H1 element with a subtitle below it. We’re
not going to style any of this now; we just want to see how it comes
together.
After the header we want some nav for our desktop users,
so they can find the sections we’ve devoted to various kinds of
dromedary. Why llamas and such? Why not! For the nav we’ll use tabs, a
construct built into Foundation. The nav will look like this:
You’ll notice the nav goes in a row and column as well. This is
necessary for the grid to maintain the layout correctly, and for this to
work on mobile devices (as we’ll see later). With our simple nav in
place it’s just a matter of blocking in the rest of our content. We’ll
use the grid, basic elements, and a single other Foundation elements to
build the remainder of the page.
<h3><ahref="#">Llamas: Great Pets or the Best Pets?</a></h3>
<p>Intrepid
reporter Jordan Humphreys went to Happy Time Llama Farm to investigate:
are llamas merely great pets, or he best pets? Read the full article to
find out!</p><ahref="#"class="small radius nice blue button">Read More →</a>
As you can see, the markup is very simple. We have one new construct
in here for buttons, which Foundation includes various versions of. Here
you can see we’ve taken an anchor (could also be a button or
input[type=”button”]) and added classes of small, radius, nice, blue and
button to it. It breaks down like this:
small - Could also be large, and if it’s not declared the button is a medium size.
radius - This means apply a slight border radius to soften the button. Could also be ‘round’ or undeclared for square.
nice - This adds a slight shine to the button and some other subtle visual affordances.
blue - Could also be red, black, or grey (or whatever you create).
button - This actually creates the structure and size, and is the only required class.
What
we’ve achieved here very quickly is a page that’s almost ready for
actual prototyping, but there are some considerations we need to make
for other devices than the desktop.
Think mobile
Users
on mobile devices have different expectations when they come to a
content site (or an app). In our case, we want users on a mobile device
to immediately see our content so they can read it, then decide if they
want to go somewhere else. Mobile users are more tolerant of scrolling
below the fold, but less tolerant of having to endure a long load of
titles and nav before they can read anything. Here’s what our site looks
like on a small device right now: Not
ideal, right? What Foundation is doing is making each of our columns
100% width, basically linearising the content. A lot of the time this
will work great on mobile and we won’t need to do anything else, but in
this case we want to make some changes. We’ll use Foundation’s mobile
visibility classes to selectively show different content on a phone.
Where before we had this as the header:
You’ll notice two classes in there: one
called hide-on-phones, the other called show-on-phones. Foundation has
several of these mobile visibility classes so you can rapidly prototype
different layouts and interactions for different classes of device (you
can also hide/show on desktops and tablets). The syntax implies only,
as in only show on phones, so the second header is what we’ll see on a
phone. What we’ve done is create a different header for small devices
that maintains one image above the title (for an ad, or similar) and
simplifies our layout so we can get to content faster. With a little
CSS...
...we can clean up the title on both large and small devices. Now what we see is this: Much
closer! Now our problem is that nav: too many tabs, and in the wrong
place. For a device like this we’ll want the nav down on the bottom, so
what we’ll do is hide the main nav on desktops, like this:
We added a show-on-phones class to the nav above the footer, and a class of ‘mobile’ to the tabs, so they look like this: Now
we’re really cooking. We’ve got a lot of code samples in here but
remember: we’re mostly copying and pasting, and modifying some simple
class names and structural elements. Since the hit on load for text like
this is pretty low we could feasibly even move this into production, or
we can do some server-side detection later to render only what we need.
Our goal is to prototype our site quickly without getting hung up on
tools, and that’s what Foundation is for.
Your turn!
Try
to create our second article page, seen in this sketch, from scratch.
We’ve added a couple of notes so you can see where you might want to use
certain elements, and you can view the code for a completed article
prototype page here:
Does this actually work?
Well,
yes. Building for multiple devices is a necessity now, and the best way
to build a better product for different screens is to see how your
design actually works on those devices. Iteration can’t happen any more
just in Photoshop, at least not without doing a whole lot of different
comps.
We used this approach
recently for a 24-hour design marathon we did at ZURB for a local
non-profit called Rebekah Children’s Services. After sketching out their
new site we built the entire prototype (just like we did up above) in
about two hours, and that was invaluable. We could not only see how it
would work responsively, we were able to get engineering started on the
back end and content teams starts on the copy while we kept working on
the visual design and final implementation. You can check out the whole
process here: www.zurb.net/zurbwired2011 or check out the prototype we built here: www.zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype.php. Again, the prototype was rough, but very useful.
We’ve also used Foundation to prototype and then build various client sites as well as most of our newer apps like axeapp.com, spurapp.com, and reelapp.com.
Get building!
Foundation
is open source and completely free, so you can grab the entire site or
just the starting framework and do whatever you’d like with it. We’ve
found it very helpful for building sites in a future-friendly way, and
hopefully you do too. If you have questions, find bugs, or just want to
give feedback we’d love to hear from you at foundation@zurb.com or on the issues board on Github.
No comments:
Post a Comment