HTML5 Zone is brought to you in partnership with:

Avid web designer and developer striving to make the web awesome. Obsessed with UI and graphic design. Joshua is a DZone MVB and is not an employee of DZone and has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

Top Posts of 2013: Please stop using Twitter Bootstrap

12.30.2013
| 139384 views |
  • submit to reddit

Let’s be honest: a great many of us are tired of seeing the same old Twitter Bootstrap theme again and again. Black header, giant hero, rounded blue buttons, Helvetica Neue.

Yes, you can customize the header to be a different color, maybe re-color some of the buttons, use a different font. Ultimately, however, that doesn’t change anything—it still looks like Bootstrap.

I get it, really. Twitter Bootstrap is great for developers; all of the pieces are nicely laid out for you, use a consistent design language, and piece together like Lego. No design sense needed and no creativity involved. You just import the CSS file and go.

But when you start to see the same layout over, and over, and over again users begin to tune out. You’ve lost me. Your design looks like one of 6,000 other sites out there. And not just the same general layout, but the exact same components.

The problem with Bootstrap is that it is so heavy-handed, so prescriptive, that it is actually a nuisance to modify. It’s easier to use the defaults. You certainly can modify it signficantly and, if you decide to use it anyway, I would encourage you to do so. But most people do not bother.

There are some times it is appropriate to use Twitter Bootstrap’s defaults. Like for an admin dashboard, an open source project’s documentation, a prototype, or a weekend hackathon. However, once you go beyond the stage of small test project, it’s time to think beyond the black header, blue buttons, and grey 1px outlined boxes.

Twitter Bootstrap’s success has turned it into the Times New Roman of design. It has a time and a place, but you wouldn’t use Times New Roman on your startup’s website, would you?


Published at DZone with permission of Joshua Gross, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Armando Ota replied on Tue, 2013/02/26 - 1:39am

And most of the bootstrap plugins don't work as expected. To make it work one must google all the time for  solutions to basic problems on web page. Although layouting works great, plugins are still in alpha release. Might be production ready in two or three years time. 

Ryan Cates replied on Tue, 2013/02/26 - 3:30pm

I recently found this responsive grid framework that doesn't have all of the unwanted bootstrap styles called Thumper. Also another great alternative to bootstrap is Zurb Foundation 3.  

Leo Cabral replied on Wed, 2013/02/27 - 9:22am

We have passed by Wordpress and his army of similar blogs. We can get through it without worries. After all, content still rules.

Matt Raible replied on Wed, 2013/02/27 - 9:57am

Saying don't use Twitter Bootstrap for webapps is like saying don't use iOS's default look and feel for iOS apps. I think it's a nice baseline, just like iOS's defaults. 

Of course it's recommended you innovate beyond the Bootstraps defaults. However, in most cases, that's like asking programmers to become designers.

Ryan Cates replied on Wed, 2013/02/27 - 10:43am in response to: Matt Raible

Yes I agree with you Matt. I think Joshua was speaking more to static websites than web apps. I personally am a designer not a developer. 

Vineet Sinha replied on Wed, 2013/02/27 - 10:43am

If the main point is to customize bootstrap - I agree.

But just because of this one small problem (laziness of site creators), you can't really argue that people should not use Bootstrap. Because your main point otherwise is 'you are lazy, so stop doing the stuff to improve your site'.

Vineet Sinha replied on Wed, 2013/02/27 - 10:48am in response to: Matt Raible

I like bootstrap because its prescriptive nature defines the interface from the developer to the designer. 

A developer can code to just the default bootstrap API, a designer can submit what the appearance should look like, and finally a third person (usually another developer with css/psd understanding) can override bootstrap's defaults to make the designer and developer talk to one another.

Leo Cabral replied on Wed, 2013/02/27 - 11:17am in response to: Vineet Sinha

I agree with you. I see bootstrap as a lego of interface design patterns. We can see it working well in third party components along the Web (datepickers, input masks, upload widgets). But batteries are not included (I think thats Joshua's point). So the lazy ones will all look alike, as we can see today.

Robert Deluca replied on Wed, 2013/02/27 - 12:32pm in response to: Matt Raible

I built the framework mentioned, Thumper. I think boostrap comes with to much. It has too much weight, and if you're doing custom site designs, boostrap is not the best choice. 

Ryan Cates replied on Wed, 2013/02/27 - 1:45pm in response to: Robert Deluca

Awesome framework Robert! Much appreciation for your work.

Kerr Schere replied on Wed, 2013/02/27 - 3:50pm

I heavily customized a Bootstrap layout for an intranet in early 2012.  At the time, the JS widgets interfered with jQuery so much that I had to completely rewrite them.  It's easy enough to at least modify the colors using LESS variables.  I ended up using a lot of the ideas in Bootstrap, but not as much of the implementation.  That being said, many who use the framework aren't that interested in heavy customization.  Maybe they're developers who know HTML but aren't adept at design.  Maybe they just want to get up and running, and don't have designers at their disposal.  

We'd all like to have a great design person/team to create that uniquely incredible UI, but I've been in many scenarios where that just wasn't the case.  Bootstrap seems to be aimed at that type of scenario.  If it works there, catgorically poo-pooing its use serves to create animosity at the end of the day.  If not for Bootstrap, some people would be looking for a like option.  Bootstrap fits a niche; I say let it.  Those that take a different direction are that much more likely to be noticed for a unique design.

Whatever the era, some designs will fall into a sort of common denominator.  Bootstrap is serving to create the denominator at present.  It's not an altogether bad thing if you ask me.  If otherwise developers perceive a high barrier to using responsive design sprinkled with HTML5, at least the project is moving things forward a bit.

Chris Hattery replied on Thu, 2013/02/28 - 11:25am in response to: Leo Cabral

haha, yes

Robert Deluca replied on Thu, 2013/02/28 - 2:32pm in response to: Ryan Cates

Haha thank you sir! Appreciate the support. :D

Hongjoo Lee replied on Tue, 2013/03/05 - 3:50am

Of course they will go beyond twitter bootstrap when they needed or felt it's time to do so. But you can't teach them if they need or not. Annoyed by tons of copies? Then you just have found tons of needlessness, which implies most people don't feel annoyance yet but you do.

Michael Je replied on Fri, 2013/04/05 - 8:46am

 Of course they will go beyond twitter bootstrap when they needed or felt it's time to do so. But you can't teach them if they need or not. Annoyed by tons of copies? Then you just have found tons of needlessness, which implies most people don't feel annoyance yet but you do.

Babul ilm

Steve Wood replied on Mon, 2013/07/01 - 4:38pm

OK - I get it.  For a designer, Bootstrap is simply annoying because it's stifling creativity.  However, your article misses one, very very important player in this whole debate: the customer.  Many end users look for familiarity.  They want UI that they "know" and understand how to navigate.  It also needs to look pleasant and engaging.  Bootstrap nails that problem.

In the "old days" the standard UI paradigm was WinForms and everyone who used a PC knew what they were getting - a File menu, About menu, Edit menu, etc - so they knew where to look and generally how pretty much every app on their desktop worked.  There's a lot to be said for that - particularly if the app they're using is focused on helping them get stuff done (as opposed to wowing them with UI).  Even Apple and iOS have introduced clear design guidelines and principles to help deverlopers help their users make there way around so many different apps that all work in weird and wonderful ways. Now, I'm not saying apps should be all monotone - but there's a certain comfort for end users (particularly those who don't live and breathe IT) when they use stuff that looks similar or even the same.  I mean, look at any Apple device.  My devices come in a stunning array of silver, black and white.

I get what you're saying.  But it kind of sounds like a designer who wants to take all his users on a creative exploration (which is cool - I like that).  A lot of people want design that gets out of the way also so they can focus on the utility or content of the app.

Yours truly - a Bootstrap abuser!

Sevgi Kour replied on Fri, 2013/07/05 - 1:12am

Yes, you can redo the header to be an alternate color, possibly re-color a portion of the catches, utilize an alternate font. At last, in any case, that doesn't change anything—it still looks like Bootstrap.  pandagooglelinks 

Dirk Podolak replied on Sat, 2013/09/07 - 6:36am in response to: Steve Wood

I cannot agree more. It's the customer/user that counts.

When I use some services, it want them all to be interacted with in the same way. You may recolor the top nav bar, but don't move it and don't reinvent navigation.

Bootstrap's just become some kind of a standard widget set.

Cool designs are like art to me. I like very much of it when just viewing it. When it comes down to web applications they are tools, and I need the handle where it belongs, not where it looks nicer.

Just my 2ct ...

Dirk

Andrew Gilmartin replied on Thu, 2014/01/02 - 9:24am

For USERS consistency and meeting expectations are prime drivers to usability and efficiency. There is 30 years of research and practical advise on this. Pick up a copy of the Macintosh Human Interface Guidelines (from 1982), iOS Human Interface Guidelines, Windows User Interface Guidelines, read them, and come back and tell me again "[...] when you start to see the same layout over, and over, and over again users begin to tune out."

There is a rich history of human interface design especially in the 1980s when you have both academic and commercial activities in this area. So, take some time and see how it used to be done and where there is value in recreating it.

Joseph Areeda replied on Thu, 2014/01/02 - 12:18pm in response to: Andrew Gilmartin

 Andrew, you make more sense than the article.

Too much of web design is flashy bling to grab the casual surfer's attention and not enough is creating valuable content to keep the intended audience coming back.

Consistent user interfaces are the basis of usability.  If someone ignores your site because the toolbar is the same color as the one they just came from, are they the kind of user you want to keep coming back?

Kaveh Shahbazian replied on Thu, 2014/02/06 - 10:55am

 (I am a mainly C# developer and ASP.NET MVC/WPF/Pretty Much Everything:)

I experienced that actually Bootstrap to CSS is like jQuery to JavaScript. Even in a simple login form it buys lots of time for us. So, no thanks! I do not buy your reasoning.

Doug Wislocki replied on Fri, 2014/06/27 - 1:43pm

Have you ever written any css and displayed it in other browsers? and those other browsers many, many, many versions?  Like all of them?  That is why Twitter bootstrap is really so nice!  How about you say, stop using the DEFAULT twitter bootstrap look?  But even so, you know what I've been seeing on almost every sight lately?  That stupid share this with everything in the world vertical banner on the left!  Why don't you stop using that.  Or the side bars on a page, why not quit wasting real estate?  Or standard cookie cutter blogs....

Why does it feel like I'm watching Andy Rooney?  Some old codger who for some reason can't be fired so they just let him complain about random stuff he finds on his desk for 60 seconds.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.