With mobile technologies constantly evolving, responsive websites have become a popular solution to ensure optimal viewing across a wide range of devices. Through the use of media queries, fluid grids, and flexible images, responsive web design eliminates the need to create websites specifically for each device. Countless front-end frameworks incorporating these concepts have emerged over the past few years to provide developers with a common structure, making designing responsive websites faster and easier. Furthermore, content management systems that offer true separation of content from design increase the flexibility of design layouts through templating.
Selecting a Framework
Responsive design frameworks are not one size fits all. Each framework has its own benefits and drawbacks depending on what you want to achieve with your design. Still, choosing the right solution can be overwhelming! Let’s explore five of the top frameworks.
Bootstrap is one of the most popular front-end frameworks for developing responsive websites. With a twelve-column responsive grid, pre-built components, and extensive style/customization options out of the box, Bootstrap allows for quick project creation. Creating an entirely unique look is not as efficient with this framework as with others, but further customization is possible using Less and Sass. Bootstrap supports common browsers, including Internet Explorer (IE) 8+. Detailed documentation and regular updates are available for this framework’s large community.
Bootstrap is favored by many of our customers, such as the University of Tennessee at Chattanooga, for easy conversion to a fully responsive site.
Foundation is the biggest competitor to Bootstrap, providing its growing active user base with an advanced front-end framework. Like Bootstrap, Foundation is based on a twelve-column responsive grid system and contains a similar set of pre-built components. Foundation supplies an environment to build a fully customized look through its extensive Sass files. The framework is compatible with major operating systems and the latest versions of common browsers, including IE 9+. Foundation offers several resources to get the most out of the framework, such as documentation, business support, and training.
Foundation is also a popular choice amongst our customers. The University of South Carolina is one institution that has taken advantage of the framework to create beautiful, responsive main pages.
HTML5 Boilerplate is a professional front-end template incorporating best practices and years of combined community knowledge. Although not a complete framework, HTML5 Boilerplate offers a solid foundation to construct fast, robust, and adaptive projects. HTML5 Boilerplate delivers a mobile-friendly HTML template, standard components, and explanatory documentation for creating cross-browser responsive websites.
With the help of HTML5 Boilerplate, the University of South Carolina transformed its department pages into fully responsive destinations.
Pure by Yahoo!
Pure is an extremely light-weight framework that consists of only vital modules, including responsive grids, forms, buttons, tables, and menus, to kick-start the creation of reliable and high-performance websites. Pure encourages developers to use the framework as a starting point and customize the CSS for a website that works across browsers and presents a unique look and feel.
Pure is not as widely used as other frameworks on this list, but it has proven to be very beneficial in upgrading site designs. A few of our customers have used Pure to create websites that look and perform exactly as they want.
Skeleton is also a framework that’s on the radar in higher education. According to getskeleton.com, “You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks.” It is touted as being light as a feather at ~400 lines and built with mobile in mind. It may be worth checking out.
Which Framework Is Right for You?
Combine any of these frameworks with the OU Campus™ content management platform, and you have all the tools you need for a seamless transition to a responsive website. Is one framework better than the rest? Whether you place value in a solution’s user community, ease of customization, resources, or some other factor, the answer to that depends on what is most important to you. Here’s a great resource for learning more about each front-end framework: http://usablica.github.io/front-end-frameworks/compare.html