7 Ways to Optimize Your Website for Mobile Traffic
It is evident that more potential clients are coming to you through your mobile website versus desktop. Below are 7 ways to optimize your website for, perhaps, a majority of the user’s that come to your website. Often we design and build our websites with desktop as our primary focus, then look at our google analytics and realize that over 50% of our users are accessing us via Mobile. Fear not! This blog is for you!
Meet: Michelle Barto, Programming Genius
Website | Instagram: @launch_creative |
Favorite Business Book: Profit First
Favorite Podcast to tune into: Dissect
Favorite App: Headspace and Quickbooks
One food you couldn’t go without Coffee and salads
Hi! I’m Michelle! I love La Croix and Adidas Gazelle sneakers. I keep trying out different shoes and keep coming back to them, albeit in different colors. I have 4 kids, love to run, and if you come over I’ll make you a fancy dinner.
I was a computer science major in college but grew up in a family of artists. After heading straight into the workforce as a business consultant, I decided to do something that stretched my creative side a little bit. Though I first thought I would do something in fashion, it was while creating my website for my fashion lines that I was reminded how much I love to code and how visually creative web design was for me. Programming + graphic design fire up both sides of my brain and I love it! Now lets jump into some great content that will get your Mobile Traffic booming!
7 Ways to Optimize Your Website for Mobile Traffic
Did you know that over 50% of all web traffic comes from mobile devices and is on the rise? Depending on your business, this number might be much higher. Yet, I see so many websites that weren’t designed with mobile devices in mind. Here are some easy and low-cost ways to update your existing site for mobile traffic.
1. Reduce Your Image File Size To Maximize Mobile Sites
If your images are slowing you down and you are on WordPress, Smush is a free(!) and easy to install plugin, that will reduce the file size of your images without having to upload and replace images that have large file sizes and are slowing you down
2. See What Your Clients are Seeing
There a couple of ways to do this quickly and easily. If you are using Chrome as a browser, go to View, Developer, and click on Developer Tools. From there you can view how your website looks on a phone, tablet, or computer. To do this, click on the image that looks like an iPhone and an iPad(strictly this is the Toggle Device Toolbar”. Then at the top, you can choose the screen size you want to view. You can also do this in Safari and Internet Explorer. In Safari, it’s Develop, Enter Responsive Design Mode, and in Internet Explorer, it’s under Developer Tools.
3. Picture This
An issue I help with all the time is image size. The short answer for full-width images is that height should be 1000 pixels. The recommended ratio for width to height is roughly 4:3 and you can get away with using different sized photos, but a 1200×1000 size for a full-width image will adjust to screens of various sizes really well. The screen width on a smaller device is 375 pixels and an iPad is 768 pixels, so that gives you an idea of how you might want to re-size an image for different screens.
4. Technically Speaking
Now that you have some ideas of whether your images or text look different than you would like, you can make some changes. I like to print out the pages from the step above and circle what I like or don’t like. If it looks great on your desktop, but not great on mobile, it’s time to take a look at the back end of the site
5. WordPress & Divi
If you have WordPress and use the Divi theme, this is easy. Go to the page you want to edit, click on the image module that you want to change and duplicate the module by clicking on the “Clone Module” icon. See the arrow below.
Then edit the top module by clicking on the lines. Then click on Advanced, then scroll all the way down. You will be checking “Disable on:” on boxes for Phone and Tablet.
Then edit the second module. Click on Advanced, then scroll all the way down and click “Disable on:” on Desktop.
Now you can edit images, make desktop display video, or center different elements on mobile only.
Many other WordPress themes have a special mobile-only display. If that doesn’t work, read next…
But, umm I’m not using WordPress….Check out the next tip!
6. If you just need to change one page
Use CSS with mobile queries. You can learn more about how to use CSS with this blog post.
CSS is the list of instructions that tell your website how it should appear on a screen. If you only want to edit one page, most sites will have a CSS button or area on your page where you can edit just the look of that one page. Here is a link to a great article on how to make simple changes
7. Last but not least is a separate, mobile-only stylesheet.
You will likely need a web developer’s help for this one, but it is an inexpensive alternative to an entirely new website.