In the era of smartphones and small screens, everybody has a mobile device. You can use it wherever you are, and unless you’re a dedicated gamer or a 3D artist, your phone is often faster than that slow laptop or clunky PC you have.
77% of Americans own a smartphone, and nearly half have a tablet. 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.
That’s why it’s extremely important to present a good image for the growing mobile community. Even if the core of the site functions on something like Flash, it’s still worth it to make at least a clean landing page. Today, we’re going to talk about how to accomplish that.
Begin With Responsiveness
Fans of WordPress will have seen the word responsive before. That’s often the first thing the themes will tout — their responsiveness. In fact, it’s become a near-requirement of all new themes.
Responsive design centers around detecting a visitor’s screen size then tweaking the spacing, size of images, and so forth dynamically to fit. Rather than making a new version of the website for the iPhone 7, Galaxy S6, Blackberry, and any other new device that comes along, it simply detects the resolution and adjusts accordingly using fluid grids and clever 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 yet, this should be the very core of your website. 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 on mobile, it’s even more important. 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:
- Minify Resources (HTML, CSS, and Javascript): a collection of tools from Google PageSpeed Tools Insights.
- 18 Image Compressors to Speed Up Your Website: this article from Mashable offers plenty of tool suggestions for reducing image size.
Use HTML5
Flash is a fading trend and Java is already old news. Both present serious security flaws, require installing plugins 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.
- HTML5 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, that means they’re sitting at home and have a bit of time. Putting your personal vision or your blog or a detailed biography of all the ice cream flavors on the landing page is okay. But if they visit on mobile, that means 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 with that in mind, 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 a 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 mobile 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.
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.
Knowing this, 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. So, in this scenario, 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.
This is a very basic example but you hopefully now have a better idea of how it works.
Use Mobile Aware Email
Email marketing is a viable strategy for securing your website’s future, but no user wants to scroll for hours down a lengthy message. 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.
- Mobile Email is Here to Stay — What Comes Next: Litmus offers up some useful tips for creating mobile aware email messages.
Start Optimizing Your Site for Mobile
And there you have it: a few tips to optimize your site for mobile devices and increase usability all-around. So get to it! Don’t lose visitors over a badly-designed, slow, or unresponsive website. Get to work fixing it up, and watch visitor satisfaction skyrocket.
