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.