1
Zurb has a long history of providing awesome web apps and resources for designers and developers. Their apps include Notable, Axe, Enroll, and Spur, among others.
Other resources from Zurb include everything from downloadable sketchsheets and grid paper, CSS buttons, CSS3 tools, visual effects & animation examples, and a lot more.
Zurb has recently launched a new tool for designers, called Foundation, a free rapid prototyping framework.
Zurb’s Lead Designer, Jonathan, answered some questions for us about the new project.
What is Foundation?
Foundation is a framework for quickly prototyping and building responsive sites and apps. It allows you to rapidly put together pages, including layout and common elements like navigation, pagination, forms and more so you can see how your site works on desktops, tablets and phones. Then you can take that code and customize or adapt it into rock-solid production code.
Why was Foundation built?
We realized that the tools out there for building responsive sites – sites that work on any kind of device – were not only insufficient but really non-existent. There are a number of CSS frameworks that people are using, but everything was designed for fixed layouts. Mobile devices will account for over half of all Internet traffic in the next 2 years, so not designing and building for them is a death sentence for online products or services. We wanted a tool that would let us not only deliver a great experience to every device, but to very quickly test out what a great experience really looked and felt like.
Talk about a site you had to use Foundation for? How did it help? What issues did you have to deal with?
We’ve used Foundation for all of our internal sites and projects for the last several months, but if I had to pick one great example it would be a web app we released recently called Spur. Spur is a tool for doing traditional design critiques by letting you capture a web page, or upload an image, and then view it with blur, heightened contrast, rotation and other effects that reveal how the visual design holds up. We designed it from the ground up with Foundation to support desktops, tablets, and iPhones; all from the same front-end codebase.
If you pull up the app on different devices you’ll see different tools and subtly modified layouts all made possible with Foundation’s mobile visibility classes. These let you easily tag elements to be hidden or shown on specific types of devices, such as ‘hide-on-phones’ or ‘show-on-tablets’. That and Foundation’s inherent ability to scale to most any size meant that Spur has a slick, tailored experience for any device type with very little additional effort.
Working entirely with percentages of course adds some complexity, especially regarding images and the flexibility of certain objects like toolbars but beyond some specific CSS Foundation took care of almost everything.
Who should be using Foundation?
Anyone who wants their site or app to be relevant in a couple years should be building for multiple devices, and Foundation is a good tool for doing that. Foundation is perfect for new sites that you want to quickly prototype and build, since you can lay out entire sites in just a few minutes using the flexible grid and common elements already included.
We’ve found Foundation to be especially helpful for companies or organization who have concerns about the cost (in time and resources) to build for mobile devices – Foundation helps you do things quickly and all at once.
What’s the future for Foundation?
We’re constantly working on Foundation, adding common elements that people have requested or we’ve seen a need for. We just recently added a new four-column phone grid so you can do more complex layouts for very small devices, and we’ll continue to work on device and pattern support. We’re also considering things like page templates, code packs for specific uses like wireframing, and working with outside developers on plugins for other frameworks like Less, SaSS, Drupal, WordPress, etc.
Our goal is for Foundation to be more than just an open-source Framework but a complete community and development approach for the front-end. We’d love to have even more contributors, both in issues, feature requests, and code on Github and we’re happy to answer questions at [email protected].
A Closer Look at WordPress 6.7: “Rollins”
The WordPress 6.7 release, named “Rollins” honors jazz legend Sonny Rollins, renowned for his improvisational mastery and innovative contributions to jazz. His iconic compositions, like “St. Thomas” and “Oleo,” reflect…
Why Responsive Design is Failing Modern Users
Yet, despite its widespread adoption, modern users are increasingly frustrated. Why? Because the once-revolutionary approach is failing to keep up with the evolving demands of today’s digital landscape. In this…
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user engagement: the HTML title tag. Often overlooked, this small…
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG of CO2 annually. Reducing your website’s carbon footprint is…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an experienced freelancer, a team of hardened developers, or a…
Rock Solid WordPress Security: Keeping Your Business Safe
WordPress is the web’s favourite CMS (content management system), renowned for its low-entry level and vast array of themes and plugins. WordPress’s open-source nature allows for endless flexibility, catering to…