New & Improved / Paul Robert Lloyd

Unless you’re viewing this in your RSS reader, you may have noticed a few changes to the site. It’s been more than two years since the last redesign, but I’ve been working on this update on-and-off for the last 12 months. I could probably continue tweaking and refining, but as a wise man once said, ‘real artists ship’.

So what’s new?

As I stated in the design principles, this redesign has been focused on content. Through constant iteration, I continually questioned which features deserved to be on each page, and typically the answer was to remove rather than add.

I’ve also spent some considerable time refining the typography. I’m still finding it difficult to move away from a Helvetica based design, but Jeremy Tankard’s Bliss and Type Together’s Skolar typefaces do a handsome job of breaking my addiction.

Given this effort, I decided to revisit previous journal entries and articles, correctly marking up abbreviations and cited works, and updating images with larger, higher quality versions. I’ve finally got round to adding photos to my review of the Brasília Palace Hotel, and that’s probably a good place to start sampling the improvements.

Not wanting to burden readers with periphery content, entry pages feature extra content hidden away behind a few additional links. Discussions are be found on separate pages, an idea that I played with earlier in the design process and actually implemented on the previous site. This allows me to retain ‘ownership’ of my posts whilst still accepting commentary where it may be of benefit.

Some posts also show related photos I’ve machine tagged on Flickr and all provide a selection of five related entries, again matched by tag. Judicious use of the HTML5 History API allows these pages to load in place on the same page.

Journal links

The Journal gets its own page and takes a tumblelog approach which I’ve become fond of. Now I can incorporate videos and photos, highlight key quotes or recommend articles that find interesting. I’ve seen this done on many of the sites I read, and it’s something I’ve wanted to try for a while. What may work for others may not work for me, so I’m interested to see how I end up using this new functionality.

Portfolio

FourTwo, my somewhat neglected (and now archived) freelance site redirects to the new Portfolio section. Here you can see the fruits of my brief freelance existence – as well as the work I’ve been doing at Clearleft – all in one place.

Design

Much to my own disappointment, I’ve never been one for sketching, and often dive straight into Fireworks instead. Recently I’ve started to step back a little and started using tools like OmniGraffle. This lets me focus on hierarchy and layout without getting drawn into the details.

Fireworks was employed later in the process when I wanted to play with different visual approaches, yet often in tandem with the browser and real content. I’ve not got a lot to say about the design, largely because I’m already bored of it and want to start over.

Technical considerations

One of the main reasons behind this redesign was to experiment with new techniques and approaches. Being able to think through the complexities of a Responsive Design in my own time was immensely valuable, as was the iterative testing of the design on different devices. Granted, these were typically manufactured by Apple, so more testing is certainly required.

Thanks to the discussion and experimentation happening around Responsive Design at Clearleft, I’ve adopted a responsive image technique initially developed by Scott Jehl and built upon by Andy Hume. What I like to label experimental, you may want to call buggy; I’ve noticed images not loading and both image sizes getting downloaded on larger screens. Embrace the experimentation!

The site is marked up using HTML5 with particular attention (and much head scratching) lavished on the outline of each page. I’ve spent a lot of time thinking about performance too, helped greatly by the techniques documented in the HTML5 Boilerplate which I’ve referenced rather than use wholesale. No need to fear pink text selection here.

Maps use the Leaflet JavaScript library which provides a far more enjoyable mobile browsing experience than the iFrame embedded Google Maps I was using previously. It also means I can now use Open Street Map data. This post about my trip around Europe is a good place to see these new maps in action.

The RSS feed has been updated to show all new content posted to the site (entries, links and portfolio projects) but you can subscribe to individual sections if you wish.

Movable Type

I’m unashamed in my continued use of Movable Type, and the latest release by the team in Japan has improved upon an already great platform. That’s not to say I haven’t got my gripes, especially since I’ve adopted the Websites/Blogs model available in Movable Type 5. Simple things like creating an archive page that aggregates content across all blogs is difficult, if not impossible to accomplish. I also tried using the built-in asset management features (which would allow me to upload images and automatically generate thumbnails) but this appeared buggy and incomplete. It’s a solid platform, but there is still much room for improvement.

Just the start

In many respects my focus on the content and typography means these do much of the heavy lifting, and I’m conscious that the design lacks much colour, texture or detailed refinement. Yet this is more of a foundational design upon which I can layer on new features and polish over time. The design will continue to evolve, and the bugs will be ironed out. Eventually.