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.
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.
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?
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.
- 16 Examples of Great Responsive Web Design
- Responsive Typography in Web Design: Understanding and Using
- Useful Responsive CSS Grid Frameworks
- Features of the Perfect Responsive Web Design
- Create a Mobile User Experience
- 50 Examples and Best Practices