Engage Audience Online with Dynamic Web Elements

Good morning internet fans. It’s Ryan Perry with Simple Biz Support. Today is Thursday, February 26th. It is Internet Marketing Thursday and, as usual, I have the beautiful and talented Virginie Dorn with Business Website Center on the other side. Good morning, Virginie.

VD: Happy Thursday, Ryan. How are you this morning?

RP: I’m doing fabulous. Thank you, thank you. Yourself?

VD: I can not complain. It’s gorgeous outside. Business is booming. Our clients are doing very well. So far, it’s been a fantastic year and I hope it continues that way.

RP: Wonderful. Well, as always, I appreciate you taking the time to do these episodes every single week. Trying to help business owners improve their web visibility as far as how does their website look, how does it convert, and how do you get it found on Google. So, there’s a lot of information that we cover here every week and one of the things that we’ve been wanting to talk about and we’re finally getting around to it is about the new, what I consider some new technical coding that you can do on websites which is really cool, and you call it dynamic content. So, can you kind of expand on what exactly dynamic content is?

VD: So, dynamic content is movement. So, it is exactly what it is. It’s things either arriving or moving, having some type of visual action that grabs the attention of your audience. So, the whole idea is to capture them, make them interested in something, make your site a little bit more interactive, and having some moving parts. Of course, we don’t want to do too much of it. So, before we continue just first recommendation, if you have a very visually busy website already, having dynamic content might not be a good solution for you. It will be too overwhelming for the visitors, but if you have this very clean, modern, sleek, and simple site, in terms of design and content, yes indeed, having dynamic element onto your website whether it be text graphics or images will be a perfect solution for your site.

RP: Okay and just to clarify, when we talk about a dynamic element, we’re not talking about Flash cause I remember back in the flash days, we had all kinds. We had moving actions and all kinds of crazy stuff going on.

VD: That is correct. Flash is actually the term for a type of coding. You can still use it nowadays, but a lot of devices do not like it especially, Apple products. So, it’s a question of a couple of years before flash is completely pushed out of the industry. So, you don’t want any flash on your site. You don’t want any flash made website because they will simply stop working at some point or another. So, you want to use other type of codings. Your webmaster should be able to use jQuery, JavaScript, CSS3. There are many new types of coding that can render will send dynamic element without that cumbersome side of flash.

RP: Okay great. So, by taking… Well, I guess the other big question then is okay, so, if I’m looking at it on a desktop, it’s beautiful and all this. We’ve got movement. Once I open it up on a tablet or a smartphone, what happens then? Do we have the same kind of look and feel?

VD: Well, with a new type of coding, you have the options of either keeping that dynamic movement alive on mobile devices or removing it all together. Often times, we just remove the effect, just because on a phone, having things moving in, it’s a little busy, a little bit hard to see. So, we can actually turn off that code so it’s more static when you’re on a smaller screen size. So, good question.

RP: That’s a smart idea because now you’re actually playing into the way people use their device and when you’re looking on a smartphone versus on a screen that changes the perspective in everything. So, it’s good to have those type of options. Do you have some examples? I think dynamic cause it’s great to say, “Oh, this moves here and that moves there, but if we could actually see some examples, that might help people kind of visually understand what’s possible, especially, if you’re looking to revamp your website any time soon.

VD: Yeah, so, let me see that. Let me just screen share. Are you seeing the screen share yet or no?

RP: Not yet.

VD: Okay, let me try again. Sorry. We love technology.

RP: There we go.

VD: Alright. So, I’m going to show you different example of the dynamic elements. Some websites, just by the nature of the design and what they do, I think dynamic element is very cool. I’m not sure if you can see, but there’s shooting bubbles, then pop-up. They almost want you to either mouse over or click there. So, here, for instance, I could click there and see a little… Actually, it’s a mouse over and then it does things for me and it can take me to a different page. So again, it’s kind of interesting, the design of the site itself is fairly clean and modern. So, they can get away with it. A different type of dynamic element, this is a very well known website.

VD: As you can see, within the design, I’m refreshing the page so you can see it. Elements arrive at different time. So, it really keeps the visitor captivated. It wants to see what’s going on almost like a movie or like a Disney thing. It has, even the button itself, has some dynamic element. One says that bye with a little arrow. As you can see, the edges are constantly moving. So, your eye keeps going there. It’s like, “Oh, maybe I do want to buy that pair of shoes. They do that in subtle ways. So, the dynamic elements are exactly that. They are elements. It’s not a dynamic site, not everything is moving, just a few things. Just like the sun ray is moving, but not the cloud. The little call to actions are moving as well. The shoe is staying still, as you can see. Off the top of my head…

RP: On some of these, it’s kind of like as you move the page, maybe the shoe doesn’t move but the background images do, and then you get to a certain point and then finally the shoe moves. It may even be true on this page. I know Apple, for their retina iMac, they do a great job of… I think it’s just fabulous the way it zooms in and out.

VD: Well, we’ll look at that. It’s funny I was looking at that page earlier, and it was not moving today so I chose not to show it. There are other types of dynamic elements. So, when you go to this website which is under construction nothing is moving. But if I wanted to ever scroll down or click continue, you will see things are moving away. So, that’s also a dynamic element in a way then it grabs your attention and then you take some action and then it moves away very smoothly. So, that’s another way to do that. And I know next week we’ll be talking about slide shows, the different ways to have good translations on slide shows and powerful messages. Other type of dynamic elements you and I were talking about is that parallax effect which has become popular about two years ago, and we still love it very much. And parallax is the trick of the eyes you can see. You can see all the text is going above that image.

RP: Alright. And when the text comes over the image, there’s a background image also.

VD: That is correct. So, it can be visually very interesting. Sometimes what we will do for example in that situation is we turn down the color of the background image because we had images on top of it. So, we wanted the focus to be on the smaller image like the Google plus event and so forth. So, as you can see the image in the background as being toned down with opacity. But at the very top, we kept the full grey scale, dark greys and so forth. Because there is nothing on that parallax. So, it’s all in the details.

RP: Alright, very cool. Could you bring up Apple.com real quick and let’s just… ‘Cause I had the same issue that you did, and when I refreshed, it actually worked. But it’s such a… I’m still really impressed by it. So, hopefully, we can get it to work if you go to Apple and then the Mac and then at the top click on the retina.

VD: Okay, so let’s see.

RP: And then you gotta zoom in or…

VD: Okay, so maybe here. As you can see the text is moving up while the image is staying still for a little while and changing. You can also have text arrive to the image at different time or drop in. All this is done with fairly simple code so that’s how far we’ve come. I do like Apple. They’ve done a great job in marketing obviously. After all, they only sell computers.

RP: I wonder if it’s a browser issue. What browser are you on?

VD: I’m using Firefox for that particular sample.

RP: Okay, ’cause I’ve been viewing it in Chrome and it’s pretty cool. I’m going to let you talk. I’m going to just try and bring it up on my side, see if I can get it to work.

VD: Okay. Other types of dynamic elements has to do with interactivity where you want to engage the client… Not the client, but the visitor, and you want them to click. So, it could be survey, questionnaires, answering some questions. Sometimes it’s as a simple as maybe clicking on a state and it gives you a little message here. You click on Oregon, it gives you a different message and so forth. So, there are different ways… So, that’s a sort of dynamic element, but the user is in control of the clicking.

RP: Right. So, I’ve got… I’m going to… Why don’t you go ahead an turn your screen share off. I’m going to turn mine on, and I’m wondering if this is… Maybe this was just an issue. So, now, this is a different browser and this is a good point that even the large companies, a lot of times they want to do something really cool, and as a programmer you’re limited by the tools that you’re provided in the sense that each browser has their own interface. So, this is the one I was looking for. So, when you go to Apple, you go to Mac and you click on the iMac with the retina display, as I scroll down the screen, I’m kinda zooming out of this awesome picture. And what I really love about it is you’re actually looking at a computer. And of course, it’s the iMac. And you kinda see… Even the iMac starts fading in. It’s very cool as it’s starts coming. And then, once we’re at full zoom out, then as I’m scrolling down or actually scrolling down the page. But if I scroll back up the page, once I hit a point, I’m still scrolling up the page but it zooms in. And apparently it works in Chrome but not Firefox.

VD: Correct. So, compatibility issues with different browsers are always key for the special dynamics elements, there are ways around it. Most of that nowadays, we’ve found ways to bypass the issues. I’m surprised Apple hasn’t. In their history, they’ve not done with much work on their webpages. If you go to their homepage it’s pretty much of a letdown considering who they are and how… Multi-million dollar, if not billion.

RP: Well, yeah. It’s been the same look and feel for how many years now?

VD: Correct. But some of the subpages are much cooler. So it seems like they have different web team handling different parts of its sites. But yes, I do like that look. You totally should have it if it’s appropriate for your industry and your target audience. One can have it on their website and they should not have to pay more for the design of it either. But something to think about and consider for clients is; dynamic elements work well for younger target audience, I would say 15 to 35. If you tend to target more mature audience, maybe 40s, 50s, 60s, 70s, maybe dynamic element is not for you. So again, always go back to your core, the target audience. Who are you trying to approach, and based on that answer then you establish your website and the type of functionality you should have there.

RP: Yeah. I think that that’s a very, very important point, because when you add that dynamic element, it could be overwhelming for some people. And if it’s overwhelming, it’s going to turn them off. And you’re going to drive people away from your website, where the real goal is to turn people on so that they want to engage. But yeah, definitely knowing your audience. With that, we’ve got just under a minute left. Any of the last minute thoughts on dynamic elements and where it’s going?

VD: No. I think that last thought about making sure you go back to your target audience and truly understand who they are and design your website for them, not for what you like.

RP: All right. Perfect. Well, with that, that is dynamic elements. It’s a great way to make your website a little bit more engaging, keep people’s attention, obviously if you keep people on the website longer, they’re more likely to engage, make a phone call, buy a product, or whatever. So it’s a great resource assuming your target audience will engage with it. With that Virginie, as always I appreciate your time. And next week we’re going to be talking about sliders. So this is another, what I would consider a more seasoned dynamic element. It’s been around for a number of years. However they are evolving and getting a little bit more sophisticated. So we’ve been talking about different ways you can incorporate sliders, including video, not just pictures, into your website. I hope you have a great day and I will talk to you next week.

VD: Bye.

RP: All right. Bye.


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.

Leave A Comment