BlogmyQuery – BMQ

Advertising has always had an uneasy relationship with the media because of ethical considerations on both sides of the printing press. On the one hand, journalists are reluctant, quite rightly, to be seen as under the thumb of an advertiser, and on the other side, advertisers don’t want to be seen to be enforcing their views on the free press.

The relationship between the media and marketeers is the greatest sham marriage of all time: convenience, rarely love. We need each other. Writers need to be paid, and people making products need to be paid too. That being said, the journalism profession has been somewhat eager to hand a lot of control of their content to advertisers for some time now.

The invention of the Web and the democratization of the publishing process have meant that audiences and readerships have become dispersed. In particular, the last 20 years have been difficult years for the media because changes in publishing came at the same time that everyone started to herald the death of print and the looming salvation of the trade by citizen journalists.

That caused publishers to drive down the price of ads, pack their websites full of bells and whistles and generally devalue their content. It’s because we’ve had this mindset for at least the past 10 years, if not 20, that we often find ourselves with absolutely irrelevant advertising which burns holes in our eyes when we try to read the smidgen of content that’s actually left on the page.

Of course, it’s not all bad news… just mostly bad news.

Mobile Advertising Is Big Business

First things first, mobile advertising is a very important industry in its own right. The sector is predicted to be 3.5 times more popular with marketeers by 2016 with the growth of mobile commerce already up 300% (PDF) from the previous year (figures relate to the UK).

It’s a business that analysts are expecting to grow greatly over the next few years, as the following data shows (Mobile Advertising Revenue by Region, Worldwide, 2010-2015 (Millions of Dollars), according to Gartner via mobiThinking.):

How Do The Users Feel?

Although you may often notice many people on Twitter getting antsy about mobile advertising or advertising in general, the research tells that users do pay attention to mobile advertising. In May 2012, Google partnered with analysts at Ipsos to find some rather telling statistics about mobile advertising and consumers:

• 84% of mobile users notice advertising;
• 31% of smartphone users have bought a product in response to a mobile ad;
• 56% of users have performed a search related to an ad they have seen on a mobile device — compared to 51% for TV, 41% for magazines and 34% for billboards.

In his article “Nielsen is wrong on mobile“, Josh Clark said:

“First, a growing number of people are using mobile as the only way they access the Web. A pair of studies late last year from Pew and from On Device Research showed that over 25%of people in the US who browse the Web on smartphones almost never use any other platform. That’s north of 11%of adults in the US, or about 25 million people, who only see the Web on small screens. There’s a digital-divide issue here. People who can afford only one screen or internet connection are choosing the phone. If you want to reach them at all, you have to reach them on mobile.”

The question for all parties involved is how to meaningfully integrate advertising into mobile experiences to ensure a healthy balance between user’s needs, publisher’s requirements and advertiser’s interests. Also, the people who facilitate the serving of ads care about getting the maximum number of people to click on the ad directly. This is where it’s getting difficult.

See also “The Mobile Performance Landscape” by Affiliate Window. Large preview (PDF).

Relationship Status: It’s Complicated

The relationship between advertiser and publisher is not without mediators. In the theoretical world, there are only three players (advertiser, creative, publisher), but in the wild, there are a lot more characters to factor into the equation.

Rob Flaherty, who has also written extensively on and tested some of the technical solutions to the problems presented by responsive design and advertising, points out that the relationship passes through as many as six actors before appearing on our devices.

This means that the theory of responsive design must also meet with the pragmatism of existing ad management solutions and requires advertiser’s willingness to change the existing model. And even if we manage to meet all of these requirements, we’re still assuming that the reader isn’t going to be annoyed by the ad — which, no matter how we deal with it responsively, is still going to take up a lot of screen real estate — and that’s not something that readers are looking forward to.

Problems

It’s not just publishers who are affected by this change in the way that ads are sold. It’s also the designers behind the websites, apps and digital products that advertising is sold on. Ultimately, it’s down to us to make sure that:

• Design looks good
  After all, aesthetics are still at the heart of design.
• Design is functional
  Form follows function. We need the ad to work nicely across all of our platforms.
• Design is helpful, and not distracting
  The focus of the experience should be the content, not the advertising.

Let’s discuss each of these issues in more detail.

Looking Good

The main complaint about advertising on the Web is that it usually looks terrible — distracting, disturbing, almost ridiculous — in online magazines and blogs. Even if we discount the ubiquitous Google Ads products, we still can’t ignore the numerous flashing boxes, animated ads or complete takeovers of all the white space that are on a disproportionate number of many websites today. No wonder that many of us use an ad-blocker to avoid all these flashy distractions when reading online.

Essentially, in terms of the actual aesthetics of the ads, most of us will never have any say — that buck stops with the marketing department of the advertiser. However, designers and publishers should work together to make sure that a sensible strategy and the design of the website go hand in hand.

Take the aforementioned website takeover as an example. Although it is usually the most valuable of all the ad options, it is also the worst possible outcome in terms of design. All of that wonderful white space that you wanted to include into a beautiful front page design is, in just a few clicks, swallowed into the oblivion of an airline ad wrapped around your entire layout.

More importantly, these ads, which are usually extremely large and often animated, are so hefty in the actual size and performance that they often cause the browser to slow to a snail’s pace, hence significantly impairing user experience. So the ad not only robs publishers of a reader, it also robs the advertiser of the almighty click. Obviously if the advertising never loads, nobody sees it.

Being Functional

Being functional is obviously quite important, and it’s here that designers have been turning their attention to advertising. Late last year, Mark Boulton wrote a formative piece on responsive advertising, which really put the debate into the context of the designer’s world.

In his article article on responsive advertising Mark Boulton suggest to sell advertisers ad packages rather than a specific ad slot.

Some of us have been busy adapting, and that’s great. While everyone else has been coming to grips with cat videos and memes, we’ve been making sure those cat videos will fit onto all of their screens neatly.

Responsive design is now in a position where websites can look as if they were intended to be seen only on a mobile device or only on a desktop. Our world is great. Unfortunately, the advertising world hasn’t yet worked out quite what it’s going to do about that.

The problem, as Mark rightly points out, really is that advertisers pay for an ad space rather than for having their ad on a website. Although the difference is linguistically subtle, the implications are significant.

Currently, an advertiser is handed a rate card and is told that it will cost them X amount to have a vertical skyscraper ad on the front page’s primary sidebar. This is a system that works perfectly until that sidebar disappears when you look at the page on your mobile device. All of a sudden, an advertiser realizes they’ve been conned, and that a relatively large chunk of visitors never get to see the ads because they read them on mobile devices.

Of course readers are easily distracted, and if the website is blocked by a large annoying advertisement, they might want to check other similar online resources instead. If we try to solve our above problem by simply whacking a 160 × 600 pixel image into a mobile website, we will lose a lot of readers. Equally, if we scale it down to a more manageable size but serve the same ad, we’re going to lose a lot of advertisers when they realize no one can read that miniature text that looks fine on large desktop screens.

Let’s Not Distract The Readers

The main focus of a website should always be its content, and as far as possible, it is our job to stop readers from being distracted by things other than the content. However, that’s not something most traditional publishers are doing at the moment. Take this table for example:

Those story to ad ratios are alarmingly high. Particularly interesting, is that the UK broadsheet and the US broadsheet are alleged to be in the most financial trouble.

As an interesting side note, an equally telling figure is the astronomically high number of stories on the front pages of news websites. They are jam packed with stories and links, which all demand attention and detract from the overall reading experience.

We can’t carry on our publishing or design careers being continually pushed around without using well-reasoned, informed arguments to get clients a better end product. There must be a better way to marry great design and reliable publishing with the advertising world.

Solutions

There has been a fairly lively discussion of some of the approaches that advertising could take in an era of responsive design. The main contributors have been Mark Boulton, who initially floated the idea that there should be a new way of handling Web advertising in “ad packages”, and Paravel’s Trent Walton.

Mark Boulton’s Idea: Packages Rather Than Spaces

Boulton first championed the idea of a responsive advertising approach back in the latter half of 2011, when his company, Mark Boulton Design, had been working on a redesign of a major sports network website. He came up with the idea that you could possibly sell advertisers a package rather than a specific ad slot.

As mentioned earlier, there’s really very little distinction between these two approaches in terms of linguistic value. However, when it comes down to the numbers, in a responsive world, it makes a huge difference.

Mark notes that the world of advertising is pretty complicated, and not everyone wants a banner ad that simply sits there and looks pretty. Most advertisers actually want some sort of interactivity: from animated GIFs right through to the increasingly popular type of ads where two separate ad spaces interact with each other.

Trent Walton Gets In On The Game

While being the biggest proponent of a responsive advertising solution, Mark Boulton is not the only one looking for a solution. Many people are. Including Trent Walton, who wrote a response to Boulton’s original blog post raising some concerns (but also adding praise) to Mark’s approach:

“What happens if ads become fluid and text is designed into the images or movies? Readability will certainly suffer, as will clicks. I wonder if advocating a similar image + HTML text approach much like The Deck or Fusion Ads would be a possibility. That may be a lot to ask, but if things need to be redefined, let us not be short-sighted.”

In fact, images usually don’t work very well on small screens. The main problem is that images don’t scale well across devices. A banner ad which is very legible at a certain size won’t look optimal on all mobile devices. We can’t create a number of ad assets for the various resolution and at some point rescaling existing ad images will be necessary. Preparing ads in basic “image + HTML” format might be a more appropriate fit for responsive websites but would require the advertisers to be more flexible about the ways the ads behave in the responsive layout.

Josh Clark’s Approach

While working on their redesign of People Magazine’s mobile website, Josh Clark’s Global Moxie encountered the problem of advertising and started to think of ways around the problem:

“Traditional expectations continue to apply: advertisers want ‘above the fold’ banner ads, but those usually choke out content or flick by so fast you don’t see them. Both the advertiser and the reader are poorly served. I came up with a new ad format to try to address this.”

Instead of experimenting with existing ad models, Josh Clark came up with a new one. They created what they call “snap banners,” which are essentially a temporary model that closes the gap between where responsive advertising is now and where we should be in a few years time.

Josh Clark introduced snap banners. Initially, the banner is fixed to the bottom on a mobile device (left). When the user scrolls, the ad fixes into a “normal” position (middle) and then expands to full screen when clicked (right). Large view.

Snap banners solve the problem of the advertiser wanting to be “above the fold” and the user not wanting to see ads everywhere that they go. Initially, the banner (just an image) is fixed to the bottom of the browser window on a mobile device. When the user scrolls, the ad eventually fixes into a “normal” position on the page and then expands to full screen when clicked.

This gives a little something back to the advertisers who have paid good money to have their ad there, and also goes a long way toward not annoying the reader, who — generally speaking — is not interested in seeing ads in the middle of an article.

In his article, Josh presents very good points on advertising that are similar to Trent’s idea of responsive ads:

“We need more flexible ad creative: messages that are delivered in fluid HTML rather than static images. Ad agencies and networks need to step up here. It will open bigger opportunities for them, and unlock design freedom for publishers along the way. A well-crafted snippet of ad HTML can flow into any space it’s placed, adapt to any screen resolution, and target any device. Instead of juggling a ton of assets for a single campaign, you’ve got one tidy package. It’s better for everyone.”

Hybrid: What About Looking Backwards?

There are great ideas in all of the suggestions above and they might work well in your projects. But is there something else that we can do to make advertising work better in responsive projects?

If we look at advertising over the years, we can see that it hasn’t always been image-based. In fact, it hasn’t been image-based for very long. For example, in the old magazine issues you’ll find ads that are actually carefully-chosen images accompanied by very carefully-written editorial, below or beside the image. This approach was supposed to help advertising and publication to deliver a special value to the reader: it fit better with the editorial of a magazine.

The chances are if a reader is buying a magazine, they like the brand and also trust the advertising choices of the publisher. However, if you can design an ad which looks as good as the magazine and is written in the same editorial tone as the magazine itself, you’re probably onto a winner for the reader and the advertiser.

A picture and a thousand words.

Replicating this approach could work very well on the Web:

• On a standard desktop screen, the viewer would see a plain image. An image works well for a screen where you can easily read the content of the ad.
• On tablet screens, the image would also be displayed with an editorial — text written by or together with editors; it could be hidden when the screen size is over a certain resolution.
• On mobile devices with small screens, you could also include a “Read More” link — again, hidden from bigger screens.

An example of how our hybrid might look practically.

An alternative approach to using the hybrid method with a small mobile screen could be to launch a splash screen. In this approach, which is a variation on Josh’s method, we would detect the screen size of the browser, and, if it is a small screen, load a full-size splash screen with options to dismiss or learn more.

That’s not an ideal approach, because loading a full splash would be disruptive to the user, echoing the “word from our sponsor” ads that are so commonplace on newspaper websites. However, on a mobile device, a “show more”/”show less” option would be potentially tricky to use, given the small screen real estate.

Still, I strongly believe that this approach incorporates the good parts from all of the three approaches already discussed. In fact, by combining some of the ideas behind Trent’s suggestion of using HTML and images with some of the approaches taken by Rob Flaherty in his blog post on responsive advertising, we could have a pretty good kind of ad.

It’s A Problem With Communication, Too, Not Just The Design

Unfortunately, we’re not going to be able to solve the responsive advertising issue only with code — mostly because it’s a case of changing a cultural and commercial paradigm that comes with advertising, too. It goes right back to the original problem of finding a balance between a revenue stream and non-disruptive experience on the site.

An excellent comment left by Derek Johnson on Flaherty’s solution reads:

“There’s no natural starting point with that list, each influences the other one way or another, so they need to be brought on board together.

If some ad servers accommodate responsive ads and others don’t, then some publishers will be left out in the cold. It wouldn’t matter anyway if agencies aren’t convinced, and they in turn have to justify the inevitable extra cost to advertisers, who may just be the hardest to convince without solid proof of increased ROI.

Organizations such as DFP, Ad:Tech, the big agencies and advertisers representatives have to be made stakeholders in this as soon as possible. We need to explain this wonderful thing Ethan Marcotte discovered [..] and how it will benefit them, and we need their input to solve the problems we have.

In a sense, responsive ads is the easy part — it’s our thing after all. Without the rest (almost all) of the advertising industry on board we are merely piddling into the wind.”

We have to communicate the issue with responsive advertising more clearly to advertisers and publishers, so that we can start working on a solution which gives equal weight to good design, readability and advertising.

One of the most urgent things that needs to happen is to find a way to educate advertisers on the way that websites work today, and, as Josh Clark points out, that:

“It’s not just a technical issue. It’s also a sales issue. ‘Separate creative for separate devices’ is a reflection of the way these ads are sold. Mobile, tablet, and desktop versions of websites are presented as completely separate properties instead of simply ‘the website’. Trouble is, it’s people who form market segments, not devices. Segmenting by device — whether that’s for content or for advertising — just doesn’t reflect the way we consume information today.”

Until advertisers become aware that the way that we used to design and people used to use websites has changed, we’ll always have a problem with making ads work on mobile devices.

What Can We Do About That?

Creating a new paradigm is hard because the advantages of the new model have to be seen by a number of players involved in the advertising mechanics. That being said, we can help everyone involved see that packaging up a visual and supplying it to a media agency that places an ad on a single screen just doesn’t work anymore. That’s what we can do:

• Provide information about mobile browsing.
  All actors in the process of selling an ad (advertisers, agencies, publishers and ad server managers) need to keep in mind the sheer number people who could be seeing their ads on a mobile device. If you are unsure where to direct them, Google’s mobile research is a great place to start.
• Inform about the benefits of responsive design.
  Most people outside of the design community don’t know what “responsive design” actually means. Ask media agencies and advertisers if they are familiar with the concept, and make sure to provide enough arguments to explain the advantages of the technique. Feel free to explain when responsive design makes sense and when it might be not the best approach, to help them make informed decisions.
• Create something that will demonstrate what can be accomplished.
  One of the best ways to demonstrate what can be achieved using responsive design is to demonstrate a working example. It might be useful to point your colleagues and advertisers to Rob Flaherty’s solution or the solutions outlined in this article as a starting point.

Our Mobile Planet research: an example of how to provide information about mobile browsing.

What If Advertising Isn’t The Right Model At All?

Most publishers probably will tell you that working without a heavy reliance on advertising would be the optimal solution. In fact, advertising revenue can be very difficult to predict and work with, especially if you have just a few regular advertisers on the site. E.g. the New York Times Company recently reported a 6.6% drop in print and digital advertising. What if advertising doesn’t work any longer? This question brings us to some very interesting ideas about new revenue models which would enable us to completely remove the ad revenue from the equation.

The Sponsorship

Probably the most widely used revenue stream apart from advertising at the moment is the sponsorship model. It is based on a simple principle from economics: instead of selling a high quantity of spots at a low price (advertising), sell a low quantity of spots at a high price (sponsorship).

The sponsorship model is derived from the idea that content wins affinity for a brand better than an ad. It says, “I trust the content of XYZ Magazine, therefore, I also trust ABC Brand.” The sponsor supports the site which puts their name on a special series of posts or a category on a website in order to provide good content, which is loosely a sell for a product or service that they administer or sell.

The main difference of the sponsorship model for sponsors is that they don’t try to force a marketing message upon the reader and use a “friendly” advertising approach instead. On the other hand, publishers keep the number of ads to the minimum and focus on good reading experience for readers instead.

This model is particularly effective for large publishers. Some prime examples include:

• Mashable
  Mashable has worked with many blue-chip brands to provide content that is of interest to their readership and fitsto the style of Mashable. As they explain on their website, “Sponsored posts deliver information that is written by the advertiser, but approved by the Mashable editorial team. The Mashable editorial team has no direct relationship with the advertiser and does not influence the message.” Mashable gives up on editorial independence to provide third-party content to their readers but keep the right to decline a sponsored post if they feel that it’s inappropriate for the site.
• Vice
  Vice have always been very good at the sponsorship model. Big brands like Mini put their name on content which would often be considered too risqué to provide as a standalone advertising campaign.

The Paywall

Several years ago, the paywall was a hot topic for publishers, discussed by journalism schools all around the world. The idea of paying for content that you can get for free elsewhere on the Web does, you have to admit, appear to be absurd. It’s still not clear whether this model actually works in practice.

However, the approach is still worth discussion. After all, if no money passes between the readers and the publisher directly, we’ll always depend on sponsors and advertisers.

The paywall works by creating a “wall” around certain articles and making them available only to people who are willing to pay for them. This could work in several ways:

• The Times (UK)
  The Times’ paywall works with a “quasi”-subscription model. Readers pay a small fee (there are several options) and then choose how they want to be able to access their content. Some packages include access to apps, some include only Web access. Particularly pertinent is the response on Twitter when The Times lowers its paywall as a teaser — there are suddenly a lot of tweets about The Times. This probably is a good indication that not everyone who wants to read The Times is willing to pay for the content. However, figures released by publisher News International last year suggest that the paywall approach is very reasonable — over 100,000 subscribed users is quite a number.
• Le Monde (France)
  When the idea of a paywall was first floated, French newspaper Le Monde came up with an interesting model which they have since substituted for a flat subscription fee. The model worked on a system of micropayments, where you buy a package of credits with which you can access paywall articles. This encouraged people to get into the habit of paying for news online, and I always found it preferable to putting all articles behind the paywall. However, it would seem that the fact they have moved onto a flat subscription means the micropayments paywall didn’t work for them.

The Content Partner

Finally, the content partner model works similarly to the sponsorship model. In exchange for a hefty sum of money, the publication provides publishing and content services for a large brand. This model completely eliminates the need for advertisers or sponsors. The idea is simple: you provide the resources such as your publication’s staff to promote another brand in a meaningful and professional way. For publishers, this means that there is a good revenue stream and a stable one. For partners, the model offers well-written content and a skill set that no one else in their organization has.

In Conclusion

We need to come up with a solution for advertising in responsive environment. Currently, no one has it exactly right, but we have highlighted several ideas that could be helpful in the emerging discussions on the issue. That being said, we’ve also discussed the opportunities available to bypass the advertising model, which, although now very established, is certainly not without its flaws.

In reality, as with all things in life, we need to strike a balance between passive and active income streams for publishing. In a world where people increasingly trust content and increasingly distrust marketing messages, this is now more vital than ever.

(cp) (vf)

© Marc Thomas for Smashing Magazine, 2012.

The Smashing Library grants you immediate unlimited access to all Smashing eBooks, released in the past and in the future, including digital versions of our printed books. The yearly fee of $99 covers the immediate access to the complete Smashing library with 38 eBooks — you save up to 70% off the regular eBook prices! We think that’s a reasonable price for a total of 60 quality eBooks during the first year. Take advantage of the launch discount and save extra $10 right now!

The Smashing eBook Library

Web design is an ever-changing industry, and to keep getting better at your craft and stay up-to-date with what’s going on, you need to invest a lot of time and effort in getting reliable, good quality content. Wouldn’t it be great to receive the most valuable and useful eBooks on the best design practices and coding techniques automatically every month? Well, grab a seat—we’ve got quite a sweet deal coming your way!

The eBooks contain thoroughly edited and curated ad-free articles written by our well-respected authors—already published on Smashing Magazine or written exclusively for the eBook. We guarantee to deliver at least 24 quality eBooks a year. Even better—you can vote on the topics that you’d like to learn more about, and we’ll prepare eBooks that fit your needs best!

You’ll receive all new Smashing eBooks (at least 24) released during your subscription period automatically in your personal dashboard. This includes not only our regular Smashing eBooks but also digital versions of our upcoming printed books, and only costs $99 (€89) a year — it’s just two coffees a month.

With the Smashing Library subscription, you will be able to:

• Immediate unlimited access to the complete Smashing Library with all published Smashing eBooks, including digital versions of the printed Smashing Books 1, 2, 3, 3â…“ (Check the overview of 36 eBooks included in the subscription).
• Vote on the upcoming Smashing eBooks and topics in the magazine;
• Get all new Smashing eBooks automatically in your personal dashboard—including the digital versions of all our upcoming printed books (e.g. The Mobile Book and Smashing Book 4);
• Download the Photoshop/Illustrator/Fireworks Bundle immediately upon subscribing;
• Receive all eBooks in all formats: EPUB, Kindle, PDF;
• Save up to 70% off the regular eBook bundle prices.

Subscribe now!Great eBooks for great Web designers.

Available And Upcoming eBooks

Our eBooks are written by experts in the industry and go through a comprehensive quality review check by invited professionals from the industry. They contain both already-published and exclusive articles from Smashing Magazine’s well-respected authors and experts: Christian Heilmann, Paul Boag, Addy Osmani, Bruce Lawson, Rachel Andrew, Andy Clarke, Aarron Walter, Mike Rundle, Susan Weinschenk, Dmitry Fadeyev, Tom Giannattasio, Marc Edwards—just to name a few.

The eBooks will be useful for both beginners and seasoned professionals. The content is primarily intermediate and advanced level, but the eBooks cover basics as well. On average, each eBook has 20,000 words (or 175 pages in PDF).

Already Available eBooks

Here is a brief overview of already available Smashing eBooks. You can find more details by clicking on the titles that you are interested in.

Upcoming eBooks

We’ve got the following line-up of eBooks coming up in the next months:

Subscribe now!Great eBooks for great Web designers.

Getting Started

Getting started is easy. Just choose the subscription of your choice, proceed with the checkout and find your eBooks in your personal dashboard: that’s also where you can suggest and vote on the upcoming eBook titles as well as topics in the Smashing Magazine. New eBooks will be available for download automatically at the end of every month. You will be notified about new eBooks via email, of course.

We’re working hard on the new topics and are proud to be able to start you off with the recently released Photoshop/Illustrator/Fireworks Bundle—that’s three brand-new Smashing eBooks to get started with.

Why Subscription Model?

When we launched this little website over six years ago, we wanted it to serve one specific purpose: to deliver valuable, reliable, practical insights to people who were building websites just like we were. Time has passed, and many things have changed, yet our deep commitment to this initial idea has never been stronger.

It’s with this commitment that we are proud to announce our new undertaking, a little extra that will help us make your reading experience on Smashing Magazine better, cleaner and more valuable in every way. Meet The Smashing eBook Library, an annual eBook subscription for our very own Smashing eBooks.

Smashing Magazine is and has always been free and independent, a publication deeply committed to quality work and professionalism in the best interests of the Web design community. We are proud of our thorough editorial work, based on principles that are postulated in our Publishing Policy. We don’t take the efforts of our contributors for granted. Every contribution deserves credit and respect, care and attention, acknowledgement and honorarium—which is why everybody involved in the editorial process always gets paid for their work, whether they want it or not.

Of course quality work doesn’t come at a cheap price. You know it, and so do we: Smashing Magazine strongly relies on the page impressions that its articles generate. At times, this reliance can collide with the editorial principles and guidelines that every Smashing Magazine article has to follow.

Smashing Magazine’s thorough Publishing Policy clearly states the rules and guidelines of our editorial work. We never publish sponsored articles or paid content; all ads are always clearly marked as such.

We want Smashing Magazine to be all about you. We want to provide a better and cleaner reading experience on the website and we want to invest more in new formats and sections—practical guides, case studies, tests and benchmarks, new regular columns and Q&A, expert advice for newcomers and many others. We want to further improve and enrich the content in the magazine and deliver more valuable content available for free for everybody to use and learn from. And this is where we could use your help.

We never accept donations or gifts, but we produce printed books and eBooks that help us stabilize the financial viability of the website while delivering value to our customers at the same time. By offering you a valuable product, we hope to provide a tangible value for the money you pay when purchasing our products. And before you ask: yes, Smashing Magazine will always remain free. And with your help we want to make our little publication as smashing as we know it can be. How? Well, with the Smashing eBook Library of course.

Why Should You Subscribe?

The eBook subscription has many advantages:

Further your knowledge with quality eBooks!
Receive the most valuable and useful articles on best design practices and coding techniques automatically every month. Web design is an ever-changing industry, so if you want to learn how to get better at your craft and stay up-to-date with what’s going on, learn what techniques are emerging and what practices are changing, the Smashing Library is just what you are looking for.

Decide on the topics of the next eBooks.
With the Smashing eBook subscription, you’re more than just a customer—you are a part of the Smashing Team. You can vote on the topics of the upcoming eBooks and suggest topics that you’d like to see covered next. You will also be the first to receive access to all new Smashing eBook publications—up to two weeks earlier than everyone else.

Save up to 70% off the regular eBook bundle prices!
You can save almost 70% on the eBooks with the subscription compared to buying each eBook bundle separately. Not only does it save you money, but it also saves you valuable time since you get everything in one swoop! It’s worth it—we care about quality content, we care about best practices and we care about delivering the most useful and valuable insights to you.

Immediate access to brand new eBooks.
You do not have to go through the check-out process for every eBook you would like to have—just log into your personal subscription dashboard and discover the latest and greatest bundles ready for download! The eBooks do not contain advertising and are DRM-free—available in PDF, EPUB and KINDLE formats. The best content, for the best price—just waiting for you to be downloaded onto your iPad, Kindle or any other eBook reader.

You support Smashing Magazine.
The high quality of the content on Smashing Magazine is held at the heart of what we do every single day. We’d love it to be only about the content for you, dear reader, not about the page impressions that articles generate. By subscribing, you help us stabilize our revenue which we need in order to operate on a long-term basis. We are dedicated to making your reading experience on Smashing Magazine better in every way—calm, convenient and user-friendly—day by day. We sincerely appreciate your support.

Subscribe now!Great eBooks for great Web designers.

If you are interested in corporate or educational licenses or have any questions, please feel free to ask us on Twitter or via email—we’d love to help you out! We sincerely appreciate your support.

FAQ & Support

Of course, you don’t need an eBook reader to read the eBooks—you can read the PDF version on your computer, but the EPUB and Amazon Kindle formats for your eBook readers or tablets are available as well. We’ll renew your subscription automatically at the end of the year so you won’t miss any eBooks, but if you decide not to continue, just cancel the subscription at least four weeks before the end of your subscription.

Don’t worry: you’ll still have access to your eBooks after your subscription has expired! You can always change your preferences in the dashboard. You can find more details in the Subscription Terms and Conditions as well as in our Smashing Library FAQ.

© Vitaly Friedman for Smashing Magazine, 2012.

Twenty minutes after unboxing my first iPad, I realized this device’s potential to revolutionize the world of kiosks. Ten years ago, my team and I worked with Honda to develop touchscreen kiosks for its dealerships. Potential buyers could customize their purchase with a few touches of their fingertips. While innovative at the time, these early interactive kiosks didn’t come cheap, running Honda $3,000 to $5,000 per installation. Today, we can create such a kiosk for a fraction of the price.

Which industries are the most likely candidates for tablet kiosks? Four that immediately spring to mind are hotels, restaurants, museums and retailers. Kiosks help streamline information-gathering processes, such as signing up for mailing lists, making reservations, ordering products and services and checking in and out of locations. By automating these processes, the kiosk eliminates the customer’s frustration from waiting in line to speak with a representative and, likewise, frees the employees to focus their energies on higher-level tasks.

Recent consumer-privacy laws put limits on the data that retailers may capture during a transaction. For example, a recent California ruling forbids the process of “reverse appending� by ZIP code. Kiosks give the retailer a second chance to collect customer data, away from the cash register. A privacy-savvy customer might balk at providing their personal information to a cashier at the time of purchase and yet be willing to enter the same information at a kiosk for a contest or discount. Success depends on having an appealing interface that encourages interaction.

Step 1: Hardware Considerations

Obviously, your client will need a tablet for this project. We’ll focus on the iPad here because it is what most of our clients choose, but other platforms such as Kindle Fire could also be used as kiosks. Whichever device you choose, consider how to secure the tablet so that it doesn’t disappear! We developed a device that securely mounts an iPad to a wall, counter or desk (we called it Padloc). Remember that physical security is key; an unsecured tablet is an attractive target for thieves.

iPad securely mounted with a Padloc.

Step 2: Software Considerations

This step is optional. Perhaps your client simply wants to display their website or use a third-party app. In our experience, however, a customized interface can make or break the user experience. We recently worked with a client to develop a simple interface for gathering email addresses in exchange for special offers. Here is the process we followed:

1. We decided to create a Web app rather than a conventional app, thus bypassing a potentially lengthy and complicated submission and approval process through the App Store.
2. We picked the device to program on (in this case, the iPad). This was important because, knowing we would be using mobile Safari, with all of the interesting little nuances available for it (through HTML5 and CSS3), we were able to streamline production.
3. We designed an interface that was visually striking, intuitive and compliant with interface guidelines (including those related to the on-screen keyboard, viewport size and touchscreen conventions). (Apple has some great resources for developers, such as its “Human Interface Guidelines.�)
4. Because we were working in mobile Safari on the iPad, we were able to program some cool features into the Web app. But these came with restrictions, such as:
   • The features would work only in portrait orientation,
   • The Web app had to be saved to the iPad’s home screen and launch from there,
   • All links in the Web app would open in a new browser tab.
5. We also made some other tweaks:
   • Hid the browser chrome (URL bar and buttons) using <meta name="apple-mobile-web-app-capable" content="yes" />;
   • Created a bookmark icon for the home screen and linked to it using <link rel="apple-touch-icon" href="/path/to/icon.png" />;
   • Set the color of the status bar (the options are black, gray or black translucent) using <meta name="apple-mobile-web-app-status-bar-style" content="black" />;
   • Made all events “touchâ€� events, as opposed to “hoverâ€� events, to accommodate the limitations of the touchscreen.

Do Clients Really Want This?

What is the current demand for touchscreen tablet kiosks? We recently conducted a survey of our existing and potential clients; 89% indicated that they would use a touchscreen for a kiosk, and the iPad was the tablet of choice for 84% of them.

The results of our survey

Pretty eye-opening, eh? We also asked survey participants to identify the biggest factor affecting their decision to move forward with a kiosk (choosing from 10 options, ranging from price to screen size to operating system to security options). Price was most important for 41% of respondents, with screen size coming next at 18%.

Interestingly, a majority of respondents chose the iPad, yet also mentioned price as their top concern. This suggests that lower-cost entrants to the market (such as the Kindle Fire) are well positioned to gain market share and become viable candidates for these kiosk projects. Our survey shows a strong desire for kiosks, and the price barrier has been removed with these low-cost tablets!

A Bright Future With New Possibilities

In addition, a wide array of hardware is constantly emerging, creating previously unimagined possibilities. Consider Square’s reader. Plug this tiny device into the headphone jack of your iPad, download the app, and you’re ready to take credit-card payments. Now, add a locking mount, install it anywhere in your store or in your trade-show booth, and you’ll have the best-looking, quickest-to-set-up cash register you’ve ever seen!

iPad mounted with a Square reader to accept payments.

As more advanced devices are introduced to the marketplace, the traditional limitations of kiosks are being surmounted. It’s time for us to think outside the box and imagine a new future for low-cost tablet kiosks!

Conclusion

The clunky, expensive kiosks of yesterday are becoming irrelevant in today’s world of elegant low-cost touchscreen devices. Whether clients want to capture email addresses, enable customers to sign up for events in the store or add interactive elements to their artwork, a touchscreen kiosk can deliver the results they’re looking for. Tablet kiosks can be integrated into any decor smartly and sleekly. Now that affordability is no longer a factor, you can start working with clients to develop apps that bring imagination back to their business solutions.

(al)

© Jason Mark for Smashing Magazine, 2012.

Everyone loves a happy ending: the hero slays the dragon, true love conquers all, the Death Star is destroyed, the new website is launched and both client and users alike are thrilled. While this last example may not have the Hollywood ending that the first few examples do, for those of us in the Web design industry, it is the story ending we want for all our project.

Much attention is given to how you kickoff projects, or how best to design and develop websites. But the final stages of the Web design process are never discussed as much as those early and middle stages are. How you wrap up a project, as well as what you do after the project is completed, is critical when it comes to building long-term relationships that will lead to future business.

In this article we will look at some ways in which you can end projects on the right note, and also what you can do after they are launched to help your project stories have happy endings (and many successful sequels).

We want a fairy tale ending for all our project stories – (Image: ZeRo’SKiLL).

Avoiding Unhappy Endings

Before you can create a happy ending to your project’s story, you need to make sure you do not create an unhappy ending. Oftentimes, when a project goes bad, it happens in the final stages of the process. There are a variety of reasons why this happens, but a few easy ways to avoid some of these common pitfalls.

• Address issues as they happen — When a problem arises, discuss it with your client immediately. We often avoid issues (such as a bit of scope creep, or something taking a little longer than expected) hoping that we can “make it up at the end.â€� We do this so we can avoid having an uncomfortable discussion with our clients about change orders and increased budgets.

  This is a nice sentiment, but it usually does not work out. Budgets don’t magically grow at the end of a project to compensate for overages earlier in the process. If you wait until the final stage of an engagement to address a problem, your client will feel blindsided by the news coming at that late hour, instead of being able to handle the issue when it occurred. One way or another, you will need to discuss the situation with your client, but if you do it later rather than sooner, you risk leaving them with a negative final memory of an otherwise successful project.

• Planning a website’s launch — The date of a website’s launch is usually planned very early in the process. Other times, that launch date is more flexible and is determined as the project nears completion. In either scenario, preparing for the launch of a new website is extremely important.

  Regardless of testing done prior to a launch, last minute issues discovered after a website “goes live� are certainly not uncommon. Preparing for the launch means that you take a look at website analytics to determine the best time (based on website traffic) to make the changes needed. You want to find a time that will have as little impact on business as possible as these changes are made. You also want to ensure your team is available and ready to resolve any issues that may arise. Whether the date of the launch was determined well in advance or more recently, as you firm up those launch plans, you want to make sure you have the appropriate personnel on hand for that launch.

  By preparing to quickly address unexpected issues, you minimize chances that a small problem will turn into a large one, resulting in downtime, frustration, and that aforementioned negative final memory.

  
  Planning for a website’s launch ensures your team is on hand to handle any issues. (Image: Pedro Vezini).

• Dealing with the money situation — Very few of us enjoy talking about money and payments with clients. It is an often uncomfortable (yet necessary) part of our jobs. Whether your contract calls for your project to be paid in full prior to the launch of the new website, or if you make other arrangements with your client, problems with payments are one of the quickest ways to turn a good relationship into a strained one. There is no secret formula for handling issues with payments, just some common sense rules you can follow to minimize any damage that outstanding money concerns may affect your client relationship.

  This includes discussing the payment terms and your expectations at the very start of the process, getting everyone in agreement on. It also includes giving clients ample time to pay any invoices and being respectful (and as accommodating as possible), when something does not go according to plan. Financial issues can cause a strain on any relationship, client or otherwise. How you handle those strains can either damage (or strengthen) that relationship.

Leaving A Lasting Impression

First impressions are important, but lasting impressions are just as crucial. Just as a few mistakes at the end of the process can cast a pall over an otherwise successful project, a really great and memorable end to a project can turn an engagement that was unremarkable into one that clients will enthusiastically share with others. Here are a few simple ways you can leave your clients with a very positive, final memory of their experience:

• Send a token of your appreciation — It seems so basic (and it really is), but it amazes me how rarely we take the time to show our appreciation after a project is completed. This isn’t unique to Web design. When was the last time a company you hired to provide a service went out of their way to thank you after the work was completed and paid for? It doesn’t happen very often — which is why it will have an impact if you do it.

  Your “thank youâ€� doesn’t need to be extravagant to be effective. Some companies you work with may even have a policy against “gifts.â€� One of my favorite ways to show appreciation at the end of a project is quite inexpensive and very simple — sending a handwritten note, with a personal message, for the client. I also like to have others in our organization (including people who didn’t work on the project, or have any interaction with the client at all) sign the card. This shows how important their business is to the company — the entire company, not just the few of us that they’ve worked with so far.

  The main thing here is to show the client that, even after their project was completed, you were thinking of them. The handwritten nature of the note shows that they were important enough for you to take the time to recognize them in a personal way (instead of just sending a standard “thank you for your business� card or email). Simple, yet effective.

• Celebrate the launch — A celebratory event of some kind is a great way to cap off a project. Again, this does not need to be elaborate. The “partyâ€� could simply be a breakfast or lunch for the client and their employees to introduce them to the new website. Doing this not only shows your appreciation, it also gives you some time with a larger segment of the organization. It allows members of the company who may not have worked directly with you on the project a chance to connect with you and ask any questions they may have about the new website. In some cases, a project may actually warrant a bigger party.

  If the new website is part of a larger initiative (such as the launch of a new company, or a big change in that organization), then they may already be planning an “open houseâ€� type event. Ask your client about their plans, and if they are intending to throw a party, request to be involved. Being involved in this party is great for you, giving you exposure to all the attendees in a very positive way — but it is not only a self-serving request. I have found that clients love it when you ask to be involved. They truly appreciate the fact that you care enough to want to be a part of their event and they like the idea that someone who can speak for the technical side of the project may be included in the festivities. It’s really a win-win situation.

  
  Celebrate the launch of a new website and end the project in a memorable way. (Image: SimonWhitaker).

• Share with others — Clients are often very proud of their new website and are eager to show it to others. As such, they will be very appreciative when you help them spread the word of that new website.

  As long as your contract allows you to do so, you can help raise awareness of the new website by blogging about the project or sharing lessons you have learned during its creation in articles that you author. You can also share it with the Web design community through websites like dribbble or others social networks you use to communicate with your peers or your friends. You should also be on the lookout for the occasions when others talk about or share the new website. If the website is recognized in one of the many online Web design galleries out there, be sure to point this out to your client.

  Seeing this type of recognition from outside sources is a great way to remind them of the successful process and positive results of your project with them.

• Refer some business — Another simple way to do something positive for your client after a project is completed is to refer them some business. One of my favorite things to do is to identify two clients of mine who may be able to help out each other with the services that they offer, and to make a connection between the two. Schedule a casual lunch to introduce the two companies and you will not only be able to make business referrals for each of them, but you will also get some time with both of those clients under very positive circumstances. This process of referring business and connecting with clients after the project is completed is a perfect segue into this article’s next section — how to build long-term relationships with your clients.

An Ongoing Relationship

The best source of new business for your company comes from your existing clients. It is much easier to work with organizations that already know and trust you than it is to sell your services to companies you have never engaged with before. As such, a process to connect with your existing clients on a regular basis can be very important to your long-term success.

As a project is wrapping up, one of the final things you should do is schedule a follow-up meeting — or better yet, a series of follow up meetings (to review the website post-launch). Regularly scheduled meetings between you and your client allow you to discuss not only how the website is performing and what feedback they have received from their audience, but also what changes may be happening with their company (or what changes you are seeing in the industry that they may need to be aware of). It is a rare instance that I sit down with a client to discuss their business where some kind of work doesn’t come out of it. This is the value of long-term relationships and being a trusted partner to their business. When you help them identify business needs, and can help offer solutions for them, you are more able to develop new business for yourself.

So I don’t give the wrong impression here, let me be clear — even though there is a sales element to these meetings, these are not sales calls. I have long trumpeted the value of creating real relationships with your clients, and these follow-up meetings are part of that process. This is less about selling them something and more about having a conversation to determine what they may need, and how you can continue to help their business succeed.

Clients Spread The Word

Another great way to get new business is through word of mouth, and the words that come from the mouths of your clients carry lots of weight.

Clients talk to others about their website and the company that helped them build it, so striving to forge a good relationship with them will result in more leads for you.

Clients talk to others about you and the work you have done with them. (Image: lawgeek).

You can also encourage your clients to talk about the work you did for them by asking them for a testimonial as soon as the project is done. Even if you don’t use testimonials on your own website, asking your client to provide one (or asking them to act as a reference, or provide a recommendation on LinkedIn) allows them to verbalize their experience with you and your company while it’s still fresh in their mind. The process of writing it down will also help them commit it to memory. Later, when someone asks them who did their website and how their experience was, the positive comments they wrote will come to mind and you will get a quality referral.

Your Work Spreads The Word

Your clients’ websites can also help spread the word of your services if you add a link to your website at the bottom of theirs. This practice of “signing� the website is a bit controversial. I have heard passionate debates from both sides of the argument as to whether or not it is appropriate to add a “designed by� link to a website, one that you were paid good money to create. In fact, for many years I felt it was wrong to do so. What changed my mind was two things:

1. I saw many other Web design agencies, both big and small, doing this on the websites that they had developed. Many of the agencies I saw doing this were ones that I greatly admired and whose teachings and examples I had followed in many other aspects of my work. I decided to also follow in this and give it a try with my own projects. This led to the second reason why I changed my tune on this practice of signing websites…
2. The company I work for has added a “website designed by� message and link to every client project that we have launched over the last few years, and in all of that time, not one client has complained. On the contrary, I have had clients actually tell me that they liked having our link on their website because it made it easier for them to find us or to send others our way.

Needless to say, my mind has been completely changed on this practice of adding our link to clients’ websites and hearing “I saw your link on a website and I really liked your workâ€� from a qualified lead is a great start to a conversation with a prospective new client.

Consistency Is The Key

As you read through this article, you most likely said “I do that alreadyâ€� for some (or maybe even all) of the examples presented here — but how often do you do them? It’s one thing to say that you show your appreciation to clients or schedule regular follow-up meetings, but do you do it for all projects, every single time? Not likely.

It is very easy to put off sending a thank you note until later, only to have it be forgotten in the mix of other responsibilities that you have. It is easy for a meeting to be cancelled and never revisited, causing your schedule of regular conversations with your client to fall apart. The ideas presented in this article are not ground-breaking — they are all things you can easily add to your projects, but they are also things that are easy to dismiss or set slide.

The key to realizing consistent returns from these practices is to apply them consistently to your work. If you make them a part of your regular workflow and essential to your process, then the positive results you enjoy from them will also be consistent.

Happily ever after starts by ending projects well and building client relationships. (Image: Steve Snodgrass).

In Summary

• Be mindful that bumps at the end of a project do not derail an otherwise successful engagement.
• Look for small things you can do at a project’s end to really leave a positive lasting impression with your client.
• Connect with your clients for regularly scheduled meetings and build long-term relationships that will lead to future projects (and great referrals).
• Establish a process internally to make these tasks a consistent part of your workflow so you can consistently realize the positive benefits that they can deliver.

By ending projects well, and establishing quality relationships with your clients, you will be one step closer to ending all of your project stories with “happily ever after.�

(jc)

© Jeremy Girard for Smashing Magazine, 2012.

The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwoven, encrypted information — data that is accessible only through technical interfaces, such as Web browsers, or applications. Yet, Web professionals have made it their calling to tame the “wildâ€� Web and turn it into an accessible, user-friendly and, most of all, personal medium.

Personality will set your brand apart from competitors and help you connect with a passionate audience.

– Aaron Walter

Designers can do plenty of things to counteract the technical appearance of the Web. One very effective way is simply to make it look less technical, by using a more human, personal style.

In this article, we will discuss different aspects of freehand drawing and writing in Web design and how they can enhance the user experience of your website.

Identity And Authenticity

Freehand drawings and other sketched elements are a great way to show personality and convey a feeling of authenticity. Imagine getting a letter or greeting card from someone you cherish. Do you expect the text to be typed or handwritten? A handwritten note is way more personal than a computer-written one, right? On the Web, it’s similar. It might be a different medium, but content that obviously comes directly from a human is more authentic and more trustworthy. Let’s look at three examples of how freehand drawings can help you create an identity and stay authentic.

Look and Feel

First of all, hand-drawn content has a unique look and feel. Compare it to handwriting. Creating a personality and unique appearance for your brand or product is important.

The look and feel of Balsamiq is authentic and distinctive.

Balsamiq does a great job here. It offers a mockup and wireframing tool. While its features are quite advanced, its look and feel is basic, recalling pen and paper sketches from way back. The low fidelity helps us focus on the essential functionality while also making the product authentic and distinctive.

Recognition

Freehand drawings have character. Through the touch of human imperfection, they gain a certain tension that is hard to recreate digitally. This special touch draws attention and allows people to pause to appreciate and process the hand-drawn content, more so than they might appreciate any old perfectly illustrated image.

Notepad++’s logo is distinctive and easy to remember.

The source-code editor Notepad++ has a distinctive hand-drawn logo. The little chameleon not only reflects the functionality of the program (the transformation of code), but is also cute and draws attention. The sketched style reflects the creative nature of what you can do with Notepad++ and makes sure you don’t confuse it with other editing tools.

Personality

Obviously, freehand drawings carry personality. They are authentic and help users to connect with your website or app. Hand-drawn content confirms that real people are behind the content, people who have put thought and effort into the design to make it usable and trustworthy.

Mathboard looks personal and easy to use.

MathBoard is an iPad app that help kids practice their arithmetic skills. The app has a classic chalkboard look, freshening up the dry and precise character of arithmetic. The whole app is set up in quiz form, and kids can actually write on the board to do rough work if needed. The personal appearance of the app makes it easy and attractive to use.

Information And Content

The way you present information on your website determines whether people will see it and, even still, understand it. Draw attention to your content at the right time in the user’s visit to your website. The content should look attractive and promising enough to involve the visitor. Information must be clear, relevant and actionable in order to be effective. Below are three examples of ways in which freehand styles can make the presentation of your content more effective.

Explain Features

You can use freehand drawings to explain your product, such as its features. Creatives often use simple sketches to explain a concept or present an idea that might otherwise take ages to put into words. With your website, you encounter a similar situation. You’ll have a product, concept or idea that you want to get across to visitors. By using hand-drawn icons or simple sketches, you create an intimate atmosphere, as if you were speaking to your visitors directly.

Stickies conjures the idea of presentations. (Image: TestFlight)

Online service TestFlight makes use of just this effect. In addition to the many other hand-drawn elements on its website, the company points out its main features with simple sketched sticky notes, accompanied only by a few brief lines of text. This conjures the idea of presentations, drawing attention to the features one by one to make them more clear.

Visualize Workflows

Freehand style is also a great way to familiarize visitors with your workflows. No one expects you to come up with the perfect solution out of thin air. The fact that you admit that a process is involved and that this process can be rough and bumpy only makes you human and likeable. It demonstrates that you try out different directions before deciding on the right track.

This hand-drawn workflow conveys creativity and a thorough working process. (Image: Alex Faure)

Designer and front-end developer Alex Faure demonstrates well how a hand-drawn visualization of a workflow can educate visitors and build trust. He seems to not only know what he is doing, but also thinks things through and involves his clients in the process.

Guide Users

Whether you are designing a website or an app, keeping your users in mind and guiding them towards the various goals they might have is always important. Hand-drawn icons can be a good way to do so. It’s no secret that icons are helpful when navigating a website or app. Why would hand-drawn icons be any different? While perfectly illustrated icons might be more detailed and clearer, they are computer-made and can easily look sterile and technical. Hand-drawn icons are personal, and we are more inclined to accept guidance from another human than from a machine.

We are more inclined to accept guidance from humans. (Image: Spamped)

The iPhone app Spamped uses very nice, meaningful icons to guide users. The app enables you to stamp and share your favorite things, such as places, books and movies. The hand-drawn style perfectly matches the personal nature of the app, encouraging users to keep stamping.

Team Presentation

The importance of team pages increases continually. While we used to accept a certain level of anonymity on the Web, we are now eager to know who is behind a website, service or product. Also, having the hypothetical option to contact someone is not enough; we want to know exactly who we would be contacting. The more personal your team presentation, the more likely your visitors will trust you. Here are some suggestions on how to enhance your team presentation with hand-drawn elements.

Be Likeable

Being perceived as likeable is important. Even if you offer a ton of information on yourself, if people think you are arrogant or too extravagant, it will do no good. We are much more willing to trust someone we like than someone whose character we cannot asses. Hand-drawn elements can make you more likeable by making you look creative, spontaneous and easy-going.

We are more willing to trust people we like. (Image: Knock Knock Factory)

The Knock Knock Factory welcomes its visitors with a personal and likeable presentation of its team. The pictograms sketched on the chalkboard in the background say a lot about Keith, the “fearless leader.� The company obviously considers it important to give visitors a clear picture of who they are about to deal with. It’s catchy and gives visitors a positive feeling, before they have even looked around the rest of the website. It creates an immediate personal connection and makes the visitor feel welcome to the website.

Be Trustworthy

Besides likability, trustworthiness is also important. At the end of the day, anyone can hide behind a website, pretending to be someone they are not. Showing authenticity is a great way to make sure visitors take you for who you are. Only if people trust you will they open up to what you have to say or engage in your desired actions, such as buying the product. Hand-drawn elements are usually not the easiest content to produce for a design; they require skills such as creativity and passion — skills we associate with honest and trustworthy people.

We feel more comfortable around people we trust. (Image: Polecat)

The software agency Polecat has found a trustworthy way to introduce itself. Instead of realistic photographs, it has put thought and passion in its team presentation, using abstract yet creative illustrations. The illustrations have a rough and sketchy look to them, making them even more human. And only first names are disclosed, giving an easy-going, familiar feeling.

Be Real

An important aspect of trustworthiness is authenticity. Your visitors must not doubt that you really exist and that you exist in the way that you present yourself on your website. The Web can be a scary place, especially considering that users will probably never meet the people behind websites in person. Anyone can use a Web font, but handwriting and hand-drawn elements reveal something about your person, making you look more real.

The authenticity of a team is important. (Image: Grove)

The people at Grove found the perfect balance between creative, carefree and authentic for their team presentation. Snapshots of all team members are neatly arranged as Polaroids, with the names looking handwritten. It looks as if someone walked through their work space, taking Polaroids of everyone, including the team’s dog. Does it get more real than that?

Storytelling

Freehand drawings are a great way to tell stories. Storytelling is extremely personal, an ancient means of communication, mediated at most (back then) by a cave wall. This basic method of exchanging information transcends all technical advances and gives us a comforting, human feeling. Sketches help us ignore the impersonal nature of the Web and put a face to the humans behind it.

Entertain

Entertainment entails emotional involvement — something that is much easier to achieve when humans are involved, rather than mindless machines. On the Web, hand drawings are a great way to establish a familiar and human experience, one that helps visitors to relax and enjoy themselves.

Drawings create a familiar and human experience. (Image: Axure)

The prototyping tool Axure welcomes visitors to its home page with an amusing yet informative story about UX Man, who is “accused of having superhuman powers.� The freehand style of the drawing is eye-catching. There is no reason to doubt that a lot of thought has gone into this fun and inviting landing page.

Explain

Hand-drawn stories grab our attention because we like to recognize human elements on the Web. Whereas a too-clean Photoshopped image might not gain our trust, hand drawings appeal directly to our emotions, making us more attentive and receptive to information.

Hand drawings appeal directly to our emotions. (Image: SignNow)

The app SignNow uses hand-drawn images to explain its main benefits right on the home page. The way it lines up the benefits, connected by the “flying� documents, creates a narrative. You can almost hear someone explaining the images as you read the descriptions below. The story draws visitors in, making it easy to follow.

Engage

Personalized elements such as freehand drawings also engage visitors. Along with user experience, “user engagement� has also become a hot topic. Once engaged, we are interested and willing to perceive and process the information given to us. So, a website that manages to engage us has already made a big step towards a positive user experience.

A website that manages to engage us has made a big step towards a positive user experience. (Image: TouristEye)

Travel app TouristEye engages effectively with a good story. The step-by-step introduction to its product is turned into a small adventure story, a treasure hunt waiting to be solved. Even without the text, the drawings are meaningful and reflect the free spirit of a trip.

Attention-Grabbers

Freehand elements, such as handwriting, are just not what we expect in a technical medium like the Web. They go against the straight lines and symmetry that we associate with the Web. Thus, a perfect opportunity to grab the visitor’s attention. Handwritten comments and instructions feel human and make us feel like we are being addressed directly.

Invite

You can use this personal method of communication for different things. First, you could easily invite visitors to perform certain actions, such as liking you on various social media platforms or sharing your content. We are more likely to respond to messages that appear to concern only us, not the general public. Even though the message is on your website for everyone to see, you can create a feeling of connectedness by addressing visitors directly.

We respond more likely to personal messages. (Image: Weezbe)

Weezbe use a handwritten message on its landing page, together with a happy smiley and an arrow that guides the visitor’s eye to the green button. The header is simple yet effective, drawing attention to the call-to-action button without being intrusive or annoying.

Make Curious

You can also use hand-drawn elements to make visitors curious and, in doing so, to guide their line of vision and trigger certain actions. For example, arrows are a great way to guide the attention of visitors.

Hand-drawn elements can make visitors curious. (Image: Radley Yeldar)

The creative agency Radley Yeldar shows a minimalist drawing of a hand that appears to be tapping on the screen, along with the line “This is not just a footer.� The visitor is motivated to mimic the gesture of the hand and click on the screen, if only to find out what happens. This is a great subtle way to bring the footer to the visitor’s attention.

Point Out Details

Last but not least, hand-drawn elements can be handy for pointing out details. Again, it’s all about grabbing the visitor’s attention and drawing it to the relevant area. Just as you use arrows and other marks to highlight content in a book or other offline medium, these elements work great on your Website. After all, highlighted elements bear a certain importance that makes them worth checking out.

Highlighted elements are expected to be important. (Image: Orbit)

Orbit uses hand-drawn arrows to point out adjustable elements of its image slider plugin. The hand-drawn quality of the arrows draws attention to the defined areas of the slider, and it also stands out, obviously not being part of the slider itself.

Don’t Overdo It

Sometimes, freehand drawing doesn’t suit the nature of a website. Make sure not to overdo it and that visitors would truly appreciate a more personal design. Don’t hesitate to ask visitors if you are not sure how far to go; for example, by conducting a live survey on your website.

While certainly many examples are out there of how not to use hand-drawings on a website, let’s look at only one. The aim of this article is to point out positive examples and offer ideas on how a freehand style can improve the user experience, but it is also important to be aware that it’s not always effective and that you should use hand-drawn elements within reason.

The overdone hand drawings make the buttons look obtrusive and pushy. (Image: Joshua Keenes)

For example, designer Joshua Keenes uses hand-drawings to draw attention to his social media buttons. While the concept might work, the fact that he overdoes it has two side effects. First, so much is going on that your attention gets lost before even getting to the actual target, making you lose focus before taking any action. Secondly, the invitation to hit one of the buttons becomes quite obtrusive and pushy, likely scaring people away, rather than welcoming them to the social community.

Conclusion

Having a personal experience on the Web is becoming increasingly important. We no longer want to visit cold, formal and anonymous websites. Rather, we want to feel comfortable surfing the Web and to meet the people behind a website, and we need to trust them before we are willing to interact with their website.

Freehand drawings have a human quality, the perfect bridge over the gap between the technical, impersonal Web and the accessible, user-friendly and personal experience that we expect today.

(al)

© Sabina Idler for Smashing Magazine, 2012.