Hey, good morning, Internet fans. It’s Ryan Perry with Simple Biz Support. It is Thursday, and I am starting a new weekly live hangout session with Virginie Dorn of Business Website Center. Good morning, Virginie.

Virginie Dorn: Good morning, Ryan. How are you?

RP: I’m doing wonderful today. Thank you for joining me. The goal in the point of doing these weekly blogs on Thursday, and bringing you on as a guest is really to talk about web design, and how it affects your business. I think one of the really cool things about the Internet, and it’s been this way for years, is… And I think it’s becoming more affordable from a build point of view, is that you can be a relatively small ma-and-pa-type store, yet have the presence of a very large corporation.

VD: Very true.

RP: Yeah, and so, Virginie is with Business Website Center. She’s down in Petaluma, California, which is about 45 minutes north of San Francisco, and she specializes in custom web design for clients with products and services. One of the things I really like about Virginie is that she is a coder at heart, so she really understands the importance of not just having a great-looking website, but also a well-coded website. So from an SEO point of view, which is always important to me, the website is going to have better ranking because it’s a clean code. Not only that, but she understands SEO, so she knows how to build websites, making sure it has the right content for SEO. And with that being said, today we’re going to talk about Responsive design. Virginie, correct me if I’m wrong, but I think Responsive has been around for about two years, maybe three years now?

VD: Correct, two to three years now. And it’s become quite affordable as well.

RP: Yeah, and a lot of people are very familiar with Responsive websites from WordPress. I know you work with WordPress, but you also like to build custom… You have your own backend CMS that you use, and you’re able to create a Responsive website with that also.

VD: Correct, yes. It’s all done, thanks to a new form of coding called CSS3, and it’s just opened all kinds of possibilities for websites. In the old days, you needed two websites: One for your phone and one for your computers. Nowadays, it’s just one and the same and the website knows which mobile device you’re on and it adjusts the screen accordingly, so it’s magical.

RP: And from a design point of view, why is this important to you, going from a full screen down to a mobile device?

VD: Well, the truth is most people nowadays are using their little iPhone here, a little tablet, little iPad, so you want to make it as user-friendly for your visitors. So the whole goal, of course, is to adjust the look of your site based on the device being used. So if you’re on an iPhone, you want it to be form-ready; you want to be able to quickly get to where they need to go without having to minimize or maximize each screen. And I’ll be able to show you some live samples in a moment.

RP: Okay. Why don’t we, actually, for those people that aren’t familiar with a Responsive website, why don’t you go ahead and bring one up real quick on screen here.

VD: Alright.

RP: And the other thing I’d like you to do is one of the things I do with my clients when I bring in a new client, we’re talking about SEO, and I noticed that their site is not responsive. We didn’t talk about this, but why don’t you show us a site that is responsive and then a website that isn’t responsive. And on the desktop, if you’re not sure as an end-user, this is how you can test to see if your site is responsive or not.

VD: Alright.

RP: So you’ve got a responsive site up now.

VD: So this is a site we did about two years ago. It’s still looking nicely and it’s still responsive on all devices. There’s a little quick trick you can do on your desktop to see if your own site is indeed responsive to devices. What you could do is at the very top corner here, there is a resizing form, as you can see. So if you click here, it’ll make it full screen. If you click the double screen here, you can resize it with your browsers. So what I’m going to show you here is a PC version. So it’s full screen for this page. Let’s go to a complicated page that has more information. Here I am, for this client, on a typical product page. Great company to work with, by the way. And if we go down and resize the screen, as you can see, it suddenly starts changing things.

VD: So at this moment, as you can see, we have reduced the size of the logo, as well as the menu to adjust for certain type of tablets. As we go a little bit more, we’re adjusting some more, but as you can see, it just changed. It changed from menu on the left here, and you have the menu on the right, to something a little bit more streamlined. So what we have done here, we have removed the logo on the top left corner because that real estate was becoming more and more important. And what we have done is we have moved the left side menu below here. So it’s still available, it’s just being repositioned differently so it’ll be more user-friendly for the visitors.

RP: Okay, and you bring up a good part there that I don’t know if everybody understands, that when you are building a Responsive website, the web developer actually has control of when things disappear, do we reposition them in a different place? Because at that point, we really have to understand that if you’re on a smartphone, an iPhone or a Samsung, that it looks different. And just like if you were to market with a postcard, you wouldn’t take the same marketing message that’s on a postcard, and try and put it on a billboard because the… I’m losing my words here. But basically, what you have to work with, the real estate that you have to work with has totally changed. Therefore, the message really needs to change based on how much inventory or real estate you actually have.

RP: So as a web designer, one of the things that you’re really looking at is, “Okay, as a mobile device user, we have limited real estate. How are we best using that real estate?” And I think the importance is it’s always getting the important information at the top.

VD: Yes, very true. Even the web designer has an understanding of marketing message, not just someone who just code pretty website, because it’s very important when they come to the table with recommendation for the customers because you have a website, you get a new website, but you’re not an expert at it. Part of what a web designer should do is tell you how the website should look on different devices. In the end, you’re the person who makes a decision, but you should be introduced to solutions. Just like we did for this client, when we told them, “If you’re holding the iPad vertically, it seems like the logo was no longer necessary, and we could perhaps move a left menu below over the important information.” And they agreed to it, but we brought it up to the table.

RP: Right.

VD: Now this is, again, just a tablet. If we continue reducing the screen size, now we’re going to a smaller tablet, for instance, a mini iPad. So as you can see, it’s changing again. And as we continue, again, now we’re going into the phone devices. So they come in different screen size; Samsung, and iPad, iPhone. As you can see the menu, everything is totally different from what it was. Again, we were… This type of menu, it’s changed and now… Where people can simply click on those categories and be redirected very easily on their iPhone.

RP: Alright, very cool. And I think one of the other big mistakes that I see with people, especially on a mobile device, is a lot of times, they don’t keep the phone number at the top, or it’s hard to find a phone number. And I forget what the exact number is, but it’s somewhere around 80% of all search has a local attempt. So the idea is that if I do a search for an electrician or a plumber, even though I haven’t specifically said which city, Google is smart enough, and they have been for years, to go, “Oh well, if he typed in plumber, he probably doesn’t need a plumber in New York City,” because I’m on the West Coast. I need somebody that’s locally in Sonoma County.

RP: Therefore, if I actually want to contact that plumber, the last thing you want to do from a web design point of view is make it difficult for people to actually make that contact. And I think one of the cool things on smartphones now is, not only having the phone number, but making sure it’s clickable, that it’s not embedded in an image.

VD: Correct, correct. So there’s a piece of code we can add to either the phone number and actually we can now make graphic clickable for phone number as well.

RP: Oh really?

RP: So there’s a new piece of code; it’s very short, it’s half a sentence. Your coder should know that kind of technology because it’s been around for a few years now. So again, coding has come a long way, and it’s come a long way because of the mobile device revolution and how it’s taking over the Internet.

09:50 RP: Alright, very cool. And then we’ve only got a couple of minutes left, Virginie. Can you show us a website that’s not responsive? I know it’s something we need to talk about. I didn’t mean to catch you off-guard.

VD: Well, all our websites are responsive so…

RP: Oh, you know what? I know one, let’s bring up BridgetMackayLaw.com, and I know that one. That’s a website I’m currently working on and I know her old one is not; it’s an old HTML site.

VD: Are you doing this or am I doing this?

RP: I’ll have you do it if you would.

VD: Okay. So give me the URL one more time.

RP: BridgetMackayLaw.com.

VD: Spell the last name one more time.

RP: Mackay. M-A-C-K-A-Y.

VD: Alright, Bridget Mackay. Let me Google her.

RP: Yeah, you forgot the Law, but that’s okay. Go ahead and Google her.

VD: There she is. Alright, well, as you can see, once you go here, it’ll be okay for a small-screen computer, but start going to tablet, now everything gets cut off.

RP: Right, so…

VD: You’re starting to see less and less and less.

RP: Right, and the other great way, if you’re an actual business owner at home watching this, and you’re not sure, and you have a smartphone, just bring your website up on a smartphone. If you have to do the pinch to zoom to like zoom in on a specific word so you can actually read it, that’s also a good indication that your website is not responsive, and therefore, people on a mobile device probably aren’t going to spend a lot of time on there.

RP: And I also, if we go back, what, a year or so, I forget the exact time frame, but Google has started giving preference for mobile device, or mobile websites, those that are either mobile or responsive, when you do a search on a mobile device. So from a visibility SEO point of view, if your website is not responsive, you could be losing out on a lot of traffic. And depending on your industry, if people are often doing searches for you on their mobile device such as a plumber, electrician, a lot of those emergency needs; car tow, auto-body shop, a lot of those emergency needs services where they’re looking on their mobile device, and they need to make a decision now, you’re missing out on a lot of traffic.

VD: It’s very true.

RP: Alright, wonderful. Oh, you brought up a couple of pages.

VD: I just wanted to compare them side to side. The one in the middle is something that we’re working on today for a new company. It’s also highly responsive as you can see. Even the image automatically resized as it’s using a different device, the menu is now a drop down for them, and actually on an iPhone it’s a roll drop down where you can use the phone and roll through the menu very quickly and easily. And this is the site that is not responsive on your right.

RP: Alright, so hopefully with those examples, for those of you that are interested in Responsive or have heard it, but didn’t know exactly what it was, you can get an idea of what that… Why it’s important to have a Responsive website. Virginie, we’re out of time. I greatly appreciate your time this morning. And if you could let the viewers know how they could find you on the web.

VD: Oh, of course. So we can be reached at PetalumaWebsite.com. Petaluma is P-E-T-A-L-U-M-A; website, W-E-B-S-I-T-E, dot com. You can also call us, we’re on the west coast like Ryan told you, at 707-794-9999.

RP: Alright, wonderful. Virginie, I appreciate your time. Thank you very much, and we will be talking next week.

VD: That sounds wonderful. Have a great day, guys.

RP: Alright, thank you.

About Ryan Perry

Ryan Perry has taken his 10+ years of business ownership and hands-on marketing skills and focused them on online marketing. In April of 2009, he started Simple Biz Support with an emphasis on Search Engine Optimization (SEO). Ryan is propelling local business websites to the top of Google, Yahoo and Bing resulting in increased market exposure and revenue for his clients using a variety of internet marketing tools including blogs, article submissions and video. Additionally, Ryan speaks and vlogs (video blogs) about internet marketing, educating business owners how to effectively use various SEO tools and techniques to promote their business on the internet. Ryan currently resides in Santa Rosa, CA. Connect with Ryan on Google+