Ten Way to Create Dynamic Storytelling Via Website Design

Listen to podcast:


Good morning internet fans. It’s Ryan Perry, Simple biz support. Today is Thursday, November 12th. Therefore, it’s Internet Marketing Thursday and as usual I have Virginie Dorn with Business Website Center. Good morning, Virginie.

Virginie Dorn: Good morning Ryan, how are you on Thursday?

RP: I am doing great. It’s sunny out. It’s a little crisp. But I’ve got the heater on but you can see at the back window it’s nice and sunny out. So, it’s a beautiful day.

VD: Yes, we cannot complain. We live in the beautiful part of the US. No rain or snow here.

RP: Yep. And the grape leaves are finally starting to turn, ’cause I live out in the country, I’ve got a lot of vineyards around me. So, I’m starting to notice that the grape leaves are starting to change.

VD: Beautiful, beautiful. Well…

RP: Yeah. Well, speaking of beautiful. We are going to talk about storytelling and how to incorporate storytelling into your website. This is going to be very informative for people. If you are looking at remodeling or… Remodeling… Rebuilding your website, because you do need to take some time and energy, and put some thought into this. This is kind of a higher end, more complicated web development and marketing message I would say.

VD: Yes, it’s a fairly new trend. It’s called, ‘Dynamic storytelling‘. It’s using your website in a dynamic way to tell the story of your services, your product, or your company, or your non-profit organization. It doesn’t work for everybody. It is more complicated to code so you have to find the right program. But nonetheless, this is a trend we are going to see in 2016, and later it’s going to continue to flourish and become more and more popular because it’s kind of fun and interesting. And if it’s done right, it really can captivate the attention of your audience which is what you want with your website.

RP: Right. Not only captivate them, but if you are telling the story, it’s a great way to convey your brand message or if you are selling product, what makes your product better than the rest of them? Instead of just talking about it, do you have a screen share that you can pop up and maybe we can show a couple of examples, and then we can highlight some of the different details that they have done? I know we’ve got a list of 10 items that go into a great dynamic storytelling website.

VD: Yes, absolutely. So, there are different ways of telling the story dynamically. It could be done in a cartoon fashion which is also popular, but again, not right for every single type of businesses. So, for instance on this one, you can either scroll down, you can see the sun is moving and then you get a text here and Oh, now you see the guy is in his underwear getting ready. Soon, he is going to be in his bathroom. Well, obviously we are looking at the visual right now but there is a story behind this that matters. It’s called, everylastdrop.co.uk. Very interesting website, as you can see it keeps going. Like this is here, a similar style, again cartoon type… The way they did their website is always a little slow, it’s takes a couple of seconds to download but again, as you scroll down, you can see things moving. This is not a video, this is actually coded images and are timed properly. And if you were to read this, there would be a story that guides you, what’s going on with the money, and so forth. Again, this is very cartoon like.

VD: And we are going to spend more time on this website which has more live images. Now, the thing to remember is to, number one, start with the good story outline. So, think about the… Like movie makers, they always have the story board, so you have to know what the story is, not just make something pretty. It has to be efficient. So, from a-z what are you trying convey? Or quickly do you want to convey that message and what’s your angle? And then you build the story dynamically around that art line.

RP: Alright. And say, part of that, creating that story in that marketing is… Especially for small businesses, they don’t always really know who their target audience is. And target audience really goes to, than just an age group, if they’re male or female, what their age range… It really goes in the interest. What’s going to interest them? Is a cartoon the right solution versus the one we are looking at right now for HTC, which is more live picture based?

VD: Yes, indeed. And we mentioned target audience I think every week. And I think it’s because it’s so important. If you don’t know who you are trying to target, how can you have a good online marketing campaign, or a well designed website. So, something here for story… Dynamic story telling, you want to know who you targeted to make sure the design, the graphics, the text, the color scheme, is just truly targeting them and not someone else you are not interested in. So of course, use interesting and compelling images, photographs, or graphics that can trigger a positive feeling within the visitor, whatever that feeling might be. Now, here as you can see, you can… The text, we always say, “Keep it very short, quick to read at the glance, succinct, use fonts that are easy to read nothing too fancy.” because you want to move people for the story fairly quickly otherwise, they get bored. Let me click here…

VD: As you can see here, volume up, distortion down, so they show you like little screen shots of what can be low lights. Again, some sub-texts, more images, few ideas to impress the visitors here in…

RP: Right. Now, let me ask you on this website that looks like there is… I mean, we have big images, you’ve got multiple images. It looks like there is a lot of data there. If we go back maybe two years now, Google said, “Look, you need to really make sure that you’re cognizant of your bandwidth that your website takes to load.” So, are there any issues like a Google penalty for loading times or anything like that, or how do you handle that from a design and build point of view?

VD: Yeah. The load time… If the load time is too slow, you will be penalized by Google for your search engine ranking, but there are techniques you can use nowadays to reduce that loading time. And what happens in most cases, again, when it’s well done, is the first image is quick to download, and while the visitor is reading the text and absorbing the content of the photo, then everything else is being downloaded and cached by your browser in the background. But the visitor doesn’t know this is happening. So again, the first one is being downloaded very quickly, it takes a second or two for the visitor to absorb it. While during those two to three seconds, everything else is downloaded. So, when I click on the second button, it doesn’t need to download, it was already done. I just didn’t see that because it’s done through the code.

RP: Right. So, from a programing point of view, you can actually control what pops up first so that you have that what appears to be a very quick load time, but essentially all the other content that you haven’t seen yet is loading in the background because it doesn’t need to be visible.

VD: That is correct.

RP: Okay.

VD: So, there are ways to go… That’s why… I mean, this particular home page has a lot of content in terms of images and movement. You will think it would take a few seconds to download but it doesn’t. If I was to refresh, it comes very quick… There we go. And let’s go to this one, Lexus Asia. I don’t own a Lexus, I’m an Audi person, but still a nice car.

[chuckle] And this is also dynamic storytelling but more for a corporate-style website. And you can even scroll down or use your… As you can see, I’m going super slow with my scrolling, but it just makes it interesting, this tyre is cool, again, some short texts telling you something, and then something more. As I scroll down, it gives me more information. If I’m interested in information, I can slow it down and read it as it goes.

RP: And with all… The other thing that’s kind of interesting about this, especially this Lexus one, is that you’re not getting all of the information all at once. As you’re scrolling down I could see little… Like the text, and they look like a DNA helical or something. As you scroll down, each line kinda popped at a different time.

VD: Yes. So, that’s the biggest thing that have changed on the past year or two, is the ability to do that. We couldn’t do that before we were coding, now we can. We time the text at different moments based on where the cursor is. It gives people time to actually absorb the text, kinda like captions on TV. They don’t give you the whole caption for the entire movie ahead of time but just give it to you every scene, and that makes it more manageable for the visitor.

RP: Well, and I could see as far as… I like the fact that you used “absorb” because it does take people some time to absorb information, and the last thing you want to do is run into a website that’s just all text. It just overwhelms the brain, it’s too much information to absorb. So, I like what this dynamic storytelling how we’re just giving little nuggets of information at a time. So, one, it makes it much easier to absorb the information, but number two, if it’s a good story like you said, “Hey, I want to… ” It’s like reading a book. “I gotta get to the next page, I gotta get to the next page.” And that engagement is going to help you from a Google point of view, in the sense that you’re keeping people on your website longer. Not only obviously on the conversion side also, and then you can get into the social side of people actually sharing this ’cause they thought it was really cool.

VD: Absolutely. All those points are well made. Capturing those audience, that’s what we’re trying to do because we can’t do eye contact or a handshake, it’s just digital, it’s right there in front of them in the comfort of their office or their home. Now, based on your product, you can make it more elaborate. Lexus obviously has more of a sophisticated clientele, typically white collar, used to seeing something fancy, and bright, and shiny. Oakley here, it’s more a dynamic audience, people who love skiing every winter and so forth, so their website is slightly different. So, let me see. Let me refresh it. For some reason their image is missing. Interesting.

RP: It always happens during the demo. Why does it always going to break during the demo?

VD: Yeah, so it’s a little glitch. So, I’m going to show you different kind of dynamic as you can see. “I’m invincible.” They’re making a statement here, “Introducing the new Airbrake MX Goggle.” And then you can see it, the image here is to illustrate that statement they just made. And here you can click on video, here it shows more information. Again, it comes at different times. The velocity, the mass, they’re not all in one. Here’s kind of cool. Obviously, you need excellent product photography to do that kind of rendering, but it’s Oakley, they got plenty of money. But again the message is very clear, look at how well it’s made, it’ll protect you, it has all the cool things. This text again very short, even though it comes at different time, it’s short enough that people can read it fairly quickly. “Comfort + performance.” I mean, they don’t even put the word ‘plus’, they just put the symbol.

RP: Right. And I think, with them they’re understanding their audience. The reality is really their audience probably isn’t that interested in all the technical stuff that went into making the product, they just want to know that it’s going to work. So, I love that first visual with all the rocks kind of pounding on the goggles, and it’s clean and no scratches on it.

VD: I know, it’s perfect. And you can see the limited amount of colors, I always tell clients, “Choose one primary color and then a secondary. Then you use at different time.” Primarily, it’s black and red, with a little bit of yellow because it’s part of the goggle, but again very clean, it’s all about the product in a dynamic fashion. It totally works. I want to buy goggle, I don’t even ski.

VD: I want the Lexus too.

RP: Maybe it’s time to start skiing.

VD: Yeah, maybe time to buy a Lexus.

RP: There you go. And then ’cause we’re running out of time, all the things that we’ve looked at are on a desktop. What are the concerns as far as being able to take all that big imagery and all the timing between the text and the photos. I mean, there’s a lot of stuff going on there. What about mobile devices and tablets?

VD: Yes, very important to make sure the dynamic storytelling is mobile responsive, and many instances we will change the storyline, make it more succinct, shorter, less movement. In some instances, we remove the movement, it’s more thumb operated. So there are ways to tell the codes like, “Here someone’s on smartphone, don’t make it so dynamic on it’s own, just make it so every time they scroll down with their thumb make it dynamic that way.” So, there are many things we can change and again make it shorter on the smartphone, some reason people’s attention span is shorter on a smartphone, than it is on a regular desktop. So, but…

RP: It’s probably… It’s because they’re driving.

VD: That is bad. Don’t drive and text.

RP: Alright. So, we covered… I think we covered all 10 items, even though we didn’t name them off. There is a lot of stuff in there that we covered. But hopefully the visual aspect of what you saw, go check out some of those websites, very powerful imagery, storytelling, a very unique way to brand a website that’s really bound to create some interest in your product if it’s done right.

VD: Yes indeed. Yes, you’re right. Talk to your webmaster about it, see if it’s the right option for you.

RP: There you go. With that that ends today’s show of Internet Marketing Thursday, we will be back next week. However, the following week is Thanksgiving, we’re going to take the day off and then we’ll start up again in December. Virginie, as always I appreciate the time and energy that you put into the show, and I’m looking forward to talking to you next Thursday.

VD: Take care, bye-bye.

RP: Alright everybody, that’s it for today’s show. I hope you’ve found this informational. If you have any questions for Virginie regarding design or anything about how this works, the dynamic storytelling, feel free to leave a message below and she will definitely get back to you. Alright everybody we’ll see you next week. Take care.


About the Author:

Ryan Perry is the founder and CEO of Simple Biz Support, Inc. Ryan started video blogging in 2009 as an alternative to written blogs to create visibility and credibility online. During the workweek, he enjoys helping small business owners harness the power of video to grow their companies. On the weekends, he enjoys hiking and searching out waterfalls throughout the state of California.

One Comment

  1. […] So that takes us to the second part actually. It’s all tied in together, which is dynamic storytelling. It’s a blog you and I have covered, I think it was last week. It’s telling a story […]

Leave A Comment