Monday, November 4, 2013

Adventures in Responsive Design - with a minor in bootstrap

Twitter's bootstrap launch quite awhile back until a couple months back I hadn't had a need for it so I never bothered with it. My current position as a graphic designer/web designer at Handstands in Sandy Utah, manufactures of Refresh Your Car, Driven by Refresh, and Bahama & Co. automotive air fresheners, I was tasked with redesigning all four of our websites. The task was to bring them from their current 1999 design wrapped around 2002 code and build something great; simple right?!

In my last job I had worked with a team of developers, my job being Senior U/I designer. One of the developers kept pushing for responsive technology to be used and was a fan of Twitter's Bootstrap, ultimate he lost to decision makers that had no business making the decision and it was built around something else. However his enthusiasm stuck with me and so I proposed Bootstrap for my redesign. 

The sites are only hours now away from launch, ahead of the company going to the AAPEX tradeshow in Las Vegas for the 2013 show. As the deadline approach and the sites are now in the hands of other employees for some quality checking, I thought I would take a minute and post a short note. 

The verdict on Bootstrap: its a win! As a designer who codes and not a coder who designs, I would give Bootstrap a resounding thumbs up for being designer friendly. Obviously you need to be able to code a basic site from the ground up rather than drag and drop your elements like some services out there allow for. But having the media queries built in, all the classes for the different sizes all defined, a detailed outline of how stuff stacks and flows, really went a long way to going from dipping your toe in the pond to just saying 'screw it!' and plunging into the water head first. As I moved through the sites I became more comfortable and found new and better ways to implement the classes, which leads me to the only real problem I faced.

The only issue I had was that by the time I had completed the first two of the four sites using Bootstrap V2, V3 had been released which while similar, had changed up several things. The largest thing I had to incorporate into my design and thinking was the 'mobile first' aspect. With this way of thinking your site is actually built for col_xs first rather than for desktop viewing and then is essentially scaled up rather than down. More clearly stated, the 'xs' state of the site is the base size. I won't lie and say I built my sites in the best possible way and took full advantage of this 'mobile first' approach but I did learn a lot over the last two sites that I can use in the future. (Just as a side note, no I probably won't go back and convert the first to sites to V3, just cuz I don't get paid enough for that!)

I took this opportunity to also try some new design paths and explored some avenues in the same township as Microsoft's Metro design aesthetic. I love Metro and how well it works so this was great opportunity try my hand at it as well.

If you are interested you can view the sites I've built around Bootstrap at the following url's starting on November 5th, 2013.

Handstands Corporate Site: http://www.handstands.com


Driven by Refresh: http://drivenbyrefresh.com

Bahama & Co.: http://bahama-co.com

-Zombie Jake

Here are three screen captures as the main site, Refresh Your Car, responds to browser window size. (using version 2 of Bootstrap)
Full Screen View

Medium Screen View

Small Screen View