There's so much goodness happening on the web and as it continues to evolve, it's important that talented individuals step up into leadership roles to help shape the future of web development. And doing this isn't an easy task. Not only do you need to have the technical chops to help define new techniques and paradigms or create the next great technology, it's equally important to be able to effectively convey your message in a passionate and credible fashion so that your peers respect your direction.

Lea Verou is one of these new breed of leaders who is helping to push the web forward through her technical savvy and profound love for web standards. She's developed quite a following and her live coding sessions at major conferences are a thing of legend.

We had an opportunity to find out more about her in this Q&A.

I’m Lea Verou and I’m a web designer/developer and web standards geek (sounds like an AA introduction, doesn’t it?). I’ve created several open source projects such as Prism, a syntax highlighter used in A List Apart, Smashing Magazine, WebPlatform.org, MDN and other big websites, Dabblet, an interactive code playground, or -prefix-free, a JavaScript library that lets authors forget about vendor prefixes and code to the future standards. I’ve also come up with and published several CSS techniques, such as using CSS gradients to create patterns. I’m currently employed by W3C, although I’ve announced that I’m leaving at the end of July to pursue other challenges, such as writing and designing my first book.

Not really, to be honest. I still do my thing, make stuff and put it out there in the hopes they will be useful for someone. I still speak my mind about the technologies and best practices I like and those that I don’t. Whoever wants to listen to me, it’s their call. I’m not going to censor myself because of the number of people who are following me. That would be counter-intuitive, since being myself made these people follow me in the first place.

I think both browser makers and the WG (working group) have realized that vendor prefixes, although good in theory, do not work in practice. So, the way to go right now seems to be browsers implementing experimental features under a setting instead of behind a prefix. That way, developers will not start using it in production, forcing the WG to get stuck in early iterations, as was the case with vendor prefixes.

There’s no single cause, but I believe a big part of the blame lies with developers. Although we’ve endured the pains of a browser mono-culture before, we did not learn much. IE6 used to be really cool stuff 12 years ago you know, just like WebKit is today. I can see the CSS WG being at fault too, for not realizing the issues with vendor prefixes early on, which turned web development into a popularity contest. Last but not least, the WebKit team shares some part of the blame, as they shouldn’t have implemented non-standard CSS features to get ahead in the browser game.

I’m sure you are aware of the old project management triangle paradigm: Something cannot be fast, high quality and cheap, you need to pick two. I believe this applies to designing APIs as well. Budget is limited, as there are very few people paid to work on standards. So, basically, designing new features can either be fast or high quality, but not both. We can see the former when browsers decide to innovate: Usually, even when the original ideas are good, they are poorly thought out, since they were designed in the vacuum of a single company (examples: Drag and Drop API, -webkit-gradient()).

When the standardization process is followed through, features can be very high quality in the end, at the cost of taking a long time to be finished. Several parties with different interests need to reach consensus, a full test-suite needs to be written, it needs experimental implementations and several iterations based on implementor feedback. All of this takes time, but keep in mind that once a feature enters the open web platform, we’re stuck with it for years, if not decades. Therefore, it pays off to invest that kind of resources in to it, and to be patient. Short-term pain for long-term gain ;)

I will still be involved in the CSS WG as an Invited Expert. The WG voted on it in a recent telcon and I was happy to see several people in support and nobody against it. :) In fact, I will be able to devote more time to it now, since I expect to have more free time in general, and having worked at W3C gives me a unique perspective and insight into the standards process.

I have several safeguards preventing me from messing up. I keep my code examples concise, showing only what’s needed. This also helps the audience understand, as the code is small enough for them to process. I believe that as the number of lines in a code sample grows linearly, understanding decreases exponentially. Most importantly, I practice a lot. I might not practice the delivery of the talk, but I always practice the live coding several times, even when I’ve given the talk before. Also, even if I mess up, which has happened a couple times, the audience is so glad to see the result gradually build up in front of them instead of being presented with a screenshot, that they can be incredibly forgiving of missteps. If something does not work, I will spend a few seconds trying to fix it and if I can’t, I will explain what was supposed to happen and move on.

I often see people ruining live coding presentations by showing too much code, with too many distractions (e.g. a full IDE around it and having to switch windows to see the result) and long delays trying to debug their code when something goes awry. All three are very effective in getting the audience to lose focus. However, done right, live coding can be a great teaching aid and make a talk more engaging and fun.

My two biggest interests since my preteens were design and programming. So, when I started making websites, I was studying the languages involved, as much as studying graphic design principles. I fell in love with CSS because it felt like a bridge between the two, which is why I specialized in it.

Regarding resources, I was always the type of person that learned through reading and practicing (in that order). I would read an entire book and then build something that helps me put what I learned into practice to create something that I wasn’t able to before. I don’t learn easily from lectures, and I even glided through university (Computer Science) studying on my own, rarely attending any lectures. However, this greatly depends on the person, I know some amazingly skilled folks who absolutely hate studying on their own without anyone teaching them. I think that’s why I tried to take a different approach in my own talks, because I find conventional lectures so damn boring and hard to follow, except for the rare case where the speaker is as funny as a stand-up comedian (and while I like to think I have a good sense of humor, I’m by no means on that level).

More About Lea

Thank you Lea for taking the time to chat with us. To get to know more about Lea and her work on standards and web development, be sure to visit her website and follow her on Twitter. Also, if you have an opportunity to see her speak in person, definitely jump on it. Her list of past and future events can be found on Lanyrd which also link to videos of her previous presentations.

Of the many factors that must be considered in Web design, emotional interaction is an important, but frequently neglected, component. In the real world, we experience the sensual interaction of design all the time. Reflect for a moment on the emotional engagement of slipping behind the wheel of a powerful luxury car: the welcoming embrace of the driving seat, the tactile experience of running your hands over the leather on the steering wheel, the subtle gleam reflected in the controls.

There is no technical requirement for any of these finely crafted details: The vehicle would perform equally well without them. Yet this singular focus on sensual and emotional engagement is what separates luxury goods from all others and what inspires deep loyalty from customers.

This drive for emotional design can be discovered in the most surprising places. Take the power light on the next to last-generation Apple MacBook. The company deserves credit for helping thousands of users avoid entanglements with power cords though the MagSafe connector, but the deeper emotional intimacy is held in the tiniest of details: the power status light on the front of the laptop. When in sleep mode, the light pulses, and not randomly: It does so 10 times a minute, the breathing rate of a resting human being.

The blink rate of Apple’s MacBook in sleep mode falls within the average breathing rate of a resting adult. (Image source: Michael Stillwell)

To take another example: The front of a car is not two headlights and a grill. It is a face, one with its own character and communication. Look at cars and vans marketed to suburban mothers, on which lines tend to be round, curved, welcoming and friendly.

The front of the vehicle often demonstrates the neotenic effect: We regard “eyes” (headlights) that are larger than the body as being cute, safe, loveable. Compare this to the visual communication of vehicles marketed to men, particularly sports cars: Those lines are angular and aggressive, right down to the slitted eyes.

Note how a sports car’s front interacts with you on an emotional level. (Image source: GabboT)

Designing For Emotion

We can strive to achieve the same emotional engagement on websites — a promise to delight, surprise and affect users without resorting to manipulation or being too saccharine. While the digital realm lacks many sensual cues, it is possible to impart an emotional experience through a careful selection of color, stroke and typography.

CSS transitions help us to make interactions more human: Rather than flicking from one state to another, we can ease the motion of an element over a few hundred milliseconds to make a website feel more inviting. Paradoxically, the same techniques can also make a website feel faster, especially if we use the opportunity to preload content.

In creating such experiences, we must avoid the mistakes of the past: The engagement should encourage the visitor to explore the website, but should never hide important components such as navigation. Rewards for exploration should be a treated as a bonus, rather than a required interaction. Any information shared should also be accessible to those who don’t have the time or ability to use the interface.

Surprise In Boxes

(Please see the demo at “Hover Effect on Images From Different Directions Using Pure CSS,” on CodePen.)

One way to design for emotional surprise and stimulation might be to present different panes of information according to the way the user hovers over a responsive image. For this example, I’ll use a photo of the spiral galaxy NGC 1309, added to an HTML5 page:

    <img src="ngc-1309.jpg" alt="">
    

(Note that I’ve intentionally left the alt value of the image blank. We’ll return to that attribute shortly.)

The information panels are created from four span elements, with the entire group wrapped in a div tag that includes a class:

    <div class="multi-hover">
        <span>Spiral Galaxy NGC 1309</span>
        <span>Approximately 120 million light years from Earth</span>
        <span>Home to several Cephid variable stars</span>
        <span>Member of the Eridanus galactic cloud</span>
        <img src="ngc-1309.jpg" alt="">
    </div>
    

We’ll write the CSS transition code sans vendor prefixes: Internet Explorer 10 does not use prefixes for animation, Firefox no longer requires them, Chrome is not far behind, and a piece of JavaScript magic such as Lea Verou’s -prefix-free will take care of those browsers that still do.

    .multi-hover {
    	position: relative;
    	font-family: Orbitron, sans-serif;
    	max-width: 500px;
    	line-height: 0;
    }
    
    .multi-hover img {
    	max-width: 100%;
    }
    
    .multi-hover span {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	line-height: 1.5;
    	font-weight: 100;
    	text-align: center;
    	box-sizing: border-box;
    	font-size: 3em;
    	transition: .3s linear;
    	color: white;
    	padding: 15%;
    	opacity: 0;
    }
    

The CSS takes advantage of the rule that absolutely positioned elements inside relative containers will be transformed relative to their parent. Because the image determines the height and width of the div, the span elements will always be exactly the same size, protected from growing further by the use of box-sizing, max-width and line-height: 0. In this example, I’m using Orbitron by The League of Moveable Type as an appropriate typeface.

Next, locate the span elements, so that each lies just over the inner edge of the image. We’ll do so by writing offsets from the containing div in percentages, to keep everything responsive:

    .multi-hover span:nth-child(1) {
    	top: 0;
    	left: 90%;
    	background: hsla(0,70%,50%,0.6);  } /* right panel */
    
    .multi-hover span:nth-child(2) {
    	top: -90%;
    	left: 0;
    	background: hsla(90,70%,50%,0.6); } /* top panel */   
    
    .multi-hover span:nth-child(3) {
    	top: 0;
    	left: -90%;
    	background: hsla(180,70%,50%,0.6); } /* left panel */  
    
    .multi-hover span:nth-child(4) {
    	top: 90%;
    	left: 0;
    	background: hsla(270,70%,50%,0.6); } /* bottom panel */
    

As you’ll see in a moment, the order of the panel declarations matters. The result looks something like this:

Positioned span elements with text. (Large view)

To clip the outside edges of the panels, use overflow: hidden on the containing div:

    .multi-hover {
    	position: relative;
            overflow: hidden;
    	font-family: Orbitron, sans-serif;
    

Now, the result appears like this:

The colored sections we can see for now will function as the “hit areas” of our panels. Increasing the size of these areas will increase the panel’s ability to respond to quicker and broader mouse movements, but will also increase the overlap between them, making it more likely that a different panel will be activated than the one expected.

Finally, we’ll hide the panels entirely by setting their opacity to 0 and moving them on hover, taking advantage of the fact that transparent elements still respond to mouse events.

    .multi-hover span {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	line-height: 1.5;
    	font-weight: 100;
            z-index: 2;
    	text-align: center;
    	box-sizing: border-box;
    	font-size: 3em;
    	transition: .3s linear;
    	color: white;
    	padding: 15%;
    	opacity: 0;
    }
    
    .multi-hover span:hover {
    	opacity: 1;
    }
    
    .multi-hover span:nth-child(odd):hover {
    	left: 0;
            z-index: 3;
    }
    
    .multi-hover span:nth-child(even):hover {
    	top: 0;
            z-index: 3;
    }
    

The odd and even declarations set each panel to the opposite side of the box, positioning them entirely over the image and completing the design. Note that this interface pattern requires exploratory mouse movement from the outside of the box inwards to activate each panel; alternately, a completely “in box” exploration model could be created by lowering the z-index of the :hover states to 1.

Accessibility Testing

Making the panels invisible brings up the issue of accessibility. Partially sighted users might be able to see and interact with the panels, but blind users obviously will not.

Screen readers treat such content as being truly “invisible” (leaving them, therefore, unread), depending on the context; content that is set to display: none is usually left unread, for example. However, opacity does not trigger this behavior. On a Mac, you can easily test this by activating VoiceOver and having it read the page we’ve created in the browser:

• Command + F5 to start VoiceOver,
• Control + Option + A to read Web page content,
• Command + F5 to stop VoiceOver.

You’ll hear the span content being read in the order that it appears on the page; all that’s missing is a description of the image at the end:

    <div class="multi-hover">
    <span>Spiral Galaxy NGC 1309</span>
    <span>Approximately 120 million light years from Earth</span>
    <span>Home to several Cephid variable stars</span>
    <span>Member of the Eridanus galactic cloud</span>
    <img src="ngc-1309.jpg" alt="Photograph of NGC 1309">
    </div>
    

Note that this only treats the visual aspects of accessibility. There are other important areas (cognitive, motor and language) that I will leave unaddressed in this example for the sake of space but that have been detailed by other Smashing Magazine authors.

Adding Touch Support

The majority of mobile devices that depend on touch interfaces do not support a pure “hover” state: An element is either “in touch” or not. With rare exceptions, there is no registration of a fingertip being just above the screen of a mobile device. A brief touch might be interpreted as a hover event by mobile browsers, but this behavior is not perfectly predictable. As such, our interface will not work on most tablets or phones, at least as it currently exists.

To solve this issue, we’ll add a little JavaScript (by way of jQuery) to the page:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
    function is_touch_device() {
      return !!('ontouchstart' in window) 
          || !!('onmsgesturechange' in window); 
    };
    
    $(document).ready(function() {
      if (is_touch_device()) {
        $('span').unbind('mousenter mouseleave touchend touchstart');
        $('span').bind('touchstart', function() {
          $('span').removeClass('hover');
          $(this).addClass('hover');
        });
      }
    });
    </script>
    

The JavaScript applies a class of hover to any span element that is touched. So, we just need to alter our CSS declarations to make this class equivalent to the :hover event:

    .multi-hover span:hover { opacity: 1; }
    .multi-hover span:nth-child(odd):hover { left: 0; z-index: 3; }
    .multi-hover span:nth-child(odd).hover { left: 0; z-index: 1; }
    .multi-hover span:nth-child(even):hover { top: 0; z-index: 3; }
    .multi-hover span:nth-child(even).hover { top: 0; z-index: 1; } 
    }
    

Note that in the mobile version, the extended panel goes “under” the level of those that are retracted, allowing them to be tapped.

Disengaging the copy controls on handheld devices might also be wise. This is not some futile pursuit of DRM, but a practical response to the fact that longer touch times on mobile devices can bring up copy prompts that could get in the way of the user interface:

    .multi-hover span {
      -ms-touch-action: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
    }
    

This user interface pattern of exploration on a mobile device may now be described as “tap on edge.” This could be further enhanced by increasing the overlap of the original position of the span elements in an @media query to provide larger hotspots, making the panels easier to activate, along with further improvements for smartphones. This code is not the only way to achieve this effect either: Ana Tudor has written an alternative technique using CSS transforms and SASS.

Conclusion

Crafting an element of surprise on Web pages can raise visitor engagement without obfuscating important content, sidelining mobile visitors or disadvantaging users who require accessibility features. Naturally, this must always be balanced with the need to guide users through the website: Visitors will only be surprised by the effects described here if they explore the page for themselves, or are led to it. How much users should be led and how much opportunity they should be given to discover a delight on their own initiative is a central question of user experience design.

(al) (ea)

© Dudley Storey for Smashing Magazine, 2013.

Namebox is a simple service created by designer Drew Wilson to help you sell your unwanted and/or unused web domains. It’s free to use and is built to make listing your domains quick and easy.

For those of you that are unfamiliar with Drew and his work, he’s well renowned for building his own products from start to finish all by himself, and Namebox is no exception. In fact, in this case, he built the whole thing in just two days! That includes doing everything from the design to writing the front and back end code as well as writing the copy.

Not only is the speed at which the site was built impressive, but also how quickly it began to take off. Within the first 24 hours there was 15,000 visitors, 800 sign ups, and over 2,100 domains listed.

Whether you’re looking to buy or sell a domain, I highly recommend that you check it out.

What do you think of Namebox? Will you be using the service to sell your unwanted domains? Let us know in the comments.

FLATPAD: A Twitter Bootstrap-Friendly UI Design Bundle – only $9!

The act of storytelling is present in every culture. Storytelling, when done well, can move people to take action.

The way we tell stories has evolved drastically over time. We constantly find new methods for preserving and sharing our stories: From drawings on cave walls, verbal recounting passed down from generation to generation and songs to more modern ways like newspapers, books, audio and video recordings.

The newest place to tell stories is the Internet. And like with any other medium, telling stories online is a very powerful tool for communicating your message. Online Storytelling help us engage and captivate our website visitors.

Let’s take a look at how you can get the most out of online storytelling by going through the most common ways we tell stories on the Web, as well as by discussing a few examples of good online storytelling.

Storytelling Through Text

While contemporary web technologies allow for all different kinds of content presentation, text is still one of the most common methods for telling stories on the Internet.

Textual content can be very effective, and sometimes it’s the only option that makes sense or is practical. Written stories (like blog posts, essays, articles, and e-books) are generally easier to produce compared to other methods such as video and audio.

However, people only read between 20-28% of the words on a web page on average. Furthermore, eye-tracking usability studies show that we tend to scan rather than completely read web pages.

So text might be a popular type of content on the Web, but it’s not necessarily the most engaging type because people just don’t read as much as we would like them to.

We need to give people a reason to get reading and then keep up their interest so they don’t stop.

By packaging your content in a good story, you can do just that.

You can build a captivating story about pretty much anything: your product, your company, your team, your vision, your customers, your experience, etc.

Make your story personal, fun, obscure, provocative, and anything else you can do to capture your readers’ interest.

Let your imagination run wild and offer your visitors more than just boring facts.

Examples of Storytelling Through Text

Campaign Monitor‘s "Our Story"

Campaign Monitor knows how to employ storytelling on their website. On their "Our Story" page, you can learn about the company history, their motivation, and their vision.

Not only is the text readable (it’s short and well-structured), it’s also engaging because it’s written informally by design.

The story starts with basic facts about the company, followed by an appealing photo of the team and a personal quote about the company’s goal. The tone of voice is casual and direct. In case you get bored, there are more team pictures to give you a glance "behind the scenes" and to keep you engaged.

Goruck

Goruck manufactures and sells high-end backpacks.

The founder of Goruck, Jason McCarthy, tells stories about why and how their bags are developed to make potential customers appreciate the work and the thoughtfulness in the design and manufacturing of the company’s products.

Jason tells the story through their blog and in other sections of the website. One such story is how he used their newest product (which is called the Goruck GR2) on a trip to Shanghai. Throughout the narrative, he outlines why the bag was developed for the purpose of travelling.

By publishing stories in your blog, you have the opportunity to really engage and connect with your readers.

The Goruck "About" page is also written like a story instead of what we commonly find in most other company "About" pages that are stuffy and too formal. Instead of a photo of their products, there is a real photo of Jason at the top of the Goruck "About" page.

Storytelling Through Visuals

Still images can tell stories. A picture is worth a thousand words as the adage goes.

Visuals are very efficient in conveying a story because our brains can process them 60,000 times faster than text.

You can write a whole lot of text to explain how your product works, how it makes people feel, and where they can use it. Or you can show a couple of pictures of real people using your product.

Images can tell stories and, at the same time, they leave a lot of room for personal interpretation.

There are three main types of visuals that can be used as Web content for storytelling:

1. Web images in your content (such as photos, sketches, illustrations, graphs, and charts)
2. Background images
3. Infographics

Using images with your content can supplement your textual content, and can help move your story forward.

Background images can draw website visitors in and put them in a certain mood. They can give people a good idea about the story you’re about to tell. Background images can help you build your site on a story.

Infographics are a great way to communicate a story. People like infographics because they are easy to consume and fun to share on their social networks. Infographics are popular because they can hold a lot of information while using very little text.

Examples of Storytelling Through Visuals

Testflight

People love the idea of interacting with actual human beings. That’s what Testflight is able to do for me with their visuals.

For some of their key content, Testflight uses blueprint-style sketches for images. Somehow this feels like you are in a room with them and they just made these sketches a minute ago to talk you through their work step by step.

Hand-sketched visuals can give your stories a personal touch, helping you connect with your visitors. It makes your story more authentic.

Airbnb

The site of Airbnb welcomes you with big and beautiful background images; a different one for each travel destination you select.

These background images give you a great feeling of the featured destinations, stirring your emotions, and giving you itchy feet to travel.

Airbnb tells different stories from around the world and invites you to become part of these stories.

StumbleUpon

Background images can also serve as a metaphor to help you explain abstract concepts and attract your visitors’ attention.

The StumbleUpon homepage is kept very simple: It consists of a simple header, a few lines of text, a call to action that invites you to "Start Exploring," and a huge background image.

At first glance, the background image is just a pretty image.

However, when you look closer, you will see that it perfectly reflects what StumbleUpon is about: Exploring the Web. Doesn’t the scene remind you of one of those warm summer nights when you were still a child? I remember myself playing outside in the garden, exploring the world with all its beautiful details and little wonders — a cherished story from my childhood.

Web Designers vs. Web Developers Infographic

Here is an infographic on Six Revisions that tells you the story of web design and web development through infographics. The story satirically portrays the people who are part of the web design and web development industry.

Water Down Infographic

Water Down is another infographic that tells a story; the true story of the lack of access to clean water in the world.

The story starts with the amount of water available on the planet and ends with the fact that every 20 seconds a child dies from water-borne illnesses.

With infographics, you decide just how many pieces of the puzzle you need to get the entire picture.

Storytelling Through Animated Interaction

One aspect of good storytelling is entertainment. When people are entertained, they will be more likely to listen to your story.

Good stories are fun, scary, heartwarming, and so forth. They appeal to our emotions.

That’s why we tend to think of storytelling as a gift.

For example, you might think something along these lines: "I love this site because someone came up with this nice story that made me smile."

With animated interactions, you can give your visitors such as gift.

I already discussed how people love visual stories. Animations take your visuals a step further by adding motion to them.

Once you’ve got people hooked, they’ll continue browsing your site to find out how the story continues. This is also an extremely positive effect of storytelling in general: It makes us curious and eager to find out what happens next.

One technique for animating your content is through the use of parallax scrolling. Parallax scrolling is a relatively new technique in web design with lots of potential to improve your overall user experience. It offers the ideal setting to tell your story in an engaging and interactive way. Let your visitors take control and let them walk through your story in their own pace. The different layers that respond differently to the scrolling behavior of your visitors create a sense of depth and even allow for multiple story lines.

Examples of Storytelling Through Animation

Google’s "The Story of Send"

The animated story of what happens whenever you send an email is entertaining.

Because their animated story is engaging, Google is able to inform and connect with their audience more successfully.

Peugeot’s "The Hybrid Graphic Novel"

A great example of storytelling through parallax scrolling is by Peugeot for their new HYbrid4 technology. It’s a graphic novel that progresses as you scroll down the page. You get drawn into a story of a hero who is about to "embark on a challenging mission to capture confidential data and get away safely."

As you scroll down the page, you become the witness of a beautifully illustrated and captivating story, which introduces the different travel modes of the HYbrid4 technology as a side plot.

The story is accompanied by music and sound highlights to make it even more engaging. There is no way you would want to leave the web page without finishing the story first.

TEDxGUC

On the TEDxGUC website, parallax scrolling is used on the homepage to welcome you with an interactive "TED tale."

When scrolling down the page, you learn all about the story behind TED. How it was founded based on the idea that small ideas can change the world, if they meet the right people and if they come together.

TED brings together ideas from all over the world and they are constantly looking for new ideas. By the time you get to the end of the page, you are being invited to join the TED community. End of story.

Storytelling Through Videos

Almost all videos include some kind of story. Video allows for both motion picture and sound, basically all the technical aspects that make a great platform for an engaging story.

Did you know that site visitors stay on a web page 100% longer when it has a video on it?

Also, site visitors are 85% more likely to purchase a product after watching a product video.

Those are just some numbers that show you how good of a platform video is for your stories.

Examples of Storytelling Through Videos

Wistia

The video hosting service Wistia shows us an example of good storytelling through video.

They have three videos on their homepage that can all be watched separately depending on which topic you are interested in.

In every video, different people from the team talk you through each chapter of their story.

At the end of each video, you are automatically taken to the next video to preserve the continuity of the story.

Even though there are three videos, they all cover different parts of one story. The story of Wistia, and the team behind it.

Droplet

The mobile money app Droplet also uses video to tell a story.

The video takes you on a journey through the city of London. It shows you why there is a need for the app and how the app solves an existing problem. They do it through storytelling.

The people behind Droplet have chosen a cartoon-style video. This allows them to minimize noise and focus on the details. The hand-drawn style makes it very personal and unique.

Storytelling Through Audio

Auditory storytelling is a very old form of storytelling. Songs, for example, were easy to remember and pass on from generation to generation.

Even today, most songs tell a story of some sort.

On your website, you can use audio in many different ways. Just keep in mind that not all people appreciate it, so be thoughtful in execution.

Example of Storytelling through Audio

Dumb Ways To Die

The website Dumb Ways To Die is a public service announcement campaign by Metro Trains in Australia to promote rail safety. The campaign went viral in 2012.

The story is about the many different dumb ways to die, including any accidents that happen on and around train tracks.

The campaign turns a serious topic into a story people are more likely to engage with, in the hopes that their message becomes better learned and disseminated.

The story is told in a song and it comes with a fun music video and a very engaging, interactive website.

This is a great example of how to get people to listen to a message they would otherwise not want to hear about.

Storytelling Through Social Media

Social media has gained a lot of popularity in the recent years. Why? Because they allow people and companies to connect with each other. Social media enables us to exchange feedback, ideas and content.

And most of all, social media empowers our users to create their own stories, to share them, to follow others, and to collaborate in building common stories.

For companies, social media can be a great place to tell stories. This form of storytelling is interactive and the stories evolve around a community.

Since social media platforms such as Facebook and Instagram are associated with leisure and entertainment, they attract the ideal audience for your stories.

Examples of Storytelling Through Social Media

Starbucks Facebook Page

There are still a lot of companies that don’t know how to use social media as an effective marketing tool. This does not hold true for Starbucks.

With 35 million followers, more than 50,000 likes on their Facebook page, and an estimated average of 5,000 comments per post, Starbucks sure knows how to engage with their community.

How?

Through storytelling.

Starbucks has mastered the use of Facebook to create a space for storytelling, not only for themselves, but also for the stories of their customers.

Red Bull on Instagram

Another popular social media platform is Instagram. On this social media site, you need to tell your stories with photos and short videos.

Red Bull does just that.

The company is known for their event marketing efforts and they create more content around their product than any other company. Content that is fun, visual, and extremely popular.

Related article: Content is All That Matters on the Web discusses Red Bull’s unique content strategy.

On Instagram Red Bull tells their stories with photos and short videos. And fans follow these stories engagingly.

Online Storytelling is Powerful

The Internet is the most powerful platform for storytelling. It combines different carriers for our stories: text, visuals, interactive animation, video, audio, and social media.

The Web is also the only medium that can be publically accessed simultaneously by people all over the world. Not only does this allow anyone to share their own stories, it also means that our stories can reach the entire world.

Related Content

• The Importance of Web Content Strategy
• Viral Content: Why We Share Some Things and Not Others
• How to Bake Content Strategy into Your Web Design Process
• Related categories: User Experience and Usability

About the Author

Sabina Idler is UX Specialist at Usabilla and Founder of UXkids. Sabina is passionate about improving interactive media for all ages. For more UX insights, check out the Usabilla blog and follow her on Twitter @sabinaidler and Google+.

The post Popular Methods for Online Storytelling appeared first on Six Revisions.