Make Do website design iteration and challenges

I just pushed out a small update to the Make Do website with the intention of:

  1. Cleaning up some redundant elements
  2. Implemented a brighter colour scheme
  3. New page/navigation structure
  4. Simpler event listings
  5. ‘Event card’ element hacking

‘Event cards’ colour variations

One aspect that needed work on the new site was the use of the ‘event cards’ which were introduced back in the first version. The colurs and contrasts just weren’t right on a plain white background so I played around with a few variations and shared with a few people for feedback:

Make Do - grey on white

Make Do – grey on white

Make Do - off-black on white

Make Do – off-black on white

Make Do - white on white

Make Do – white on white

Make Do - 'pink' on white

Make Do – ‘pink’ on white

Make Do - 'sand' on white with new grid

Make Do – ‘sand’ on white with new grid

What I went with

In the end the darker design won out – this was actually launched as this:

The launched version, no more 'cards'

The launched version, no more ‘cards’

General feedback for this design is a lot more positive. It still needs work and playing around with but it’s on the right track. One thing that I feel is missing is the ‘card’ element, where each event is given more focus in it’s own box, this will eventually come back – just watch.

For now, check out the new changes over at Make Do.

I’m running a theme workshop at WordCamp London

My profile for WordCamp London 2013

My profile for WordCamp London 2013

Going to WordCamp London? Check out my WordPress Theme Fundamentals workshop at 9:30am on Saturday 23rd November.

Who is this workshop for?

I’ve designed this workshop for complete newbies and theme hackers. Maybe you’ve looked into theme building and been overwhelmed by the number of tutorials online, or you opened TwentyWhatever and saw 30+ PHP files and decided it was just too much?

This workshop will give anyone who attends a quick fire introduction to how to make WordPress themes from scratch. We’ll also be building a very basic ‘page driven’ CMS theme (just pages, no posts/comments etc…).

Sign up

You can sign up here for the workshop, but please bear in mind that you’ll miss the first half of the day’s conference talks.

More info can be found on the WordCamp London site and if you have questions just drop me an email.

Life barrels on like a runaway train

Just over two weeks ago I quit my long standing, well paid and secure full-time job in the NHS.

How the past couple of weeks have felt...

How the past couple of weeks have felt…

I’m leaving to do freelance web design, front end and WordPress consultancy while also growing Make Do, my start-up events and education business.

What drove my decision

Last year I spoke to my manager about reducing my hours in the NHS down to four days per-week (later three-days if all went well). This was so I could spend more quality time on my own projects.

A year later and the dream of part time had not worked out. My role at Barnsley Hospital NHS Foundation Trust requires that I be on-site five days per-week and that I am focused and involved in the tasks at hand. It can’t be done half-arsed.

So I remained working two-jobs for another 12-months until something big came along that gave me enough drive to finally quit my day-job.

The main stage of WordCamp Europe

Me at WordCamp Europe

Enter WordCamp Europe

I headed over to WordCamp Europe as an event volunteer on the 4th of October 2013. After the first day was over the seed was planted for me to arrive back in the UK and hand in my notice.

I’ve been attending WordCamps for four years and they have always been inspirational. But this time was different. The buzz and size of the event cemented just how large this community that I’m part of had become and I met so many new and interesting people.

For most of the weekend I hung around with the UK-WordPres crew. These are folk that I have known for years and they pretty much all gave me a hard time about the state of my career.

I won’t name any names, but one quote cut deep, it came from an old peer that I met back at my first-ever WordCamp in the UK back in 2009 and went something like:

What are you still doing working in the NHS when you have so much more potential?

Ouch. I remember trying to justify my decision to stay in stable full-time employment but inside my guts were churning and that night I started thinking about what my resignation letter would look like while I sat alone in a bar across the street from my hotel.

By the time I got my flight back to the UK on the 8th of October I had made up my mind. The time was right for me to quit the NHS and seek opportunity elsewhere.

A long time coming

Now the dust has settled I feel like I’ve been preparing for this change since 2009 when I:

  1. Turned 30
  2. Started base6 Design, my first stab at freelance
  3. Attented & spoke at my first WordCamp (WordCamp UK Cardiff)

On turning 30

OK so turning 30 may sound trivial but it was a massive thing for me personally. I remember I felt a deep desire to ‘do something’ after the shock of leaving my 20s had died down. I responded by starting base6 Design a small design studio that I ran out of my home-office.

On base6 Design

the old base6 Design website from 2009

the old base6 Design website from 2009

Looking back base6 did pretty well, I had a list of clients all over the world (weirdly hardly any UK ones) and I used some of the money I earned from this venture to fund my first start-up WonderThemes.

Sadly, the reality of working a full-time job, running a freelance design business AND doing WonderThemes was too much so I put base6 to pasture to concentrate on WonderThemes and let all of my old clients go, something I now regret since WonderThemes was closed late last year.

On WordCamp-ing

Me speaking at WordCamp UK 2010 - Photo copyright Dickie Dooda

Me speaking at WordCamp UK 2010 – Photo copyright Dickie Dooda

Finally, attending and speaking at my first WordCamp event was massive for me. WordCamp UK 2009 in Cardiff wasn’t just my first WordPress conference, it was my first ever web-conference too. The inspiration I picked up from attending this event is still with me today, it sparked something in me that made me do things like starting The Digital Barn conference and later Make Do.

This was also around the time when I moved jobs in the NHS and left my role in IT to work in Marketing & Communications. A change which allowed me to re-discover my creative design skills that had laid dormant for so long while I was stuck doing mostly back-end web development and project management in IT.

For hire

So that’s it – my 10 year+ stint in the NHS working in web design, development and digital will be over very soon.

I’ll officially be available for hire from December 2013. I’ll be on the market for any web design, front end development and of course WordPress jobs and will be at WordCamp London actively looking for work opportunities.

Life barrels on?

The title of this post is taken from a lyric in the Ben Folds song “Fred Jones, Part 2″ from his Rockin’ the Suburbs album.

It’s an odd choice because the track is about someone being forced out of their job but I found these lyrics helped sum up how I’ve felt since handing in my notice:

He’s cleared all his things and he’s put them in boxes
Things that remind him: ‘Life has been good’
Twenty-five years
He’s worked at the paper
A man’s here to take him downstairs
And I’m sorry, Mr. Jones

It’s time

You can check out ‘Fred Jones Part 2′ on Spotify:

How I set up different background colours for my WordPress pages

Notice how the different sections of my website have a different background color? Well, this isn’t a particularly challenging piece of code to implement but since I launched my new site a few weeks ago I’ve had a few of emails and tweets asking how it was done.

Setting up a friendly ‘body_class()’ in WordPress

By default most WordPress themes will add a CSS class to your sites <body> element that includes the post type, page/post ID and any template you may be using. It looks something like this:

If your theme doesn’t have a body_class() set up you can add your own using the following bit of code:

This CSS class allows you to individually style pages/posts by referencing the values in this class from your themes stylesheet.

But the post/page ID is a little difficult to remember, it could also change if you do a major edit, so how about using the title instead?

Check out how my site loads it’s body_class() for my WordPress services page:

Note the addition of ‘page-wordpress’.

And here is the code snippet that makes that happen (add to your functions.php file):

This code gets the page type: ‘$post->post_type‘ (in this case ‘page’) and the page name: ‘$post->post_name‘ (taken from the slug) and adds then to the body_cass() – for example an ‘About Kimb‘ page would return ‘page-about-kimb‘.

Changing the WordPress page background color with CSS

And now the easy part, choosing your colours – here’s a snippet from my stylesheet:

Done! Now I can reference any new page titles using a more friendly and memorable body_class().

Learn more about the WordPress body_class()

I’ve used the body_class() feature since it was introduced in WordPress 2.8, it’s really useful for pages with logged-in users and advanced homepage layouts. Before this was introduced developers would have to cobble together custom elements using conditional tags and other nasty complex hacks.

Some useful example classes which WordPress adds are:

  • page-parent
  • page-template page-template-{directory}{filename}_php
  • search-results
  • error404
  • logged-in
  • author-user_nicename
  • single-{posttype}
  • home page

Read more about the WordPress bodyclass on the Codex.