My favourite design resources of 2013

It would be platitudinous to observe that the web industry generates new design and development techniques, methodologies and frameworks at some speed.

I've become a rather slow adapter, and not just because I'm getting on a bit. Between the four walls of this blog post let me note - briefly - that many new tools don't turn out to be all that useful: it's necessary to spend some time getting acquainted with them, and they can add an unnecessary layers of abstraction over tasks that could be more elegantly accomplished through proper understanding of the underlying technology. I tend not to like content management themes, for example, because they're too prescriptive: if done right they provide a flexible base on which to build, but the temptation is to graft the core offering with thickets of unnecessary functionality which need to be hacked away before work can get underway. HTML and CSS development frameworks can be similarly problematic. One wants a simple set of building blocks, not a prefabricated structure.

Engineers, of course, like to build things, and sometimes those things are built just for the pleasure of building, not because the end product proves to be particularly useful. So we end up with many nicely packaged new technologies that promise more than they deliver. There's nothing wrong with that: that element of playfulness is one of the best things about the web community. But I think it's appropriate to view each new innovation with scepticism till its merits are proven.

So: with that sobering and riveting proviso out of the way, let me mention a few technologies that I have adopted this year, and that have indeed made my work easier.

Foundation

I have held out for some years against the use of front-end design frameworks. I've quite simply found them unnecessary. I've been able to manage with my own library of code fragments, curated over the course of many projects.

But designing even the most seemingly straightforward of responsive sites that will work reliably on most devices has become so very complex that I am no longer confident that my self-assembled libraries are adequate. In fact it would be uncontroversial to say that they do not work.

A quiet spell in late summer gave me the opportunity to try out a few frameworks. I eventually settled on Zurb Foundation. Had the stars been aligned slightly differently I may well have gone with Twitter's Bootstrap, but Foundation seems to me a little less overwhelming, with a sharper focus on the kind of website components that are useful for the kinds of projects I tend to work on. Crucially, it allows you to build from the ground up, snapping components together, rather than forcing you to start off with a forbidding edifice that needs to be broken apart before you can get started.

I've had an opportunity to use Foundation for the basis for a couple of commercial projects, and now that I'm acquainted with (nearly) all of its nooks and crannies you will be thrilled for me when I inform you that it has saved me considerable time. It's reassuring to start a project with a peer-reviewed set of libraries rather than continuing to worry about researching and maintaining my own. Three cheers for Foundation.

SASS

As with frameworks so with CSS pre-processors: my resistance broke down this year, and I finally adopted SASS. I've been aware of the undoubted efficiencies pre-processors offer since they emerged 18 months or so ago, but I wondered whether the benefits were quite as great as their proponents claim. If you know CSS well then SASS won't help you code all that much more quickly, and, as has been well documented, SASS generates shocking CSS if not used with discretion (I have generated such code myself, and the memory of it has not been effaced by time.)

Having used it for a few projects now I think my hesitations were not unjustified: SASS variables and mixins et al extend CSS in useful ways, but the time saved has been quite modest. But they are sufficiently useful, I think, to justify my integrating the language into my workflow. SASS is really very straightforward to learn, and frameworks like Foundation - discussed above - work better with SASS. Let us raise a glass to SASS.

ExpressionEngine

After something of a wobble in 2012 I have reinstated ExpressionEngine as my content management system of choice. After using EE for many years I was tempted to switch to WordPress a couple of years ago. Not because I had any serious misgivings about EE. I just wanted to try something new, and wondered if some serious experimentation with WordPress would make clear why it has emerged as the most popular content management solution.

Let me acknowledge that I was able to develop some reasonably sophisticated sites with WordPress. The basic functionality is rather spartan, particularly as regards options for specifying custom content editing fields. But there are many exceptional plugins, of course, including the excellent Advanced Custom Fields, which addresses the custom fields issue, and the ever lovely Gravity Forms. Together these elevate WordPress to the status of a usable content management system.

But, for me at least, poor fool, it all seemed to be something of a straggle. Quite a few plugins are required even for the most simple of sites, which can cause compatibility issues when the system needs to be upgraded (quite often in the case of WordPress). But my primary gripe is that its necessary to write raw PHP to invest the templates with functionality. Not my cup of tea at all, I have to confess. I acknowledge that much of the PHP is quite straightforward and can usually be sourced easily enough through a quick Google search, but I was surprised at how tricky it was to deliver some really quite basic functionality.

So it was a relief to return to ExpressionEngine this year. Hacking WordPress allowed me to appreciate just what an elegant system EE is. A simple templating language requiring minimal recourse to PHP. Sophisticated custom field specification as core functionality. Excellent, reliable plugins that make it easy to extend the system to encompass nearly all requirements (certainly those of my clients). And - crucially - a straightforward user interface the non-technical clients can comprehend: augmented with the Structure, Matrix, CE Image and Wygwam plugins EE offers the easiest content editing environment I know of.

ExpressionEngine and most of its attendant plugins cost money, which seems to put some people off. Unless a client has special requirements I've never had to spend more than around £300 to £350 to purchase all of the required software licences. In the context of a project with an adequate budget that is not very much at all. A free version of EE, Core, is available for non-profit organisations. ExpressionEngine: Ich Liebe Dich.

IcoMoon

IcoMoon. Let that beautiful word echo. IcoMoon makes it quite absurdly easy to add high quality icon fonts. It offers a choice of hundreds of well drawn icons in a variety of styles. It's easy to use. It will even generate the necessary CSS code for you. It's free. There is nothing more to be said: we need only contemplate IcoMoon in reverential silence.

ImageOptim

ImageOptim is a devastating little app, again, entirely free, that makes it simple to optimise images before web site use. Just drag the images in question into the ImageOptim window and it will compress them. All very straightforward. ImageOptim, you bring honour to our house.

Hammer for Mac

Let me not mince my words: Hammer for Mac is a good thing. Its one of those tools that introduces innovations to the front-end development flow that are so simple one wonders why they haven't been standard for years. Developing static templates prior to integration with a content management system has traditionally been somewhat laborious, involving much copying and pasting and use of the search and replace tool across multiple files. Say, for example, you want to make a small adjustment to the masthead region: that change needs to be carried across all templates, and there's no easy way to do it short of setting up a local PHP environment allowing use of PHP includes.

Hammer consigns all that nonsense to the dustbin of history through the introduction of HTML includes. It also automates use of image placeholders, allows use of variables, and offers a 'clever paths' function that permits shorthand referencing of site assets such as images and CSS and JavaScript files. It also makes it easy to upload a set of templates to a preview server ready for client review. Hammer for Mac: let its name resound.

Categories: