Adventures in responsive design part 5 - let's rebuild it all, again.

Posted on 30th June 2014

So, what's new? I'll start with the technical side of things (I find it far more difficult to talk about and validate design decisions) because there's a lot of new techniques and methodoligies available now, and I'm a sucker for wiping the slate clean and starting again. Besides, 2 years in web-years is akin to the time taken for the eventual heat-death of the universe.

On the HTML side of things I'm using BEM syntax which I'd previously employed building CVG - it's a really robust way of logically separating and modularising your structure (not that I need it much on this site), and it makes building stuff very quick; write your S/CSS once and then just add classes to your HTML - no more repeating chunks of style for similar chunks of HTML. CSS Wizardry's excellent grid system is a fundamental part of the build - it's robust and does everything you might need from a grid system. Highly recommended.

S/CSS is a given now, and I'm compiling it (along with my .js) using an app called Prepros - I'm not a command line wizard, and grunt / gulp were just a step too far, and another thing to learn, given everything else going on. I've moved on from LESS, which the last version of this site used - Compass and SASS can do just those few more useful things that push it over the edge in usefulness - I've spent 2 years building CVG with it, so it's burned in to my eyelids at this point.

Given that we're in the age of responsive-ness, I've also started using the srcset and sizes attributes on <img> tags, and the picturefill polyfill - it's horribly confusing to begin with, but Chris Coyer's article on CSS-Tricks was very helpful in clarifying it all. I also wrote a picture() extension for the CMS I'm using - Kirby - along with a picture_grid() extension for spitting out responsive grids of images. It's all very useful.

All of this is version controlled using Git via Bitbucket and SourceTree (I'm not 100% comfortable with git on the command line just yet), though at the time of writing I'm not entirely sure how I'm going to go about deploying it all - I may just bite the bullet, pay the £8 a month and go back to using Beanstalk, which does automatic, multiple server deploys on top of repository hosting.

Web 'design', eh? Can't beat it for obsfucating even someone who has been doing it for ~15 years...

Design wise, I wanted something that was a bit fancy on mobile devices, but didn't sacrifice anything at desktop level - regardless of the final outcome, I tend to begin with an idea for larger screens first - that meant big graphics (since it is a portfolio site, mostly) and nice text, at least for headings (I find body copy replacement usually hard to read over system fonts) - Typekit to the rescue. The blurred heading graphics are something to keep the monotony of the simple design to a minimum, without distracting from the content - hopefully they do that. I wanted to generate those images automatically, but PHP's image functions when it comes to blurring are weak!

Also, given Kirby's excellent templating system (or lack thereof, actually) I'm also able to do custom CSS per page very easily - just dump a .css file in the folder (Kirby is a file/folder based CMS) with my article / portfolio item and voila. Should lead to some nice things (if I get off my arse and do it!).

If you find any bugs or typos (if anyone but my Mum is reading this), or you want to be brutally honest about what you hate about the design, leave them in the comments below, or send me an email. If you want to hire me, come stalk me on Twitter first, then get in touch.

Regular scheduling of cat gifs and YouTube crap will continue in 5... 4... 3... 2... 1...

Share me: http://p14.co/x/818rgq