Posted by Neil Young on March 05, 2015
After working on many responsive websites at Substance it was always in my mind to rebuild my website with a responsive first mentality. An important part of responsive web design is making sure that you build from mobile up. This will allow you to be able to set the minimum css rules and build on those as you hit each break point on your website.
Below I will talk through the tools I used to build my website making it cleaner, responsive and easy to maintain and deploy.
Whilst I utilised the popular JS framework Bootstrap to make a majority of my site responsive I also used SASS to build my CSS and Bourbon Neat to handle other parts of the site such as the display of code examples. I also use CSS3 to handle my column layout in the blog page which enabled me to give a Masonry layout which has proved so popular on the web. Whilst this does not support IE9, an appropriate fallback is provided!
I decided to use the popular CMS Craft made by Pixel and Tonic to store and deploy all of my content. The great thing about Craft is its responsive admin interface as well as its ridiculously powerful Twig templating system. It is also built on top of the Yii PHP framework so this allows me to create plugins and build any additional functionality on top of this. It also has a great Live Preview system that allows you to view your changes on the fly before saving your posts.
My workflow for the site has also been improved. I utilise Gulp to build out a distribution version of my website. This allows you to automate minifying of files and images and also lets me build a deployment of my website leaving out any files that I do not really want to appear on my webspace. Gulp also allows me make changes to my templates that I want available for the distribution and not my local copy.
When approaching the build of my website I decided that I wanted to store my website centrally in a Git repository. This allowed me to version control all my changes so that if anything goes wrong I can quickly revert to a previous version. I used the online service BitBucket to store my repository to achieve this and utilised the command line to commit my changes.
Some really good resources are Atlassian's website which features a great guide on how to work and play with Git and also this simple guide that takes you through quickly how to use Git without getting into trouble with your source code. I am a Git convert!!
To deploy my site I used the popular deployment system dploy. This allowed me to link my BitBucket account to it and when I push to my staging or production branches this automatically pushes up my code without me needing to manually FTP my files.