tatiyants.com Designers vs. Bootstrap

Although I’m not a web designer by training, I’m very interested in the discipline. As such, I read my fair share designer-focused books and blogs.

Occasionally, I notice certain topics that provoke strong feelings in the community. Topics like “Flat design: good idea or best idea of all time”, or “What is the correct punishment for a CEO who redesigns their company’s logo over a weekend?”

One such topic of debate is whether it’s a good idea to use a front-end framework like Bootstrap or Foundation instead of building one yourself. Since I’m a big fan of such frameworks, I was curious as to the reasons why using one is a bad idea.

As far as I can tell, opposition to front-end frameworks stems from the following beliefs:

Frameworks force you into “un-semantic” markup

Semantic markup is about limiting HTML to only those tags required to express the content of the page, as opposed to its layout. Therefore, things like “container divs” are frowned upon.

Well, Bootstrap does indeed make liberal use of layout-only elements like this one:

...

Frameworks are too bloated

Another common complaint is that in their quest to be all things to all people, front-end frameworks have things you may never need. For example, Bootstrap allows you multiple ways to structure navigation links: as tabs or pills, with or without dropdowns, fixed or not, vertical or horizontal. If your site needs only one (or maybe two) of these, why should your stylesheets include all of these extraneous styles?

Frameworks force everything to look / feel the same

Front-end frameworks give you a set of standard options to build your sites. It’s therefore not a big surprise when people build their sites using those options. The unfortunate side effect of that is that “Bootstrap” look you see everywhere.

Ok, So Bootstrap (et al) is no good then?

Now that I’ve built up a nice straw man of the opposition’s arguments, I’m obligated to set said straw man on fire.

Semantic markup where it makes sense

First, to the point of semantic markup. Yes, to the extent that an HTML page is a document, it should include content and little else. The good news is that for a whole class of HTML pages this is a natural fit: blogs, marketing sites, magazines, and so on.

However, the web is full of HTML pages which serve a pretty different purpose: that of an application container. For all those email clients, document editors, purchase order forms, analytics dashboards and so on, semantic purity is nice, but getting the app to lay out correctly is a lot nicer.

Bootstrap with all of its “container” divs helps solve the layout problem for applications. Furthermore, if semantic purity is a strong concern, it gives you the tools (via mixins) to manage layouts without violating it.

Bloat, shmloat

Yes, Bootstrap has a ton of CSS classes in it, thousands upon thousands probably. Yet, it’s 107K minified and highly cacheable. For comparison, a single add image from today’s New York Times is 20K.

Sure, there are sites for which saving an extra 30-50K per initial request is worthwhile. And in those cases, by all means customize the living daylights out of the CSS. Otherwise, do consider if the extra effort is worth it.

It only looks the same if you let it

The reason why many sites built with Bootstrap look similar is because they’re built by devs, not designers. Most devs have little interest / ability to effectively customize visual aspects of a site and so they use what already looks good: the standard theme.

Of course, for those who can (or want to) tweak the visuals, there’s a lot that can be done.

Anything else?

There are two more benefits of using front-end frameworks I should mention. First is support for responsive design. Bootstrap 3.0 has a lot of options for making your pages look nice on many different types of devices. And even though it takes a bit to wrap your mind around their approach, it can be very effective.

Second is support for older browsers (i.e. IE8). IE8 is the great time suck of web development. It can take hours upon hours of tweaking and fixing until your layout that works just fine in every other browser you’ve tried finally looks decent in IE8. While not perfect, Bootstrap’s support for IE8 is quite good.

Final Thought

Some designers say that no self-respecting designer would use a framework they didn’t create. They fear loosing control over their design, without enough apparent benefit to offset that loss. I used to have a similar opinion about using development frameworks. But then I got over it and started getting work done.