I like bootstrap because I'm terrible at getting things to align properly on a web page and it basically does it for me.
As a programmer, this is awesome because I can spend the rest of my time on the interesting programming stuff. Really, it appeals to:
1.) My complete lack of understanding of the intricacies of CSS and web page design.
2.) My mindset as an industrious but lazy programmer.
3.) It can be made to be generally portable.
I can see that down the line I might want to replace it with something else or hire a real designer to make me real buttons and web page styles, but it an excellent tool for the rough drafts of different ideas that I have. I can put things 'here' and 'there' on a web page quite easily, and that is really what I want/need.
It is much like a writer throwing down his ideas stream of consciousness style onto a piece of paper. He knows that he will have to edit eventually to make it consumable, but for now, he just needs to get the ideas down on paper while he has them.
I just started a Bootstrap app and customising it is surprisingly easy. If I were worried about my app looking like a bulk standard Bootstrap app it probably hard to modify the Bootstrap CSS enough to give it a unique style.
We could do this at least as far back as 96, I can confirm. Even without Bootstrap you can just write a super simple HTML page, with bare minimum markup and layout, and just focus on getting the functionality right. No CSS or Bootstrap needed. There's always time to iterate on the prettiness. Plus if a customer/user likes your site when it's "ugly" but functional, and especially will pay for it like that, then they might like it even more when it's "pretty".
This was the reason bootstrap was invented. You can choose to use parts of it to make your quick and dirty work look usable and not just thrown together.
You will have to pry that framework from my cold, dead fingers. Most web projects if not all would benefit from one thing or another that is shared amongst major solid frameworks. It's silly discriminate against projects that use it, and most of all, down right foolish.
I use the framework as a concise, distilled version of good CSS practices and I find it hard to believe that somebody launches a project that looks like a kitchen sink example.
Designers generally shouldn't be worrying about the things Bootstrap covers, like how a button looks. That's a commodity. It always has been. Instead, figure out where to put the button, and whether it should even exist. That is as valuable now as ever.
Furthermore, all the designers I've ever worked with like to throw a PSD over the wall and say, "Make that." Every little detail reimagined and drawn from scratch. They don't know how to build and work from a set of reusable CSS components like Bootstrap. So as a developer, I'm inclined to say forget your PSDs, learn CSS, we're on the web and it's part of the job.
I don't know why how a button looks should be a commodity. However, how a button looks by default clearly is.
In general, for example, I might want a certain set of buttons to look different from another set of buttons because this provides useful information to the user of the system.
I haven't worked with bootstrap yet, however it looks very promising. The key to a good framework is how much it makes what you want to do easy when the tasks align, and how it stays out of your way when the tasks do not.
I actually look forward to playing with Bootstrap to see what it's capable of doing. It looks like the alignment handling might be worth it by itself. However, the article here made me somewhat less enthusiastic. One of our goals is to produce something easily themable. If bootstrap helps, great. If it gets in the way, that would be a bad thing.
Commodity means “parts that aren’t interesting”. Design, as in conceiving what a product is and how the user benefits – well, that’s your whole business. Interesting.
Deciding how CSS should be organized, some reasonable assumptions about type and layout and UI primitives – these aren’t your business. They should be commoditized to your benefit, much like cheap CPU cycles.
But that's the thing, Bootstrap only covers all of the things that most designers don't want to worry about. Something that programmers sometimes don't understand is the staggering scope of what comprises design these days. Everything from layout to typography to color theory to information design and human factors.... To burden a designer with coming up with reusable CSS conventions or a module system for fancy UI components is unnecessary and cruel!
I'm a designer and recently started a side project with a friend. We decided to use bootstrap because it was super easy to get started with off the ground..no reset stylesheets, defining default fonts, sizes, etc, and no implementing a grid framework. It was all right there. And for the most part everything was generally a good starting point. I changed the header color, used a different font for the logo (a google web font), and then built off the base that bootstrap gave me.
I say it's useful for two things: quick and dirty way of getting a prototype barely functioning and looking decent. The second is getting me right into the design cockpit without worrying about all the defaults and resets and foundation of it all. I change a few heights/widths/colors/fonts and we have something decently unique.
Edit: I might add that if a.) my app took off or b.) I was presenting it to someone important, I would make sure it was very unique and all my design and UX principles were put into play. But for simply prototyping an idea, or having a good base for a project, it's a great tool.
Bootstrap is great for what the name implies, but when you are delivering the product to the public, it's not good enough.
The perfect example is iOS apps. Can you imagine your designers simply copying and pasting from iOS's default theme? It's very bland, it turns off users before they even use it (which in effect, is bad UX. Bootstrap has both + and -, good UXer will see this and adjust accordingly/depending on the phase of the product). I use this resource for my wireframe/mockups http://www.teehanlax.com/blog/iphone-gui-psd-v4/ Personally I won't ever use it in a beta product/website as is.
There's nothing wrong with bootstrapping to map out user flow, and give clear indication a button is a button, a list is a list etc. But when it's time to up your game, give access to the public, default bootstrap visual/color needs to go.
Humans judge a book by its cover. If you release your bootstrap website, users will have to work and over come the barrier of your bland looking site and then decide if it's worth it to try your product.
PS: The point about lawyers have crappy websites and yet we still use them is because our expectations changes depending on the organization. Do we expect government websites to be wow and dazzle us? Do we expect a new Apple product's website to use bootstrap? Do we expect a 2 month old startup website to be featured on Behance's frontpage?
And remember who your early adopters are – if it's people that scours HN or see countless bootstrapped sites, what are they going to think when they see your site? Would they be understanding and go 'Oh its okay - they're a startup, I'll give them some leeway when it comes to visual design' or 'Would they go eff this, these guys don't care about design or visuals. I'll come back later'.
> Can you imagine your designers simply copying and pasting
> from iOS's default theme? It's very bland, it turns off
> users before they even use it
i recognize UX is really important in ios, especially since a lot of ios apps target the $1 casual user market. There are a lot of other markets and types of business, for example enterprise webapps, where a product which solves their business need matters, and using a stock theme does not matter, we don't even have a designer on staff.
This. The choice is not often between "custom, distinctive looking design" and "boring standard design", but between a standard design or theme and someone using comic sans and a windows 'hotdog' theme for inspiration.
To rephrase: "[I think it's] very bland, it turns off [myself] before [I] even use it." It'd surprise me if most users pay enough attention to even see that a Bootstrap button looks different from a 37signals button or a Facebook button.
Bootstrap provides a bunch of reusable elements. You can still make the non-reusable elements (the layout chrome, logo etc.) as pretty/ugly as you want, and you can use those reusable elements to create very bland or very inspired websites.
"It'd surprise me if most users pay enough attention to even see that a Bootstrap button looks different from a 37signals button or a Facebook button."
There's a big difference between what a user can articulate about their experience and what they are affected by.
Utilitarianism has long been a core principle of good design. When I travel around the country, I don't bemoan the lack of variation and design esthetic in all the street signs I encounter. Similarly, there is a broad class of utility apps for which Bootstrap is a great standardization influence.
Because you don't expect street signs to be visually pleasing. You expect a certain look from street signs because they all share the same function.
But startups come from various fields and solve various problems, provide different services and products. Should we shift our expectations that all startup sites will use templates now?
Your startup is not a special snowflake. Your buttons and menus and checkboxes work just like everybody else's. Your buttons can look just like everyone else's buttons. You know what your users will say? "Oh! It works just like X, I know X, this is easy!".
I actually think iOS is a terrible example, and that Apple apps are undoing years of good design lately. One of my favorite features about my Android phone (despite that fact that all the apps are still laid out however the designers feel) is that there is some consistent UI and I can navigate more quickly by using the menu, back and find buttons which provide a consistent way to find the settings in any random app, or to find the search feature.
I too don't really understand that backwards patterns were creating with the web, i.e. when a few years ago modal dialogs got much more popular (i.e. jquery-ui, etc). I remember not too long ago in the mid 90s when every magazine was awash with complaints about apps that had too many modal dialogs, saying they were bad for user experience, which was generally true.
Those things are pretty consistent in iOS too, if you follow the pretty well laid out conventions. Settings are in the settings app, search is at the top of a list etc.
I guess the difference is with hardware buttons the app has little ability to effectively change the behaviour, whereas with software conventions they can pick and choose what they follow.
There are a few reasons that design resists commodification - one of them is that it's like peacock feathers. A well-designed site or app signals that the creator invested resources into it. Generic design looks untrustworthy to a potential customer or user - not because it's ugly or bad, but because it says to users, "I slapped this together over the weekend - it might not be here tomorrow." That might not be true, but that's the message that is received.
I think you're confusing UX with visual treatment. UX deals with where things are placed on the page, how information is laid out, and the flow of the website. I could feasibly do most of this within the confines of bootstrap.
The visual treatment for bootstrap sites, however, completely lacks any branding. The problem isn't that users can't figure out how to use your site (a UX problem) but that users don't associate the look and feel of your website with your product.
What if the user is put off from seeing another bootstrapped site? They already have a negative connotation before even trying your product/site. That's UX.
How many consumers actually know what a boostrapped site is?
More importantly I would say that a non-trivial amount of users do not enjoy and even detest change. For an anecdote look to any change facebook makes.
One benefit of bootstrap is that casual users can leverage their understanding of how other bootstrap sites behave thus reducing the amount of new things they have to learn and get used to.
Thats probably true. On the one hand you have users getting so used to bootstrap sites that they begin to instinctively know expected behavior and how to navigate other bootstrap sites, which is good UX. Then on the other hand you have a lack of brand, and disinterest because of overuse, which is bad UX. I suppose its a bit of a catch-22.
It's wonderful how you guys are demo'ing the first paragraph of this piece. You're giving all the same reasons people said the Mac was a bad idea, 28 years ago! You have so much in common with your grandparents. :-)
i'm a designer and a developer and i'm using bootstrap in my latest project as a base UI. i figured, i'm introducing some big new ideas that are hard enough to explain to my users, why make them discover how a new menu or form works? so i used bootstrap for all my typical interactions and it's saving me weeks of work i would have spent rolling my own custom framework.
We use some modified Bootstrap CSS at Blueprint (ss: http://d.pr/pqCT) for things like horizontal forms. You need to customize it, and new rules sometimes conflict with existing CSS, but it's working pretty well. I've used it in a more primary role on another serious web app and it's great because 2.0 has responsive CSS and has had lots of work done on it to make it stable across platform.
This is a wonderful example of how Bootstrap should work. Everything is familiar but it does not look cookie-cutter. The right amount of same and different go a long way.
We built the site for http://www.semantics3.com/ and we tried my best to use as little elements of bootstrap 1.4 as possible.
We loved the grid, the form elements and buttons and its sized. The first thing we re-did was the nav bar though. Apart from that we think the framework really accelerated the design process.
I've been using it on new projects, but always found customizations a little awkward. Are you changing the actual bootstrap files (typography.less or whatever) or simply overriding them in your own style file?
I am overriding bootstrap.css. Which on hindsight seems like a bad idea. Now I am finding it a little difficult to migrate over to 2.0. So what I've ended up doing is copying over the new features that I want (like the new icons) and leaving the rest in legacy mode. No biggie. Dont really need a responsive design for this website.
I'm used to 960GS so I was at home when it came to bootstrap. I spent some time reading the examples provided, then started on a clean slate. Top nav, the mast then footer, then finally the main content. That way you are not technically tweaking their templates. You are branching out.
Many people have commented saying that their primary concern with Bootstrap (or what holds them back from liking it) is the default styles. There's a lot being done to combat the wave of bland Bootstrap deployments and not everyone chooses to go vanilla.
I can't make up my mind about this.
The developer in me loves bootstrap, it doesn't makes me think too much about UI. I can't just worry about coding and functionality.
However, seeing all websites using the same layout it's pretty boring and dull. I think the web is what it is because of it's diversity. I'm a very visual guy, I love te see beautiful well design things and new approaches.
If bootstrap or any other framework is the end of road as far as UI interface, it's pretty sad IMO.
> However, seeing all websites using the same layout it's pretty boring and dull.
This is a self-correcting problem though. Once there's enough backlash, people will start tweaking things to set things apart. Bootstrap is a good starting point, that's all.
they don't have the same layout. They usually have the same nav bar at the top, but the content area can vary almost as much as something made from scratch.
On the flip side, I override a site's design (I usually keep the layout), and apply my own styles - and I'm glad to say that the web is a much better place for me as a result. I gain in having a more consistent experience across the web. This I think is touched on in Dave's article.
I still appreciate aesthetic beauty, but the web just isn't the place for it. In my mind at least.
Edit: I would change the layout also, but sadly to do that is non trivial.
Sure, having a killer design is first prize, all other things being equal. However, in a lean startup resources aren't infinite - you have to decide where to put your time and money.
Marketing has a concept called "point-of-parity/point-of-difference" [1] that I think might be useful here. Bootstrap without any customisations gives you parity - your design doesn't suck anymore. Once you've achieved parity and your customer feedback indicates that design is hurting you, iterate the design.
Building a todo list for designers? Pay lots for design.
Building a technical app for builders? I suspect once you have relative parity they'll buy based on how well you target their needs.
Your stance is at odds with the article though. He's arguing that in order for mankind to move forward at a faster rate with the web some UI standards need to start coming about, like the Mac pioneered (inspired by Parc).
Having a custom design for every site means a user having to learn a new UI every time. It's mentally exhausting.
And as an added bonus the programmer doesn't have to rewrite code that been written a million times before by other programmers.
Standardized toolkits were a boon when the Mac came out - they were confining enough that the average programmer couldn't produce a really bad interface. Today however, and after quite a struggle, the idea is finally taking hold that software should have an _actual_ design phase conducted by _actual_ designers that understand how people _actually_ interact with software.
The disquiet some people feel is that frameworks like bootstrap make it very tempting to drop this design phase in favour of snapping widgets together and assuming the end result must be a good UI because users are "used" to the individual widgets. This would definitely not be step forward in software construction - web or otherwise.
Good post by Dave. As others mentioned, I think Bootstrap is very much like the Wordpress for web apps. Just like wordpress has hundreds of templates, hopefully we can get a variety like this for Bootstrap as well. This could be as simple as adding more examples to the official Bootstrap site. Maybe skins?
I think the author is making a flawed argument. OS widgets and the use of Bootstrap across the web are very different.
OS widgets provide a user familiar with those elements hints and clues about how to use a program. A menu is a menu is a menu no matter the application. Bootstrap provides a very similar framework.
The problem is that we don't interact with public facing websites in the same way we interact with websites in the same way as desktop applications. The level of complexity tends to be very different and design is far more important for a website.
I can understand using Bootstrap for an admin interface; it provides that same recognizable framework for a user. For a public facing website, however, I think using Bootstrap is almost abhorrent. Whenever I see that very distinct black navigation bar across the top I have an urge to leave a website.
I understand that you can of course modify Bootstrap but to be honest I think the design choices are simply wrong for most sites. Bootstrap is great for web applications but for a blog... seriously?
Anyway, enough ranting. I actually really like Bootstrap and I'm using it currently but I know I would not use it for my own personal blog or public facing site.
I think it should be more important. That is not to say that it should not also be functional but within that very loose boundary there should be plenty of room for wide varieties of design.
I would disagree and say the author is making a very sound argument. The web is becoming more like an application and so it makes a lot of sense to have a standardized UI, for all the reasons you mention.
As a designer that works primarily with Rails devs on large-scale applications, I feel the pain of developers that need UI/UX/application designers and can't find/afford them (for personal projects, startups, etc).
Bootstrap fills that very interesting and apparent need in the web community. It feels like a coping mechanism for devs who can't find good design/frontend resources, so I don't have a personal need for it, but I hesitate to dismiss it entirely as I personally know many developers that wouldn't have anywhere to turn without a tool like Bootstrap.
That said, the author's attempt to push it forth as some sort of a framework for all web language is a bit much. The best UI and UX will always be at the service of what the specific website requires, not skinned out of a modular system.
But this knowledge/resource gap is a growing problem, and I don't see enough of the design community becoming aware of it and stepping up their game to make things like Bootstrap less necessary.
I believe bootstrap is the product of the design community stepping up their game. It's the part of the community that is lagging behind that is doing the whining here.
"What the Mac realized is that there are a set of things that all software has to do, so why shouldn't they all do them the same way?"
Indeed - but I'd venture that the standard behavior for most web elements is already well-established. Pretty much everyone knows how to use a dropdown or a modal. Bootstrap makes it easy to implement these, and that's really handy. You could do the same with jQuery plugins or CSS snippets, though it would take more time.
The bigger aspect of Bootstrap (IMO), and the one that really grabs people's attention, is its distinctive and consistent styling. That's what shouldn't be kept consistent across websites. (It's not like different styling will confuse users.)
Tangentially, overriding Bootstrap's styling can be a bit messy, especially if you aren't using Less/SASS; but it's necessary if you intend to design a site with its own look. That's what I'm dealing with now.
Most users don't even read the text you throw up in their faces, let alone notice the differences between different CSS frameworks. I've seen people hit F5 repeatedly in desktop applications and wonder why it wasn't refreshing. I think bootstrap is awesome, and is exactly what web development needs.
When people say they "use bootstrap", are people just using it unmodofied?
Throw a "custom.less" at the bottom of your styles.less, and you can make bootstrap completely indistinguishable from the vanilla style.
right now I am building a very large browser app on bootstrap, and you'd never know by looking. All I do is add styles to the "custom.less" and change what needs changing.
Programmers need to realize that customizing the look and feel of bootstrap is VERY VERY easy. It's perfectly safe to use for production.
All bootstrap did was make a vanilla, simple template so you don't have to redo all the boring html work over and over. There is nothing that constrains you to a layout or visual style.
If serious, I would love to show what I mean. I am not a programmer at all, I know nothing but photoshop, HTML, and CSS.
I would be happy to create a demo "web3.0 startup" landing page on bootstrap doing nothing but adding 1 less file and some graphics. And then I could write what I did on my blog or something, or just make a post here.
I agree that having bootstrap as a common standard is doing more good than harm. However bootstrap is tied much more to design esthetics than interfaces.
With that being said, website designs have defiantly shown trends over the years (as have operating system "themes"). So I think we'll see something else come along to replace the bootstrap eventually according to the "standards" of the next greatest design phase.
Note Bootstrap does make a solid case for using standard components such as LESS, CSS and jQuery.
I actually think it is a very good analogy. I too can remember that the Apple Human Interface Guidelines were a pretty radical idea at the time. The web will benefit from a standardized approach in exactly the same way.
There are lots of sites that look worse than the nice, clean bootstrap look. I like it when I'm using a bootstrap site. If the visual design of a site is an important feature of your site, then by all means go your own way. But if not, use the standard, and make it easy on your users.
Edit: Also, Dave is far from an Apple fanboy. He has a far more complicated relationship with Apple. But I'm thinking that was just a little personal dig, not based on much of anything.
There's a huge difference though. Desktop apps are usually functional tools. Where they are not (games, for example), the Human Interface Guidelines break down fast and consequently aren't followed.
The Web is very frequently about marketing materials, akin to pamphlets, rather than about simple functional tools. Additionally where you do have those functional tools, they aren't going to fit in with the desktop in the same way that native thick clients will.
Pardon me for not doing enough Googling yet, but...
Is there a "getting started with bootstrap" tutorial that anyone here recommends?
The Bootstrap page talks about all the features and how easy everything is, but I don't know where I should put the files, if I need jQuery already, etc.
Doing a show source on the bootstrap page is the biggest win. If you want a particular element on the page, find it in the source, and see what they did to make the page.
If anyone is interested in using Bootstrap along with Python as a backend, I recently published a template I've been using for web apps that integrates a Bootstrap-enabled frontend with an existing Flask template by imlucas (flask-tool), plus flask-auth authentication using SQL Alchemy. I find it useful for prototyping, and yet because it's based on Flask (very modular), it can be easily customized and scaled up:
In my case Bootstrap is very handy for prototyping and getting apps to a certain level of functionality before applying the final look. I always end up skinning it to a very specific product requirement, and in some cases I end up using only half of it. To me what makes a project look bootstrapy is the buttons and fonts, so if you can brand your own, that helps.
If you don't know much about design then Bootstrap is a wonderful way to make a decent looking website. Also, if you need to build a quick prototype then bootstrap is great. But, many web apps have unique functionality and requirements that are beyond Bootstrap.
It's a design framework from Twitter for web apps. It has the many different components that you'll probably need (buttons, menus, icons, CSS grid, modals, progress indicators, alerts, etc). Similar to how GUI apps gets all those things "for free".
Don't understand the furore personally. Bootstrap is a great framework and there is NOTHING to stop people tweaking and customising it to suit their design needs. It's a stylesheet for crying out loud, just edit it.
I think your final point is actually exactly what Dave is saying. His point is not that everything should look the same. He's saying that it is helpful for common items, such as menus, to be factored out into reusable bits like Bootstrap so that we aren constantly reinventing the wheel.
Take a look at Mac programs, for example. For the most part, they all have menus, windows, and title bars that look the same. But the important parts of many apps are unique. This makes things easier for both developers and users.
Imagine, as a developer, having to code the entire UI from scratch every time. That's how it used to be. It's not so nice for users when every app looks similar but it subtly different. It means every app has a steeper learning curve.
I think there is room for both uniformity and creativity to co-exist.
Actually it is good when things that do the same things in different apps look the same. How would you like it if every car you drove expressed some inner esthetic of a designer in the way the steering wheel or brakes worked? They don't and for good reason. The utility of the product matters much more than the ego of the designer. I know it's hard to understand this, I had to go through the same thing when I was doing my first Mac product. Eventually I came to accept it, and then it made a huge difference in the economics of the platform. Because the apps had factored the common aspects of their personalities, people could use more apps. This made the market much broader, and made more developers rich. That was also a good thing for developers. :-)
This is what change looks like. Every generation of programmers wants to hold it back. It's not fair that you've invested all this in learning how the current layer works, well now it's not current anymore. You have to adapt, or you end up obsolete.
Younger developers always say this to the old developers. It's a bit disturbing when you hear it for the first time, about you. :-)
> > An OS UI is mostly buttons and other widgets, window frames, and behavior. The actual applications are very different.
> So is Bootstrap.
While that's true, it's a bit disingenuous given the difference between web development and native client development.
Not using Bootstrap doesn't mean that you need to write your own functionality from scratch; for elements like buttons all Bootstrap gives you is some nice CSS styles and a little bit of syntactic sugar over using the web browser's built-in implementation. There's a bit more of an argument for the JS plugins (tooltips, modals, etc), but even then the alternative is grabbing one of the countless other JS plugins that do the exact same thing, not necessarily rolling your own.
Dave makes some good points. But the part that amused me the most is that his site uses a table based layout...he should use bootstrap's row/span system :)
It's difficult to believe this many people actually still listen to dave winer. He's done, old, and irrelevant. Sad to see people still listen to his drivel.
As a programmer, this is awesome because I can spend the rest of my time on the interesting programming stuff. Really, it appeals to:
1.) My complete lack of understanding of the intricacies of CSS and web page design.
2.) My mindset as an industrious but lazy programmer.
3.) It can be made to be generally portable.
I can see that down the line I might want to replace it with something else or hire a real designer to make me real buttons and web page styles, but it an excellent tool for the rough drafts of different ideas that I have. I can put things 'here' and 'there' on a web page quite easily, and that is really what I want/need.
It is much like a writer throwing down his ideas stream of consciousness style onto a piece of paper. He knows that he will have to edit eventually to make it consumable, but for now, he just needs to get the ideas down on paper while he has them.