Code

Should I Convert My PSD to Bootstrap?

by April Greer

Bootstrap is seriously hot right now. It seems like every other proposal we put together includes a request for it.

But does that mean you should jump on the bandwagon? Is Bootstrap right for your website? And for some of you, what the heck is Bootstrap?

(No judging here…everyone’s got to learn somehow!)

Here’s a short definition along with our list of pros and cons straight from Reliable’s amazing development team.

What is Bootstrap anyway?

According to their website:

“Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web.”

Created in 2010 by a designer and developer duo at Twitter, Bootstrap is a free and open-source collection of tools for creating websites and web applications.

Essentially, Bootstrap was designed to make front-end web development faster and easier for folks of all skill levels.

But, that doesn’t mean it’s right for every scenario. Here are the pros and cons of using it, and at the end, a “TL;DR” wrap up of when it’s a yes or no.

Why PSD to Bootstrap (pros)

There are many good reasons to use Bootstrap. Here are a few of our favorites:

Awesome Browser and Device Support

The Twitter folks have done a ton of testing and support all of the major players of internet browsing, both on desktop and mobile.

So you know your website’s going to scale well as a responsive site.

Easy to Use Icons

Font icons are built into the CSS, so it’s easy to implement icons that look great on any device, including retina devices.

JQuery, too!

Bootstrap comes packaged with some great common jQuery effects like:

  • hovers
  • rollovers
  • sliders
  • accordions
  • etc.

This saves time implementing them with HTML / CSS.

Speedier Design and Development

If you follow the Bootstrap grid for your website, both the designing and coding process generally go a lot faster and easier.

So overall, if you like their design elements and you mostly stick to them, you can get a website up lightning-quick that’s guaranteed to work on every modern browser and device.

Not too shabby.

But what’s the catch?

Why NOT PSD to Bootstrap (cons)

There’s got to be some catch, right? Nothing’s ever the end-all, be-all for anything.

It’s true: as good as it is, Bootstrap might not always be the best solution for your website. Here’s why:

You Gotta Conform

If you don’t stick to the Bootstrap grid for your design, a lot of its pre-written HTML and CSS becomes useless.

You’re going to have to overwrite it and create your own styles anyway, and in many cases, pretty much start from scratch.

The same goes for design elements:

If you want your design to be unique (i.e. not what the Bootstrap template looks like), you’ll have to overwrite or add your own CSS anyway.

Your Website Might Look Like Everyone Else’s

Bootstrap was initially created to help designers and developers rapidly prototype websites and user interaction (UI).

So it wasn’t intended to be a “go to” framework for all uses.

While it’s great for quickly getting a website or US up, it’s not so great at creating a truly unique, custom experience.

There’s Lots of Extra Code

If you don’t need all the CSS / font icons / jQuery / fancy effects Bootstrap comes loaded with, it’s basically a bunch of extra files and code slowing down your site and server.

(And because they planned for so many uses, it’s almost impossible to not have extra, unused code lying around.)

Remember, even if it’s not being used, it’s still getting loaded on page views.

May Take Extra Development Time and Money

If you do design an unique layout, it’ll likely cost additional time and money for development because your development team has to tweak not only their own code, but also the pre-built ones.

And then they have to make sure they all work together as a happy family.

Maybe Unnecessary

If your developer really knows their stuff with responsive sites, they’ll stick to the most compliant guidelines anyway and you won’t have problems on any devices.

Besides, the really good ones are testing your site BEFORE they hand it over for cross-browser and cross-device compatibility.

So what’s the best decision for you?

In short, here’s your answer:

Yes, use Bootstrap: If you’re sticking to their grid, icons, and using many of their design elements, using Bootstrap can make the design/development process go a lot more quickly and smoothly.

No, don’t use Boostrap: If your design calls for something more unique that doesn’t fit into a “mold” or “template,” Bootstrap is probably not right for your project.

Curious if Bootstrap is Right for Your Project?

Send us an email with some screenshots of your design. We’d be happy to let you know.

close

Join over 2,000 designers, agencies & entrepeneurs
getting our weekly posts about design & conversions:

Thank you! We look forward
to seeing you around the blog :-)