Ractoon Redesign: Part 4 – Development

In order to prevent the chaos that developing a responsive site can introduce I had to re-examine my workflow. Leading up to coding the site I was able to slowly introduce some new items to the workflow that greatly helped during development.

Text Editor

From Dreamweaver to Notepad++, and now to Sublime Text 2. The power of multiple cursors, snippets, and the shortcuts available in Sublime Text 2 sold it for me. These helped a bunch in speeding up development overall.

Sublime Text 2 code goodness.

WordPress Framework

I’d bounced through several WordPress frameworks for a variety of sites, but always found myself having to overwrite behaviors here and there. Not too big of a deal since a framework saved time overall, but it adds up when doing it for multiple sites with different requirements.

Then there was Bones. Built on top of some solid libraries and tools it went the extra mile to set up useful snippets in a flexible fashion. Not only that, Eddie Machado built the framework using a mobile first approach that implemented LESS/Sass for styling.

LESS

When I first heard about LESS it seemed like a hassle to put the burden of generating CSS on JavaScript or a server method. Variables seemed cool, but not worth it to have to learn new syntax and integrate into a new process.

Boy was I wrong.

The first day using LESS blew me away with how much of an impact it had on my workflow. The ability to separate each resolution break point into its own CSS file, set variables, create mixins (especially for vendor prefixes), and have it all pull together into a minified CSS file was awesome.

Not only that, but using recently introduced native programs that to parse the code kept the load off the server and the end-user.

Mobile First

As mentioned in the design overview from this series a large part of the design considerations for the non-desktop resolutions were left for the development phase. Approaching the site from a mobile first viewpoint made it easy to create the basic structure, as well as the graphical elements that get added as the resolution increases.

Approaching from the bottom up made it slightly easier to see and make some of the optimizations for the site as well. This and more covered in the next, and last, part of this series.