Website Design: Get The Most Out Of Sliders

Good morning internet fans, it’s Ryan Perry with Simple Biz Support, on the other end I have Virginie Dorn with Business Website Center. Today is Thursday, therefore it is Internet Marketing Thursday and before we get started talking, my phone’s ringing Virginie, but I do want to send a special shout out to my daughter who turns 21 today, who’s up at PSU, hopefully studying hard and not partying hard today. But good morning Virginie. How are you?

Virginie Dorn: Good morning and happy birthday to her.

RP: Thank you very much. We have a lot of information that we want to cover today, simply because this is something we could spend all day talking about, and that is the nuances of sliders. For those people that maybe are not aware, if you’ve gone to a web site and you’ve seen images slide across, and it could be even movies that show, and then after a while it slides over and then a new image pops up. That’s a slider and we were talking offline before the show that sliders went away for a while as mobile devices came about, simply because the technology wasn’t quite there for them to show on the website and the mobile. And now as we’ve gotten into responsive web sites, responsive websites are doing a better job of having that slider show up at the top of the page on a large screen, but then being able to shrink it down to a tablet or even a smartphone, and one of my comments was, “Yes, but I think they still have some work to do,” because when you just go into Word Press, as an example, and fill in pictures on a slider, sometimes the images just… I feel like there’s a safety zone in there, where if you put stuff up here on a big screen it might get cut off, or on a little screen it’s going to get cut off, and you had a great solution to that.

VD: Yes, actually now with new cutting techniques we can pretty much regulate how we want the slider to look on any devices. For instance, on the large screens you might want the slider to go all the way to the left and to the right, but not necessarily want the full height of your screen. So you can actually put the maximum height there, so you can really dictate how you want it to look, based on the screen size of the device utilized by your visitor. So you just ask your webmaster, they should know how to do that. It’s all very easy to do now with coding, and that’s what has opened the doors again for sliders. They’re back in popularity. They bring a great visual impact, especially if you have a strong message, or call to action you’re trying to convey. Sliders are a great option for that.

RP: Right, and I kind of led right into one of the first things that I wanted to talk about, was the fact that web sites these days, it’s really about building a brand. Web sites before used to be just a brochure. It was an online digital brochure. And today, web sites are really going more towards a story. You need to convey a feeling, you need to convey a emotion. And what I love about sliders is you can put very large images or even video with text or without text, and that image is going to say a lot about your business. And I think that’s the number one thing you need to consider when you’re doing a slider, is what is that message? So what are some of the things that people should think about when they’re figuring this out?

VD: Good question. There really are six elements to consider, and today we’ll focus on the sixth one, which is the design and styling. But first and foremost you want to think about the location of the slider. Exactly where does it need to be in order to fulfill your business goal for your website? Should it be on the homepage, on the second page, gallery? The second thing is the goal. Just like you mentioned, what are you trying to accomplish? Are you trying to sell a specific product? Are you trying to convey a message? Does the message change frequently? Again, once you understand what the goal of a slider is, then you can develop a good slide show that will work for you. The third one is, you have to think are you going to have images only, image-videos, videos only, image-text combination? There are so many combinations. The answer is different based on your type of business, and the type of target audience you’re trying to reach. The fourth one…

RP: Before you bounce onto number four, because we’ve talked about video a few times, I just wanted to throw one major thing in there to consider, and that is audio. A lot of people get frustrated when you open up a website for the first time and “boom”, music comes blaring out or somebody starts talking at you, and really depending on who your audience that you’re targeting, having that audio start out automatically may not be a smart idea, especially for people that are going to open your website at work or somewhere else. You never know where people are going to be, and that audio can be a big turn-off. I know with my new website that I’m designing right now, it’s going to be video, but there will be zero audio. So it’s really important that I convey the message that I want to through the images and through the text that I’m showing.

VD: Yes, so we actually recommend to not have an autostart, regardless of your type of business. It’s better to not have it, it’s safer that way, and give the control to the visitor to choose if they do or not want to have the video play. So I’ll go quickly on four and five. Fourth is the transition styles, actually we’ll show you some screen shares today. Do you want it to fade in, fade out, slide from left to right or right to left, to break into pieces? There are many different variations. The speed of a transition is the fifth element you should be considering. Again, it goes back to that target audience. If you have a younger audience, something quicker and snappy is going to work best. If you have a more mature audience, you want to slow down the slides and get them to appreciate each slide much slower. The sixth one is, of course the design, the styling, what it does. So, you ask me to share some screen shares so I’m going to do that now.

RP: Okay. We’re going to be looking at… We’re going to be able to see some different styles and designs and hopefully people be able to understand the message that is trying to be conveyed on the website.

VD: Yes. And I’m still trying to do the screen share. It failed.

RP: We’re back to you. It’s the perfect screen share.

VD: The side view. I didn’t want to do it, so let me see. Oh, I love Google.

RP: I love modern technology sometimes.

VD: We’re just talking about Google not very long ago.

RP: Google doesn’t want to know what we were saying about Google.

VD: Aw. I don’t know why it’s not working today.

RP: Can you bring it over to another screen?

VD: Yes, I might just do that.

RP: Okay.

VD: Alright, sorry for the technical difficulty.

RP: That’s alright. Do you want to send a… Do you have a website? You can just go throw it through the chat and then I’ll pop it open on… Oh there we go! There we go!

VD: There.

RP: Winner, winner chicken dinner!

VD: Yeah, so I have a bunch of tabs open and they have different styles to consider. I think we talked about transitions of this style for instance, is a typical slides. It can either be automatic or you… Someone could click and it goes left to right, and it could circle back. I’m going to go quickly because we don’t have a lot of time. This style here actually moves the image closer to you as you will see in a second. As you can see the man with the finger, it’s getting a little closer.

RP: Right. Now is that actually two different? That’s two different elements? Or is that just one element?

VD: There’s many things going on here. It’s actually the same image. It’s just brought in closer and enlarged as you can see, your eye is getting closer. But there’s also elements coming to the left, to the right at different time. So, there’s a lot you can do. Again depending on who you’re trying to target to. If you have, again, something more corporate like. More mature, you might something simpler like this, where you just add the image. And it will just fade in and add to the next slide. And the whole idea is to create a feeling here. We do high end luxury spa consulting. Sometimes you want it to be a little bit more dynamic. So this is another style of slideshow that will break into pieces. At least that’s what we… We call it. As you can see, I go to the next slide it’s almost like a puzzle cube style. Again, it doesn’t work for everybody but this gives some dynamic feel to a site.

RP: Right. It breaks it up and the one thing you want to be careful of, is that sometimes people go crazy with transitions. I know when people could start editing their own videos at home. Especially, with Apple back in the day with iMovie, there were all these different transitions you could choose from. And so people went crazy, and every time they went to a different transition there was a different feel, and sometimes it was a kaleidoscope and sometimes it was left. It was right. It was up and down. It broke into triangles. “Don’t get crazy.”

VD: Yes, don’t go crazy. I… I do believe in keeping consistence on the way you style things on your website, but also how you transition elements. They should all be the same. Or maybe stick to two options. This is an older style. As you can see the slide, so it’s limited left and right. This website is several years old and it breaks into pieces just a different way. This is a client here and I have worked with for awhile. Just as you can see, this is actually a slide, but on the left for the first slide we made it primarily the text and a call to action. And then it goes to a combination of images and text. Each slide should represent something that is important to your company of course. A different type of slideshow here. It’s also a fade in and out. Meaning, so the transition between the… The images. One image slowly goes away while the next one is coming in. So, this totally acceptable to put a slideshow on top of the large image if what you do is very visual. So those people in Utah, it’s all outdoors. It’s all about this landscape, so having an image on image works very well for them. But if you’re more of a corporate or service based business like a dentist, you would not want that. It would just be visually to busy.

RP: Right. And you know the other thing, you brought up a dentist as an example. The nice thing with the slideshow is that if you think about it from a marketing point of view, with a slideshow is one it’s going to engage people because now your page is a little dynamic instead of just being flat and one dimensional, and just pictures and words. Having that movement is going to cause them to pay attention more, but number two is now you get to kind of convey some of the features that you have, and what’s neat about it, if we use the dentist as an example, it might be general dentistry, “Here’s our location”. Something simple. And then it slides and maybe they talk about crowns and some custom cosmetic stuff. And depending on the quality and the imagery, you can kinda get an idea is this a low-end dentist office, or is this a high-end dentist office? And that’s part of the power that imagery will do for you is it can showcase the different types of services that you provide in a very organic natural visual way, and you can actually put an overlay on those images so if somebody sees something with they want a cap or a crown or something like that, you can click a button and it will take you to that specific page.

VD: Yes, so those ghost buttons are very powerful if they are done right, just for instance this particular website we actually have two. One is about ‘read more’ if people need more information or get started, then gets the visitor directly to the contact page and each slide can be customized differently, so different call to action. Now, something we have not talked about, some of the slideshow, this is also a very old website. I remember this lady well, she’s fantastic and she has a little thumbnails here. So depending again on what you’re trying to accomplish, your webmaster should be able to guide you and let you know what type of slider you need. Do you need it to be full web? Do you need to have thumbnails? Do you need to give controls to the visitors? Do you need text? Can you have videos? There are many, many different options.

VD: And I think, a client you and I worked with in the past is making the use of a combination slide and video. So just as you mentioned, it doesn’t start right away when people first arrived to that slide, but it does give a visual in part in the behind, but don’t wait screaming loud on the left and then the call to click on the end of the video. Oops.

RP: Alright, very nice. Yeah, and I think where some of that newer pages are going is the whole background. I forget if it’s left or if it’s… I forget the other cab service. Theirs is pretty cool because the whole page is basically a slideshow and doesn’t have the conventional menu and all that type of stuff, but you basically, you have one button to choose if you want more information, but the whole screen takes every time which is really cool.

VD: Yes, and there’s another… This actually, we might be doing something like this for this website we have under construction. This is a different kind of slideshow as well, then it goes left to right, but within the slides you have the ability to have vertical slides as well.

RP: I haven’t seen that. That’s new or new to me.

VD: So there’s this style. There is something bigger, it’s coming.

RP: Yeah, and then we got to get moving here to 10 o’clock.

VD: Sorry, it’s taking a while. Alright. You probably get the idea.

RP: It’s still under construction. It’s all good. Alright, Virginie, any last minute or last second words? What’s that pretty picture?

VD: I’m removing my screen…

RP: That screen is your background?

VD: Yes.

RP: I’m like, “Oh, what website is that? Pretty picture.” I’m a shiny object kinda guy. It’s like, “Ball!”

VD: No, just I had a long conversation with your designer about your slider. You can really make it work for you. It’s a great tool, you can sell more which is the goal of spread your message further on the web. And now then you can make the responses without any difficulty on regardless of the device. There’s no reason why you should not choose one.

RP: Yeah, and the reality is this is… That’s been a trend for the last couple of years, and if you’re looking to redo your website, you need to have some dynamic element I think these days. Otherwise, it’s just kind of flat, old and boring. So sliders, when done correctly, are a great way to keep people engaged, communicate your brand, communicate who you are as a company much more effectively than just standard pictures or words on a website. So alright, perfect. With that I’m going to let you go. I know you have a busy day but we’ll talk next week. We have something really interesting coming up, a recent announcement from Google regarding mobile that we’re going to talk about. It’s going to be really important if you have not updated your website in the last couple of years. This could affect you big time.

VD: Yes.

RP: Alright, Virginie. As always, I appreciate your time and I hope you have a great rest of the day.

RP: You too. Bye Ryan.

VD: 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