What Creative

Last year, 2011, was a good year for us; busy, interesting, exciting, scary, all mixed into one. We learned a lot, honed our skills, developed new ones, new relationships, new ways of working, and created a lot of work we’re really happy with. We grew, too. We changed from a freelance outfit to more of a small agency, which was the scary part I just referred to – but it couldn’t have gone better.

We’re just over two years old now and 2012 is going to be a big year for us. We’re really excited.

It goes without saying that we want to keep doing what we did last year. Keep learning, every day, and keep producing work that we’re proud of by pushing ourselves at every opportunity. But we also have a few more specific things that we really want to do, and will.

Rebuild this website – from scratch. And rebrand (slightly).

We’ve needed to redesign this site for a while now. It’s not terrible. It does the job. But it doesn’t say what we want it to say. I don’t just mean the text, I mean the whole experience of using the site. We want users to get to know us from page to page and understand what we’re really about; how we work and how passionate we are about what we produce.

We also want to take a good hard look at the blogging / reading experience. There are so many blogs out there now that all look the same and don’t offer anything different. The industry seems to have settled on what a blog should look like, but we think we can do better.

On top of that we want to share things via the site a lot more. As we get busier and busier it gets increasingly more difficult to write the types of articles that we have done over the last couple of years. We aren’t going to stop doing these, but they’ll probably be more infrequent. However, we will make much more of an effort to share smaller snippets of information, what we’re up to, and things that we think are cool. A bit like a creative ‘stream’, if you will.

Lastly, as part of this process we are going to have a bit of a rebrand – this is simply because we believe that to achieve everything that we want to from the site, it’s necessary.

More eCommerce / Bigger Projects

We’ve done the odd bits and pieces, making small shopping systems and working with other agencies on their larger projects, but we’re desperate to get our teeth stuck into a good sized eCommerce project of our own. Luckily, just before Christmas we had a meeting about one such project, so it seems that we might have got what we asked Santa for – score!

We also want to build bigger websites in general – as I’m sure every other small agency does – so let’s keep our fingers crossed for that too. And it’s not all about the money. It goes without saying that larger sites need larger budgets, but we simply want bigger projects so that we can spend more time doing things that get you a better end result. More concept generation, more wireframing, more UX, more thought. And that, unfortunately, takes time.

Speak More

Anyone who’s met us knows this isn’t really a problem (especially for that Kemm fella), because we’ll natter on for days. What I really mean is that we’d like the opportunity to speak to the industry, or about the industry – at conferences and things.

Every year we go to the University of Huddersfield Barnsley Campus to speak about online marketing and getting your work out there, and this year we doubled up and also spoke at Inspire. Create. Leeds – as part of Leeds Digital Festival – about how we set up this company of ours, and we really enjoyed it. So from now on we’d like to do more.

We’re hoping to continue our connection with the University of Huddersfield by speaking to their students studying Multimedia and VR, too… But we still want more.

Grow

Put simply, we’ve got ambition, and we don’t want to sit around being small forever.

Being small is great, and we love it, but do you know what we’d love more? Being a bit bigger. But we aren’t really sure how to go about it, so we’re just going to do what we’ve always done – make the best stuff we can and see what happens… It’s worked so far, so what’s stopping us!

Make more friends

Cheesy? Yes. But we love meeting new people and we’ll chat to anyone. Seriously. And it’s all going to kick off with New Adventures in Web design 2012, so give us a shout if you’re coming and we’ll go for a beer.

Our favourite projects of 2011

Nu-Light LED – branding, web design, print design

Mission Foods – WordPress web development

Capital Properties – branding, web design, print design

Chalet Snowdon – branding, web design, print design

So here’s to an awesome 2012!

I was given the task of building a MailChimp template the other week. It’s been a while since I’ve done one but I knew the basics of it all. Since I last worked on template building, MailChimp has made some pretty good progress… We can now have hideable areas and the interface that you use for building newsletters seems to be a lot less buggy.

What I’m going to teach you today is how to build repeating content areas, which look different, but use the same piece of code. You can then hide certain parts of the code to alter the layout. You may think this sounds pretty simple but there are a few things to take into account; namely who will be using your template, what skill level they have, and how compatible you want to make the template with email clients such as the dreaded Lotus Notes.

As this article is specifically aimed at MailChimp and their templates, I’m going to assume that you know what MailChimp template tags to use for hideable and repeatable content sections. If you don’t, you can find the template tag guide here.

The Task

Build a content section that may or may not have an image in it. If it does have an image, the image will be on the right, with text to the left and text underneath. The image has a border of 1px with padding between the border and the image of 3px. Here’s an example of the two content section options we’ll be able to achieve:

What we need to make

• A text content cell
• A spacer column
• An image cell
• A cell spanning all three of these columns with text which “wraps” underneath the image.

Part 1 – Build the image section

We could do this simply by adding the 1px border and the padding to the image itself, but that would be a bit annoying, especially when the client doesn’t know how to use Photoshop.

Another option would be to put a 1px border on using CSS but some Lotus Note clients don’t support borders (and hey, we’re trying to make this as compatible as possible…) so we have to make a <table> with the image in the centre cell, surrounded by 1px high borders for the top and bottom and 1px wide borders for the sides, filled with transparent gifs and background colours. We also set the cells’ widths and heights as a fallback in case images are disabled. That gives us a 3 x 3 cell table.

But that’s not all…we also need to give our image 3px padding. Once again, css support for padding is patchy so we need to fake it using table cells with transparent gifs in. We also set the cells’ widths and heights as a fallback in case images are disabled. This will increase our table to 5 x 5 cells.

The Code

<table width="255" border="0" cellpadding="0" cellspacing="0">
        <!--border top row -->

        <tr>
            <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
        </tr><!-- padding top row-->

        <tr>
            <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
        </tr><!-- image row-->

        <tr>
            <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td width="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="1" width="3" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td><img mc:edit="section-two-image" src="bananas.jpg" alt="" class="border-image" style="display:block;max-width:247px;" border="0"></td>

            <td width="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="1" width="3" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
        </tr><!--padding bottom row-->

        <tr>
            <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
        </tr><!-- border bottom row-->

        <tr>
            <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

            <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
        </tr>
    </table>

Part 2 – Making parts hideable

So now we’ve got our image part built, it’s time to slot the text content and the image table into two columns. But actually, we need to separate them with a divider column to give our image some breathing space. To be super clever, we don’t want to have to make both the column cell and the image cell hideable separately (the column will likely be forgotten). We could add the column as part of our image table, but either we’d have to use a rowspan (which causes compatibility issues with some older versions of Lotus Notes), add an extra cell to every row in the image table, or we could make a new nested table with the column in one cell and the image table in the other cell. I chose the latter, because it adds less code and image bulk than adding 5 extra cells.

Part 3 – Wrapping text underneath the image

We’ve got an image and a column which we can hide together, but now we need to add a hideable text cell underneath. The problem is that in the current situation, we have two cells across, which would mean our wrapping text would need a colspan. How can we solve this? Well we need to return to our two cells above and nest them in another table. That way we can make a table row underneath which is only on cell across.

<td width="285" mc:hideable>
                <table width="285" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="30"><img src="spacer.gif" width="30" height="1" style="display:block;visibility:hidden" alt=""></td>

                        <td width="255" align="right">
                            <table width="255" border="0" cellpadding="0" cellspacing="0">
                                <!--border top row -->

                                <tr>
                                    <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                </tr><!-- padding top row-->

                                <tr>
                                    <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                </tr><!-- image row-->

                                <tr>
                                    <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td width="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="1" width="3" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td><img mc:edit="section-two-image" src="bananas.jpg" alt="" class="border-image" style="display:block;max-width:247px;" border="0"></td>

                                    <td width="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="1" width="3" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                </tr><!--padding bottom row-->

                                <tr>
                                    <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                </tr><!-- border bottom row-->

                                <tr>
                                    <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                    <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td></td>

                        <td height="25"><img src="spacer.gif" height="25" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                    </tr>
                </table>
            </td>

Why can’t I just put the wrapping text cell in a new table underneath? Because we need to make the whole section repeatable, so it’s got to be in one single section.

Part 4 – Put it all together

We’re going to spruce up the text section by slotting another table into the text cell, which will enable us to have heading styles which are different to the content styles. We also need to make sure there’s a spacer above the header so if we repeat the section there’ll be space between them.

Here’s the final code:

<table width="540" align="center" cellpadding="0" cellspacing="0" border="0" mc:repeatable>
        <tr>
            <td height="2" align="center"><img src="hr.gif" alt="" width="537" height="2" style="display:block;"></td>
        </tr>

        <tr>
            <td height="20"><img src="spacer.gif" height="20" alt="" style="display:block;visibility:hidden;"></td>
        </tr>

        <tr>
            <td valign="top">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td valign="top">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td mc:edit="section-two-heading" class="market-update-heading" align="left">News headline goes here</td>
                                </tr>

                                <tr>
                                    <td height="15"><img src="spacer.gif" height="15" alt="" style="display:block;visibility:hidden;"></td>
                                </tr>

                                <tr>
                                    <td mc:edit="section-two-content" class="market-update-contentsection" align="left" valign="top">Writing here</td>
                                </tr>
                            </table>
                        </td>

                        <td width="285" mc:hideable>
                            <table width="285" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="30"><img src="spacer.gif" width="30" height="1" style="display:block;visibility:hidden" alt=""></td>

                                    <td width="255" align="right">
                                        <table width="255" border="0" cellpadding="0" cellspacing="0">
                                            <!--border top row -->

                                            <tr>
                                                <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                            </tr><!-- padding top row-->

                                            <tr>
                                                <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                            </tr><!-- image row-->

                                            <tr>
                                                <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td width="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="1" width="3" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td><img mc:edit="section-two-image" src="bananas.jpg" alt="" class="border-image" style="display:block;max-width:247px;" border="0"></td>

                                                <td width="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="1" width="3" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                            </tr><!--padding bottom row-->

                                            <tr>
                                                <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#FFFFFF"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="3" bgcolor="#DADADA"><img src="spacer.gif" height="3" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                            </tr><!-- border bottom row-->

                                            <tr>
                                                <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>

                                                <td height="1" width="1" bgcolor="#DADADA"><img src="spacer.gif" height="1" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>

                                <tr>
                                    <td></td>

                                    <td height="25"><img src="spacer.gif" height="25" width="1" border="0" style="display:block;visibility:hidden" alt=""></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td valign="top" align="left" class="market-update-contentsection" mc:hideable mc:edit="section-two-content-secondary">Secondary optional text section</td>
        </tr>

        <tr>
            <td height="30"><img src="spacer.gif" height="30" alt="" style="display:block;visibility:hidden;"></td>
        </tr>
    </table>

The Template

Here’s what the template will look like without content:

Want all the files? Download the zip file here.

View a live demo here.

This year both me and my fellow mo bro chris are taking part in the ever more infamous Movember season. For those of you who don’t know, this means that we’ll both be growing moustaches from the 1st to the 30th November in the hope that we can get some sponsors and “raise vital funds and awareness for men’s health, specifically prostate cancer and other cancers that affect men”. We’ll probably look like we’re auditioning for the next 118 advert, but it’ll be worth it.

If you want to look at our ugly mugs for the next 29 days and follow our progress, we’ll be taking a photo of ourselves every morning here: http://dailybooth.com/whatcreative

Please donate!

If you think that we’re not going to leave our houses for the next month in order to avoid revealing our flavour savers in public, you’d be very wrong. I’ve got a particularly busy month visiting family and friends, climaxing with visiting my girlfriends Grandparents at the very end of the month down in Bristol – who will likely be rather confused – so for the sheer awkwardness of the many moments to come, please donate!

You can donate on our page here: http://mobro.co/whatcreative

Even though we’ll look pretty humorous, our intentions are serious and we’re dead set on raising awareness and funding for the top two male specific cancers – prostate and testicular cancer, so please sponsor us and donate to this fantastic cause.

To find out more please visit the UK Movember page here: http://uk.movember.com/

p.s. I really don’t suit a moustache. You know sometimes when you’ve got a bit of a beard going and you shave it off except for your top lip to see what it looks like – yeah I’ve done that – and it doesn’t look good.

Let me introduce myself, I’m what you call “a user”

So, you might be thinking this is something of a contrived statement? One that is to lead on to an article full of humorous wit and intrigue, maybe with a twist! Well, I’m afraid such an assumption may lead to nothing more than bitter disappointment. But hold on and wait just a moment longer, there is a reason for doing so.

Okay, let’s get down to the nitty-grit, the nuts and bolts, the crux, the real reason why we’re all here.
Your latest site build has gone live – it’s looking good, it’s on-brand, it’s ticking all right the boxes, it’s a master piece of modern art, a real winner. The analytics figures are beginning to come through and traffic is hitting the site in huge numbers… It’s looking like a massive success, the client is going to be ecstatic, joyous beyond all belief. You’ve got them now; a roaring success and new business will indeed be yours for the taking.

But wait… What’s this?

The traffic and conversion figures are not adding up. We’ve got tens of thousands of people hitting the site but the exit rate is almost the same – no conversions, nothing!

What the heck is going on?

Why is this happening?

Oh, oh… How am I going to explain this to the client?

That sinking feeling has hit, and it hits hard. It’s looking like a classic faux pas. Having been so desperate to appease the client with the promise of increased traffic rates and a nice shiny new site, the whole ‘point’ of it has been well and truly missed – side-stepped if you like!
So to reiterate the title… Let me introduce myself, I’m what you call “a user”.

In fact we’re all users, and as a user I’ve arrived at the aforementioned shiny new site with intent. Be it through prior knowledge of your product or service, or from natural search, PPC, a banner ad maybe or possibly via a supporting off-line media campaign. Either way, I’m here and I’m ready to invest my time in you and your brand.

But where do I go and what do I do next? What makes your company different to all of the others out there? What mindset am I in and where should I click next? It really doesn’t take long for frustration to set in, and before you know it the chances are I’m off elsewhere. Off as in I’ve just exited the site, maybe a click or two later after a desperate attempt to make sense of the whole debacle – but I’ve gone… My journey has come to an end and Elvis has indeed left the building!

At this point you may be thinking that such a scenario would never happen, surely the extensive media planning together with the adoption of user centered design principles, and the vast swathes of analytical data along with the creative nuances and exquisite copy that have helped forge a site that will captivate, inform and convert.

Well in this particular scenario it didn’t, because the leading principle of designing for the user never happened. And by and large this can be broken down into a number of constitute parts:

• Usability
• User experience design
• Information architecture

Each of which have their own reliance on prior knowledge and research so as to ensure the best possible solution is provided to the client, which will in turn maximise reach and ultimately deliver a successful project.

The usability aspect is about being able to convey the site in such a fashion that the user instinctively knows what interactions are required of them in order to ‘use’ the site. It may sound obvious, but usability is so often overshadowed and in extreme cases it may actually render the site as being unusable.

Whereas the user experience (UX) isn’t restricted to just the online world, it covers a whole plethora of mediums and rallies the need to ensure the user experience, regardless of medium, is consistent and affects their perception of the company, the ‘brand’, its products and its services in a positive manner. It is also in-place to relay the language used across each medium to be one that is familiar and coherent to the expected audience – time to drop the corporate line and remember whom we’re actually talking to!

Information architecture, or IA if you will; a user doesn’t care as to how a site is structured, or indeed as to how elements are placed on the page. But if the IA isn’t implemented correctly then the said same user will care. They’ve already chosen to engage in what is in-effect a foreign environment, and within this environment if the information of interest to them isn’t readily available, or the navigation points are lost through ‘noise’ then the risk of them remaining on the site is reduced significantly.

In essence this is what user centered design (UCD) aspires to capture. Adopting UCD increases usability, with usability being a close relation to the successful implementation of information architecture, whilst maintaining the focus of the experience across all channels.

It’s psychology, understanding the needs and anticipating the journey of your users who are your audience, and ensuring they can obtain the required information quickly and easily. Doing so raises the probability of successful conversion and future engagement, be it return visits or further brand engagement through other channels.

We need to help users perform their tasks through the construction of on-page information, ensuring they are able to deconstruct and interpret what and where they need to go in a less problematic fashion.

One could even say this is a common sense approach; such a shame that it’s so often dismissed in favour of creative flair minus the science.

So there you have it. I’m a user, you’re a user – and with that in-mind, let us never lose focus of…

The user!

There’s no denying that a solid grid system is imperative to the design of any successful website, but there’s not enough variety in what I’m seeing out there. It’s all the same, and it doesn’t all work. I’ve titled this post “Ye Olde 960 Grid System” because I think this grid (whether fixed or responsive) is exactly that. Old.

Mark Boulton has been talking about taking a “content out approach” to web design for a while now and I think moving away from the ‘standard’ grid fits into this approach perfectly. Unfortunately I haven’t attended any of the conferences where he’s been discussing this topic (so, sorry Mark, you may have covered this), but using the 960 grid (or any of the slight variations) as a starting point is too easy. It’s lazy. We should let the content decide the grid, not force it into a tried and tested method that’s supposed to be ‘the best’ way.

There should be no ‘best way’. We should be as creative with our grid as we are with the rest of the design, or the UX, or the copywriting. Every time I’ve set up my 12 or 16 columns and started trying to fit content into it, I’ve always had to change something because it just doesn’t quite work. Not for everything anyway.

Sometimes it’ll work perfectly I’m sure, but I just think it’s relied upon far too much. And now with Twitter’s Bootstrap toolkit being based on it we’re going to see even more of the web forced inside a template.

C’mon people. It’s one thing using a boilerplate for, say, HTML5, which is designed to help move the web forward, but using it for our layouts too? The web is moving so fast with responsive / adaptive layouts, CSS3,  HTML5, and a better understanding of UX and content strategy that an over-reliance on this grid system is soon going to start holding things back.

Start with the content, and build your website around it. You’ll learn more about grids, and we’ll start to see a more interesting web.

Shortly after we finished writing our recent post on the top 10 WordPress Plugins 2011, we came across this little plugin whilst working on a WordPress CMS project. It’s developed by a guy called Elliot Condon, and we found it to be so good that we had to dedicate an entire post to it.

The Advanced Custom Fields plugin is, in one word, brilliant. For anyone looking to extend the functionality flexibility of WordPress as a CMS, without using something as complicated as Pods CMS Framework, it’s perfect.

You can use it to pretty much replace the standard WP ‘Edit’ screen with whatever fields you want. It’s really simple to use, too. Once you’ve created your list of custom fields you then assign that ‘set’ to any number of templates, stick a few bits of code in your HTML, and you’re away!

Getting Started

Once you’ve got it installed you’ll get an ‘Adv Custom Fields’ link under your ‘Settings’ tab, which is where you control the majority of the plugin from. Click this, then ‘Add New’ at the top, and you’re presented with this screen:

From here you can give your field set a name and add all your fields, which include a Field Label, Field Name, Field Type, and Field Instructions (this last one is a great little touch for guiding your clients, or anyone that may be using the CMS in the right direction – be warned though, don’t put anything in there that looks like HTML or you’ll break it!).

The next step is to tell it which template(s) to apply the field set to, and then finally you can choose to turn off any or all of the standard ‘Edit boxes’ on that Template Page. (To be honest I’ve found myself turning the majority, if not all of these off and completely rebuilding the pages with custom fields – it just gives you so much flexibility).

Finally, to add the field content to your template page, it’s as simple as adding the following:

<?php the_field($field_name); ?>

…obviously replacing ‘field_name’ with the name you assigned to that field you want to display.

I won’t go into too much detail because there’s enough information on the plugin website, including some tutorial videos to help get you going.

Oh, and one final thing – this plugin is free. Double bonus!

Addons / Extensions

At the time of writing there are currently two addons available for the small fee of $25 AUD each. This fee grants you use of the addons on unlimited websites, so it’s well worth it, especially considering how useful they are.

The first is the Options Page addon. When enabled this adds a tab, believe it or not, called ‘Options’ to your WP admin, which allows you to create a bunch of ‘site-wide’ fields. This is really useful for things like contact info, which might appear on a number of pages throughout your site.

The second is the Repeater Field addon. This does exactly what it says on the tin and is really useful for creating image galleries and lists of data. It also allows you to limit the number of repeating fields available to your users, but is flexible up to this limit. For example, if you have a limit of 5 then your users can add any number of fields between 1 and 5 depending on how many images / bullet points they want in their list.

The code is very slightly more complicated for this field, but hardly:

<?php if(get_field('gallery_images')): ?>

    <?php while(the_repeater_field('gallery_images')): ?>
        <img src="<?php the_sub_field('image'); ?>" alt="<?php the_sub_field('alt'); ?>" />
    <?php endwhile; ?>

 <?php endif; ?>

Conclusion

So far I’ve found absolutely nothing wrong with this great little plugin. It makes a developer’s life very easy and allows you to create very user friendly WordPress content management systems for your clients. In fact I think that’s the main reason I like it so much. It’s user friendly. And for non-tech-savvy clients trying to use WordPress, that’s very important.

Nice one Elliot.

Last week we attended an evening dedicated to opening our minds and gathering some tips on mobile usability. The evening was free and hosted by Northern User Experience, and these are my thoughts…

The main talk was by Kimberley Bottomley, a User Experience Manager at Aviva who has “spent a considerable amount of time researching [mobile usability] and learning about [it] in the past 12 months”.

The talk got off to a bit of a slow start, detailing some points which any good designer or User Experience professional should take into consideration on every project, whether mobile or not. However there were several interesting facts and figures to spark discussion amongst the group.

Here area few that I thought worthy of noting down (although I’m not certain of the source, sorry):

• 63% British users are not using smartphones
• Android is the leading OS in the top 6 European countries
• 73.4% of new Android sales in the UK are upgrades from non-smartphones
• Blackberry users vary enormously, from 16 – 24 y/o right through to all ages of corporate

What I think we can take from this is that there are still an awful lot of people not using smartphones (duh! I know) – But I think that we may be forgetting about these users far too easily at the moment – LESS THAN HALF OF BRITISH USERS DON’T HAVE SMARTPHONES. And by ‘smartphones’ I don’t mean that they don’t have access to the Internet on their phone, a lot of them do, but they definitely don’t have access to the powerful browsers that are available for the big OSs out there. That means that when we’re adapting responsive websites for mobile, or creating dedicated mobile sites, it’s still really important to consider what might happen if you accessed the website, for example, on an old Nokia.

The other very obvious point that we can take from the above is that Android is on the up, big time. Our industry may be in love with the iPhone, but 3/4 of people who are experiencing the mobile Internet in it’s full glory for the first time are using Android, which means if we want to suck all these new ‘customers’ into the idea of mobile browsing, and more specifically the use of Apps, we need to build Android versions too – for launch. Not as an afterthought.

One little note that I just want to add in here about the speaker is that it was evident that all the research was conducted for her employer, Aviva, which is perfectly fine because after all, that’s her day job, but it just brings into question how applicable the talk was to mobile user experience as a whole. If the focus of the research was around the ‘typical Aviva customer’, then it would probably be more eye opening to hear from an independent researcher who has looked at a much wider section of the population.

Having said that, there was one idea that I found extremely interesting: ‘Designing for Interrupt-ability’. If that term hasn’t been coined yet then consider it mine! ;) I think this is possibly an entire post in itself, but for now I’ll quickly summarise what this means.

Before I move on, here are a few more additional points that I picked up on from the rest of the talk:

• Customers aren’t very comfortable making transactions on their phones. How can we combat this? Save for later / email details to myself?
• Android users tend to use native buttons such as Menu / Back
• Users prefer Apps over using the browser, but aren’t really sure of the difference
• No one saves bookmarks on their phones
• Fewer people type web addresses straight into the browser on their phone, preferring to search Google instead

Designing for Interrupt-ability

No matter how advanced our phones get, they still have one single purpose: Being a phone. This means that at any time, night or day, mid-game or mid-purchase, there is a likelihood of us being interrupted by that all important (or no so important) phone call. This means that the mobile Internet and Apps are at a disadvantage compared to desktop browsing. Yes, there are also distractions when using your laptop or desktop computer too, but not in the same way as mobile.

When we’re at home we’re more relaxed, we sit at the computer for a specific purpose, and we are immersed and more focused on the task at hand. If we get a phone call we can grab the phone and still be on the Internet and it’s much easier to pick up where we left off. When using a smartphone out of the house there are many many more opportunities to lose concentration. Firstly, if you get a phone call, your screen switches and you have to put the phone to your ear (unless you’re one of these people who enjoys looking like they’re talking to themselves). Secondly, by the time you’re finished on the phone it might be time to get off the bus, or the train, or time for your meeting. On top of that, even if you aren’t on the phone it could still be time to get off the bus, or the train… you get the idea.

To summarise: Mobile users get interrupted. We need to do something about it. And I’m not sure what the answer is… it might be something clever like being able to track users who abandon a purchase mid way through and pushing a notification to them to complete the purchase after a set period of time, or it may be as simple as making more informed considerations on what they really want from your website and allowing them to access that content as quickly as humanly possible…

Designing for interrupt-ability was the most thought provoking idea that I took from this talk. It’s something that’s so obvious, but I really don’t think it has been researched and considered anywhere near as much as it could be. I’ll certainly be thinking about it in much more detail.

Northern User Experience is an informal community for people interested in usability, HCI, information design and all aspects of the user experience. Our membership is as diverse as the field itself, with developers, academics, usability specialists, accessibility experts and technical authors all represented. Whatever your interest in usability, we hope you will find something useful here.

1. Pods CMS

www.podscms.org

Just as the name suggests, Pods CMS is a content Management plugin for WordPress. Gone are the days of people using WordPress for your blog alone. It’s fast becoming one of the industry’s standard CMSs, and if you’re thinking about using it for this purpose, then this plugin is possibly the most powerful of all.

Pods lets you add and display your own content types, but unlike WP custom post types, each bit of content gets its own table. You can:

• Create Pods (tables)
• Create conventional CMS input forms within WP Admin
• Add custom menu items to WP Admin
• Easily loop though data
• Create detail pages
• Use custom code to query database

I use Pods on 90% of WP builds. It’s brilliant.

If, for example, you need a manageable page on your website which includes a list of team members with a photo and name, then there’s no choice other than to manage the page via a CMS. Features like this are standard in most CMSs, but getting a basic WordPress installation to do this right out of the box is no simple task. This is where Pods CMS comes into its element. Functions like this are so much more simple – you can even customise the WP admin menu and add quick links to your pods.

The level of support is excellent considering this plugin is completely free! Pods is well documented in the user guide and there are a number of tutorials by Jonathan Christopher. The Pods team also run and manage a Q&A forum.

If you currently use Pods, please help the team by making a donation: http://podsfoundation.org/donate/

2. Gravity Forms

www.gravityforms.com

Every websites needs a form. Well, almost. This might be a contact form, sign-up form, registration form, payment form – the list is endless. Gravity forms does it all, quickly and easily, and you don’t need to code a thing!

The range of features is amazing:

• You can quickly and easily create a form by dragging and dropping fields
• Use default styling or custom CSS
• Data stored in a database
• Email data – customise email content and format
• Segregate and export data
• Add-ons : Mailchimp, Campaign Monitor, Paypal etc (Push data to other services)

It isn’t free, but if you’re familiar with building forms then you’ll know that it can be a time consuming process. Gravity Forms does all the hard work for you, and with so many extra features the personal package is a bargain at $39 (£25).

However, if you just want a simple form then make sure you check out Contact Form 7. A free, more basic plugin for your WP site: http://wordpress.org/extend/plugins/contact-form-7/

3. WordPress SEO by Yoast

http://yoast.com/wordpress/seo/

As it says on the tin, WordPress SEO is our recommend plugin for optimising and customising SEO on your website. Of course, to begin with you need to always make sure your site is structured and built correctly, but then you can use a plugin such as WordPress SEO to make sure all your posts and page titles are correct and meta descriptions are optimised.

Features list:

• Post titles and meta descriptions
• Robots Meta configuration
• Canonical
• Breadcrumbs
• Permalink clean up
• XML Sitemaps
• RSS enhancements
• Edit your robots.txt and .htaccess
• Clean up head section

4. Google XML Sitemaps

www.wordpress.org/extend/plugins/google-sitemap-generator/

A simple but very effective plugin, Google XML sitemaps will generate an XML sitemap to help search engines to index your website or blog more effectively.

Sitemaps are useful for one simple reason: They make it much easier for a crawler (such as Google) to see the complete structure of your site, and in turn, allows them to find as much of the content as possible in order to rank your website fairly.

5. Google Analytics for WordPress

http://yoast.com/wordpress/google-analytics/

Tracking visits to your site can be extremely useful. Who wouldn’t want to know which sections are the most popular, how long visitors spend on your site, where they come from and what devices they are using? l’m sure I don’t need to detail out why you should have Google Analytics on your WP site, but if you’re still unsure, check out the video above to find out more on all the great features. Convinced? Well what are you waiting for? Install this plugin to quickly and easily manage Google Analytics from your admin panel.

6. WP Super Cache

www.wordpress.org/extend/plugins/wp-super-cache/

The speed of your website is very important but unfortunately it’s often something that’s overlooked, especially by the less experienced developers. Many people don’t realise that your Google ranking is actually effected by the speed of your site, so if that sends alarm bells ringing, then you can use this tool from Google to check how your website is currently doing: http://pagespeed.googlelabs.com/

WP super cache works by creating static html versions of your dynamic pages. These are then served instead of more heaver (larger file size) and processor intensive files. These files will be served to users the majority of the time, increasing the speed of your WordPress site and improving the user experience.

The plugin is very simple to use; you simply install it and turn it on. This is great for the less technically minded, however you also have the option of editing the ‘advanced’ options to take full advantage of all the settings and features that WP Super Cache has on offer.

7. WP Minify

www.wordpress.org/extend/plugins/wp-minify/

This plugin also focuses around speeding up your website. It is recommend by WP Super Cache to work in tandem, but it can also be used on its own.

The plugin combines and compresses Javascript and CSS files to improve page load times. This is really important (especially if you have several plugins installed) because most WP plugins have their own CSS and JS files on top of all the ones you’re using for your basic pages. So as you can see, requests to these files could quickly get out of hand without you even realising it!

To be completely honest, this may not drastically improve the speed of your site for one single user, however if you have a more popular site it will certaintly improve the performance when delivering your pages to 100s of users at once.

8. Disqus

www.wordpress.org/extend/plugins/disqus-comment-system/

Disqus is a comment system that’s been designed and developed to improve and replace standard WordPress comments. It has a wide range of features – two of my favourites being threaded comments and the option to login with your Twitter or Facebook account.

More features include:

• Threaded comments and replies
• Notifications and reply by email
• Subscribe and RSS options
• Aggregated comments and social mentions
• Powerful moderation and admin tools
• Full spam filtering, blacklists and whitelists
• Support for Disqus community widgets
• Connected with a large discussion community
• Increased exposure and readership

Disqus is used by a wide range of websites, Mashable being one of the most famous.

Note: If you use any other comment plugins they will automatically be disabled if you use Disqu.

9. Custom Post Type UI

www.wordpress.org/extend/plugins/custom-post-type-ui/

Custom post types and taxonomies can be extremely useful if you have areas on your site where you want to be very specific with the types of data that you’re publishing. This plugin allows you to easily create and manage these areas though a simple UI which gives you options to label custom posts and add tabs to the sidebar based on the post type. If you’re still a little unsure and need a bit more info then check out this video which walks you through an example:

Alternatively, read this tutorial which details how to use Custom Post Type UI:
http://www.wpbeginner.com/wp-tutorials/how-to-use-custom-post-types/

10. BBpress

www.bbpress.org/

BBpress is forum / bulletin board software from WordPress that can be installed as a standalone application or as a plugin. It’s designed to be simple, light, and solid, and can also be extended with plugins just like the standard WordPress package.

Forums and discussion boards can be a great way to drive traffic to your website and increase return visits from users. If you want lots of features and tools you may need to install a number of plugins, however if you want a simple clean forum adding to your existising WordPress site then this is the perfect option.

We hope you’ve found some useful hints and tips here, but if there’s anything that you think we’ve missed off please leave your suggestions and comments below.

It’ll come as no surprise to those who have been following the releases of this practical series by A Book Apart, that this is a really great little book. And by ‘little’ I mean exactly that. (It only took about 3 hours from start to finish, and I’m definitely not the world’s fastest reader!). But that’s by no means a reflection on the quality of the content.

Responsive Web Design is a very concise and to-the-point book on how to apply front end development techniques in order to make a single website adapt to be more easily viewed at multiple screen resolutions, and on multiple mobile and desktop platforms.

The book covers every step of the process, from the considerations that need to be made at the design stage, to progressively enhancing the functionality and content of the pages depending on the device that it’s viewed on. The chapters cover Flexible Grids, Flexible Images, and Media Queries; all the components needed to make your designs responsive.

It goes into (almost) the perfect amount of detail at every stage. It doesn’t get too bogged down in code, but shows just enough to explain the point, and Ethan writes with a tone of voice that’s engaging and light hearted – a definite contrast to some of the books I’ve read. And it makes a difference. I don’t have much time for reading, and to be honest I quickly get bored with books, no matter how useful they may be. Most of the time I’ll start a book and by about half way though I’ve already started skipping paragraphs and sections to get to the bits that I actually need to know, but this time I read every word. It was easy to stop and pick up where you left off, but due to it’s pocket-sized nature, you could easily finish it in one sitting if you really wanted to.

My only complaint, and in my opinion the only two places that the book lacked a little extra detail were in the Media Queries chapter, and in the Javascript section at the end.

In all fairness, the Media Queries were explained very well, and for something that can be a little confusing to get your head around they were made quite clear. I just feel that Ethan could have covered the benefits and uses of stringing queries together in a little more depth. It is mentioned, but almost brushed passed. All he says is this:

“What’s really exciting is that we can chain multiple queries together with the ‘and’ keyword:

@media screen and (min-device-width: 480px) and (orientation: landscape) {...}

This allows us to test multiple features in a single query, creating more complex tests for the devices viewing our designs.”

It would only have taken a paragraph or two more to go into a little extra depth and describe a couple of scenarios where this would be very useful, and for a book which makes a point of explaining every decision and giving an example of how it could be applied in ‘real life’, I was surprised how quickly the chapter moved on – especially considering he referred to it as really exciting.

My point on Javascript is also a little picky. There is a section right at the end which covers the image slider, or ‘carousel’, that Ethan implements on his example website, which works using jQuery. Now, this isn’t a book on jQuery, so it’s fine to go into minimal detail on this, but where I think the section lacks is on disabling certain functions based on the device you’re using.

Anyone who cares about user experience will know that jQuery animations can sometimes take a lot of processing power and are likely to run a bit slow on most tablet and mobile platforms. You also can’t take advantage of :hover animations as there really isn’t such a thing when using a touch screen (see our post on Designing for Touch Screens). The chapter talks about adding the following code to only load functions if the screen is above a certain size:

if (screen.width > 480 {
$(document.ready(function() {...};
}

…Which is great. However it would have been really nice if there was just a little more detail on targeting specific devices, rather than simply enabling it over a certain screen size. The reason I say this is because I’m not sure that targeting the screen resolution (alone) is the best solution to progressive enhancement. If you want to disable things on tablet devices then that means targeting a much bigger resolution than 480px, and then you start entering the realms of desktop computers and browsers that you most definitely do want to run the jQuery. I think this solution combined with specifically targeting the most popular tablets / mobiles could be the best option, and it would have been a useful final note in the chapter if it had been included.

All in all though I couldn’t recommend this book enough. It’s very intelligently written and is perfectly concise and very interesting. For anyone who is new to Responsive Web Design it will open your mind to exciting new possibilities, and for anyone who is already familiar with this method of web development it will almost certainly build on the knowledge you have, and introduce you to a better, more informed way of approaching your responsive projects.

As a finalt note, I’m glad that Ethan makes a point of explaining that this technique should not be used on every project. There have been a few arguments spark over the responsive ‘fad’ as some like to think of it, condoning those who support it on the basis that, like many of the latest advancements in web technology, it can be and will be abused. Despite Ethan’s book shouting about how great responsive websites are, he stands up to the fact that you should always consider other options and do what’s best for the client and their users.

For anyone who has already read this book – What do you think?