In today’s mobile-first world, having a responsive website is no longer optional—it’s a necessity. Tune in to this episode of “Website Success” as we delve into the importance of responsive web design. Learn why it’s crucial for user experience, SEO, and conversion rates. We’ll also cover common mistakes to avoid and explain how media queries work to make your site adaptable to any screen size. This episode is packed with actionable insights to help you ensure your website shines on every device.
Listen to the Episode
In this episode, Chrissy Rey discusses the critical topic of responsive web design. With over half of all web traffic coming from mobile devices, ensuring your website looks and functions well on all screen sizes is more important than ever. Learn why responsive design is essential for user experience, SEO, and conversion rates, and discover common mistakes to avoid.
- 0:00 – Introduction
- 0:26 – Importance of Mobile Traffic
- 1:27 – What is Responsive Web Design?
- 2:00 – Why Responsive Design Matters
- 3:56 – Common Mistakes in Responsive Design
- 7:56 – How to Make a Website Responsive
- 9:48 – WordPress and Responsiveness
- 10:05 – Final Thoughts and Action Steps
- User Experience: A responsive design improves the user experience, keeping visitors on your site longer.
- SEO Benefits: Google prefers mobile-friendly websites and even has a mobile-first indexing policy.
- Conversion Rates: An easy-to-use site increases the likelihood of conversions.
- Common Mistakes: Not testing on multiple devices, ignoring load time, and cluttering the screen are frequent pitfalls.
- How It Works: Media queries in CSS help make a website responsive, adjusting the layout based on the screen size.
- BrowserStack – A tool for testing your website on multiple browsers and devices.
- Google’s Mobile-Friendly Test – Test if your website is mobile-friendly.
- PageSpeed Insights – Google’s tool for checking website performance and page load time.
Chrissy Rey 0:00
Hey everyone, welcome back to another episode of “Website Success.” Today we’ve got a topic that is super relevant in today’s mobile-first world, and that is the importance of responsive web design. And I’ll get to what that means in just a minute.
Chrissy Rey 0:26
But first, I want to talk about some stats. Did you know, and this is according to Google Analytics reports, but over half of all web traffic now comes from mobile devices. And you might already know that because you’re probably listening to this on your mobile device, or you probably visit lots of websites on your mobile device. But yes, half of all website traffic is coming from either smartphones or tablets or some other mobile device I’ve got, I don’t know if I can actually browse websites on my watch, but I’ve got a smartwatch, so I don’t know. But anyway, that what that means is that it’s really important now more than ever, to make sure that websites are going to look great on any screen size. And they still need to look good on non-mobile devices like computers, because just under half of the people are using those still. So when you when you create a website, it needs to look good on smartphones, tablets, and on computers, and really any other device that your audience is using.
Chrissy Rey 1:27
And that brings us to responsive web design. So in simple terms, responsive web design means that you’re designing your website, so it looks great on any screen. So whether you’re looking at the website, on your phone, your tablet, computer or some other device, then you’ll be able to see and use everything on the website, if it’s designed with responsiveness in mind, and things might shift around a bit. And some things might change sizes. So fonts might change sizes, buttons might change sizes, but you’ll still be able to use the website on any screen.
Chrissy Rey 2:00
So why should you care? I mean, number one, we are, as already mentioned, more than half of users are on those mobile devices. So your stuff needs to look good on the mobile device, and it still needs to look good on a computer. And that’s a big part of why it’s important to do responsive design. And that’s number one point is user experience. Nobody likes to pinch and zoom, have you ever gone to a website and you’ve had a pinch and zoom to see the content on it? Yeah, it’s really annoying. Nobody likes to do that. But if the site was responsive, then users wouldn’t have to do that the site would automatically the text and everything else on this on the site would automatically resize if somebody was on a smaller device, so they wouldn’t have to pinch and zoom. But making your site more user friendly is going to keep your visitors around longer, because they’re going to be able to see what’s on your site.
Chrissy Rey 2:55
Another reason that responsive design is important is search engine optimization or SEO. Google loves mobile friendly websites. And in fact, they have a mobile first indexing policy. So if you have two websites that are identical, and one of them is mobile friendly, and the other one is not the mobile friendly, one is going to rank higher. So that means they actually look at your when they do the indexing, they look at your website using a mobile device to do that. So you want to make sure that it looks great on mobile, that it’s usable on mobile.
Chrissy Rey 3:31
And another reason is because it’s going to help with your conversion rates. Because going back to user experience, if your site is easy to use, then people are more likely to stay on it and use it. And they’re also more likely to convert. And whether that means making a purchase signing up for a newsletter or whatever action you want them to take, they are more likely to do that if they are able to use your web site.
Chrissy Rey 3:56
Now let’s talk about some common mistakes when it comes to responsive web design. And the biggest mistake that people make when they’re trying to make their website responsive is not testing it on multiple devices. So just because it looks good on your phone, doesn’t mean that it’s going to look good on all phones. So you really want to test it on as many devices as you can when you’re making it responsive. And by the way, don’t worry, I will talk in a little bit about how to make your website responsive. But first, I want to talk about some things that you might run into when you do it. But you can, if you don’t have access to a bunch of different devices, you’ve only got your smartphone and maybe a couple of others. If you want to test it on a bunch of different devices. There are tools out there that will do it for you. One of the ones that I’ve used in the past is called BrowserStack. It’s not free you got to pay for it but you can use it to test your your website on multiple browsers and devices. So it’s it’s a good tool for that.
Chrissy Rey 4:57
Another mistake is ignoring the loading time. And this is a really, really big one, because mobile devices are often going to have slower internet speeds. So right like right now, my, I’m sitting in my home office, I have gigabit internet super fast my phone, I’ve got 5g, and it’s pretty fast, but it’s not as fast as my home internet. So it’s, it’s really important if you’re optimizing the website for mobile users, that you’re optimizing your images, and you’re optimizing your scripts and everything else, so that they load quickly. And I’ve mentioned this before in the podcast, but Google has a service called PageSpeed Insights. And you can get to it by going to pagespeed.web.dev. And you can test your site in that service, and that in that website, and see how fast your site loads on mobile and desktop, and you want it to load as quickly as possible on both. But one thing to keep in mind when it comes to that load time. If you’re doing a responsive design, and you’re loading a massive high resolution image on your landing page for desktop users, just remember that your mobile users are probably also going to have to download that massive image. So just keep that in mind.
Chrissy Rey 6:16
Another thing to keep in mind as a common issue, a common mistake that I see is that cluttering the screen. A lot of people clutter the screen, or at least they don’t think it looks cluttered, because they’ve been looking at it on a computer, they’ve been looking at a computer screen, and it looks great on the computer screen. But then when you resize the display, and it’s on a tablet or a smartphone, then things can become overwhelming. The other thing to remember is that you do have less real estate on a smaller screen. So you know that the desktop version of your of your website might have three columns wide, and you’ve got your content in all three of the columns. And it’s really easy to see everything on there. Just remember when you’re looking at at that on a smartphone, most likely it’s going to collapse down to one column. And so that means anything that’s in that third column is going to be all the way down, you’re gonna have to scroll two thirds of the way down on the page in order to get to it, which means a lot of people aren’t going to see it. So you have to be a little bit more cautious about where you put things. So if you have really important stuff, don’t put it in the third column of your three column layout, put in the first column, or the second column so that people are more likely to see it.
Chrissy Rey 7:31
And another thing that you need to remember when it comes to mobile responsiveness is that mobile users are tapping and not clicking, it’s kind of easy to click on things with a mouse, it’s not as easy to tap on them with a finger. And some people have got big, big fat fingers, myself included. And so you need to make sure that the buttons and the links are easy to tap, and they’re not too close together.
Chrissy Rey 7:56
So as I promised, I will talk a little bit about how to make a website responsive, it’s actually a little bit technical. That’s why I kind of left it for last so, because I’m not going to get too deep into it. But basically, you use something called media queries. And those are going to go in the style sheets or the CSS Cascading Style Sheets for the website. So it does require some code. And if you’re wondering what a media query is, I’ve got a little analogy here. Imagine you’re planning a party and you’ve got a playlist for different moods. So you’ve got some show background tunes for dinner, you’ve got some dance tracks for later in the evening, and maybe some slow jams for when it’s time to wind down. And you switch the playlist based on the vibe of the party at any given moment. And CSS media queries kind of work like that. So they’re kind of like the DJ, that’s going to read the room and change the playlist depending on the vibe. So when someone visits your website, the media queries, check the vibe, or in the case of your website, the size of the screen, then they adjust the layout, fonts, images, and some of the other elements to fit that screen perfectly. So whether someone’s visiting your site from a big desktop monitor to a small smartphone, those media queries are going to make sure it still looks good, and is easy to navigate.
Chrissy Rey 9:18
Now, if you’re using WordPress, which I always recommend, WordPress is awesome. It’s what I use. A lot of the themes that you can get with WordPress are mobile responsive, but again, make sure that you test your site on a variety of devices before you go live. And this is especially important if you’re using a page builder, or even blocks that do layout with columns. Make sure that everything looks good, that layout that you’re creating looks good on a variety of different devices.
Chrissy Rey 9:48
So there you have it. That’s responsiveness in a nutshell. It is necessary you got to you got to do it in today’s digital landscape. So make sure your website is not stuck in the desktop Dark Ages, and make it mobile responsive.
Chrissy Rey 10:05
Now before we wrap up, I do want to encourage you to take a moment after you listen to this episode. And check your website’s responsiveness. Make sure that it’s working on every device that you can try it on. So take a look at it on your phone on a tablet on your computer. Look at it on the largest display that you can look at it on the smallest display that you can. And I also do recommend looking up and you can just Google this. Google’s got a mobile friendly test. Just Google “Google mobile friendly test,” and you’ll find it but test your website on there. You just pop the URL in and it’ll give you a response whether the site is mobile friendly or not.
Chrissy Rey 10:44
If you have questions or any experiences that you want to share, make sure you hit me up on social media.
Chrissy Rey 10:50
And that is it for today’s episode. Thanks for tuning in. And I will catch you next time on website success.