Listen to the Podcast:

 

Good morning internet fans. Ryan Perry here, Simple Biz Support. Today is Thursday, August 27th, therefore it is Internet Marketing Thursday. I do have Virginie Dorn with Business Website Center. Good morning, Virginie.

Virginie Dorn: Happy Thursday, Mr. Ryan Perry.

RP: Happy, happy Thursday. Yes, it’s finally warming up a little bit here in Sonoma County which is great to feel after the last few days of cold weather that we had.

VD: Cold weather? It was in the 70s. It was 90 yesterday, so… You’re weird!

RP: 90 is nice. 70 is cold. But that’s all good. We actually have quite a bit to cover today in our continuing episodes of website trends heading into 2016. And specifically today, we’re going to talk about responsive design and how responsive design should really change for the device, and again, responsive is that a website looks one way on a large monitor, another way on a tablet, and then another way on a mobile device. Originally, when responsive websites came out, it was about making the pictures either bigger or smaller, and then of course having the text be readable, and then actually being able to have clickable links on a smartphone. But today, as technology grows, as we become better adapt at building websites for multiple platforms, people are kinda rethinking how they actually lay the page out for mobile devices.

VD: Absolutely. Technology is at a point now and we pretty much can do anything you wish with your website when it displays on the smartphone or a tablet. Smartphones are the ones that are most affected because the screen size is so small, and the attention span of the user is very small, and their patience level is very short as well. You really want to grab what they need to be seeing on a smartphone. You don’t want to just be putting the entire website on the smartphone. It just doesn’t work anymore. Now with technology we can do that. We can hide elements, as you mentioned, we can make things smaller, bigger, style them differently, but it’s the hiding of the elements or placing them in a different part of the page is what’s more exciting with the new coding techniques. Today we’ll be showing you some examples to illustrate what we’re talking about.

RP: Okay, perfect. What I think is really interesting is that typically before you would build a website for a web browser full size, and then it would basically, you chose the order that all the different elements on the big page would show on a smartphone. So, essentially all the content that you would see on a 22 inch or a 32 inch monitor, back in the day, you were essentially compressing that and fitting it into this little itty bitty screen here on a smartphone. You have to scroll and scroll and sometimes you would have images that weren’t relevant to the text and it was just clunky. So, one of the cool things that I think that you’re saying that I want people to hear is that you can actually remove elements, so that now you’re essentially building two websites as one, but you’re able to build a website that really makes sense for the user experience. I think that’s the key thing, is the user experience that’s relevant on a small screen versus a large monitor.

VD: Yes. It’s all about the user experience, making sure they like what they see, and if they want more information, they can read on or go on a regular desktop and see the full version.

RP: Right.

VD: Well, we’re talking about the same website, by the way. It’s the same code, but there’s additional code hiding elements. So, we’re not talking like in the old days when you had a mobile website and you had a desktop website. This is one and the same, but just with added coding called media query where we can manipulate what we want the user to see.

RP: Right. Yeah, so when I said two websites, you’re not building two websites. However, when you login on a smartphone or you… You open up on a smartphone, the website knows. So what was that, media query, that we said it was?

VD: Yes. Yes.

RP: Okay.

VD: Fancy name.

RP: Alright. Well, let’s, maybe we should just go into it. What are some examples or where would you like to start as far as design ideas because really this should give you as a business owner or somebody that’s looking to redesign their website a different way, unique perspective at looking at what is capable, so that when you’re working with the graphic designer, may it be somebody local or Virginie, you understand that the sky is the limit.

VD: Yes. So, let’s take a look at the first, I use my personal website as an example. As you can see, this is the homepage on a full size desktop, so what you would see in your office. It has a slider with a slide moving in, some text left and right, images, very busy, lots of things to look at, lots of gimmicky items. Now, I’m going to switch to a second tab. It’s going to show you a screenshot of my phone from a couple of minutes ago. This is the same homepage. You might recognize the lady with the blue eye, but all of the elements above it has been removed. It was just too much to put there, too hard for people to see. Let’s go back here. You can see here just the menu alone, all of this here as being trimmed down to this.

VD: The top header used to have our email, social media icons, you name it. We really stripped it down to two things, phone number, which is clickable and visit our blog which has our weekly, and webinars, and all the posts, and our brand, which is right in the middle. The menu has been collapsed, we’re all familiar with those now, you click on it, it will collapse. The slideshow is not a static image. The one that that we felt works best with our style, our branding, we placed the testimonial which we had here, we used the most important one. So, we actually took the liberty or deleted the second one, we just didn’t want a list of testimonial will, so we moved these on the side. So as you can see now, it’s very clean and they can scroll down of course, this is just a static screenshot. Any questions so far?

RP: Not so far. What’s really nice about this is that when you are on a mobile device not only is the real estate much smaller, but like you said the attention span is much smaller also or limited and therefore you really need to get to the point, and I love that you removed a lot of the distractions from the mobile device.

VD: Yes, we wanted to really look sleek and modern. Now, the same happens for the footer, so we… This is the header as being and the slider, but if I scroll down, we have quite a large footer, even in the bottom, all rights reserved, we have a bunch of extra links. If you go on a smartphone, as you can see, our footer here has been streamlined as well, the “all rights reserved,” we removed it. We centered everything and we only put few links that was more important to us which is a link back to the homepage, the showroom which is our photo gallery and our testimonials page. So again, we took this footer here and stripped it down to something that made sense for that type of user.

RP: Right. The other thing that I like about that, and we talked about this in an earlier episode, is that when you scroll to the bottom you’ve now reached the end and that is a great place to have a call-to-action, so I love that you have, not only is your phone number is down there, but you have a call-to-action for a consultation, your branding is there. So, now that people get there, it’s like “Okay, what do I do? Do I scroll up or am I ready to make a decision and go ahead and call you?”

VD: Yeah, and we could even take it a step forward, but as always we offer complementary consultation. This could have been skipped truly, I mean it’s not needed, we could have stripped it down even more, so once in awhile when we have extra time to go back to our own website and what we do is remove more stuff. So we’re simplifying, simplifying, simplifying, that’s the new trend. Now, the same is true for photo gallery. So in a sense… If you have a lot of photos on your website you might not want to show all of them, unless they are fully optimized with the dimensions and size.

VD: Oftentimes we will recommend people to select the most powerful and relevant photos and only display those. Then we will take it a step further and maybe even reduce the photo size and resolution, so it downloads better on a tablet and a smartphone. So it pretty much tells the website, “Hey, this person is on a smartphone, choose option B of that photo,” and then hide photos 12 through 24. That way the page downloads very quickly and again the attention span of the user is being kept up.

RP: Alright, and download speed on mobile device is important ’cause it is one of the factors that Google looks at, not only on your browser site, but definitely on the mobile site also simply because people are on… Typically they’re not always on WiFi, they could be on their actual cellular using that bandwidth. We want to minimize that impact as much as possible.

VD: Yes, so always pick a photo that is the most relevant and the most powerful to convey the message you’re trying to convey online and just choose that one. It’s very difficult for all of us to just show less. It’s so easy to say, “I want to show my entire portfolio.” We are as guilty as everybody else, our portfolio page is not that stripped down on the smartphone, it could be way more stripped down. But again, show less so then the focus is better for the user. So we talked about handling and hiding elements, but also images, but also text. So text on the smartphone should be displayed nicely and sometimes we will remove text that is maybe redundant or not as important and really keep what’s most important.

VD: So in that example here, we just keep one testimonial for that page instead of displaying the four or five that was on that page and as you can see it’s tiled properly, you need to make sure there’s also a little bit of padding on left and right, sometimes people go too far to the edge and on some smartphone with a cover, they’re missing some of the lettering because the case cover is covering it, so make sure it just has a good feeling about it, choose the right font size for a smartphone user. The same is true for tablets, but tablet is not as picky because it has a bigger screen size and a lot of things can be left on the tablet, so it’s…

RP: Alright. Sorry, I was going to say, and the other thing is, people that have a lot of clickable links on a smartphone, that may not be as relevant simply because it’s not always easy to click on the link.

VD: Correct. So just keep the most important links, hide the others. Other things we talk about call-to-action and maybe making things bigger, like on our contact page, the ‘contact our team today’ is pretty bold. We got rid of the image, it’s just that our blue with font, then it’s centered and bolded and bigger. Can’t miss it. That’s the whole idea of the call-to-action. You don’t want people to miss it, you don’t want it too subtle.

RP: Right.

VD: Then something for like contact form as well, just make sure everything makes sense. So, on our contact form, the text explaining the fields, that need to be enter is inside the boxes. Now, I can myself see a critic here. For instance, company name and domain name if applicable; We should have just skipped and domain name on the smartphone, because it’s not going to be fully visible because of the screen sizes, you can’t see. So that’s something we’re going to be removing shortly, now that I’ve noticed that.

RP: Right. It’s interesting how you look over something, you look over it and after awhile, you kinda notice different things. Really, the fact is web design regardless of if it’s for a website or for multiple device, your website’s really never done. It should always be tweaked a little bit and it should always be changed and updated as the times and the technology changes also.

VD: Yeah. Yeah, I mean, you can work on it forever and ever.

RP: And ever, and ever. But that’s how you make money, so that’s a good thing.

VD: Yes, indeed. It’s up to your budget, you just talk to your webmaster, they should understand what we’re talking about. If they don’t, you need a new webmaster.

RP: Yeah. It’s one of those things that I think it’s almost, you have to really… It’s something you have to wrap your brain around, it’s not just the coding side of things, but being able to understand what the user experiences. It’s kind of like, basically your website… We gotta end this real quickly here. But you gotta think of your website as a marketing piece, just like a postcard, just like a billboard is. If you were going to put an ad on a billboard, and the reality is the message that you put on a billboard for people that are driving in vehicles down a freeway doing 65 or 80 miles per hour is going to be very different than the message that you put on a postcard that someone’s going to pull out of their mailbox along with other junk mail, because people in their different frame of mind, they’re going to be able to see it differently and therefore the way you present it, and the way you…

RP: Or I should say, the way you present it and your message needs to be uniquely different for each one of those. Same thing is true with your website on a full screen; You want to use that real estate, you have it. That’s where you can get a little bit fancier, you can be really bold. However, understand that how the user is wanting to interact with something on a mobile device is going to be very different. They may be on the fly, specially if you’re a restaurant or something where they just need an address or a phone number or a menu; Make those things really easy to find, because now you’re making the user experience a positive one and therefore, they’re more likely to buy from you.

VD: Yes, I agree 100%.

RP: Alright, perfect. With that then, we should probably get going ’cause it is 10:00 AM. However, I will see you again next Thursday where we’re going to be talking about another internet marketing tip that will make your life so much better.

VD: Sounds good. Take care.

RP: Alright, Virginie and everybody else out there, thanks for watching the show and we will see you next week. Take care.