SmartSpider - Web Design on Multiple devices

When I was approached by this organization to help redesign their website, they had two requests: responsive, and local. Go!

Ok, maybe there was a little bit more to say, like that they were using Twitter Bootstrap (did I know how to use that?) and that they would take care of implementation. OK!

Despite the clients' nerves on all fronts, like putting their design in the hands of a stranger, budget, and the ages-old: "would I just disappear?" They came out on top.

"Thank you for making us look like the Professionals we are." 

When approaching this project as a design, I knew that constraints on delivery time and on budget would prevent a long, drawn-out design approval process. It can be chance-y to just throw something online in code, with the perception being that it sacrifices a design that can be easily changed and produced in multiple versions. However, that risk would be minimized by my departure from their original design being so vast. I set up a LESS workflow with Bower and Gulp task runners, utilizing the command line to do a lot of the dirty work while I focused on structure of code, web design, and putting a few more LESS techniques under my belt. The reaction to posting my mood board for this project was "Great, send it live." Woh! that never happens..

The great thing about Twitter Bootstrap is that clients that need responsive on a budget can really get it. Starting with a copy/pasted template and focusing all paid time on design and adding layer after layer of revision (that the designer mandates, solely, even,) there doesn't need to be a ton of additional time allotted to re-invent the wheel on UI elements. You design in code, with no need to migrate to code later at an additional cost. Furthermore, any developer can take over another's code and more or less "read" it without having to be familiar with that original developer's code. A common misconception (that is sometimes true) is that original code is always better, but this isn't always true for the client, nor do they ever actually notice.

SmartSpider got a great design that they love, and I got a great project to really dig into some task runner techniques. I also got to add a graphic design component - the mountain/balloon graphic at the top of each page. This is where I knocked the "local" requirement out of the park, where the colors had been solid but not quite enough. This is not the first project where I've taken on extensive graphic design - there's also writer Kelly Koepke's site.

As a part of my compensation, they offered me a year of free membership. My web designer profile is here!

Project Facts

  • Twitter Bootstrap 2.3.2
  • FontAwesome & Google Fonts
  • Responsive Front-End
  • Gulp, LESS & GitHub
  • Browserfy, CSSMin, GIT Repository
  • Design Implementation by
  • Graphic Design by Caroline for Petroglyph Creative.