All posts in ‘Design’
Monday, 28 February 2011
Part 1 — HERE.
Part 2 — HERE.
This is what we know about our readers so far:
Now let’s focus on our readers with an 11-15 inch widescreen display. We need to lift up our shiny new signup box to the top where they can see it — without having to scroll down the page. We don’t want to lose them.
Have a look below:
Above the fold: the space on a webpage that is initially visible without the need to scroll down the page. This is where our signup icon needed to be, and as you can see, we moved our newsletter signup box from below the fold to above the fold — now it’s instantly and effortlessly visible to 99% of our readers.
We also added the same registration box, in the same position, to almost every page on our website.
During our website remodeling bonanza, we decided that the Facebook and Twitter boxes needed to be closer to our newsletter box. Moving these icons to the top has rounded up a lot more friends and followers for both Facebook and Twitter — but still, neither one have as many subscribers as our newsletter. What does that say about email? It’s still more awesomer.
We hope this helps!
Thursday, 17 February 2011
If there’s a part two, there must be a part one – PART ONE.
We’ve all heard the phrase “less is more”. It’s a great design principle, but not a good rule – because sometimes in some cases, less is just less. An icon that’s labeled “Newsletter”, what exactly does that tell you? Probably not a whole lot, unless you work with email marketing. Simplicity is great, but with our titles, we have to think about our readers – will they get it?
In this case, “Newsletter” is just not enough. We need it to be obvious – this is a newsletter that we send out, and you can subscribe to it – no extra thinking required of our readers. It needs to explain itself, and move our readers to action. We went with what’s called a call to action – “Subscribe to our newsletter”.
We have to avoid sending our readers on a clicking marathon from page to page to subscribe to our newsletter. We have to keep our readers on the same page as the blog. We can’t risk pulling our readers away from that precious blog content – and with todays HTML capabilities, it’s just not necessary. But utilizing that precious 11-15 inches of space at the top of your homepage can be a challenge. The buttons at the top need to be noticeable, not enormous. Sizing is important, you don’t want to push down other important icons into never-see land. Striking a balance between your important icons is what you want.
What happens though when you run out of space for your darling icons? We solved that problem by making an expandable registration box (below). That way the box stays out of the way when you want it to be out of the way, and is there for you when you need it the most.
From a website’s point of view, today’s internet is a very different place from yesterday’s. One word: mobile. Mobile devices have changed how we build our websites, and the change that they’ve begun is well worth the traffic that they generate. 4% of our visitors use a smartphone or tablet computer, that’s significant – significant enough to potentially annoy your readers with a stubborn signup box. Have you checked with Google Analytics lately to see how many people you may be annoying? If you want to use a fancy schmancy HTML expandable box or the like, make sure it works on iPhone, iPad, and Android devices. It pays off – and it thwarts website induced reader rage.
We’re almost there, now that we’ve made signing up a breeze and a joy, we can move on to the rest of the magic.Wait for part three in the coming days.
Monday, 14 February 2011
Ousting the ugly and ineffective and ushering in the new and effective is sometimes what you have to do to see a little newsletter growth. That’s exactly what we did in the last six months, and it’s what spurred some notable subscriber growth. I bet you want to know what we did…and you shall.
You know that moment when you do something just right and seconds later you realize how wrong it was before? I’ve coined a phrase for this – I like to call it “learning from your mistakes”.
Sometimes, make-shifting a sign up process is something you have to do. Thinking that our sign up process would do for now, Sarah and I realized that it didn’t really do anything. It was time for a little self criticism – we took a closer look at our registration process.
For the sake of attention span and simplicity this will be a three part lesson brought to you by I-Love-Email:
Part 1: Evaluate present registration process
Part 2: Simplify the registration process
Part 3: Optimize the registration process
With our makeshift sign up process, we simply didn’t get enough people to sign up – specifically from our homepage. A fairly large icon in the column on the right hand side, a tad on the low side but still fairly high up, seemed like it should have worked…
But like I said, it didn’t work. Our registrations were minimal – except the week we introduced the newsletter.
So the question was: Was it not obvious that we have a newsletter? Our visitors increase,d but our newsletter subscribers didn’t!
The answer to our troubles lay in Google Analytics, namely, the visitor statistics. We noticed a few interesting trends. This is what we found: At least 35% of our visitors use smaller widescreen computers – probably laptops. Remember when I said that the newsletter icon was a tad on the low side? That was the problem! With a widescreen laptop of a certain size, the icon is invisible! You would have to scroll down to see the newsletter icon. Well, if only we had listened to Analytics sooner.
We also reviewed the design we used at the time. It was an icon for signing up that linked to a page with a registration form. This was neither obvious nor simple.
In part two of I-Love-Email school, we’ll be learning how to simplify our registration process.
Monday, 24 January 2011
I’m sure this outlined box below is not a foreign sight to you, whether on a website or in an email, you’ve seen it. It probably looks something like this:
This is a small picture from TED’s newsletter, and the picture that went MIA is actually a small video link. Thanks to alt-text, it’s made obvious.
This is what we call an alternative text; a text that replaces a picture when it’s blocked or for some reason could not be loaded.
Why do we use them? And why use them in emails?
Alt-texts are not really meant for email, they’re mainly used on the web. The idea is that these texts should explain the picture missing or in question, rather than tell what the picture represents. So let’s say that the picture that is missing is a button, the alt-text should describe what the button means, rather than saying that it’s a button.
Alt-texts are excellent for visually impaired people; if your computer is configured to read web sites and text aloud, it will read the alt-text as well. This is one reason why decorative lines and graphic details should not have alt-texts: it just doesn’t work. There are more reasons why we don’t use alt-texts on the web today, but I won’t go into detail today.
What I’m really saying is that alt-texts in HTML emails do not always perform the same function; apart from visually impaired people. Here we use them almost exclusively because blocked pictures are so common.
If clicks are your goal, and if you want your recipients to load the blocked pictures, you need to think about how you phrase the alt-texts.
I’m not going to decide what’s wrong or right here, that will be up to you and your newsletter content. Try to be creative, think outside the bun. Remember that this is an email, not on the web; you can stretch the rules a bit.
Kjell & Company uses alt-text in their newsletter. I have to say, they do a great job of adding intrigue to blocked pictures. They have a lot of pictures at the top, but note how they resume the picture content with the preheader at the top.
They have also put the buttons in the newsletter as text on a background color instead of as pictures. The buttons will show even when the pictures are blocked. (Look at the lower right corner.)
The same goes for the big orange-colored price tags: they are also placed as stand-alone text.
If you typically send or work with HTML newsletters and do not use alt-text, give this a shot. It’s worth a try.
Friday, 17 December 2010
I have to say, I’m no big fan of Christmas cards. Fours years of working at the Post Office scarred me for life. Yes, it was a long, long time ago now, but still… I can’t stand looking at them.
So if you insist on sending a greeting to me, can you please email it? Oh, and no Santas.
Here’s some inspiration for all of you out there who can’t wait to send out those jolly email Xmas cards.
Here he is, the one, the only, the fake – Santa Claus! Directly from an 8-bit eighties computer game. If you click the little bird you’ll end up in Anna Yeaman’s Twitter account. Fun idea.
And here he is again, Santa! Nice header with a simple design.
This is also looks great, in all its simplicity. I don’t think we need much more than this, do we?
I like this one. A little different, animated speech bubbles, colorful, and… I don’t have to see a single Santa.
A big thanks to Campaign Monitor for all these examples!
By Christopher Månsson