Thinking Mobile-First with Zurb – Foundation 4

Just a couple of weeks ago, I wrote about creating a great mobile experience here at Designmodo.

And this week, Zurb released a new open-source download that makes creating for mobile that much easier. Foundation 4 is a mobile-first responsive design framework. The self-proclaimed “most-advanced responsive front-end framework in the world” jumped to a whole new level with this release.

SEE ALSO: Responsive Web Design: 50 Examples and Best Practices

Why Mobile-First?

The world is making the leap to the mobile web at astounding rates. In some nations, such as India where using the mobile web is the norm, Internet traffic on phones tops mobile use on desktops. This is a trend we are likely to see in more countries, and some analysts expect mobile web use to surpass desktop use overall within the next 12 to 24 months.

So designing websites with mobile as a priority has become more important than ever.

And we’re going to see more of it. Zurb was the first to release its mobile-first platform on Thursday and Bootstrap is planning a similar release of its responsive grid.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

What is Foundation?

Foundation 4 is the newest release of the popular responsive front-end framework by Zurb. Foundation 3 has been downloaded and used by numerous developers including those for Pixar, National Geographic and Flite.

The new software – an open-source product that is available as a free download – includes code that has been completely rewritten from the mobile-first perspective. Typically, designers put sites together from a desktop with a desktop-first perspective, then consider how their mobile design fits in.

Foundation 4 works in just the opposite way. Designers first create a mobile user experience and then add on to create a desktop-ready site. According to Zurb, designers that choose our framework will be fully-prepared for the mobile-before-desktop first trend which continues to emerge.

Still think you want to start with desktop design but like the Foundation concept? Zurb’s Foundation 3 still available and will even be updated soon. The fairly well-known 12-column grid structure allows you to think about and build responsive web design outlines quickly and includes customizable tools.

Zurb’s Foundation 3 is known as one of the most adaptable, usable and reliable grid systems out there. It is easy to use, works across a variety of environments and comes with a variety of options “right out of the box.” There is little doubt that Foundation 4 will be any different.

Why Try Foundation 4?

Foundation 4

There’s nothing like the present time to try something new.  Foundation 4 is probably best-suited for a new project so you can use it from the beginning, but why not start now?

The software is free and pretty simple to use. It’s intuitive and customizable.

Foundation 4 is built for designers “who may not be as code-oriented” with a straightforward starting point. The new release includes more streamlined code, which should speed up coding and time between iterations. It is built to be fast – mobile-first thinking emphasizes speed because of the importance of load times.

And best of all, it will really make you think differently about how you approach the process. Zurb is touting Foundation 4 as a great way to dive into mobile strategy: “Foundation is an excellent starting place and a great way to dive head-first into the world of designing for all types of mobile devices.”

More Than a Trend

Responsive design is more than just a trend, and releases such as Foundation 4 support the growth of responsive and mobile formats.

Need more reason to think responsive? Check out some recent and great articles right here from Designmodo on the topic.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

7 Comments
  1. Kasendwa Mar 7, 10:11 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -6
  2. Walter P May 17, 10:10 pm

    exactly what part of pixar or natgeo’s sites are using foundation4? those sites are not responsive at all.

    Reply
    +2
  3. Akhtar May 24, 9:00 am

    I’ve found it very simple to get rapidly and then create some clickable useful prototypes.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters