Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pros/Cons of switching to twitter bootstrap [closed]

Tags:

I am working for an enterprise level SaaS company. The product is live and is about 6 months old in terms of development. Obvious we are still in our infancy as both a company and a product.

One of our project guys purchased a theme he found online. Its has some nice images in it, but other than that it's mostly garbage. The only other add-on being used for ui is jquery ui. I guess it would help to mention we use the Microsoft stack (C#, MVC3, Visual Studio). We also dabble in Html5 and Css3.

Recently I have been hearing from my dev friends how great bootstrap is, and how to not use it is the pinnacle of foolishness. I would like to take the idea of using bootstrap to others in the company, but I wanted to get feedback from the SO community first.

What are the pros/cons in switching? Would you recommend it? If yes how hard would you push for the switch?

like image 398
dan_vitch Avatar asked Jan 09 '13 01:01

dan_vitch


People also ask

What is Disadvantage of Bootstrap?

The Disadvantages of Bootstrap are: You would have to go the extra mile while creating a design otherwise all the websites will look the same if you don't do heavy customization. Styles are verbose and can lead to lots of output in HTML which is not needed.

Does Twitter use Bootstrap?

At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites.


2 Answers

It's a bit of a subjective question, but I've wondered myself so I will attempt an answer.

Assuming you can integrate it into your product (a separate discussion), Bootstrap will get you to a decent place quickly. I say "decent", because I don't consider it to be the end-all.

Pros

  • works in all modern browsers
  • "mobile first" approach in version 3
  • normalizes many little CSS annoyances
  • lightweight
  • customizable
  • encourages use of LESS CSS (http://lesscss.org)
  • gives consistency
  • helps aesthetically-challenged developers (although I believe every developer should have a working knowledge of UX)
  • many great-looking starter templates available (https://wrapbootstrap.com/, http://bootswatch.com/, etc.)
  • integrated with jQuery (some might consider this a negative)
  • comes with some jQuery plugins
  • some jQuery plugins now offer Bootstrap theming

Cons

  • Weak when it comes to complex data entry screens. Of course, screens should be made simple for users, but that doesn't mean a form might not be technically complex. Sometimes, users are well-trained and want complex forms so that they can rapidly do work.

  • jQuery plugins are limited. Certainly, you can integrate your own, find other 3rd party controls, etc. But out of the box, you are missing the heavy-hitters, like grids, tree views, drag and drop, etc.

  • Naming conventions and semantics are mediocre. Example: using the <i> tag for icons. Class names like "pull-right".

  • It's very customizable, but inevitably many sites start looking alike (just like Wordpress—consider how many blog sites look the same).

And finally, the great pro and con: it's someone else's code. You didn't write it; if you want it to work differently, you must discover how to do so, and how to deviate from the established code stream.

Case Studies

Here's how I've approached it on several recent projects. All are written using c#, ASP.Net MVC, HTML5, CSS 2/3 and jQuery (similar to the development stack in the question).

For reference, I'm a fairly solid in JavaScript and CSS. If no one on your development team is strong in CSS or JavaScript, starting from scratch will be a daunting task (and probably a waste of time).

Safety/Compliance Product

This product features a complex security model and is heavy on data entry/workflow. The business processes managed by the application are complex, so the chief goal of the UI is simplicity. I started with Bootstrap, but ripped it out within a day because I knew I would want complete control and I already had basic CSS patterns and a handful of JavaScript components of my own to build upon.

However, I kept LESS CSS. I also liked the color-coded buttons. Occasionally (and this is still true), I used Bootstrap as reference to see how a widely-used framework approaches a particular challenge.

I knew I had the luxury of being able to devote a great deal of time to this product, and I made the time commitment to improve my own framework and my own documentation. The deeper I got into the product, the more freedom/extensibility I needed to achieve the UI I wanted.

This product has been commercially demonstrated and sold, and the user interface has been very well-received. I made the right choice by spending the time on my own code.

Online Wizard

This was a simple, public-facing site which collects user information. I designed most of the solution, but I did not work on it full-time.

Initially, using Bootstrap went quite well. In fact, this answer touted Bootstrap as a success before the project was complete.

The team liked Bootstrap and had familiarity with it. They rapidly built a few mockups using a customized Bootstrap template. The resulting user experience was far above average and Bootstrap saved time. The team had no trouble finding documentation when needed.

Digging into the "someone else's code" in the Bootstrap template proved to be challenging for the team, but they managed to strip out the things that were unneeded and make it look acceptable.

Bootstrap took the project through the prototype phase. Once we began to fine-tune, it became much less useful. We never made a decision to "stop using Bootstrap", but by the time the project went live, we had found superior JavaScript components and customized the CSS beyond recognition.

Simple Public Website

This website is purely for marketing and needed to be built rapidly. My customer purchased a template they liked and we customized it in a matter of hours.

The template's code was reasonably easy to navigate. The only difficulty was that it was written for a prior version of Bootstrap.

Is it perfect? No. But it got the job done in a hurry and works well on most devices with very little effort on my part.

Documentation Websites

I have used Bootstrap—100% uncustomized—to reduce the time taken to build professional-looking documentation for online systems (e.g. API docs). For this purpose, I love it. It allows me to provide professional-looking content with zero energy wasted on style.

Conclusion

If you are short on time and/or experience, consider Bootstrap. If you are planning a major product, be prepared that you may need to "dig deep" into the code.

It is certainly possible to use Bootstrap to build a great-looking site. And it is equally possible to do so without. Use the right tool for the job. Investigating Bootstrap as a candidate tool at least once is probably worth the time. Even if you are experienced, you may pick up a few techniques.

Recently I have been hearing from my dev friends how great bootstrap is, and how to not use it is the pinnacle of foolishness.

Very few technical things (or the omission thereof) are "the pinnacle of foolishness". Take a weekend and try integrating into a part of your product. You will very quickly see its strengths/weaknesses and begin to determine its value.

like image 56
Tim M. Avatar answered Sep 29 '22 16:09

Tim M.


Don't view Bootstrap as a choice. Tim Medora made a lot of good points. But I would note that it's always possible to pull individual pieces of Bootstrap and to customize aspects of it to get something that looks fresh, either by digging into the code or using the homepage's customize page. Sure, if you keep the basic navbar and menus, you're going to get something that feels very conventional, and that may be a problem. But lots of people have used Bootstrap to make unique looks.

It's perfectly acceptable to use the grid system but design your own components. Or ditch the grid and use their components. It's not an either/or proposition. The only time it really gets tricky is when you decide you really want to change something, like the look and feel of a menu. The "right way" to do it isn't always readily apparent. You may have to dig pretty deep into the code, and it can be tough to make sure you're changes aren't breaking something else. But that's still better than not having an example to pull from at all.

I think the only mistake you can make is not taking a thorough look at what Bootstrap can provide you.

like image 43
acjay Avatar answered Sep 29 '22 17:09

acjay