Twitter Bootstrap(benhowdle.im)
benhowdle.im
Twitter Bootstrap
http://benhowdle.im/2012/12/17/twitter-bootstrap/
43 comments
This happened to me last week. I have near-zero design skills, so I just used a standard Twitter Bootstrap design for my site. Though I'm still embarrassed a bit by it, it works for now while I'm working on other more critical elements.
But I had a friend check out the site recently who went out of her way to praise the UI; she had expected something much more utilitarian. And I think this is more common; there are still so, so many BAD sites on the net that even a standard Bootstrap site is of pretty good quality/usability.
So while I still do plan on upgrading from a fairly default Bootstrap experience in the future, I'm no longer quite so embarrassed about using it now.
But I had a friend check out the site recently who went out of her way to praise the UI; she had expected something much more utilitarian. And I think this is more common; there are still so, so many BAD sites on the net that even a standard Bootstrap site is of pretty good quality/usability.
So while I still do plan on upgrading from a fairly default Bootstrap experience in the future, I'm no longer quite so embarrassed about using it now.
I was going to say exactly the same thing. If your website is selling twitter bootstrap themes, chances are you need to put some effort into your theme.
If it's an intro page, a FAQ, a contact page and it's aimed at people who don't give a shit about if it looks like 1000 other websites then there's nothing wrong with that.
1) Do something 2) Tell people 3) Iterate
Sometimes you can swap over 1+2. Do not get hung up about not using the standard theme just because 0.1% of your visitors might recognise where it's from. Are they your target customers ?
If it's an intro page, a FAQ, a contact page and it's aimed at people who don't give a shit about if it looks like 1000 other websites then there's nothing wrong with that.
1) Do something 2) Tell people 3) Iterate
Sometimes you can swap over 1+2. Do not get hung up about not using the standard theme just because 0.1% of your visitors might recognise where it's from. Are they your target customers ?
Bootstrap is a good way to slap together a website for internal use. It does the job and looks ok - I like that very much. It's a godsend for programmers with less than stellar CSS skill.
As a web person, can you honestly say that you always put yourself 100% in the shoes of a user?
>Come on. “Half-decent”. Is this what you want to output? To be known for? I can’t understand why, if you have an ounce of pride, you’d not want everything you release to be the best you could do?
This is all a little uppity coming from a blog using the Svbtle theme.
This is all a little uppity coming from a blog using the Svbtle theme.
His blog isn't using the Svbtle theme.
I want to take it as a compliment, but I don't feel it was intended like that!
It's not a personal insult if you were taking it like that. I'm pointing out that it's an odd stance you've taken. The audience that recognizes Bootstrap layouts and the audience that recognizes the Svbtle theme (or its variations) are one and the same. More to the point though, if you feel that way about Bootstrap then you should probably feel the same way about the theme you chose.
The universal reaction I get to any standard bootstrap web site I show to people is "this looks awesome, great work". Nobody outside of the web dev community knows or cares what Bootstrap is.
I hate Windows, iPhone, Android, OSX and Linux apps that try too hard to look and behave "different". Much of the hate for flash was because that was the standard tool people reached for when they wanted to make their sites fancy and different. I think we'd all be a lot better off if more sites used Bootstrap rather than less.
I hate Windows, iPhone, Android, OSX and Linux apps that try too hard to look and behave "different". Much of the hate for flash was because that was the standard tool people reached for when they wanted to make their sites fancy and different. I think we'd all be a lot better off if more sites used Bootstrap rather than less.
If your site's content is any good, half-decent is more than enough for the design. As a reader, bootstrap is the best thing to happen to the web in ten years - thousands of sites now have a simple, clean, usable theme, letting me focus on what's actually important - the content.
Thank you for pointing this out. I might say "hey it's a standard bootstrap site, must not be much of a designer" but at least I'll be able to read the content.
> I can’t understand why, if you have an ounce of pride, you’d not want everything you release to be the best you could do?
Seriously? You never release anything until you cannot think of a single improvement? Everything is time-constrained, and some of us would rather spend no time or attention at all on how things look, if only we could get away with that. Since we can't, we'd like to put something acceptable with the smallest time investment possible. The technical term appears to be "half-decent". :)
Seriously? You never release anything until you cannot think of a single improvement? Everything is time-constrained, and some of us would rather spend no time or attention at all on how things look, if only we could get away with that. Since we can't, we'd like to put something acceptable with the smallest time investment possible. The technical term appears to be "half-decent". :)
This criticism only makes sense in the bubble of developers - no one else gives a rat's ass nor notices.
As such, maybe use Bootstrap when designing for a general audience, but consider going in a different direction, when your audience is developers? Because they - and only they - seem to get their knickers in a twist when you use Bootstrap.
As such, maybe use Bootstrap when designing for a general audience, but consider going in a different direction, when your audience is developers? Because they - and only they - seem to get their knickers in a twist when you use Bootstrap.
Well, you could have made the greatest plugin, web application or library in the world but the moment you slap Twitter Bootstrap on your site for it, all initial value is lost and people just see a “cookie cutter website”.
I disagree. Bootstrap is there precisely for the people that do not wish to spend their effort on re-implementing reasonable web design techniques, yet wish their website to look "good". Sure, if you're selling yourself as a web-design expert you'd want to either completely customise it or make your own, but I did not get the impression you were restricting your comments to those.
Perhaps you're aiming your criticism at a completely different type of person, but I'd be interested in your critique (or otherwise) of these two, who clearly did not go the extra mile, and have not even used Bootstrap:
http://www-cs-staff.stanford.edu/~uno/ (seems to be down atm, as does Google's cache... http://cc.bingj.com/cache.aspx?q=knuth&d=460252651572473... )
http://norvig.com/
I disagree. Bootstrap is there precisely for the people that do not wish to spend their effort on re-implementing reasonable web design techniques, yet wish their website to look "good". Sure, if you're selling yourself as a web-design expert you'd want to either completely customise it or make your own, but I did not get the impression you were restricting your comments to those.
Perhaps you're aiming your criticism at a completely different type of person, but I'd be interested in your critique (or otherwise) of these two, who clearly did not go the extra mile, and have not even used Bootstrap:
http://www-cs-staff.stanford.edu/~uno/ (seems to be down atm, as does Google's cache... http://cc.bingj.com/cache.aspx?q=knuth&d=460252651572473... )
http://norvig.com/
It must be nice to have a designer in your back pocket willing to drop everything and design a flashy landing page for every tiny (~40 lines of JS) pet project you do. This is snobbery at its finest.
This isn't a product you need to sell. It's a tool that people either need or don't. And if they need it then the GitHub readme will probably suffice.
I know the author has a valid point in there somewhere but this is a terrible example. Don't make developers feel like they should be ashamed to release anything until they've paid a designer to slap Kanye West on it.
This isn't a product you need to sell. It's a tool that people either need or don't. And if they need it then the GitHub readme will probably suffice.
I know the author has a valid point in there somewhere but this is a terrible example. Don't make developers feel like they should be ashamed to release anything until they've paid a designer to slap Kanye West on it.
> people just see a “cookie cutter website”.
For values of "people" equal to "people who closely follow and are knowledgeable about web site design trends". For a site like LiberWriter, that's probably about 1% of our customers.
The others see a better site than I would have done on my own.
For values of "people" equal to "people who closely follow and are knowledgeable about web site design trends". For a site like LiberWriter, that's probably about 1% of our customers.
The others see a better site than I would have done on my own.
Dude, seriously? Sorry, but no. I am a crummy web designer; as a matter of fact, I have only a very minimal interest in browser programming, period.
I am not interested in spending weeks and weeks learning how to do quality web design, nor am I interested in spending weeks and weeks learning Javascript just so I can make something Not Bootstrap that looks about as good.
The goal of my (barely used) websites is to look clean and present the requisite information. Not going to lie, they look horribly cookie-cutter, and I could change that. But it doesn't matter (at least today). If it mattered, I'd change it.
I am not interested in spending weeks and weeks learning how to do quality web design, nor am I interested in spending weeks and weeks learning Javascript just so I can make something Not Bootstrap that looks about as good.
The goal of my (barely used) websites is to look clean and present the requisite information. Not going to lie, they look horribly cookie-cutter, and I could change that. But it doesn't matter (at least today). If it mattered, I'd change it.
>I am not interested in spending weeks and weeks learning how to do quality web design
Personally, I think it takes years.
Personally, I think it takes years.
> Personally, I think it takes years.
Most art does, yeah. So... that only goes to make my point: I'm not skilled in the art, I am focusing on being skilled in other arts. If I wanted skill in that art, I'd hire someone who had skill in the art. Bootstrap serves as a cheap way to "import skill".
Most art does, yeah. So... that only goes to make my point: I'm not skilled in the art, I am focusing on being skilled in other arts. If I wanted skill in that art, I'd hire someone who had skill in the art. Bootstrap serves as a cheap way to "import skill".
I guess I should feel ripped off by Nissan since I have a cookie cutter SUV. 4 wheels, the trunk has a 3rd row that pops up on demand, I can switch into 4 wheel drive. I did get to pick the color though. I really wish they had thought about making it unique and maybe putting the steering wheel in the back seat.
If you’ve made a great product and you can’t design, find a designer, there is a deluge of designers out there looking for a collaboration.
That assumes that you're making a product that designers will be interested in. Maybe it's just a crud app for doing finance stuff, or any number of utilitarian apps. And if it's a non-flashy open source project (projects geared towards designers don't count) then chances are slim that you'll find a designer willing to work with you on it. Design also has a very different collaborative model than development. You can't just have tens of random designers drop by and contribute patches.
I think Bootstrap is a net win for the web because it raises the baseline. If Bootstrap didn't exist, would all of those developers instead become/hired designers?
That assumes that you're making a product that designers will be interested in. Maybe it's just a crud app for doing finance stuff, or any number of utilitarian apps. And if it's a non-flashy open source project (projects geared towards designers don't count) then chances are slim that you'll find a designer willing to work with you on it. Design also has a very different collaborative model than development. You can't just have tens of random designers drop by and contribute patches.
I think Bootstrap is a net win for the web because it raises the baseline. If Bootstrap didn't exist, would all of those developers instead become/hired designers?
I get stick from designers and developers (mainly on Twitter) for using Bootstrap. I'm not a designer, I'm not creative enough to be one, but I can recognize a good design. I personally use Bootstrap because it enables me to very quickly come up with an application which is usable and VERY easily maintainable. From there I'm able to change the colours, layout tends to be grid based for the things I work on.
Why should I suffer attempting to design something that I know 100% will be classed shit, when I can use Bootstrap, a decent base look and colour scheme.
"Just ship!" is something I hear all the time. The app works and it's useable what else matters?
Why should I suffer attempting to design something that I know 100% will be classed shit, when I can use Bootstrap, a decent base look and colour scheme.
"Just ship!" is something I hear all the time. The app works and it's useable what else matters?
I'm not a fan of using bootstrap for client facing content.
We have specific front-end designers & css/markup developers for "front of house", but for "Admin" sections - i.e. the backend that staff/etc will use to manage an app/site/etc - something like Bootstrap (i'm interested to try Zurb Foundation/similar for this role too) is perfect, because we aren't trying to sell a brand to those users, we're trying to deliver functionality, and it's nice to be able to just put pre-built components together and get functional dashboards, record lists, CRUD screens, etc.
We have specific front-end designers & css/markup developers for "front of house", but for "Admin" sections - i.e. the backend that staff/etc will use to manage an app/site/etc - something like Bootstrap (i'm interested to try Zurb Foundation/similar for this role too) is perfect, because we aren't trying to sell a brand to those users, we're trying to deliver functionality, and it's nice to be able to just put pre-built components together and get functional dashboards, record lists, CRUD screens, etc.
Yep. You don't want or need all that bloat for a one or two page website. And if you don't have a skilled designer to help, use a simple grid system like 1140 or 960gs. Bonus: grab a couple nice Google web fonts for your headings.
> I’ve never read a more half assed title - “How to Make Your Site Look Half-Decent in Half an Hour”. Come on. “Half-decent”. Is this what you want to output?
Some people are not designers; they want to code and are in need for a tool that's like boilerplate, like something, that they can quickly grab so that they can start to actually code; a bootstrap! A tool that allows to create temporary, but working and good looking design in minutes.
I'm happy we have such tool; it is very useful!
Some people are not designers; they want to code and are in need for a tool that's like boilerplate, like something, that they can quickly grab so that they can start to actually code; a bootstrap! A tool that allows to create temporary, but working and good looking design in minutes.
I'm happy we have such tool; it is very useful!
Maybe an analogy can be drawn here to popular music. You run into a lot of people that say they don't listen to it, and some who say it's crammed down our throats by radio stations giving listeners no choice, but at the end of the day it's still popular and changes our global culture. As much as I sometimes don't like to admit it, but, the trend is your friend.
A lot of people give Twitter Bootstrap crap because everyone is using the design and they get sick of seeing the design on every website. A lot of people miss the whole point of Twitter Bootstrap. It's a design guide, it's for people to quickly create a website. It doesn't mean it's finished after that.
I think people shouldn't blame Twitter Bootstrap, but the people that are using Twitter Bootstrap. They shouldn't stop with styling and design after Twitter Bootstrap is implemented. They should make the design their own.
Note: I'm one of those people. Sometimes I make a design with Twitter Bootstrap at it's core, and not change the styling of the input fields etcetera to make the design not look like Twitter Bootstrap. But that's MY fault, not the creators of Twitter Bootstrap.
I think people shouldn't blame Twitter Bootstrap, but the people that are using Twitter Bootstrap. They shouldn't stop with styling and design after Twitter Bootstrap is implemented. They should make the design their own.
Note: I'm one of those people. Sometimes I make a design with Twitter Bootstrap at it's core, and not change the styling of the input fields etcetera to make the design not look like Twitter Bootstrap. But that's MY fault, not the creators of Twitter Bootstrap.
> “Half-decent”. Is this what you want to output? To be known for? I can’t understand why, if you have an ounce of pride, you’d not want everything you release to be the best you could do?
Sometimes the software is a means to an end. I've made small utility web apps for clients before, and throwing Bootstrap in improves the experience of the site without taking more than a few minutes of time (which the client pays for). Spending time customizing Bootstrap or designing from scratch gets in to diminishing returns almost immediately, while that first quick step from 1994-style to Bootstrap pays off big.
Pride is one thing, but when it's somebody else's money you have to consider hubris too.
Sometimes the software is a means to an end. I've made small utility web apps for clients before, and throwing Bootstrap in improves the experience of the site without taking more than a few minutes of time (which the client pays for). Spending time customizing Bootstrap or designing from scratch gets in to diminishing returns almost immediately, while that first quick step from 1994-style to Bootstrap pays off big.
Pride is one thing, but when it's somebody else's money you have to consider hubris too.
I love to use Bootstrap for backends and purely utilitarian websites such as monitoring/dashboard sites, admin-interfaces to whatever etc. It allows me to quickly build a decent looking and usable interface without spending much time on design decisions. I'd be more careful to use it on sites that try to promote brands, but there it's still a good layout grid that easily adapts to styling, so there's little harm in using it. Now if you want to go all crazy with your design, then Bootstrap is probably not what you want to use.
TL;DR: Use it where appropriate. Misuse is not Bootstraps fault.
TL;DR: Use it where appropriate. Misuse is not Bootstraps fault.
considering Bootstrap threatens the livelihood of many mediocre designers, this type of advise is understandable.
There is a lot of emotion here but nobody seems to have hit on the major pain point of Bootstrap. It is great for a quick prototype but if you want to do anything that deviates from the Bootstrap styles it creates an unmaintainable disaster. What would be minor CSS changes becomes significantly more time-consuming or impossible. Any small amount of time saved in the initial development is quickly lost. Using Bootstap is the worst kind of technical debt your application could be afflicted with.
I'd like to hear more about this argument. Can you develop it further?
I am currently maintaining an application originally developed with Bootstrap and it has cost us hundreds of hours in extra maintenance so far. I'll give two examples.
Any grid-based CSS framework breaks content/layout separation - one of the best features of HTML5/CSS. Instead of naming elements based on document role, they are labelled by row and column position. After the prototype was finished, the designer wanted to add a banner at the top of the page. With normal CSS/HTML this would have been an insignificant change, but because we were using a grid, all HTML had to be rewritten because row 1 now equaled row 2, etc.
#2, The CSS in Bootstrap changes the global defaults of all HTML attributes. I have probably written as much CSS to undo bootstrap styles than to add new. I hope you like writing "line-height: normal" over and over again.
I could conclude saying that bootstrap should only be used to build prototypes, then throw it all away before developing the production app, but I don't know why you need fancy formatting in a prototype app. I'd recommend you build the first version in black-and-while/wireframe style, then hire a professional designer for the final decoration. If you are not a graphic designer, focus on writing maintainable, compliant HTML and CSS.
Any grid-based CSS framework breaks content/layout separation - one of the best features of HTML5/CSS. Instead of naming elements based on document role, they are labelled by row and column position. After the prototype was finished, the designer wanted to add a banner at the top of the page. With normal CSS/HTML this would have been an insignificant change, but because we were using a grid, all HTML had to be rewritten because row 1 now equaled row 2, etc.
#2, The CSS in Bootstrap changes the global defaults of all HTML attributes. I have probably written as much CSS to undo bootstrap styles than to add new. I hope you like writing "line-height: normal" over and over again.
I could conclude saying that bootstrap should only be used to build prototypes, then throw it all away before developing the production app, but I don't know why you need fancy formatting in a prototype app. I'd recommend you build the first version in black-and-while/wireframe style, then hire a professional designer for the final decoration. If you are not a graphic designer, focus on writing maintainable, compliant HTML and CSS.
I'd suggest that your problem might not so much be the tool itself, but the wrong tool for what you want.
I'd be interested to see what "normal" CSS/HTML you would use to achieve a fluid, responsive grid in a relatively cross-browser fashion, that maintained all of this semantic magic. As much as the "content/layout separation" ideal is lauded, it's pretty difficult to achieve in reality - and just because something is in HTML, I don't believe that makes it "content".
Addressing your two examples: first, you shouldn't have to rewrite "all" of your HTML to add a banner to the top of the page. There aren't any "row1", "row2" etc classes in Bootstrap. If that was a requirement, I think someone's done something funky with your layout.
Second, part of the appeal of Bootstrap is that it changes the global defaults of HTML elements. Such resets are commonplace and give you a consistent look and feel across browsers. If you're looking to "undo" Bootstrap's styles, then you probably shouldn't be using it in the first place.
I'd be interested to see what "normal" CSS/HTML you would use to achieve a fluid, responsive grid in a relatively cross-browser fashion, that maintained all of this semantic magic. As much as the "content/layout separation" ideal is lauded, it's pretty difficult to achieve in reality - and just because something is in HTML, I don't believe that makes it "content".
Addressing your two examples: first, you shouldn't have to rewrite "all" of your HTML to add a banner to the top of the page. There aren't any "row1", "row2" etc classes in Bootstrap. If that was a requirement, I think someone's done something funky with your layout.
Second, part of the appeal of Bootstrap is that it changes the global defaults of HTML elements. Such resets are commonplace and give you a consistent look and feel across browsers. If you're looking to "undo" Bootstrap's styles, then you probably shouldn't be using it in the first place.
Here is an example of a generic HTML doc that changes layout by changing only CSS: http://protonfish.com/csssatori/ It's been a few years since I wrote it and it was just a prototype, but it should be a good example of what you asked to see.
Separating content and layout takes a little effort to learn but I assure you it is possible and effective. In my opinion, grid-based layouts are table-based layouts with a coat of paint.
Separating content and layout takes a little effort to learn but I assure you it is possible and effective. In my opinion, grid-based layouts are table-based layouts with a coat of paint.
I agree that visual identity is important and it's better to have a custom design to stand out from the crowd, but one thing you haven't mentioned are Bootstrap themes - there is already a wide variety of themes to choose from and most of them change the look&feel of Bootstrap drastically. I think it's a fair compromise between having to create custom design (which can be time consuming) and using default Bootstrap theme (which is overused and doesn't stand out).
This is such a silly argument. When you're building an application, your intended audience cares about whether or not it does X that it says it will. Up next in importance is how cheap it is, and in a distant third is how easy it is to use. That the layout and buttons are easily recognizable from other sites is a boon, if anything, as it increases the feeling of familiarity.
Why is it preferred to release early, release often for product features but not for design. After all isn't design a feature.
Why not, instead of publicly complaining, develop your own theme for bootstrap, and release it as open source?
bootstrap is excellent for developers that aren't designers, and still want to put together something that looks nice without having to spend money on elaborate designs. not all startups are blessed with loads of money.
it's just called Bootstrap now isn't it?
Yes, this is exactly true. The purpose of is to help less knowledgeable folks and people that don't have time to create a design to start out with something usable and clean. There's zero reason you can't go back and make it sexier later. I actually think it's great that all these docs sites use it because it's better than the alternative, a huge plain text blob like what's on the Sass page.
I find these criticisms regarding the ability to recognize a "Twitter Bootstrap site" to be inconsiderate of the audience for which the sites were really created.
Generally speaking, the startup development community exposes themselves to new websites on a pretty frequent basis. Just because we can recognize a particular CSS framework, doesn't mean the intended audience of the website can.
I would be surprised if it wasn't an extremely small percentage of website users that would be able to recognize "just another Twitter Bootstrap site."
Don't let yourself get caught up in the bubble of the ever-critical development community. If you're building a site just to please folks within that community, you should probably do a bit more research on who you really want your target demographic to be.