Responsive Website Example – Martial Arts

Hey guys James Martinez here of all things digital and today I wanted to show you guys a responsive website example. Something that is still happening out there, and I guess a lot of people are really confused by what the term responsive means.

The Significance of Responsiveness

So, by now everybody and their uncle should have a website at this point so if you don’t you know consider getting a website together. When you get your website together an important factor to consider is a lot of people use the term responsive or mobile-friendly interchangeably and to me that’s kind of incorrect.

Choosing Responsiveness Over Mobile-Friendly

While they somewhat mean the same things, you know if you’re choosing between mobile friendly and responsive, responsive is the way to go. So, what I wanted to show you today is what responsive means when it comes to your website and why it’s very beneficial for you to have a responsive website over a mobile-friendly website. Let’s quickly look.

Analyzing a Non-Responsive Website

So, if I look here let’s say I use some of my martial arts sites an example. If I do a search for martial arts near me, here’s the map listings. So, let’s look and see if we could find a website that’s not, uh-oh their site is down all together, I’m going to have to contact them.

Demonstrating Non-Responsiveness

Let’s see here Kempo self-defense studios. So, here’s camp women fight back self-defense. It looks like this is you know, a basic website for a martial arts school, but if you take a look, the way you can emulate your website being on a phone, it’s the quick and dirty way I call it.

The Quick and Dirty Test

But you can literally if you’re on your computer, you could just resize it. Resize the actual window. If you see here when I resize and scale the size of the page down, do you notice how nothing changes on the site? You see how things start to get cut off. And you know, you start to lose some of the content right? So that means this website is not responsive.

Contrasting with a Responsive Website

So, you know this may be a great lead for me to contact the owner of the site and say hey let me show you something that you know may be of use to you. If I go through to their kickboxing page and again, I resize the page, what happens, I’m literally cutting off and now I must scroll to the side so we can kind of emulate the phone here. Make pretend this is a phone and now you know we’re making people scroll left and right scroll up and down to see stuff. So obviously that’s not a great example of a mobile-friendly or responsive site. So, let’s look at let’s look at one of the sites I built.

This site is for Tong Dragon in there Ocean County New Jersey. This is their website, a martial arts website. This is how the site looks on a computer right? It’s a nice big screen everything but let’s do the same thing. Let’s do the same little quick and dirty way of looking at it okay?

The Responsive Advantage

And you see when I change the size of the site, now I have a different menu type. Okay and now look. Nothing is cut off okay. You could still read everything okay. So now what I want to show you is when I say responsive, that means the site responds or adapts to the to the to the viewing port okay.

Responsive Adaptation

So, if we’re making pretend this is an iPhone, and you know this is what its going to look like on a phone. If I start to what do you think is going to happen if I start to make it bigger okay, you might notice the site is changing. And what is it doing it is being responsive to the window size.

Adapting to Different Devices

I still have everything. This isn’t a perfectly shaped window, look we can kind of emulate a tablet screen. So, this may be what the site would look like on a tablet. We still have our menu. We have our click to call button. We have our logo; we can still read all the text. This is obviously like I said quick and dirty so this isn’t exactly how it’s going to look on a tablet, but you can kind of get the idea.

The Impact of Responsiveness

This is what it looks like on a tablet and then as I change the size of the site, the website itself responds and becomes adaptive. You could see that makes a huge difference because now no matter what device the person the viewer is on the site still looks good. The site still works and is highly functional.

A Responsive Call-to-Action

Again, here’s what might look like on a phone. You still got your menu, your navigation. And if we blow it out a bit, this is what it looks like on a tablet. You still see the video; you still got the content. Nothing’s being cut off. You’re looking at the whole entire site on a regular desktop computer versus you know a situation like this where you know if I resize this site now this is still wok like on a tablet this probably wouldn’t be such a big deal right.

The Importance of Checking Your Site

But if you go to a phone now all sudden stuff is getting cut off okay now that’s obviously not a good experience for your visitor right now. They got a scroll left and right or whatnot. Or there’s alternate versions of you know some sites have what’s called a mobile-friendly site where literally an entirely different experience shows. And it’s a very dry, vanilla version of the site on mobile and that’s cool too but I prefer responsive because you know you could do lots of different things based upon the device that the people are on.

A Responsive Call-to-Action

Let me show you something else regarding these responsive sites. So, you notice if I’m on a computer right, we have a call us button right. But for most of the page we have a get started today button because they’re on a computer. So, we want them to fill out a form and contact us.

Customizing the Call-to-Action

But what I want to show you is if I minimize you may notice something. You notice how it says tap to call now. That’s because the website is being viewed on a smaller port and it believes that this is a phone okay. My sites that I do responsive I changed the call to action based upon the device that they’re on because if they’re on a phone I don’t want them filling out a form.

Encouraging Immediate Action

I want them calling us. So, you’ll see here the call to action changes to a tap to call you know and that’s a better call to action. We want them to call and call right now. They’re a hot lead. Get in touch with us. We can still have them you know fill out the form you know on the contact page or whatnot, we can still have them click a form to get in touch and all that. But what’s most important here is the click to call. We want them to become a lead and the less friction there is to become a lead, the better that is.

Evaluate Your Own Website

So, if they’re on their computer all right, they may have to fill out name email address and phone number. But if they’re on a phone, they literally have a phone in their hand, we want them calling us.

Hopefully that makes sense to you guys. Look at your site. It’s surprising to me, I’ve had phone calls where people that they say oh I know my website is mobile-friendly and all of that and then I say, well I’m on your site on my phone right now and it’s not mobile-friendly.

Check Your Site Responsiveness

So, what happens is they literally don’t even check their own website on their phone. It’s not that hard just open your phone open the browser. I’m just looking at this example I showed you to see if they have a mobile-friendly version okay. For some reason a lot of people just don’t check.

A Call to Action

So simply go to your website on your phone if it’s not if it’s not working great for you it’s not working great for most other people as well. So hopefully that explains a bit more the whole idea of a responsive website. And if that’s useful to you please feel free to visit my website to learn more about my services and my site is responsive so it should look good on a phone as well.

Get in Touch!

I’d love for you to get in touch if you have any questions comments or concerns. Feel free to reach out. Please like the Facebook page and all that stuff, the YouTube subscribe all of that so that I can keep informing you guys of all these little things, lots of little things that people get overwhelmed with. And that’s the stuff I love.

Join Our Community

And that’s why I kind of keep all these things in mind you know. You’re great at your business doing whatever it is you do, and I try to be great at doing what I do which is making sure you’re well informed on how to  build a fantastic website that works great on any device. How to do little things like that as far as changing your call to action to drive the action you want them to do.

Unlock Affordable Internet Marketing Techniques

There’s all sorts of affordable internet marketing techniques and I already have a group, it’s kind of a secret group. But if you’re interested in joining where you could learn more stuff like this and you know get more content from me in in this sort of a fashion, get in touch. I’m going to be posting it out there a bit more I’m working on some stuff for it but I’d like to build a group of you know business owners who are looking to execute these affordable internet marketing techniques.

Stay Safe, Stay Happy, Stay Busy!

And just get every little leg up on their competition that they can. So, if that sounds like you get in touch, I’ll let you know about the group otherwise stay safe, stay happy and stay busy!

FAQs:

What does “responsive website” mean?

A responsive website is a site that adapts and optimizes its layout and design based on the user’s device, providing an optimal viewing experience on various screen sizes, such as desktops, tablets, and smartphones.

How is responsive different from mobile-friendly?

While the terms are often used interchangeably, responsive design goes beyond mobile-friendly by adjusting content dynamically to fit any screen size. Mobile-friendly may involve a separate, simplified version of the site for mobile devices.

Why is responsive design important for websites?

Responsive design ensures a consistent and user-friendly experience across different devices, improving accessibility and reducing bounce rates. It also positively influences search engine rankings, as Google prioritizes mobile-friendly websites.

How can I check if my website is responsive?

Open your website on various devices, such as smartphones, tablets, and desktops, and observe how the layout adjusts. Alternatively, you can use online tools or browser developer tools to simulate different screen sizes.

What are the benefits of a responsive call-to-action (CTA)?

A responsive CTA adjusts based on the user’s device, optimizing the user experience. For example, it might prompt a “tap to call” on mobile devices, streamlining the process for users to contact your business directly.