Mobile First Design with Foundation 4

Last Thursday I was at the Foundation meetup over at the shiny new ZURB headquarters in Campbell, CA. One of their designers, Ghaida Zahran gave a presentation about the why ZURB has made a commitment to the mobile first approach to responsive design. Here's some key takeaways.

Simplify Your Design Process

A mobile first approach forces you to have a disciplined focus on the absolute essentials of what a site needs to communicate and accomplish its goals. Having a limited amount of screen real estate to work with means that you need have to prioritize the messages and actions available to the end user.

Make it work with one eyeball and one thumb.

A good way think about designing for mobile is that you are creating something that should be usable with one eyeball and one thumb. If you can make your design work well despite the fact that users are distracted and have a limited attention span, then it will probably work even better in a more optimal situation.

So, basically, just make sure your designs get the point across quickly.

Use clear typography and strong contrast to focus user actions.

Performance

Obviously being forced to distill your design down to it's essentials is generally going to be a very good thing for performance. But there are also some structural advantages in terms of a responsive CSS architecture.

Mobile first means authoring your base styles for a small screen and building up from there with min-width media queries to design for larger screens. This is good for performance because it generally means you have to do less overriding of existing CSS than if you just bolt mobile styles on top of existing desktop styles.

Another potential performance benefit I see is that mobile first css architecture lets you easily seperate out the non-mobile styles into a seperate stylesheet, to pehaps load them conditionally for larger screens only. Seems like that'd be really handy if you're looking to optimize the user experience for low bandwidth mobile connections and want to trim down the page weight as much as possible.

Also, it's best to let the Yeti do the heavy lifting. Use the responsive grid to setup your layouts for different sreen sizes as much as possible, it's the whole point of loading in a CSS framework after all!

Mobile First is Business Strategy

Choosing to go mobile first and work with Foundation 4 is as much about front end design as it is about business strategy. Making a commitment to mobile first means working with clients who have an appreciation for what it means to build a future-ready web presence.

One of the caveats of a mobile first approach is that it doesn't really work in IE8 because IE8 doesn’t support media queries. For this reason Foundation 4 has dropped IE8 support entirely. Although, if you really wanted to you can look into hacking it with respond.js.

While the lack of IE8 support might be a show stopper for working with large enterprise customers who have yet to upgrade their workforce from Windows XP. Most clients, when presented with the reality of limited resources, will see that the value of freeing up designers to focus their talents on building a modern responsive site will trump any negative consequences of inconveniencing a shrinking IE8 userbase.

Besides, Microsoft is dropping support for Windows XP on April 8, 2014. So at that point even the enterprise XP users will have a strong enough incentive for upgrading to a modern OS with self updating browsers.

Whispers of Foundation 5

I also heard a mention of increased control over the grid coming in Foundation 5. If you’ve been keeping tabs, you’ll know that Twitter Bootstrap 3 one-ups Foundation 4 by adding a third responsive grid class. Well, rest assured the Foundation team is cooking up something even better. After all, they did come up with the idea of having responsive grid classes first ;)

Also, there was a sneak preview of a new Javascript widget, which is basically a nicer, touch friendly & responsive version of Slide and Reveal. It's pretty damn awesome!

We're really still in the formative stages of this whole new way to approach web design, but with the leading CSS frameworks embracing mobile first, things seem to be really shaping up.

Feel free to share your thoughts about the mobile first approach in the comments.

Have any of you built some sites? Did you use Foundation 4? How did it go?

~@ruemic