A responsive CSS framework is the combination of a style guide and a toolkit, used as a unified baseline to rapidly create responsive websites.
Pros
Rapid Prototyping & Development
For some clients, the production costs of custom website development can come with sticker shock. Using a responsive framework that your developers can get familiar and comfortable with can cut down on the time and costs needed to code an effective site that still meets the demands of the creative brief.
While the use of a responsive framework might not apply for every client site we build, there is certainly a peace of mind knowing that a familiar rapid-prototyping process is in place if needed. Eventually, the use of a framework might become the standard for most of your client sites and offer new opportunities for potential clients on a tighter budget or timeline.
Community Support
Before choosing a framework to build out your next site, ask a few questions about where it’s coming from as well as what kind of support options are available.
Most frameworks are available online free of charge. Always be sure to download the framework you are planning on using from the original creator to avoid creating any security flaws for your new site. Ideally, you should be able to reference this same source for all of your support needs.
Awwwards.com warns that “some digital projects lack continuity in time and updates and support services stop. It’s always better to opt for those that offer continued support guarantees. Many of them are supported by companies that offer other professional products on the market.”
Zurb’s Foundation, the responsive framework we rely on here at Corporate Three Design, is backed by an active online support community. Forums such as the one Zurb/Foundation provides can be extremely helpful for troubleshooting common development problems, like debugging for specific browsers.
Accelerated Design Process
The client wants a fly-out menu for mobile? Arranging a pixel-perfect responsive grid requires math?
Simply put, those critical design elements require more thought to perfect. With the help of a framework, your designers will not get stuck deciding the arrangement of responsive grids or finding navigation stylings. The framework’s functionality will be your guide.
After your designers have become familiar enough with the full functionality of your framework, they should be able to work faster in producing their layouts.
Cons
Ease of Use
As you may have guessed, not all frameworks are created equal.
Each framework differs in size, complexity, and flexibility. In order to pick the one that’s right for you, the best way is to get your hands dirty and tinker around with the ones that look most promising, and make your decision from there. Make sure the framework has the features you need, has support for any pre-processors you use (like Sass or Less).
You’ll also want to decide how ‘opinionated’ you want your framework to be. ‘Highly opinionated’ frameworks will add a lot of default styling for you: great if you need to put together a professional looking site quickly or if you’re working with a limited design team. For some developers, having fine-grain details like form groups or buttons already taken care of can be a great time-saver. But if you’ve already got a design language developed for stuff like that, you don’t want to be fighting the styles your framework is adding.
If you’re planning on using this framework to develop for a variety of clients that all require slightly different visual approaches, you may prefer a ‘less opinionated’ framework: one that adds very little visual styling, and lets you figure out the details.
Customization/Configuration Limitations
Designers and developers must also come to terms with the functionality limitations that are determined by the construction of the framework itself, especially if there isn’t a far-reaching budget for custom development.
Be sure to do the necessary research before installation and implementation. Your framework might limit the use of some widgets, plugins, and scripts that are essential to the design and construction of the site.
Browser Debugging
Be sure to investigate which browsers and devices your framework accommodates before installation. Many responsive framework packages come ready and tested to perform on a variety of browsers and devices.
Smashing Magazine warns that “Debugging for browsers sometimes takes as long as developing the website itself. If you can reduce your time spent on debugging, you could save significant costs for the client.”
Unfortunately, if a particular framework does not provide the browser support needed, you will be left attempting manual updates to the framework itself, which may be completely foreign.
Additional Resources
- What are Frameworks? 22 Best Responsive CSS Frameworks for Web Design
- Responsive Design Frameworks: Just Because You Can, Should You?
Are you in need of a brand refresh or complete overhaul? Improve the quality and impact of your online marketing with the power of custom web design.