Skip to main content
November 16, 2012

Responsive Web Design: To (Twitter) Bootstrap or not to Bootstrap

Responsive Web Design (RWD) is an emerging style of web design that dynamically changes the look of a page depending on the width of the browser. This is accomplished with some crafty CSS (mainly media queries) and a hint of Javascript. The Goal of RWD is to make content more viewable on smaller screens. Many large corporate sites are starting to use RWD. In the last few weeks, Starbucks (starbucks.com) and Microsoft (Microsoft.com) have launched new responsive sites.

Currently, there are 3 main screen sizes: Mobile/Vertical Tablet (I usually merge these two together), Horizontal Tablet and Desktop.

Large display (optional)

Width 1200px and up

Standard Desktop
(Default)

Width 980px and up

Portrait tablets

Width 768px and above

Large Screen Phones to tablets
(Most new phones and small screens in the landscape position)

Width 767px and below

Phones with small screens
(iPhone 4, older Android phones)

Width 480px and below

 

There are many approaches to making your site responsive. You can code it by hand or use a premade library. There are some advantages and disadvantages to both:

Responsive Frameworks

Responsive From Scratch

 +Premade Grid System  +Custom everything/More flexibility
  +Javascript/CSS Goodies such as:

  • Lightboxes/Popus
  • Custom Menus
  • Shiny buttons
  • Loading bars
 +Less overhead
 +Community Support  +No new version or updates to install
 -Lots of overhead  -A lot of custom work
 -A lot of swearing  -A lot of swearing

 

There are hundreds of frameworks currently available. It’s important to do your homework and choose the one that will work the best for you.

Responsive Frameworks:
                TwitterBootstrap (by twitter.com)
                HTML5 Boiler Plate
                Foundation (by zurb.com)
                Skeleton
                [Wordpress Starter Theme] TwentyTwelve
                -and there are many, many more.

In my opinion, using responsive frameworks should be reserved for building brand new sites from scratch. Integrating the twitter bootstrap (or any other framework) into an existing design will likely require a total rework of the HTML.