Author Archive

Email Is (Still) Important And Here Is Why

Advertisement in Email Is (Still) Important And Here Is Why
 in Email Is (Still) Important And Here Is Why  in Email Is (Still) Important And Here Is Why  in Email Is (Still) Important And Here Is Why

Social media is more than a buzzword. It’s now a lifestyle decision for a lot of companies. Many individuals and organizations have abandoned a traditional Web presence (which used to mean a website and email address) in favor of a Facebook page coupled with a Twitter account.

So, where does this leave email? Has the @ symbol lost its meaning as an address, and instead become the signifier of a Twitter name? I think that we need to radically reconsider our approach to email in this changing landscape and understand that it can be a powerful tool when leveraged correctly.

Love-for-email in Email Is (Still) Important And Here Is Why
Have we lost our love of email?

Changing Habits

While I disagree with the assertion that “social is killing email,� evidence shows that email use among the younger generation is declining: a 59% decline among US teens between December 2009 and 2010, according to comScore. In the same study, only the over-55s had increased their use of email. This is especially significant if it represents a long-term shift away from email and towards social media and SMS as preferred methods of communication.

Losing Faith In Email

Email has been around forever (it predates the Web), so it’s not surprising that, for some, it has lost its lustre. For one, it’s not exciting enough; other social media platforms have come with fanfare. Twitter has hosted world headlines, and Facebook has been the driving force behind many campaigns. In 2009, a Facebook Group even succeeded in getting Rage Against the Machine’s single “Killing in the Name� to the UK’s “Christmas number one� spot ahead of the X Factor single.

This level of drama appeals to business types who like their social media “sexy,� and for this reason Twitter and Facebook push all the right buttons around the boardroom table. By comparison, an email marketing campaign may seem tired and old fashioned.

Email4 in Email Is (Still) Important And Here Is Why
Email in a social media landscape.

For another reason, it lacks tangible value. Valuations of Internet companies (and particularly social media giants) have skyrocketed. In May of this year, LinkedIn was valued at $10 billion (roughly 41 times its 2010 net revenue). Facebook is still a private company, but rumors of a public offering in 2012 include a valuation that could reach $100 billion. While many in the industry see this as a portent of a second dot-com bubble, for a lot of businesses it is simply a compelling reason to invest in these services.

Email is non-proprietary, which means that no one is pushing its agenda, and, unlike the LinkedIns, Groupons and Facebooks of the world, it cannot attract a market worth. Value theory tells us that if something has no market value (such as air, water, etc.), it is often taken for granted. I think email has suffered a similar fate.

Finally and perhaps most significantly, it lacks the pack mentality that most of social media thrives on. Despite the growth of marketing, email is still mostly private. No one knows which lists I am subscribed to or who I write to from the privacy of my inbox, even if by virtue of Facebook they know what I ate for breakfast. In stark contrast to the insidious evils of “like� culture, my email behavior does not broadcast itself all over the Internet, which for marketers is a decided disadvantage.

Email Is A Currency

Email3 in Email Is (Still) Important And Here Is Why
The currency of email.

Everyone Has It

It’s true that email is fighting with other services for online communication, but it is still ubiquitous in a way that other social media networks are not. As of May 2010, 39% of US Internet users had never used a social network, compared with only 6% who had never sent or received an email. If you want to reach the majority of your audience, email is still the safest bet.

It’s a Unique Identifier

It’s worth noting that people tend to be members of multiple social media websites simultaneously, with varying degrees of involvement, but they usually have only one or two active email addresses. The email address remains the unique identifier online; you use it to log into almost everything, so it would take a lot for it to become obsolete.

It’s a Coveted Resource

According to research conducted by the Direct Marketing Association, email marketing is expected to generate an ROI of $44.00 for every dollar spent on it in 2011. This is due in part to the fact that more customers are engaging via email: 93% of email users have opt-in relationships with a consumer brand, as opposed to 15% on Facebook and 4% on Twitter (according to Chris Brogan, president of New Marketing Labs).

This value has been recognized by most social media networks. Facebook launched Messages, which provides each user with an @facebook.com email address, because it understands the importance of email in the social graph. Google+ is also tying email more directly into social media activity, blurring the distinction between the two.

Overcoming Obstacles

I hope I’ve managed to convince you that email is still a powerful part of your social media arsenal. But before you leverage it to the best of your ability, let’s understand some of email’s most notorious limitations.

Email2 in Email Is (Still) Important And Here Is Why
Understand the limitations imposed by email.

Spam

This incarnation of junk mail is relentless. It plagues users, who must be cunning to distinguish genuine mail from hoaxes. Email clients require elaborate algorithms to sift the wheat from the chaff. And perhaps most vexing, Internet marketers have to struggle to get anything commercial through to their subscriber lists.

Unfortunately, Twitter and Facebook are not safe havens either. Business folk are not the only ones taking a bigger interest in social media; scam artists are, too. As of April 2011, spam alone occupied seven full-time employees at Twitter. This is a drop in the ocean compared to email (over 73% of all messages sent are spam), but it might be a relief to hear that we are experiencing the lowest levels since 2008; at least things are looking up!

Broadcasting

Social media networks encourage multi-way conversations between many users. Even those who are not involved directly in the conversation can often “overhear� what is happening. Email is much more direct; it is usually between just two people and does not invite additional participants. Understanding this limitation of email will make it your greatest ally. Unless an email is personal, it will not get a response; however, it is one of the best ways to deliver direct messages, such as newsletters and alerts, which do not invite discussion so much as action.

Presentation

HTML email is far more effective than plain text for marketing, but you’ll need to know the tricks to make it look good across different browsers. Writing code for email usually means going back to 1998, which is enough to put most people off it entirely. Luckily, Campaign Monitor and MailChimp offer some great templates to get you off on the right foot. But make sure to use a tool to test the email across different clients before clicking the “Send� button, or else you could do more damage than good.

Making Email A Part Of The Conversation

Bonnie Raitt once sang about giving people something to talk about, and that’s what you have to do with email marketing! Spark that discussion and keep it going on your blog, Twitter and Facebook.

Rien van den Bosch

Email is difficult to ignore. Unlike social media streams, in which content is disposable, an email demands your attention until it is read. Use this to your advantage: write newsletters; push your most engaging content in front of your users; adapt your offers so they match your audience.

Email1 in Email Is (Still) Important And Here Is Why
Use email to provoke conversation.

Also, email is a much calmer medium. Inbox zero is a difficult (yet achievable) goal, whereas staying on top of every stream, tweet and status update is not only stressful, but well nigh impossible! With email, you can take time and give thought to your words; you can dedicate some time to the person you are communicating with. Email not only gives your thoughts some room, but gives you time to write them down clearly.

If you’ve heard of the Slow movement (which advocates a cultural shift toward slowing down life’s pace), then you might want to consider how email fits into Slow Marketing. Is it possible that cultivating brand advocates over time who have more than a fleeting interest in your product could bring long-term benefits? Could you talk to these customers in a more respectful way, one that leads to substantial, meaningful conversations?

Think Twice Before Hitting “Send�

If you’re not put off by the shortcomings of email and you find 140 characters more limiting than liberating, then you’re well on your way to incorporating email in your social media campaigns. Chances are your email subscribers are your most loyal audience, so treat them with respect (which means offering valuable content, and not too often), and they could become your greatest advocates.

While reams of articles are devoted to creating social email campaigns, here are just a few tips to get you started:

  1. Have something to say.
    Sounds simple, but while your daily musings are permissible on Twitter, your email audience will be less forgiving.
  2. Make it digestible.
    Email doesn’t limit your word count, but you’ll need to apply some editing of your own. If it’s a long article, include an excerpt and link through to the website for the full story. This has the added bonus of enabling you to track the most popular items.
  3. Be regular.
    Set a schedule of emails that you know you can keep to. A monthly or quarterly newsletter can be a good guide.
  4. Be personal.
    Tailor your tone to the audience. Most email services offer invaluable segmentation tools. You wouldn’t speak to your spouse the way you talk to your bank manager; neither should you address your entire audience the same way.

Don’t forget that email is only half of the conversation. Find out where your readers hang out (you can use their email addresses to locate them), and continue the discussion there!

(al)


© Felicity Evans for Smashing Magazine, 2011.


Falling for HTML5: Finding Love in the Little Things

Advertisement in Falling for HTML5: Finding Love in the Little Things
 in Falling for HTML5: Finding Love in the Little Things  in Falling for HTML5: Finding Love in the Little Things  in Falling for HTML5: Finding Love in the Little Things

I’ve lost count of the number of posts that have been written about the big features of HTML5: amongst the most anticipated being rich media (video, audio, canvas) and JavaScript APIs. However, call me a woman of simple tastes, but this is not the sort of thing that gets me swooning. What does? The small additions to the spec that will make the world of difference to the way I code day-in, day-out. This is the stuff fairy tales are made of.

The ugly duckling

HTML has had a troubled past. It was never really designed for what we are now accomplishing with it. This is in part a testimony to its flexibility and adaptability, but there have been inevitable growing pains.

So what was it originally intended for? Well it’s there in the name: Hyper-Text Markup Language. Yes, text; hyper-text to be more exact. Not layout, or images, or video, or fonts, or menus — or any of the other frippery that it now incorporates.

All these techniques started as “hacks� — ways of extending the language which were not accounted for in the original spec. Some of the hacks were uglier than others. For example tables for layout (eek!) were a workable (and reliable) way to manipulate the display of information. Similarly, sIFR and other JavaScript techniques often account for things that would more naturally be handled natively by the browser, but at the time were not.

The handsome prince

What we need is someone to come to our rescue. In steps HTML5.

The spec is full of ‘a-ha’ and ‘of course’ moments, and that’s not a surprise seeing as one of its founding design principles is that of paving the cowpaths:

“When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing
something new.�

— HTML Design Principles, W3C Working Draft 26 May 2009

What this means on the ground is that many of the hacks which are used to bend the existing HTML Doctype to our will are now being legitimised in HTML5. Let’s take a look at three examples which are guaranteed to make every front-end developer smile:

The <a> element

This little beauty is fundamental to how the whole web operates, but up until HTML5 it has been very limited. Limited, in fact to being solely inline. Want to create a large clickable banner which wraps around a title, image and text? Well, you’re out of luck. plain ol’ HTML4.01 won’t let you — not without JavaScript that is.

However, now that the <a> tag has been declared a block-level within HTML5, there is no end to the elements you can wrap it with. You can confidently (and legitimately) have your <p> and link it too!

Forms: the place-holder

Web forms are complex things, and we have developed a number of JavaScript add-ons to make them more usable: date pickers, auto-completes, required elements, validation. A lot of these have a new home in HTML5 but I’m going to focus on one common technique: placeholder text.

This is used where you have a text field but you want to prompt the user — either with the format you would like the text entered (such as a date) or with an example. It is sometimes used in-place of a label when space is premium. Up until now, using placeholder text has required a JavaScript function that auto-clears on focus, and reinstates when the element loses focus (if it has not been replaced by user-entered text). Quite a complex task, one which is now accomplished by the following snippet:

<input id=�examples� name=�examples� type=�text� placeholder=�Enter the things you love about HTML5� />

Html5falling in Falling for HTML5: Finding Love in the Little Things
The placeholder attribute removes the need to add JavaScript to input elements

Section element

Have you ever run a validation on a page and died inside when the following error has come back?

“WCAG v1 3.5 (AA)] Nest headings properly (H1 > H2 > H3â€�…”

It might be just me, but this error is particularly hard to fix. Imagine a scenario where you have a main column with heading levels inside the content, followed by a right-hand column containing featured items e.g.

<div id=�mainCol�>
<h1>Main title</h1>
<h2>Secondary title</h2>
</div>
<div id="featureCol�>
<h4>Title of feature</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque</p>
</div>

Without knowing what content will be entered in the main column, how do you choose the correct level of heading to start the following column with? You could play it safe and use an h2, but does this really signify the correct semantic importance of this content? Probably not.

HTML5 introduces something called a section element. Each section has its own hierarchy, so you can now have multiple h1s on a page. Do I hear you saying ‘a-ha’? As well as eliminating the above error, this also means that content can be more easily reused. For example, when using a CMS, the modules and components can be reordered on a page without having to consider how this might upset the existing hierarchy. Genius.

Happily ever after

Rings3 Optimised in Falling for HTML5: Finding Love in the Little Things

The best news by far is that we can start implementing many parts of the HTML5 spec right now. This is due to another founding design principle; graceful degradation:

“On the World Wide Web, authors are often reluctant to use new language features that cause problems in older user agents, or that do not provide some sort of graceful fallback. HTML 5 document conformance requirements should be designed so that Web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.�

— HTML Design Principles, W3C Working Draft 26 May 2009

That means no more waiting for IE6 to fall of its perch, or constantly asking ‘is HTML5 ready yet?’ like the impatient child in the back car seat. It means continuing to support IE6 (for most of anyway) but shattering the myth that a website should look exactly the same in all browsers. It means carefully considering which HTML5 elements to use, which CSS3 selectors and properties to adopt to ensure we are building websites for tomorrow, not today.

Changing habits

In the short term it’ll mean a bit more work for us in the templating process, and we might need to adapt our workflow accordingly. Here are some questions you might need to ask yourself:

  • Have I adjusted my estimates to allow for adapting the design in different browsers?
  • Have I given myself enough time during build to familiarize myself with new processes and techniques?
  • Have I set the right expectations with my client / the designer / my manager about how the website will look across different browsers?
  • Are there few enough users to degrade support for IE6?
  • Do I need to include JavaScript to add support for CSS3 and HTML5 features in older browsers?

It might seem like a lot of hard work, and something to be put off, but ignore the changing landscape at your peril. Besides, you’ll have plenty of time on your hand as soon as you stop slicing up all those images to add rounded corners, drop shadows and gradients to your design!

So how will this fairytale end? Crack-open your favourite code-editor, type “<!DOCTYPE html>â€� and you get to write it…


© Felicity Evans for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


When A Thousand Words Is Worth A Picture

Smashing-magazine-advertisement in When A Thousand Words Is Worth A PictureSpacer in When A Thousand Words Is Worth A Picture
 in When A Thousand Words Is Worth A Picture  in When A Thousand Words Is Worth A Picture  in When A Thousand Words Is Worth A Picture

Good design speaks for itself, right? Unfortunately, that is rarely the case. Most of us don’t have the privilege of designing for ourselves; we design for clients, clients who have their own taste and ideas, clients who ultimately need to be persuaded on why we’ve made certain decisions. Good design doesn’t speak for itself; it needs an advocate.

This article examines both why design requires justification and how you can go about providing it in a way that is clear and understandable. While we’ll focus on visual design, the principles described here are applicable to any creative process or endeavor. Indeed, we learned most of these lessons while presenting Web interfaces and prototypes to clients, which took place after the visual designs had been agreed on.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Beyond The Talk

There is a saying oft quoted by professionals:

“Those who can, do; those who can’t, teach.”

— George Bernard Shaw, Man and Superman

I disagree with the premise of this statement, but I do sympathize with its tone. It is borne of the frustration that comes from the separation between the practice of a discipline and its theory.

Web design is to some degree immune from this criticism, being an extremely practical discipline by nature, and also a very new one. But we don’t have to look far to find university professors teaching students how to design layouts using tables!

At the other end of the spectrum, we have the salespeople. These people may not be great at precise explanation, but they can certainly put forward a compelling argument. Ever sat in on a sales pitch and barely recognized the product being promoted? By the time the salesperson was through talking, you were convinced that the CMS could take you to the moon. I once heard this described as “truth massage.�

Wasp in When A Thousand Words Is Worth A Picture
The WaSP InterACT (featured) and Opera Web standards curriculum were created to address the problem of institutions getting out of step with the Web industry.

While the full-time teacher (and even full-time salesperson) certainly have a place in the industry, explaining our designs is too important a task to leave to professional “talkers.�

We need to reconnect the practice of design with the theory of design. To do this, we need to learn the words and arguments for making a strong case for our designs.

The Importance Of Communicating A Message

“Marketing without design is lifeless, and design without marketing is mute.”

— Von R. Glitschka

Despite what many designers think, “marketing� is not a dirty word. We can learn much from the advertising and marketing industries about the importance of communication. Some advertising is as subtle as a sledgehammer, practically screaming at the user “Buy now!�; nevertheless, a great deal of thought went into how each message would be perceived and what would convince buyers most effectively.

When it comes to Web design, communication tends to be a much subtler affair: a delicate balance between satisfying users needs and delivering on business objectives. Here, design can play a key role by simplifying processes and persuading users.

Consider the registration form. Usually, business objectives demand as much information from the user as possible, so that the company can streamline and direct its marketing efforts. However, users are reluctant to supply information about themselves and are put off by long forms.

In this instance, trends dictate that the user experience wins out; registration forms now commonly consist simply of an email address and password. But business objectives are not entirely dismissed either: the reduction in effort to sign up translates into more registered users for the website, and people are generally becoming more willing to submit their email address. Plus, a short form fits neatly onto most pages, grabbing the attention of users when they are most receptive — for example, after having just read an interesting article.

Tumblr in When A Thousand Words Is Worth A Picture
The micro-blogging platform Tumblr epitomizes the simple sign-up form.

Design Doesn’t Just Happen

Design is itself a process of deduction. It involves a number of decisions, both conscious and unconscious. During this process, the designer dismisses some ideas as unworkable and pursues others in order to arrive at a solution.

But this process is completely opaque to the client. The client likely views the design not as the outcome of an in-depth process, but as a response to the brief, merely a visual representation of the constraints and considerations set before the designer. As the designer, part of your job is to educate the client and reveal the design process to them.

If you fail to do this, you risk reliving the scenario parodied The Oatmeal’s post on “How a Web Design Went Straight to Hell.� In short, what happens is that client (rightfully) wants some input into the process, so they make suggestions or improvements. But they don’t fully understand the reasons behind your design choices, and so their “minor tweaks� take the website further and further away from its purpose. The design suffers, the designer gets exasperated, the client feels unappreciated and the relationship breaks down. Sound familiar?

Oatmeal in When A Thousand Words Is Worth A Picture
The Oatmeal comic describes how poor communication leads to Web design hell.

As designers and Web professionals, we needn’t be afraid of criticism. Good design stands up to criticism, because it is more than a matter of taste. View criticism as an opportunity to explain the reasons behind your decisions, to invite the client into the design world so that they feel like a part of the process.

If you treat criticism this way, then both you and the client will benefit. The client begins to articulate “problems� with the design in language that you can respond to. Instead of just saying, “Make it green,� they might now say, “The red feels too dominant, and we want to push the environmental benefits of our product, so I feel a more natural color is needed. Perhaps green?� Similarly, you will be less precious about your designs, understanding that they will be open to change unless the arguments behind your design decisions are convincing.

Learning The Vocabulary

If we are to explain our designs to clients, then we need to know the language. Translating a visual medium into words is not straightforward. Designers suffer from being so well versed in the language of design that they struggle to articulate it to others. To them, it just “looks right.�

The second difficulty faced by designers is assumed knowledge. They forget that much of their understanding of design comes from past experience, and they can become impatient with clients who are resistant to their suggestions.

In these situations, going back to the basics — i.e. the elements and principles of design — can be helpful. These basics are the “fundamental ideas about the practice of good visual design that are assumed to be the basis of all intentional visual design strategies� (from Wikipedia). A few are listed below:

Principles in When A Thousand Words Is Worth A Picture
The elements and principles of design.

You might wish to familiarize yourself with these elements and principles, although you very likely use them liberally in your designs already. For example, white space is really an expression of balance, because it affords each element enough space to have the right amount of focus. Similarly, we draw on proximity when designing forms to make clear the relationship between labels and inputs.

Understanding the principles and elements of design can also help in the design process. When assessing your options, you are able to fall back on more than “It just looks right.�

Making A Convincing Argument

Ultimately, if we are going to persuade clients of the value of our designs, then we need to make convincing arguments. Clients are people, and people have biases; so, the best way to convince them is to frame your argument in the right context.

Clients usually have various pressures put on them, and have to deal with various expectations of the website. Understanding these expectations from the outset will help you at each stage of the process, including the design stage. Some expectations will be formalized as objectives, which should be documented and serve as the basis of the design brief; other expectations might be politically motivated and therefore more difficult to identify.

While I don’t advocate playing the political game, spending some time understanding your client’s motivations will pay dividends as the project proceeds.

Broadly speaking, motivations fall into five categories:

  1. Usability and accessibility,
  2. Return on investment (ROI),
  3. Return on engagement (ROE),
  4. Deadline-driven,
  5. Financial.

Depending on the dominant factors in a project, the client will be sympathetic to certain solutions and hostile to others. Let’s look at one factor in detail.

Usability and Accessibility

These tend to be a strong motivator with government, not-for-profit and service-oriented clients, usually stemming from a combination of legislative pressures and a desire to be inclusive to all audience segments. Of course, usability and accessibility should be core considerations in all projects, but they are rarely client-driven.

In such a case, Flash and other highly interactive technologies could be dismissed out of hand for not being accessible. This will also have a bearing on decisions related to color, font and clarity, which in turn will have a huge impact on the overall look and feel of the design.

Understanding this from the outset will help you present the design in the right framework and thus make the design appeal more to the client.

Presenting Your Case

Always present a design to the client in person (or by remote conferencing when that is not possible). Never just send it as an attachment to an email, otherwise you will:

  1. Look incredibly unprofessional,
  2. Have no control over the environment (or mindset) in which your design is viewed.

Once you have set aside a time to present your design, how should you proceed? The first thing to do is set clear expectations for the meeting.

Whether you like it or not, the way you present a design sends a message. For example, if you show up at a kick-off meeting with professionally printed boards of design ideas, you will be sending two conflicting messages, because no matter how much you talk about “sketching out� ideas and “exploring� concepts, your boards will be communicating something completely different. The danger here is that the client gets hung up on what they see, which can derail the project in later stages.

As a designer, you have many tools in your arsenal: wireframes, mood boards, sketches, scamps, flat designs, HTML templates and even the backs of napkins. Pick the method that conveys the right amount of professionalism, while offering enough flexibility.

And remember, whatever expectations you have for the meeting, make sure to communicate (and agree on) them before a single design is made.

ShowCover Aspx in When A Thousand Words Is Worth A Picture
Dan M. Brown’s book Communicating Design focuses on those deliverables (wireframes, concept models, site maps) that serve as the primary communication tools between designers and clients.

The second thing I find really helpful, closely related to setting expectations, is giving the client a task. Believe it or not, clients actually want to help. But like a wayward child in the kitchen, this help can sometimes be more damaging than constructive.

The best way to do this is to bring the client on board with your own goals. Talk them through the design brief and how you have answered it, or reiterate your overall concept to them. Invite the client to look at the design from this standpoint and to use it to shape their comments. They should consider themselves the website’s quality control officer, pointing out where you might have veered from your own principles. If you do this, then you are far more likely to hear the sort of helpful criticism we spoke of earlier.

To Recap

  • Remember, your design doesn’t speak for itself. If it is to stand up to scrutiny, then it needs an advocate.
  • In explaining your design, resist the temptation to use meaningless catchphrases. Instead, use plain, easily understood language.
  • If possible, include your client in the design process. Walk them through the process you took to arrive at your decisions.
  • Don’t be afraid of criticism, because good design is more than a matter of taste.
  • Don’t be precious with your design. Be prepared to change elements that you cannot make a good argument for.
  • Translating a visual medium into words can be difficult. But the principles and elements of design will help you articulate this visual language.
  • To make your argument convincing, frame it in the right context. Understand the pain points, and justify your design in these terms.
  • Always present your design in person, and ensure that any expectations are communicated (and agreed on) before a single decision is made.
  • Finally, be proud of your work. When you’ve finished speaking, give it plenty of space to say a few words of its own!

Further Reading

(al)


© Felicity Evans for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress