Making Your Web Design Mobile-​​Friendly in Minutes With Foundation

Requests for “mobile-​​friendly” websites are becoming more and more common from customers of all kinds, from individual clients to large established companies. With millions of smartphones and tablets being sold every year, mobile design has gradually gone from a “nice to have” peripheral feature to a “must have” core component of your design. If you didn’t plan for mobile-​​friendliness from the start, you may have to make some extensive modifications to your website for mobile use. Designing for smaller displays, less bandwidth, and touch-​​based interactivity can be very tedious if you’re doing it from scratch, but a mobile framework like Foundation can make those essential mobile accommodations surprisingly easy.

Case Study: Le Miroir by Joshfire

The moment designers at Joshfire launched the website to promote their interactive mirror, they noticed a problem. When they pulled the site up on an iPhone, the design did not look stellar. Given the popularity of mobile devices and the nature of their product (a high-​​tech, interactive, touch-​​based mirror), this was not acceptable.
The problem was that the site was originally built from a PSD file that had a fixed width of 960 pixels. Since they were under tight deadlines, they decided to just worry about one use case — how it would look on a desktop or a laptop. However, as they developed the site, they eventually realized that they would have to accommodate smartphones and tablets. These days, people access websites on phones and tablets as often as they do on desktops (if not more). In fact, by 2014 mobile traffic is predicted to overtake desktop traffic.
Joshfire was faced with a problem. How could they build a single site that looks nice on all devices within such a short time frame? Enter Foundation, ZURB’s open-​​source, responsive prototyping framework. Some team members had heard about Foundation before, but none of them had ever used it — until now. Thankfully, the folks at ZURB wrote comprehensive documentation on Foundation, which made it very simple to use. Everything that they needed to make the site responsive and mobile-​​friendly was easy to find. Foundation had four parts in particular that made it invaluable:

Flexible Grid

The Foundation grid is entirely percentage-​​based and fluid, so it adapts automatically to varying screen sizes, which is especially helpful when designing for a wide variety of mobile screen widths. For more extreme changes, Foundation uses CSS3 media queries to shuffle the grid around into an optimized mobile presentation.

Learn more about Foundation’s grid system

Tons of Different Buttons

Foundation has a number of different sizes and styles of buttons to help with rapid prototyping. These buttons are very easy to modify; they’re based on simple, semantic CSS classes.

Learn about Foundation’s button options

Responsive Image Slider (Orbit)

Orbit is a lightweight, plugin-​​free image slider that makes good use of the limited screen size and touch-​​based interactivity of mobile devices. This is a much better choice than flash-​​based dynamic imagery, which will not show up on iOS devices like iPhones, iPods, and iPads. Just like the Foundation columns and buttons, Orbit is highly configurable.
Check out how Orbit works

Mobile Visibility Options — Show and Hide Specific Content on Certain Devices

One of the strongest Foundation features are the built-​​in mobile visibility options — CSS classes that turn things on or off for certain mobile devices. Simple CSS classes like “hide-​​on-​​phones” and “show-​​on-​​desktops” are intuitive and extremely handy.
Learn how to to control which content is shown on which devices
Foundation also has a hidden gem — nestable columns that don’t have a fixed width. Designers can nest columns as deeply as they’d like, since each embedded row can contain up to 12 columns. The flexible width comes in very handy when designing for a variety of screen sizes. Here is an example of how Joshfire used the grid to create their new product’s landing page.

Applying Foundation

Joshfire’s design (the PSD) required that the main content of the page appear in a section that was narrower than the rest of the page. Here is a screenshot of the PSD:

Since the columns didn’t have a fixed width, we simply dropped our content inside a row flagged with the appropriate classes (“.ten,” “.columns,” and “.centered”):

1	<div id="mainwrapper">

2

<div>

3	<div class="ten columns centered">

4

<div>

5

CONTENT

6

</div>

7

</div>

8

</div>

9

</div>

The approach worked well; they coded up the exact same look as the PSD above. One designer wanted the first image in the slider to include text and a call-​​to-​​action button (just like in the above PSD). They also wanted to hide the text before switching to another image. Unfortunately, Orbit — the slider bundled with Foundation — has an “afterSlideChange” function, but not a “beforeSlideChange” function. So, they ended up tailoring Orbit to suit their purposes.
After getting the slider to work, the mobile site was up and running, completely rebuilt from scratch and — best of all — mobile-​​friendly. It only took an hour thanks to Foundation. Check out how the site looks on the iPhone now:

You may be wondering, “why choose Foundation over Twitter Bootstrap, which is a similar framework?” At the the time, Bootstrap was a fixed framework, so choosing Foundation was a no-​​brainer. Since then, Bootstrap 2.0 has been released and is completely responsive. Bootstrap now has everything needed to make a design look good on mobile devices, but Foundation has better features, a greater degree of control, and a more complete grid.