Made to be broken

Tuesday 10th April 2012

Just three short months since setting up this journal I’ve gone ahead with a complete redesign. It’s the designers curse never being satisfied with your own work. In fairness the previous version was rushed together to showcase my portfolio as quickly as possible. Based on one of Orman Clark’s fantastic Wordpress themes, great as it was, it just wasn’t good enough.

If you often find yourself picking apart others code then you’re in luck. I’ve decided to set this article aside to discuss the technicalities and decisions I’ve made which should leave you in no doubt as to why I’ve built this site the way I have. If you disagree with anything I say, well then you’re probably wrong, but, if anything does change I’ll update this post in a seamless manner and argue profusely that the site was always built in the most semantic and effective way originally. How dare you accuse me of bad practice.

The Back-End

For this new version Wordpress has gone. I think it’s a great resource as a large scale CMS, but for just a basic blog (ironically the original task it was so simply meant to provide) it just seems so bulky and slow. I’ve pushed the boat out here and tried to implement my own back-end, learning bits and pieces along the way. It’s not perfect, to be honest it’s not even good, but it seems to do the job for now. As a future project I may try to integrate an official CMS, but only if it’s fast and I can keep my super slick back-end UI.

What’s that? Can you see my code? No.

Typography

Seeing as the main purpose of this site, for now at least, is to allow me to improve my writing and communication, font selection was top of my to do list. I wanted something easy to read which had great rendering performance across the wide range of internet enabled devices available today. I settled on Steve Matteson’s Droid Serif & Droid Sans hosted using Google Web Fonts. I’ve said it before and I’m sure I’ll say it again but Matteson is truly a master of clean, modern fonts. I don’t think he’s ever produced a font family I wouldn’t feel comfortable using.

Picking these fonts wasn’t easy. Finding a good typography fit is incredibly important as it drives the whole design of the site, especially this blog which I’m aiming to be focused on the content. The decision was made on the back of a vast array of experimentation and readability tests I set up for user interaction analysis. The majority of this testing took place using theclicktest.com if you’re interested, it’s a great resource for quick feedback on design issues.

Using Google Fonts @fontface is almost universally compatible. If it can't be used I’m just falling back to the users default Serif and Sans-Serif fonts. As far as I’m aware the default font rendering on Mac’s and PC’s are all quite adequate:

Serif

Mac: Times
PC: Times New Roman
iOS: Times
Android: Droid Serif

Sans-Serif

Mac: Helvetica
PC: Arial
iOS: Helvetica Neue
Android: Droid Sans

To me these options are perfectly acceptable to render the page on the very few, and quite ancient browsers that make up a tiny percentage of expected page views. I’m not ignoring Linux users here by the way, but according to my analytics I’ve had precisely 1 visitor in the last 6 years using the platform. Not my most pressing issue I’m sure you will agree.

I’ve set the default font-size at 100%, increasing and decreasing this percentage in a fluid fashion for headings and footnotes. Setting the font to be at a device default is a deliberate plan to future proof the design and increase readability on the whole range of devices that can be used to access the site from HD TV’s to mobile phones. This whole site is focused around the text - so the rest of the design morphs around this.

Design

Creating something for myself has always been the biggest challenge for myself and I’m sure most other designers would agree. It’s almost inevitable that within months or even days I’ll no longer be satisfied with what’s here and get the itch to redesign again, but this time I’ve thought ahead. I’ve kept this version of the site as clean, minimalist and efficient as I can.

Initially, as an experiment, I opened up Photoshop and created a mock-up of the most feature packed blog post page I could imagine. Then I went ahead and stripped away everything unnecessary till I was down to the bare bones. Although a somewhat prolonged experience as to how I would normally go about developing a design, and I wouldn’t recommend it on a client project, I found it useful to see the differences between features I thought provided enhancement to my experience and the features I actually needed.

It might not be to everyone’s taste; but it gives me a clean canvas to display my work and plenty of room to make changes along the way.

Responsive

Of course.

Images

Images are a hassle. Responsive design has put a real spanner in the works and right now we are stuck in a make-shift situation. There are a few solutions going around at the moment most of which I have experimented with. Unfortunately none of them seem to work satisfactorily yet, but that’s okay - this is a constantly changing landscape and I’m sure we’ll find a workaround that can be used as a polyfill until the browsers catch up on this one.

The best useable solution I’ve come across so far is Viewport Industries Responsive Images in Wordpress post, but I need to do a bit more testing on this before I put it into production. For now everyone is having to download the full res images - not ideal at all.

I’d recommend reading .net magazines article on the current state of responsive images if you’re not upto scratch with the latest information in the area. I’m fully behind the new picture element markup pattern - it can’t come soon enough.

I’m planning on creating an SVG version of my logo & icons as soon as I get the time. David Bushell has been pushing for SVG implementation for quite some time now, and really, with browser support pretty much across the board there is no excuse. The icons on the site are adapted versions of Audrey Morant’s Social Icons 2 set.

The Front-End

Is still pretty much a mix and match mess. This site is constantly going to be a front-end work in progress. Giving me an opportunity to fine-tune my skills and test out the best methods of going about new development tasks.

Want to start a discussion? Contact me via Twitter @timmaggs

I'm Tim, a 24 year old Nottingham based freelance graphic designer & front-end developer. I design and build hand-crafted websites whilst daydreaming I can still make it as a professional footballer.
Find out more about me