Fat sounds

I’m going to try and post weekly what I’m listening to…this week it’s a very old classic – The Fats Waller Collection. Fats was an extremely influential pianist who shaped the sound of early jazz and helped make modern music what it is today. Sadly, he died on Pneumonia in 1943, aged just 39. His music is an incredibly soulful mix of jazz piano and blues standards that makes for an excellent 12″ to accompany beavering away on pet projects.

Welsh adventure

OK, so, with any luck, this marks post one of my weekly posts (best laid plans and all that!).

Elle and I have just got in from a five day stay in (unusually) sunny North Wales. We’ve been staying in my grandparents’ chalet in Morfa Bychan, Porthmadog at the foot of the Lynn peninsula. Once a buzzing harbour town, it’s a tourist trap with some beautiful scenery and some less-than beautiful tourists. We trotted off on Friday with Elle’s friend Katie and two cars of friends following a few hours behind. We had a blast playing on the beach and reverting to seaside toddlers. From a slightly more appropriate perspective however, one of the things that stood out to me was the effect that ageing and decay had on the signage and way-finding throughout the area.

The unmistakable ‘British-ness’ of our street signs being iconised in cheap canvases in the Range and other such bargain basements seems extremely London-centric with ‘Borough of Westmister’, ‘SE1’ and ‘Underground’ being plastered on every printable surface imaginable. To me and other letter lovers what makes a quintessentially British sign is more about the Johnston, Gill and Calvert adorned surfaces than the red, white and black of the capital. Having said that, the walls of my house include a LOT of tube-related artwork due to a joint fascination Elle and I share for the aesthetic and engineering of the underground, but no road signs or the like. To me the reason is simple; the beauty of those London pieces lie in their history and the implied century of culture behind them. ‘M6 (North) via M69’ doesn’t quite have that charm but neglect it for a decade or so, slightly play with the brand guidelines and suddenly that charm and charisma comes flooding back.

Weaving through the twisting tracks around Porthmadog the signs and typography have no lack of character and it’s not just because it’s dual-language (though that certainly helps); it’s because it’s terribly maintained! Algae adorn it’s surfaces, scratches and dents distort them and they feel like they’re of another time. Naturally I kept this little revelation to myself. I dread to think what the group would have labeled me had I bored them with my typographic tales – I got a dodgy enough look when I suggested black isn’t an ideal colour for an ice-cream parlour!

TL;DR – old signs are pretty.

What’s all this then?

What’s going on with all this helvetica empty square thing I hear you cry! Well OK, maybe that wasn’t you. Maybe it wasn’t anyone. I could be hearing things. More likely still, I needed a facetious way of starting this post and that was the most apt cliché I could think of. Anyway, whether you asked or not, allow me to explain…

Tocal.net is my online portfolio. Who am I? My name is Tom and I’m a designer (for print & screen). There’s much more information on that subject throughout the site so I shan’t repeat myself. Lets get back to the subject in hand. An online portfolio is essentially a resource for those interested in the type, quality & calibre of my work and possibly a bit about me and where I’ve worked. Generally speaking then, this site is for employers and recruiters (hello!) and is designed for exactly that purpose.

The name
Why Tocal? Because Tom O’Callaghan is a pain to type and can be quite difficult to spell.

The logo
All my Tocal stuff is built around the simple graphic element of an empty square. The reason being that you’re looking for a blank canvas. Something with the potential to be anything creative you need it to be. You might need to paint me as a web designer, you might need a UI designer, a brand designer or simply an artworker. Whatever it might be, you need to see objectively whether I’m the man for that job. Then, once you’ve crossed that bridge, once you’ve seen whether that potential is there, you need to see that this is a piece that will slot nicely and cleanly into your organisation. Imagine my little square as a Tetris piece. Sure it’s not the long, 5 brick dream we’re always waiting for but it’ll fit in nicely, fill a space, help you move forward and build towards your success. That’s me!

The visuals
The site is undoubtably minimalist. Why? That’s simple! You’re here for information on me and to see my work. You don’t need umpteen widgets, icons and fonts competing for your attention. You just want to see my work as it should be, in context, with a basic overview and rationale. That’s why the site is so stripped back. It is all typeset in clean, uninvasive Helvetica Neue and everything follows a simple grid. There’s nothing here that doesn’t need to be so you’re free to peruse the work on display and draw your own, hopefully positive, conclusions.

The build
The site uses a very basic WordPress theme which gives the site it’s infrastructure and plain styling. On top of that, using a child theme to create my styling I cave built on to the template and removed aspects using CSS & PHP. For example, the form on the contact page is created using a plugin called Contact Form 7 (highly recommended) that has been bespoke styled using CSS to align the name and email fields into two columns. This styling also uses CSS media queries to break into one column below tablet sizes. Also styled with CSS are the numerous rollover links, which use CSS3 transition states – these are most easily seen in the footer. PHP tweaks such as removing page titles, creating variations on page templates and re-arranging page elements were tackled in small amounts as well. I chose this theme very carefully, to ensure all the tweaks I wished to make would be simple to complete.

The key thing, for both choosing and altering my theme, was to make use of media queries for responsive design. The CSS for the theme has 5 distinct snap points. At specific pixel values, which emulate those of desktop, tablet & mobile platforms and their orientations, the media queries adjust the styling and object display properties to render the site for best display on your device. Responsive design is a must for any site which doesn’t utilise a separate mobile site in today’s world. With an increasingly large percentage of users experiencing the web ‘on-the-go’ from mobile, or from smart devices like tablets, designing exclusively for desktop use is a thing of the past.

Another element of the responsive build I adopted is that, wherever possible, images are delivered at twice the usual resolution for users on retina displays. That’s anyone on iPhone 4+, iPad 3+ or any mac made after 2013. I have to admit that the motive for doing this isn’t entirely selfless. My mac has a retina display and having everything as crisp as it is in print is fantastic!

However, this relatively new innovation of media queries throws up it’s own issues. Each and every change on the site has to be browser tested in 5+ different iterations and on a number of devices. Not an enviable task but certainly a useful one.