When you already have your design done, it’s time to move up a step and get it coded. Here’s a quick primer on how I do it, based on this particular website and using a couple of handy tools to help me make the most of the process.
- HTML5 Boilerplate (H5BP)
- Hammer for Mac
H5BP is the obvious choice for anyone who need a rock-solid starter for their project. There’s nothing I could write about it, which hasn’t been mentioned before, so I’ll just leave it here.
320andup is a very good front-end framework which gives you not only a lot of predefined styles for UI elements, but more importantly enables you to quickly define responsive breakpoints via CSS Media Queries. This is just a tip of the iceberg, but a tip I use the most.
Hammer for Mac deserves an entirely separate article, so I'll give you a bare minimum here. This app makes coding and managing front-end-only prototypes of any size so much more efficient than doing it the traditional way. It uses includes, automatic pathfinding and other clever things, while acting as a compiler, which outputs a ready-to-deploy prototype.
During this part of the process, I code a fully functional user experience which works with some dummy data (if there is a requirement for “data”). Ongoing testing and checks are also performed to see if the website/app behaves as outlined in the UX docs.
I’m not gonna lie and say I’m super-organised and all; nonetheless I prefer to have a weekly plan containing a list of things to do, and stick to it.
Once a prototype is ready for integration with a chosen platform, I have to slightly change the toolset, to focus on CMS-based development with instant server deployments. To do this easily, I use the following:
Git is well known, as source control is very important for any web-based project. I use it throughout the prototype development phase as well; you don’t really have to, but it’s way better to keep track of things this way.
To make automatic deployments possible, I use SpringLoops: a hosting service for private repos (SVN & Git) with an integrated project management back-end and automatic deployment mechanism, among many other features.
Once you configure and push your files, you can set up deployments upon every future push, tailored to your needs. To do this effectively, I have separated my project into two branches: master & beta. “Master” serves as a “stable version” of my website, whilst “beta” branch gives me the opportunity to experiment with anything I want.
Once I'm happy with the changes I’ve made to the site, I’m pushing my committed code to a given branch, then SpringLoops deploys all the changes to the server, overwriting any files I’ve modified along the way. Easy-peasy.
You don’t have to do anything on the server, except for the initial modification of database configs for your CMS (if it uses one), so a given branch works correctly from the start. I prefer to use a single database for both branches, since it’s easier to add, remove and review changes based on live content, not to mention managing content on both versions. Thanks to automatic deployments, I don’t have to be bothered with updating files, as Git/SpringLoops already knows which files to update.
At this point, I’m adding all the required features, which have been outlined during the planning & design phase. Incremental approach is something I greatly appreciate, as I always try to ship a so-called MVP (Minimum Viable Product), then build on top of it. It simplifies everything, and gives you an instant overview on the whole project, one feature at a time.
Thanks to automatic deployments, I don’t have to be bothered with updating files, as Git/SpringLoops already knows which files to update.
Even during development phase planning is very important for me. I’m not gonna lie and say I’m super-organised and all, nonetheless I prefer to have a weekly plan containing a list of things to do, and stick to it. If I’m not able to get one or two things on the list done, I move them aside; before the next week starts, I revise their importance and order of implementation.
This is just a short brief on how I work on projects these days. With a new Rock Hammer framework crafted by Andy Clarke already out and about, this might change a bit in the near future, as it bridges both H5BP, improved RWD baseline and a lot of goodness for Hammer. If you use Hammer and build responsive websites, you can’t miss out on it.
I’m sure some of you may have questions in regards to my development process, and if you do, don’t hesitate to ask me on Twitter or post your questions below.