Responsive Mobile-Friendly Websites
As to be expected when releasing a website early, there were an array of bugs, errors, and default settings left in place waiting to be noticed by readers. Surprisingly I got a lot less criticism than expected – most likely due to the small amount of readers so far. But I figured I would address one of the main issues that I (and a few others) noticed.
A brief note for those who are unaware, I have deliberately released my web design & SEO site early as part of an experiment. You can check out the first post here.
After making my first post and sharing my new idea, I decided to check out what some of my friends thought of my new site. The first comment was “check it out on mobile :-)” That was when I realized I had made a simple mistake… I had not updated the mobile settings for my website.
Not Very User-Friendly!
As you can see from the screenshot on my phone, there were clearly some issues with the website’s layout on mobile devices.
My excuse is that I am using a new WordPress theme which has a range of customization options that are not usually available on standard free or premium themes.
The main point is that it slipped through the cracks, and this is something that I have added to my standard checklist for clients websites when I am working with this theme. Just to ensure that they don’t end up with the same problem.
What Exactly is Mobile Responsive?
A mobile responsive website is created in a way that allows the size and layout of each page to respond differently on multiple screen sizes. This means that you only need one version of your website, eliminating the need for a “mobile version” and a “full version”.
Most days when you are walking around, you will see a world filled with people who have their heads down, staring at some kind of screen. Now most devices that people own have the ability to browse the web and visit any website they desire.
If you were to take a second to think, you could probably list about 4-5 different possible devices that people may have such as: Laptops, Computers, Smartphones, Tablets, Smart TV’s and more! Think about the amount of brands that sell these products, and more importantly, the different sizes of each of these devices. There are hundreds!
How do you make your website look good on almost any device available?
It seems almost impossible if you aren’t too familiar with creating websites. Thankfully, there is a simple option – Make sure it is Responsive.
To put it simply, the name describes it perfectly, A responsive website responds to a range of screen sizes allowing a site to look good and easy to use on any device. Without going into too much detail, it essentially re-arranges and re-sizes the content to best fit the screen size.
Most modern WordPress themes are responsive by default so you most likely already have it implemented on your website if you are using WordPress. The only thing that will change is how much customization you have between desktop and smart devices.
The Divi theme and a few others offer the ability to customize your site for each device. This is where I initially went wrong. I forgot to check all of my pages for responsiveness as I was not yet used to how the theme worked.
Why is Mobile Responsiveness So Important?
Well the number one reason is to make your website as user-friendly as possible. There are a very large amount of people using mobile devices to browse the web, and the number is growing. Rather than going into detail about the stats of mobile/smart devices and desktop usage, I suggest you take a look at this post: The 2017 digital marketing trends by Smart Insights.
With the amount of web traffic coming through on mobile devices, it makes sense to have your site looking as good as possible everywhere you can.
Below is a great infographic of some great mobile marketing facts thanks to websitebuilder.org
I suggest if you already have your own website, take a look at how it appears on different devices. If you need help optimizing your site, send me a message and I’ll be happy to take a look and see what can be done.