Just about everyone has a mobile device in the era of smartphones and small screens. You can use it wherever you are, and there’s a good chance people who visit your site will be on a mobile device. If someone visits a site on their phone, and it’s a mess of colors and displaced text, it’ll leave a bad taste in their mouth. Presenting a good image for the growing mobile community is extremely important. Read how to accomplish that.
Key takeaways:
- There are various things you can do to optimize your website for mobile.
- Ensure your themes are responsive, clean up your code, and maximize page speed. Also, create succinct content that is relevant to your audience.
- It is helpful to use analytics to see who your visitors are and customize your content to meet their needs. It works best to use mobile-friendly email as well.
Best website builder for small businesses
Best website builder for small businesses
Best website builder for beginners
Best website builder for beginners
Begin With Responsiveness
Fans of WordPress will have seen the word responsive before. That’s often the first thing the themes will tout — it’s become a near-requirement of all new themes.
Responsive design centers around detecting a visitor’s screen size and then tweaking the spacing, size of images, and so forth dynamically to fit. Rather than making a new website version for the latest smartphone model, it detects the resolution. It adjusts accordingly using fluid grids and clever Cascading Style Sheets (CSS).
Even if it involves a bit of re-coding, the work saved (and potential increase in revenue) is well worth it. If you haven’t started programming, this should be your website’s core. Otherwise, make the change now.
- HTML Responsive Web Design: an in-depth explanation of how to code responsiveness in HTML from W3Schools.
- How to Create a Responsive Menu with CSS: a walkthrough for creating a responsive menu, which is especially relevant when optimizing for mobile.
Coding Cleanup
The second most important step is to optimize your code and increase your page speed. This is important for any web programmer to learn, but it’s even more so on mobile. PC users tend to be more forgiving, but you have a shorter window of time to please mobile users. If the site doesn’t load fast, you can kiss that visitor goodbye.
There are many ways to accomplish this. From reducing image size to slicing out unnecessary HTML to optimizing intensive scripts, there’s a lot of work. It can be done yourself, and it might require some coding overhauls. Luckily, there are tons of tools to help with this process:
- How To Minify Your Website’s CSS, HTML & Javascript: A collection of tools from Elegant Themes.
- How Image Compression Affects Your Website’s Loading Times: This article from Elegant Themes explains the benefits of reducing image size.
Use HTML5
Flash is a fading trend, and Java is already old news. Both present serious security flaws, require installing plug-ins to work, offer minimal mobile support and can just be hard to work with. Luckily, HTML5 has become a universal equivalent. Even the Nintendo 3DS Internet Browser, the most basic of web browsers on a device not really intended for it, can use HTML5.
It’s a near guarantee that whatever device accesses your site, it’ll be able to view HTML5 content. So if it’s important that mobile users can see these interactive elements, start learning now — ideally before you begin work on your website, because making the switch will only be more difficult later.
- HTML Cheat Sheet: A handy reference guide you can print out and use when tackling your next project.
- HTML5 Tutorial: A useful walkthrough and how-to from W3Schools.
- HTML5 New and Deprecated Features: A list of features that were new upon the introduction of HTML5 so you can code with the latest best practices in mind.
Simplify
Most people web browsing on their phones don’t have a lot of patience, and it’s important to cut to the chase. Keep in mind why someone is visiting your site on mobile instead of on a desktop computer as you design your site.
Suppose you run an ice cream shop. If someone visits your site on a PC, they’re sitting at home and have a bit of time. Putting your personal vision or blog or a detailed biography of all the ice cream flavors on the landing page is okay. But if they visit on mobile, they’re out and about and probably just want some ice cream right now. It’s more appropriate to have a phone number or an interactive Google Map with shop locations front and center.
So get to the point. Remember why someone is visiting on mobile rather than on their PC, and show them content relevant to their device and location. Your visitors will appreciate it.
Keep Touch in Mind
It’s easy to mis-click on a phone, especially if the design isn’t mobile-friendly. If you don’t outright drop the phone on your face, you could accidentally touch the wrong link or simply miss it altogether.
Instead, make mobile websites easy for visitors to use. Keep links and clickable images away from important forms, and don’t use tiny, hard-to-tap X buttons on pop-ups. Or better yet, don’t use pop-ups at all.
And if your site opens a small options window when something is clicked, pressing the back button should close the window, not navigate to the last page. Don’t let those little extras be an annoyance rather than a feature.
Use Analytics to Customize Who Sees What
With Google Analytics, you can see what search terms are bringing people to your site and from what platform. You can use this to your advantage.
Google Analytics offers a treasure trove of data you can use to tailor your website to your visitors’ needs. You can set it up so different versions of your site’s pages are triggered to display based on what users are looking for and where they’re searching from.
Perhaps you run a site centered around animal rescue and adoption. Maybe mobile users often come after searching for kitten rescue, and a lot of PC users visit after a search for dog adoption. The first thing mobile users will see is blog posts tagged “kittens” and desktop computer users might have a helpful form urging them to adopt a dog in the sidebar.
Use Mobile Aware Email
Email marketing is a viable strategy for securing your website’s future, but no one wants to scroll down a lengthy message for hours. A good way to combat this is to develop “mobile aware” email messages that use larger text, shorter blocks of text, and clear buttons. Unless you want your well-intentioned (but long-winded) mail to rule the Trash folder, this is an important step to follow.
Start Optimizing Your Site for Mobile
Use these tips to optimize your site for mobile devices and increase usability all around. So don’t lose visitors over a badly-designed, slow, or unresponsive website. Fix it up, and watch visitor satisfaction skyrocket.
