Sparks from a sparkler

Moving Past One-size-fits-all Web Frameworks

Web frameworks are great for creating sites quickly in an organized manner, and they take a lot of the guesswork out of the process when it comes to creating layouts in CSS. But therein lies the crux of these systems; a good website isn’t created in a quick, cookie-cutter fashion. Nor is a good website created by a developer who doesn’t understand the CSS that does the heavy lifting. But the biggest problem with using a web framework is that a good website is unique to the client, meeting his or her needs without shoe-horning those needs into what the framework offers.

A Little History of Web Frameworks

Believe it or not, there was a time when freely available HTML and CSS frameworks like Bootstrap and Foundation didn’t exist. Web designers created their compositions in Photoshop, sometimes using highly organized grid layouts and sometimes with reckless, creative abandon. In many cases, these designers knew very little about the markup and code necessary to make these layouts a reality, and the implementation of those designs was often very difficult or counterintuitive.

It was no surprise that some designers and developers found ways of working together by creating common patterns for web design. The 960 Grid System was one of the first successful, publicly available attempts at providing layout guidelines for designers to follow so that reusable HTML and CSS could be quickly created. Later frameworks improved on the formula, and when responsive web design started gaining traction, these frameworks made it simple for developers unfamiliar with the new design paradigm to ramp up.

What’s Wrong with Frameworks?

A common complaint about sites built with a framework is that they all look the same. A simple Google search can attest to this. The problem is that some frameworks, intentionally or not, dictate the design direction. Even if a designer starts with his or her own distinctive design before a framework is chosen, elements of the framework’s design inevitably work their way into the final implementation.

Additionally, any one-size-fits-all product is going to include “extras” that go unused. With Bootstrap, you get form and button styling, image carousels, modal dialogs, and much more. Odds are you aren’t going to take advantage of all of these features, but you’ll probably include them in the final website, because who knows – they could be useful later, and taking them out or only selecting what you actually need is more work.

When I first started creating websites, many accessibility advocates and web experts such as Jeffrey Zeldman and Roger Johansson spoke about the need for clean HTML and the separation of markup from design. I really took their messages to heart and felt that it created a better web. So, it saddens me to see new, up-and-coming developers using obscure class names like “col-med-4” in their HTML or made-up tag attributes like “ng-app”. (AngularJS now supports appropriate data attributes, but many tutorials and other references still teach with the invalid attributes.) It seems as if we’re slowly moving away from best practices at the expense of convenience. We’re creating a world that’s great for designers and developers but awful to the consumers of these technologies. There’s a reason responsive websites have the stigma of being bloated, slow experiences for mobile device users.

Not All Frameworks are Bad

…but the popular ones often are. The good frameworks are light, minimal, and unobtrusive. They give you only what you need and expect you to have the skills to build out what is missing. They give you a hammer and some nails and tell you to “get to work.” I think of developers that use frameworks like Bootstrap in the same way I’d think of a carpenter with a magic “house-building tool.” Sure, he can build houses, but he didn’t invest the time into learning how houses were built. Maybe he can build them faster and cheaper, but there’s always going to be a trade-off.

I don’t want to give the wrong impression, so I’ll be clear: you should use a framework, but not one that tries to offer everything under the sun. I use a framework myself for new projects, but I built it to only include what I felt was necessary for every website: responsive grids and row/column layouts, an organized process for building CSS and JS, and a determination not to sacrifice quality and proper separation of content, design, and behavior for quicker, easier development.  If possible, build your own framework as well – learn the skills a true front-end developer worth his or her salt should be required to have. If you don’t have time for that or if you think you’re doing just fine with your one-size-fits-all website, I wish you luck with your magic house-building tool. Maybe one day you’ll come around.

Shameless plug
: my custom framework, Experis Web Framework, is available on GitHub. Feel free to use it or adapt it to meet your own needs. Any and all feedback is appreciated!