Patience is a virtue that Internet users — all three billion of them, according to the International Telecommunications Union—have seemingly lost. With mobile devices rocketing past PCs in terms of Internet usage, the importance of websites that embrace simplicity, ease of use, and compatibility across myriad devices has grown—and it is all done with the help of responsive web design.
Responsive web design, in which a website is designed with fluid grids, flexible images and media queries, was first coined as a term in 2010 by web designer and developer Ethan Marcotte. And now, as the number of mobile devices continues to grow alongside the frustration of Internet users and web design staff, responsive web design is on its way to becoming the de facto design principle; already 11-12% of websites are responsive, according to Guy Podjarny, chief technology officer of Akamai’s Web Experience unit. Though that seems like a low number, the adoption is impressive.
Making the decision to build a website using RWD is easy once you discover its versatility. Still, each web developer or owner must make a more difficult choice: which design framework to use, if any at all.
The most popular front-end frameworks in use right now are Bootstrap and Foundation, but there are many available from which to choose.
There is a heated debate among web developers and designers over whether or not frameworks are beneficial. The most common arguments for and against them are:
Formerly known as “Bootstrap, by Twitter” and now just simply “Bootstrap,” this front-end framework was developed in 2010 by then-Twitter employees Mark Otto and Jacob Thornton as a way to refine the social media site’s internal tools. After serving as the internal style guide for Twitter, the idea grew into another entity all together and launched in August 2011 as a standalone, open-source framework. Bootstrap, though open-source, is still maintained by Otto, Thornton and a handful of other core staff.
Earlier versions added responsive functionality, but the latest, which was first made available on the two-year anniversary of its initial release, made it responsive by default. It has also embraced the “mobile first” approach, where design first starts on mobile screens.
According to BuiltWith, 7% of the top 10,000 sites use Bootstrap, but that figure is only increasing. A notable example of a site built with Bootstrap is Newsweek.
Developed by ZURB, an online product design company, Foundation was launched in October 2011 by the company to help web developers quickly get sites up and running on any device. Unlike Bootstrap, the first version released was responsive by default.
The most recent version, Foundation 5, was released in April 2014. According to BuiltWith, only about 1% of the top 10,000 sites use Foundation; like Bootstrap, however, that figure is on the rise. Square, a credit card processing and mobile payment company, is a great example of what the Foundation framework can do.
Before choosing between Bootstrap and Foundation, define your expectations of the website; using those expectations, you can see which framework is the best fit.
With Bootstrap’s latest rollout, both frameworks embrace the mobile first design practice. They are both built to be customizable and responsive, so there is not much difference in that function. However, they do vary in:
As mentioned, there have been complaints that Bootstrap websites all look alike. This could be due to the number of predesigned UI elements and themes it offers, allowing web designers to pick and choose how the site looks rather than customize it. Foundation, on the other hand, offers fewer styles.
With Bootstrap, you’ll have to override the many default styles if you do choose to customize beyond the scope of what is already offered.
Bootstrap is built on Less, but offers a Sass port. Foundation is built on Sass.
Perhaps the most important feature of the framework, the grid system is what makes a responsive site responsive. With Bootstrap 3, both grid systems are mobile-first, 12-column fluid grids with similar features. Foundation does offer the block grid feature, which evenly splits contents of a list within a grid regardless of the screen size.
Defining the size of typography and pretty much anything that appears on a page is an important part of the web design process. Bootstrap and Foundation define these sizes differently: Bootstrap uses pixels, a static unit, while Foundation uses rems, a relative unit.
Everyone knows what a pixel is, as it is the most commonly used unit of measure on the web. And it’s easy for a web designer to think in pixels, rather than in abstract relative sizes—but it’s not always to the benefit of the user. Screen sizes are no longer fixed; some believe it is in a website’s best interest to follow suit.
Bootstrap is compatible with Chrome (Mac, Windows, iOS and Android), Safari (Mac and iOS), Firefox (Mac, Windows), Opera (Mac and Windows) and Internet Explorer 8+. Foundation is compatible with Chrome, Firefox, Safari and Internet Explorer 9+ on desktop. On mobile, it is supported on iOS, Android 2 and 4, Windows Phone 7+, and Surface. The only difference here is that IE8 is still supported on Bootstrap and not on Foundation. It’s important to thoroughly review the analytics of your site to make sure you won’t be cutting out a significant portion of your user base that might be using IE8. If you are set on Foundation, there are “fixes” that can be made to the framework to make the experience better on IE8, but these will cost more hours of development to implement.
Each framework has features unique to itself, but Foundation arguably has larger set of features.
Bootstrap has a huge following, especially on GitHub. If you like having a hundreds of people pitching in and sharing ideas, then Bootstrap is the better framework. Foundation, on the other hand, has a smaller active community but features a forum on its website.
Both frameworks are robust and responsive. To simplify a complicated decision, ask yourself some simple questions:
Of course, these aren’t be-all, end-all answers. Decide what you want your website to be, and then fit in the framework’s capabilities.
Jeff Williams is an SEO Project Manager at Fruition. He uses his deep understanding of SEO and internet marketing to guide clients, optimize websites and ultimately improve search rankings. Jeff continues to focus on understanding the technical aspects of SEO factors that affect website rankings in the major search engines. He has recently found a passion in local marketing and helping business carry out effective digital marketing strategies, taking a lead role in developing Fruition’s local SEO services.
President & Founder, Tru Family Dental
Marketing, Dependable Cleaners
President, Frame Destination
President & Founder, Family Travel Association