What is Responsive Design? A Guide to Making Your Website Run Smoothly
The goal of every business owner is to make money. But with a slow and clunky website, it can be hard to get people to stay on the site for more than 2.5 seconds so you can show them why you’re the best at what you do and sell more products/services.
Oftentimes, it just comes down to implementing a few key strategies. So building a beautiful website without any thought into the backend just won’t cut it. Maybe you’ve been running Facebook ads and pouring a ton of money into marketing and wondering why you’re not seeing that hefty return on investment you were counting on.
It can make you feel frustrated and angry for sure.
Today, you’re in luck! I’m going to share a process that will help you keep visitors on your site, keep them engaged, and increase the ROI on those Facebook ads without any complicated, hard to follow instructions. I'll cover the basics of responsive design, how it works and how you can get started with it on your website.Keep reading for more details.What Is Responsive Design?
When it comes to websites, responsive design aims to make your website faster and smoother, easier to navigate, and make your website look great on any size screen (hello all of you reading this on a phone or tablet!)
Responsive design will set up your website to function effortlessly across all platforms and browsers (well - effortless from your visitors’ point of view. You’ll have to put in a wee bit of work).
Everyone with a website benefits from this - business owner or not. Think about it - you’ve got this website promoting something. Well the point of promotion is for people to see it, right? That goal is defeated if your website is turning away visitors right out of the gate.
Download now: Website Launch Checklist
Why Is Responsive Design Important?
Statistics show that the amount of mobile viewers now vastly outnumbers the amount of desktop viewers (more than half of all web traffic is mobile).
That means more than 50% of your website’s visitors will be looking at it from a smaller screen. You NEED your website to be responsive and look good everywhere.
Most people who build their own website don’t think about checking on their site’s responsiveness rate. Even if you had a professional build it for you, you may not have thought to ask if they made it mobile-responsive (chances are good that they did, but you never know!)
By ensuring your website is using responsive design, you’ll be able to rest easy knowing your website not only looks great, but functions well too!
This way, you will get more traffic, inquiries, and leads.
Also, responsive design lends you the ability to give your visitors an improved experience, and helps your SEO (since Google gives preference to websites that are mobile-friendly).
That means you won’t have to spend quite so much time convincing people to visit your site.
Responsive Design Examples
If responsive design sounds confusing, I get it.
What the heck even makes a website load slow or fast? What makes it responsive or not?
So I put together the examples below to break it down for you so you can easily get started with making your website responsive.
Example #1. Not Building on a Fluid Grid
To understand what a fluid grid is, let's think about old school newspapers for a second. When the paper is printed the content is displayed in fixed measurements.
Well when the internet became a thing it continued that fixed measurement idea. Web designers were defining websites in pixel sizes. Today we use multiple devices with multiple pixel sizes. An HD computer screen might have a resolution of 3480x2160 pixels, while a tablet might only have a resolution of 1280x960 pixels.
That means having a fixed measurement size won’t work! Responsive design uses a fluid grid system to resize the content to any size screen.
This is why I love Squarespace. They have responsive design built right in. That means when a visitor lands on your Squarespace site, Squarespace automatically detects their screen size and picks the best image to fit it.
If you’re familiar with Squarespace you may have heard about their Fluid Engine editor. Although it sounds similar to a fluid grid it’s not quite the same thing. The Fluid Engine editor allows you to drag and drop your design elements rather than having to build fixed blocks in a grid and line things up the old school way.
Fluid Engine also allows you to design the mobile view completely separate from the desktop view.
MIND. BLOWN.
Remember how we talked about the importance of your mobile viewers’ experience? Now you can customize it to your liking and not have to worry about it affecting the desktop view. Shoot, you can even START your design in mobile view and check on the desktop version later.
All of that means less editing time for you and more time that can be spent chilling on the couch.
Example #2. Image Size Too Big
The more you can reduce your stored file size on your site, the faster it will be for your pages to load.
That’s where image resizing comes in.
You likely have a ton of beautiful, high-quality photos and images on your website. Well all that high-quality imagery comes at a price, my friend.
In order for your website’s pages to load in a timely manner (let’s be honest - we all want them to load NOW!), your images should be 500KB or smaller.
For example:
Let’s say you’ve got a Portfolio page showing off your amazing artwork. While those photos may be beautiful, they’re also stinkin’ HUGE! That means when someone tries to check out your Portfolio they might only get to see 1 or 2 of your pieces. The others have got spinning wheels of buffering death.
Image resizing to the rescue!
The best way to do this is to resize all your images before you build out your website. Buuuutttt you’ve likely already got a website with pictures loaded up. That’s ok!
Just go into your website from the backend (if using Squarespace you’ll want to log in to your account and go to each page that has an image). Click on each image and check the size. If it’s larger than 500KB you’re going to want to resize that bad boy.
You can do this by saving the file as a .jpg (if it’s not already). That tends to be the smallest image file format. If that doesn’t work you can use your computer’s native photo editing app to compress the file (or you can use a free online tool like these ones from TinyPNG.com and websiteplanet.com).
Fun fact - that second one was a suggestion sent in by a helpful reader!
Example #3. Too Many Images/Plugins
The fewer videos, animations, and GIFs you can incorporate on your website’s pages the quicker it will be for your visitors to load them.
That’s where regulating the number of videos and plugins on your site comes in.
Now, I know we talked about putting images (correctly sized!) onto your website. I’m not at all saying you should take all your lovely photos down. What I am saying is that you’ll want to pay attention to how many moving images you’ve got because those are inherently bigger files you’re storing, which can slow your page load speed to a crawl.
For example:
A photographer wants to showcase highlights of the video projects they’ve done on their website. So they create a Portfolio page with all their videos stored and set to auto-play for 10 seconds.
As impressive as that is, not too many people are going to stick around to watch the page load 3 pixels at a time (other than maybe your mom). Because all those large files are stored on the site it eats away at the processing power, resulting in slow loading pages.
Just like having too many images can be a problem, the amount of plugins you’re using can also slow your site down. If you’ve gone plugin crazy and have more than 20 I suggest cutting it down. Too many of these can result in your site having security breaches, crashes, and all around bad performance IN ADDITION to slow loading times.
The best way to make sure your website doesn’t do this is to run a website speed test. You can do this with a free tool like DebugBear.com. They’ll give you insights on how fast your pages are loading and some adjustments to make for faster speeds.
Tips for Responsive Design Success
Here are a few tips to help you maximize your results with responsive design:
First, check your traffic stats
To achieve the best responsive design results, you have to continually monitor your website’s statistics to see if your site is getting overloaded with traffic (causing a slow down).
When you’re keeping track of how many visitors you’re getting on a regular basis, you have better insight into which pages are attracting lots of people and possibly slowing down.
Of course this is one of the best problems to have, but still something to keep an eye on.
For great results, make sure you’re using Google Analytics on your website. If you’re not sure how to do that check out Google’s how to info here. If your website was built on Squarespace your Analytics Property ID can be input under Settings > External API keys. It may take up to a day for your site stats to populate in Google Analytics.
That way, you’ll get to know a bit of info about your visitors, where your traffic is coming from, and see where you’re losing people (so you can fix that!)
Next, make sure your code isn’t out of date
When you use JavaScript on your website you get beautiful and dynamic elements that create a fun and interactive space for your visitors. But if it’s out of date it can drag down your site’s speed and performance.
In other words, all your special effects and cool moving graphics might be causing your website pages to load more slowly than you’d like.
To get started:
Ensure caching is enabled
Compress resources where you can
Remove unused code
Finally, limit your ads
Nowadays, people love to throw ads into just about everything because it’s a great way to earn some extra cash, especially if your site gets a decent amount of consistent visitors.
But if you want to make sure your website loads quickly and runs smoothly, you can’t overlook this crucial step.
Just like images and videos, ads take up real estate on your website, and if you have too many it could be causing a slowdown (especially if you’re hosting third parties on your site). Slow loading speeds will almost certainly increase your bounce rate (the amount of people who quickly navigate away from your site), which won’t help you earn their trust or business and can even decrease the amount you’re able to earn from the ads.
Limiting the amount of ads on your site will solve all those problems.
And if the idea of limiting ads makes you feel like you might be losing out on potential money, consider this:
The average number of ads on a gaming website homepage is 4.4 - 8 (depending if the site is a premium or non-premium version).
That means if your site has 20+ ads running on one page, you’re definitely in the territory of overkill and could actually be losing out on loads of potential customers from your slow page speed - the exact opposite of what you were going for!
One thing you can do is to spread out your ads across multiple pages to try and share the load across multiple locations.
Make Your Website Responsive Today
I hope this guide on responsive web design has been helpful. If you take anything away from this guide, remember that responsiveness is key to your website’s success.
The best way to get yourself closer to a buttery-smooth user experience is to start with checking your site’s traffic stats. That way you can test out different tweaks to attract people and set yourself up for growth (hello doubled visibility!) So, what do you say? Are you ready to give it a go?
Free Website Launch Checklist
Now that you know the ins and outs of responsive web design, it's time to grab your Website Launch Checklist and see how easy it is to get your website setup and optimized for growth.
The following Website Launch Checklist will get you on the way to having a functional site that is primed to attract your ideal visitors.
