9 ms·
Why Bootstrap might be very important
- tzaman 15y agoOh man, this post is so wrong. It's just like saying all people should look exactly the same in order to avoid confusion. Yes, bootstrap is a good thing. But it should be used only as a base for further improvements.
- rpeden 15y agoI 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.
- phatbyte 15y agoI wouldn't compare OS interfaces with websites. They are totally different things. An OS UI is mostly buttons and other widgets, window frames, and behavior. The actual applications are very different. Just to give you an example: Look Reeder app, Chrome, Things, iPhoto all for OSX. They are wrapped with the a common UI, but they are much different from each other. Sure they use lots of the same OS widgets, window frame,etc.. but they have their own design and way behaviors inside. With frameworks like twitter you can't get that, unless you hack the source. But that defeats the whole point of it in the first place.
- jonknee 15y ago> I wouldn't compare OS interfaces with websites. They are totally different things. Not for long. > An OS UI is mostly buttons and other widgets, window frames, and behavior. The actual applications are very different. So is Bootstrap.
- lazerwalker 15y ago> > 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.
- tzaman 15y agoYes, but the problem is that most of developers underestimate the point of branding. And there is a myriad of bootstrap-based websites now that look exactly the same.
- davewiner 15y agoActually 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. :-)
- cleanshakeapp 15y agoI 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.
- phatbyte 15y agoI 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.
- nollidge 15y ago> 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.
- jshen 15y agothey 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.
- downx3 15y agoOn 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.
- samstave 15y agoSorry for not following, can someone give me a quick synopsis of exactly what bootstrap is?
- raghus 15y agoFrom http://twitter.github.com/bootstrap/ http://twitter.github.com/bootstrap/ : "Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions." AKA: Allowing Programmers to take their website designs from nuclear-waste-bad to looks-decent-but-so-much-like-that-other-bootstraped-site-good
- jonknee 15y agoIt'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".
- whileonebegin 15y agoGood 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?
- danso 15y agoDave 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 :)
- davewiner 15y agoIt'll work that way in the next rev of the site.
- deleted 15y ago[deleted]
- wmf 15y agoIsn't Bootstrap for apps?
- deleted 15y ago[deleted]
- justjimmy 15y agoBootstrap 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/ 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'.
- dustingetz 15y ago> 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.
- michaelbuckbee 15y ago
- davewiner 15y agoIt'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. :-)
- phzbOx 15y agoIronically, that page would look so much better if bootstrap was used!
- davewiner 15y agoIn the next incarnation of the site, it will.
- guelo 15y agoApple fans can be really unimaginative with their analogies. "I like something. It must be just like something Apple did!"
- cschmidt 15y agoI 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.
- einhverfr 15y agoThere'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.
- damptrousers 15y agoIt'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.
- davewiner 15y agoIf you're trying to be as rude as Rush Limbaugh, you're getting close.
- jasonlynes 15y agoi'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. and it doesn't look anything like bootstrap.
- mattwdelong 15y agoFor curiosity sake, could you post a screenshot as an example of "not looking anything like bootstrap". Thanks!
- blueprint 15y agoWe use some modified Bootstrap CSS at Blueprint (ss: http://d.pr/pqCT 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.
- woodall 15y agoThis 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.
- vinothgopi 15y agoWe built the site for http://www.semantics3.com/ 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.
- 15y ago
- wildmXranat 15y agoYou 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.
- diminish 15y agofew months ago designers' increasing role was the focus, and now is good design a commodity?
- bluesnowmonkey 15y agoDesigners 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.
- einhverfr 15y agoI 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.
- PetrolMan 15y agoI 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.
- austingulati 15y ago> The level of complexity tends to be very different and design is far more important for a website. Design _is_ more important for a website but that doesn't mean that design _should_ be more important for a website.
- PetrolMan 15y agoI 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.
- matt2000 15y agoI 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.
- creamyhorror 15y ago"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.
- pacomerh 15y agoIn 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.
- jaimzob 15y agoStandardized 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.
- camerondaigle 15y agoAs 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.
- brianprogrammer 15y agoI 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.
- AtTheLast 15y agoIf 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.
- joejohnson 15y agoOr, even if you do know a bit about design, but don't want to waste a bunch of time reinventing the wheel.
- dreamdu5t 15y agoWithout a good designer you won't know if your integration of bootstrap is beneficial. Like programming, UI is about problem-solving. You can only commoditize design to a certain extent. You still need a design phase. Period. The interface is the product. It's not something you tack on at the end.
- ohyes 15y agoI 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.
- blvr 15y agoWould you need to replace Bootstrap? 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.
- mkramlich 15y agoWe 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".
- foz 15y agoThis 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.
- josephcooney 15y agoMost 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.
- deleted 15y ago[deleted]
- mdonahoe 15y agoPardon 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.
- cschmidt 15y agoDoing 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. jQuery isn't used at all.
- eric_bullington 15y agoIf 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: https://github.com/esbullington/flask-bootstrap https://github.com/esbullington/flask-bootstrap It's barebones right now but I'll be making improvements and would welcome pull requests (there's a todo list).
- ux_designer 15y agoWhen 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.
- tworats 15y agoSome details (perhaps a writeup) on this would be appreciated, I'd love to learn more.
- ux_designer 15y agoIf 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.
- coderdude 15y agoMany 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. You can try: - Bootswatch, free color schemes: http://bootswatch.com/ http://bootswatch.com/ - Lavish, a way to apply colors extracted from images: http://lavishbootstrap.com/ http://lavishbootstrap.com/ - WrapBootstrap, a marketplace for premium Bootstrap themes: http://wrapbootstrap.com/ http://wrapbootstrap.com/ [shameless plug] Check out Built With Bootstrap for great examples of sites that are thinking outside the default styles: http://builtwithbootstrap.com/ http://builtwithbootstrap.com/
- richardw 15y agoTo all those arguing for custom design: 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. [1] http://en.wikipedia.org/wiki/Points-of-parity/points-of-difference http://en.wikipedia.org/wiki/Points-of-parity/points-of-diff...
- mattmanser 15y agoYour 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.
- ianleckey 15y agoDon'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.