top | item 3675783

Great, Another Bootstrap Site

213 points| alecperkins | 14 years ago |drawar.com | reply

109 comments

order
[+] carsongross|14 years ago|reply
Bootstrap gives us a sane, standard look and feel for the web, which is a good thing. The design community generally doesn't like the idea of standards because they are a creative community, and there is no more damning phrase in the creative communities of the modern era than "unoriginal". But unoriginal is exactly what most people want with most of their web applications: they want to know how to work the things instinctively and not learn another UI for this or that task.

As a small example: with bootstrap, buttons look the same, so users instinctively recognize them without additional mental effort. Developers can focus on developing applications that are functional and usable, rather than tweaking CSS to make things "look right".

I think bootstrap, and the non-coercive standardization of web applications it is fostering, is one of the most important developments of 2011-2012.

I do think means there will be less need for straight-up aesthetic designers, with UX and information architecture becoming more important.

[+] kingsidharth|14 years ago|reply
> Bootstrap gives us a sane, standard look and feel for the web, which is a good thing.

NO. It is NOT a good thing. When it comes to visual design, things are supposed to look different. Twitter is meant to look different than Facebook and facebook should not look like Amazon. That's how you create mind-space . Bootstrap kills that - they all just look the same.

I can't remember name of one site that was made with Bootstrap. because there is nothing special,visually, to remember. No visual cue.

> Developers can focus on developing applications that are functional and usable, rather than tweaking CSS to make things "look right".

That's cool if you are building for just developers. But when it comes to non-devs, you don't want to confuse them, visually, with some other website. Remember, for many Facebook is a that "blue" site. With so many people taking bootstrap as it is, it's going to be... un-special.

I remember my friend discovering facebook themed Tumblr theme. People actually confused it with facebook and made comments like

"Why can't I update my status?"

"Who the hell are you and what are you doing on my fb?"

..

Also, the author is not saying Bootstrap is bad. In fact, it's good that you can focus on dev and have good defaults on CSS and design. But leaving it there is BAD. (read above, why). Take it forward.

Quick Fix: Don't use the Bootstrap top bar. Seriously, that's one major shift.

- Another Pissed at Bootstrap websites Designer

[+] typicalrunt|14 years ago|reply
+1 to this.

When I talk to other designers and inevitably get into arguments with them about standards, I try to get them to see it from a consumer's point of view for non-IT products.

There are a lot of non-IT products that have the same design: doors to houses, door knobs, rear-view mirrors, tires. The list goes on.

While it's fun to see a new design to a Web site/app, even as a techie I sometimes struggle with using the sexiest websites simply because the designer has changed what I perceive to be a standard usability feature. I can't imagine what Joe 6-Pack thinks when he encounters these sites.

[+] nirvdrum|14 years ago|reply
I wholeheartedly agree. This is one of my major gripes with web apps replacing native ones. I never have to figure out what's a button or a tab on a native app. It seems these two concepts get reinvented ad nauseum with web design, such that I have a hard time figuring out what to interact with or how on many sites. This tends to end up in a cyclic argument of "well, if it were well-designed, it'd be obvious." But, if it looked the same, it'd be even more obvious.

The other half to this is I care more about content & usability than aesthetics. Bootstrap lets me produce and consume content more readily. So, I'm a fan.

[+] jaimzob|14 years ago|reply
Whenever I see "user's want standardized UIs" what I hear is "it's easier for me to _program_ standardized UIs". Users want UIs that are in-tune with their goals and mental models and if you deliver that, it won't matter what size and shape your buttons are.

Snapping widgets together like lego bricks and declaring the result to be a "good" interface because it adheres to "standards" is sometimes true, but not nearly as often as you would think, and in my experience leads to interfaces that map closely to the underlying system, but not at all to what the user actually wants to do.

It's good that a non-designer can use bootstrap to create a decent looking site, heaven knows the world is not over-burdened with good-looking websites, but neither we nor the "users" want every web page, or every web app, to look the same.

[+] harlanlewis|14 years ago|reply
Strong points. But from a usability perspective, Bootstrap would be much more significant if it were opinionated about interactions instead of just gradients, whitespace, and CTA placement.

The examples list of beautiful, usable, and identifiable products and services is long. People learn new patterns quickly - you just have to do a decent job designing the pattern.

Bootstrap's "non-coercive standards" are really just CSS shorthand for an approximation of Apple's successful, so-simple-it-feels-generic, already-easy-to-copy example. Anyone who never invested in a brand or consistent visual language before (and therefore simply wouldn't have a brand or consistent visual language) now just piggybacks Apple's aesthetic. Bootstrap is a small step further on the already well-worth path.

[+] GB_001|14 years ago|reply
As a web programmer I understand where you're coming from, but as a UX designer I whole heartedly disagree.

Bootstrap is a wonderful tool for getting your app out there without having to do much on a design level. But I believe that websites with a distinct look and easy UI that reflects their functionality is way better than a monotonous string of websites with no distinction between their design.

For instance Twitter's design is beautifully streamlined for it's functionality, which is to show a constant flow of micro-information. As opposed to HN's listed threads which show link based data. These designs even though they differ seem "natural" based on their functionality and require little to no mental effort.

Good UX does not require mental effort.

Furthermore, a unique look is how others identify sites. It's Twitter's UI looked exactly like Facebook's, more would have trouble distinguishing the two. This would hurt the site's capability to make an impression in the user's memory.

With no distinction between websites, how will the casual user remember you?

[+] Nat0|14 years ago|reply
Spot on. However, I would add that much of the push for 'original' designs come from many other sources beside the designer. I can not tell you how many times I have had clients request all manner of non-standard layouts and other customization to make the website look cool/unique/fresh...
[+] billpatrianakos|14 years ago|reply
It doesn't give us a same standard, it gives us Twitter's version of a standard. You're points are almost totally right and certainly reasonable but the big problem is that a lot of sites are ending up just looking Bootstrap clones of each other with different names and logos. Standards are great and I'm all for them but for the love of god, please at least make it your own. Making it your own does not mean you have to deviate from any standard and that's a big part of what the author was getting at.
[+] lovskogen|14 years ago|reply
"But unoriginal is exactly what most people want with most of their web applications"

You're kidding, right? What about emotional design, making something that connects the user to your app?

[+] bradleyland|14 years ago|reply
Effort is a finite resource. If I am a team of one, and I need to roll a website for my new widget, I have two choices: I can route effort away from further development/refinement of my widget to "design" a proper website, or I can use Bootstrap and conserve that effort to spend on my core product, widgets.

That's a tough decision. I'm not sure there's a "correct" answer. I think it depends on what you value, and what you believe your target user will value: a better product, or a better website.

[+] smokinn|14 years ago|reply
This.

If you're actually building a product to sell people it behooves you to put some effort into deviating from the base styles.

On the other hand if you're like me and use it every so often for a one-off project that you have no plan on monetizing then why not? I don't particularly care about the UI look and feel, I just don't want it to look awful which it would if I were to design it myself. Bootstrap gives me a decent looking sane UI with guidelines for me to follow to keep it all sane. Other than that, I just want to work on functionality.

[+] cleanshakeapp|14 years ago|reply
I agree. I think you can use bootstrap as a starting point then move on from there. It just helps things look nice while you allocate resources elsewhere for the time being.
[+] kisielk|14 years ago|reply
From the perspective of someone who frequents Hacker News then of course it's going to seem like there's a ton of sites using the nearly-stock bootstrap look. That's because people like us actually look at sites like "Built With Bootstrap" and check out people's demos of bootstrap sites. Back in the real world the average internet user will likely never notice.

Most sites in the early stages will have few visitors and due to variety of interests it's unlikely that a single person will be using a large enough number of these sites to start realizing this problem.

As the successful sites grow larger and move beyond the early stages it's likely the developers will have access to more resources to improve their site theme over time and move away from the bootstrap look.

[+] avolcano|14 years ago|reply
The sad part of this is that it's so easy to make your Bootstrap site look a little different, even for non-designers.

I'm sure the idea here is "oh, I'm just making a quick MVP, or even a pre-MVP, or a weekend project, and Bootstrap makes the design super easy!" But if you're not going to change it at all, you might as well stick with browser defaults and not include a stylesheet at all - at this point, uncustomized Boostrap looks just as tacky as a site that was black serif text on a white background with blue and purple links.

It's easy to fix, and it's fun. Just take an hour to experiment - your site deserves it. Change up the fonts! Get a nice header font, especially if you're using a big "Hero" badge. Look at the Google Web Font gallery for some inspiration. Get some unique colors - different shades for different elements, build a nice visual hierarchy.

Drop the top nav bar, unless you're doing docs or something that could actually use it. It looks a bit tacky, especially "position: fixed", when it's unnecessary.

Now, on the other hand, you don't have to change everything. Leave the button gradients as they are, the grid system isn't exactly going to stick out, etc. You just need the overall look of your site to be unique - individual elements don't matter as much. http://www.savng.com/ is built with Bootstrap, but you couldn't tell it unless you really were looking (and thus noticed the "Add a deal" button and the pill navs at the bottom).

Just be a bit different. It's easy, and rewarding.

[+] mgrovr|14 years ago|reply
I think the point that an uncustomized Bootstrap looking just as tacky as a plain html site is only true for people who hang around on HN or similar sites and so see many different sites using Bootstrap. For your average Joe on the internet, a Bootstrap-ped site will look much more professional and less tacky than a plain html site. So depending on your target audience, there might not be much motivation to spend any time customizing your site.
[+] chlee|14 years ago|reply
Hey! I am the owner/creator/customer support/janitor/one-man-wrecking-crew of Savng.com.

I am pleasantly surprised to see it mentioned as a good example of Bootstrap based sites. On a unrelated note, I am not sure how you found it since I have really advertised it yet :o

To echo the same sentiment as avolcano, Bootstrap can be easily modified both via Less or CSS. And this is coming from someone who has rudimentary knowledge in both. A little change here and there can go a long way in differentiating your site from all the other bootstrap clone.

Here are a few low hanging fruits:

1) Colors -- Change the color of the top nav bar, links, text, and etc, as color has a tremendous affect on the look and feel of your site.

2) Font - Changing fonts is easy with Google Web Fonts and font hosting services like Typekit. Like color, it also affects the look and your feel of your site.

3) Laytout - Experiment and try different layouts, 1 column, 2 column, 3 columns and etc. Look at various sites within the same niche (and outside of your niche) for inspirations.

Here are some great resources that I've used in making my site:

1. Google Web Fonts

2. Typekit

3. Site Inspire

4. Siiimple

5. Grid Based

6. Minimal Exhibit

7. Design seeds enclosed (this is a godsend if you don't have a back ground in color theory like me)

8. Little Big Details

[+] parkov|14 years ago|reply
It's easy to tweak the Bootstrap defaults, but trying to keep things as cohesive as the defaults can lead you down the rabbit hole of dependencies. BS 2.0 is a big step up, but I've found that playing only with the values in variables.less doesn't cut it quite yet.

I've tried to hit a sweet spot with Bootswatch (http://bootswatch.com), keeping it a quick-start solution for hackers while adding variety to the defaults.

[+] pbreit|14 years ago|reply
> it's so easy to make your Bootstrap site look a little different

I think the problem is that it's not very easy. And that's why you see so little variation (combined with a certain amount of laziness, of course). Editing the CSS directly is pretty much impossible for mere mortals. And of you're not familiar with LESS and compiling styles, you're going to have trouble.

[+] ExpiredLink|14 years ago|reply
> The sad part of this is that it's so easy to make your Bootstrap site look a little different, even for non-designers.

You have to redo your changes for each new Bootstrap version, right? AFAIK, Bootstrap is not themeable and you better extend it than change it.

[+] va_coder|14 years ago|reply
I think this post is ridiculous. You know how many great law firms have website themes from the 90s? How many great restaurants have that crappy flash intro?

Lots of them and I'm still going to use their service regardless.

"How depressing is it to go through this gallery of sites built with Bootstrap?"

How depressing is it to go to some site that's been hyped up, see a great design, and then see no compelling product behind it?

[+] FreshCode|14 years ago|reply
We would both prefer to use a great product with a crappy website than a crappy product with a great website, but I think the standard has shifted from, "Do you have a website?" up to "How does your website design look compared to your competitor?"

And I think that's a good thing.

[+] billpatrianakos|14 years ago|reply
You may not be swayed by the design of sites but the majority of people are. A big mistake people make when approaching design is thinking their attitudes apply to "most people". It takes training and experience to really get a feel for how "the average person" will react to something.
[+] danneu|14 years ago|reply
I think this entire assertion has the wrong idea.

This idea would be valid if the universal alternative to using Bootstrap is some impressive design stitched together by your in-house crack team of designers. But I'm sure the alternative to Bootstrap for most people is for the developer to use his own html/css know-how to construct something passable as he goes.

So, for most people, I'd wager that Bootstrap is mostly just a time optimization that saves the developer from spending time on a design that would have been far less impressive anyways, that saves the developer from burning time that could be allocated to the actual product.

I find it silly to condemn people for how they allocate their time.

Even the whole pro-Bootstrap chorus of "But it's just a standard interface for the web" is silly. Really? I have yet to even stumble across a Bootstrap website in the wild that wasn't linked to from a Show HN. Are these monthly Bootstrap rants conflating the HN echo chamber with the internet? Weekend solo-dev projects with funded business websites? I guarantee it.

The likening of Bootstrap to Wordpress' default theme is telling. Does anyone here really encounter WP's default theme in the wild? I sure don't. Maybe the majority of WP installs still have the default theme, but it's in the same way that the majority of WAMP installs still have the default "It Works!" Apache screen on localhost.

I just don't get the point. If Bootstrap really was some prevalent interface that most of the web started using, then you guys that do have the crack team of designers at your disposal should be excited! Here's your chance to stand out! But I'm using Bootstrap because it's literally faster than any other alternative I can think of until I have someone separately working on a UI branch that I can merge into my code.

If I took your advice and stopped using Bootstrap because you assume "I don't care enough" to make a custom design, I'd end up with something that will probably look worse and guaranteed to take much longer to create giving me more bottlenecks as I get hamstringed by aesthetics when I could instead be funneling my efforts into business logic and not into something that's rather trivial to switch out when my app is deployed and my time frees up to address less-critical concerns.

[+] aaronpk|14 years ago|reply
OTOH, you end up with stuff like this without it ;)

http://i.imgur.com/S5JPD.png

[+] rplnt|14 years ago|reply
I actually tried to resize the tab to see something similar but was rather surprised by a responsive design. What browser do you use?
[+] mckoss|14 years ago|reply
Why value uniqueness over simplicity, cleanliness, and learn-ability? When the Mac came out, the primary selling point of the interface was that every application could share a common way of doing things and present it's capabilities to the user.

Bootstrap provides some of this for web applications. I'm not trying to keep my users from being "bored"; I'm trying to give them a simple approachable application where they can get stuff done. A gratuitous re-design serves only the ego of the designer.

[+] quellhorst|14 years ago|reply
Great, another person bitching about seeing bootstrap sites...

I love the look of bootstrap sites. Having identical looking sites beats the shitty design most of these sites would have had before bootstrap.

[+] vinothgopi|14 years ago|reply
It comes down to the same issues that I have with templates of tumblr,posterous and wp. They all look the same. I think bootstrap should be used as a way to jumpstart the design process and not built a WHOLE website using the components bootstrap provides.

When I see that grey-black gradient nav bar i go "Haizz yet another bootstrap site."

[+] helipad|14 years ago|reply
I now use Twitter Bootstrap as the starting point for all my projects, but not in the way many folk are.

The LESS files are a goldmine for me. Pre-made mixins, cross-browser support, responsive media queries, color functions

For me the LESS is being underplayed while the "default" style CSS is being overused.

[+] lr|14 years ago|reply
It appears people who are writing about Bootstrap are not actually paying attention to its development... As of 2.0, you can customize the colors, and that helps a lot:

http://twitter.github.com/bootstrap/download.html

Also, it now has responsive design built in, and I am not going to spend my time building that from scratch; I'm going to use a framework!

[+] jonknee|14 years ago|reply
I've enjoyed Bootstrap for building internal web apps. It's hard to justify a big design budget for something used by a handful of people internally (unless design is your business), so just stock Bootstrap is a huge step up. It's compatible in the browser you use, it's responsive, it's easy to put anything where it needs to go. That really saves time, especially for projects that have a lot of different screens and a ton of "just add this here" requests.
[+] danso|14 years ago|reply
The OP links to this site: http://builtwithbootstrap.com/

There are definitely a few sites that look barely-out-of-the-cookie-cutter...however, there are others that are only vaguely bootstrappish at a glance.

What do people consider the minimum amount of alterations before a bootstrap site looks unique enough? Besides color I mean....font-spacing and sizes? Going from a 12-col grid to 15/16/20-grid?

[+] masonhensley|14 years ago|reply
I don't think anyone would suggest changing the grid system or standard font sizes as a way to differentiate your bootstrapped site. I wouldn't mess with the scaffolding type stuff unless you really need to create a specific desired effect. Off the top of my head, the quickest ways to make a bstrap site look unique and keep the haters happy would be:

1- Navbar, the dark gray will not fly, tweak the height of it too or remove it all together.

2- Background of your container, give it some life. Here is a good place to start- http://subtlepatterns.com/

3- Special font for your branding/ H tags, boom (http://www.google.com/webfonts)

4- change up the button colors a tad, if only one, the blue one, it seems to be everywhere.

The above items will take you 15-30 min depending on how many combinations you try out & will take you pretty far.

[+] shykes|14 years ago|reply
Talk about a first-world problem! I'm sure the original Ford T was frowned upon by purists for their lack of originality.

For every spoiled designer turning away in disgust from a cookie-cutter bootstrap website, there are 50 web apps being created which would not exist without bootstrap !

For example: at dotCloud our ratio of backend/frontend engineers is 10/1. We've got people (me included) who can automate a cluster of hundreds of machines but are basically UI-impaired. Bootstrap has multiplied our individual velocity by at least 10: now our core platform engineers take the time to write web tools because it's achievable in a couple hours.

And when we finally grew our frontend team there was a point of reference for building a style guide, reusable page elements, etc.

[+] nirvdrum|14 years ago|reply
I think the author hits on a good point that he may just be too polite to really call out. A lot of developers get annoyed when designers use some framework to make building web pages simpler and then say they can build sites. This just seems to be the opposite reaction: devs using design frameworks to bang out their sites. Both should be lauded for making it simpler for people to get basic work done. Neither should be confused with what a serious professional can accomplish. When that happens, things get really weird. I personally believe the rash of web designers calling themselves Rails devs really screwed with the Boston area Ruby/Rails market.
[+] jamiequint|14 years ago|reply
'Normals' (http://cdixon.org/2010/01/22/techies-and-normals/) don't give a shit. Unless your audience is purely people deep into technology that look at and analyze sites all day the average person isn't going to know the difference between the site you spent a month designing to be pixel perfect and your average bootstrap site. I tend to find that focusing on the user interactions is way more valuable than focusing on the 'design' (meaning how it looks), bootstrap makes the 'design' part easy, freeing me up to spend my time on other things. This is generally a big win.
[+] latchkey|14 years ago|reply
I think the real issue is that people are using all of bootstrap to create their weekend hack site and not bothering to even try to be creative with it.

For my site, https://www.voo.st/ we just used a bunch of elements from bootstrap and also parts of the core. We integrated that into an existing theme that we bought for cheap.

For example, the buttons and the form elements are great, we took the header bar and made it a footer. I really think that with some creative thought, bootstrap is really great and much needed in the community.

[+] goldvine|14 years ago|reply
You need to step out of the mindset of a designer and realize the average person doesn't know or care. If you are building an app/site for web people, then yea...Bootstrap is probably a bad choice because people will know instantly effort wasn't put into the front end and they will judge, consciously or subconsciously (customizing the variables doesn't fix this, people still know). But your article, and the other commenters, make the assumption that apps are only built for web people. I use Bootstrap, raw, as a starting point for MVPs I build for small businesses. It saves me a week's worth of frontend development (that will be redesigned anyways within a few months), and it lets me have an appealing, not mind blowing, look on the site. It takes my mind off of design, and focuses it on biz dev, marketing, and development to get the MVP off the ground. My audience, and millions of others could care less if Bootstrap is used, and would likely prefer it to an ugly developer-designed mess. My point is: Don't denounce an incredible framework that solves a key problem, just because you and several others misinterpret its purpose. And by the way, it is NOT the equivalent of Wordpress Themes, and it was likely never intended to be.