|Practical Computer Advice
from Martin Kadansky
|Volume 10 Issue 9
|Should your website be mobile-responsive?
With the ever-growing number of people surfing and searching the internet using mobile devices like smartphones and tablets, if you have a website, whether for your business, blog, nonprofit, hobby, or something else, you may have been told that it should be "mobile-responsive" or "mobile-friendly." Other common terms for this are mobile-ready, responsive-width, smartphone-ready, and responsive-layout.
What does that mean?
A mobile-responsive website detects the size of the user's screen, and then reorganizes what it displays (text, pictures, navigation menus, etc.) in order to give the user a good experience on their iPhones, iPads, Androids, or other small-screen devices. This variable-width and "fluid" design usually means that:
A website that isn't mobile-responsive looks and acts the same regardless of the size of the user's screen and may be frustrating for mobile users.
- The text will be a reasonable size to read without effort or magnification and will word-wrap to the width of the screen. The user will have to scroll farther vertically to read the text than if they had a larger screen, but they probably won't have to scroll horizontally at all.
- If the website previously displayed multiple columns on a large screen, those columns will now either "stack" vertically (one after another) or the less-important columns might not display at all.
- The navigation menus (which typically include About, Events, Products, Services, Directions, Links, Contact Us, etc.) will probably be arranged horizontally across the top or bottom (not down the left side, saving valuable horizontal room), and for the smallest screens will probably "collapse" to a single "menu" icon.
- There will be no Flash videos or Java applets, because they don't work on many mobile devices.
- The design will be simpler, with high-contrast text, more use of ALL CAPS, and will use simple fonts, colors, and backgrounds.
Imagine using a 4-inch screen to look at a website that's designed for a 15- or 17-inch desktop monitor. its rigid layout and fixed-width design will probably make the user have one or more of the following experiences:
Why should I care about this for my website? Isn't this just some high-tech fad that will fade away over time?
- Initially they'll probably see the entire website scaled down to fit the width of their small screen, so everything will look tiny and probably too small to read. It will be like reading a newspaper from across the room. The menus and links will also be too small to tap reliably.
- If they "zoom in" (magnify) the display to make it large enough to read, they'll find that they have to scroll back and forth horizontally to read every row of text, explore every column, and see every picture, like reading a newspaper with their nose touching the page.
There are a number of studies that show that the number of mobile devices being sold is steadily growing, along with the number of users visiting websites with them. In some areas these numbers surpass the sale and use of regular computers. The mobile market is clearly here to stay. On the other hand, desktop machines are not going away, in part because they have a number of important advantages over mobile devices.
So, what does this mean for you and your website?
I suggest that you re-examine the target market or audience for your website and your organization:
How can I tell if my website is mobile-responsive or not?
- If your typical user or target website customer uses a regular computer or laptop, then making your website mobile-responsive may be a low priority for you. If that's the case, I still recommend you revisit this question periodically. For example, you're probably in this category if you run a business that sells products or services to other medium or large businesses.
- On the other hand, if your target user includes consumers, small businesses, or people who might be looking for your product or service or organization website from anywhere using their smartphone or tablet, then you should take a closer look at the design of your website. If it's not mobile-responsive, then those users may have a frustrating experience, won't recommend it, and will probably go elsewhere.
While there are a number of websites out there that can mechanically look at your site and tell you whether or not it's responsive, they don't usually tell you where the problems are or what to do about them.
If you actually want to see the problems, I suggest taking a more hands-on approach:
Either way, you will start to get an idea of what mobile users are already experiencing when they land on your website and whether they are leaving in frustration.
- Go visit your website on as wide a variety of smartphones and tablets as you can. Ask your friends, family, coworkers, neighbors, and anyone else who might be kind enough to let you try this with their device, or who might do this for you while you watch. Your goal is to explore your site like a complete newcomer. It won't take long for you to see the tiny text, the need to enlarge and then constantly scroll left and right, and other poor layout or nonfunctional elements that make it difficult or awkward to use.
- Here's another approach that will show you some of the issues: On your regular computer, open your web browser (Internet Explorer, Chrome, Firefox, Safari, etc.) and visit your website. "Squeeze" the width of your browser window, making it narrower and narrower until you get to the minimum width your browser permits. Height is not the issue here, so don't make the window extremely short as well, just narrow. (If your browser window is usually "maximized" to fill your screen, you'll probably have to "un-maximize" it first before you can change its width.) Then explore your website like a new visitor and see how its design reacts to the very narrow width. Some web browsers have built-in functions that let you "snap" the window to the exact size of certain smartphones and tablets, but you may have to get into an "advanced" or "developer" mode to find those functions.
How would I make my website become mobile-responsive? What would it cost?
I'm not a professional web designer, but from what I have learned, mobile-responsiveness involves a new and somewhat different design approach. Depending on how complicated your website is, a web designer may be able to modify your existing site to make it responsive. However, sometimes it's better to redesign your website to create a new, responsive version.
(Note that some companies maintain two separate versions of their website: One for regular computers users, the other for mobile users. While this might be a good solution in some cases, in general I think this is a more complicated and expensive approach.)
Like any remodeling project, the big decisions include:
Also, thinking ahead to when the redesign is complete:
- Scope: What result do you want? Who is your target market? What do you want your website to do? How should it look? What should be updated?
- Personnel: Are you going to do this entirely yourself, work side-by-side with a collaborator, or hire someone to do most of the work for you?
- Cost: How big and complicated is your website? What's your budget?
- Time: How soon do you want this to happen?
- Content changes: Do you want to be able to make small-to-medium changes to the site yourself (changing, adding, or removing content) or do you prefer to hire someone else?
- Maintenance: Even if you don't need to make changes to the site, all websites need periodic (sometimes monthly) maintenance, especially regarding technology and security updates. Do you want to do this maintenance yourself or will you hire someone to do it for you?
- Portability: The technology powering your website should not be "locked in" to your current web hosting company. Be sure that you have the ability move your website to another host in the future.
One very popular technology framework to consider is WordPress. It's a fairly easy-to-use platform for creating websites and blogs, and while it doesn't provide mobile-responsiveness by default, if you (or your web designer) use it carefully, you can create a new version of your website that's not only responsive, but also relatively easy to update and maintain.
Here's my advice regarding WordPress:
Where to go from here
- Learn more about it. Talk to real people who have used it. It has many pros and cons.
- If WordPress looks like a reasonable solution to you but you don't want to do all the work yourself, find a web designer experienced in WordPress that you can work with and then consider this approach: You work together to redesign your website in WordPress. Then you can make content changes on your own for free, and pay them to maintain your site and manage its security.
How to contact me:
phone: (617) 484-6657
On a regular basis I write about real issues faced by typical computer users. To subscribe to this newsletter, please send an email to email@example.com
and I'll add you to the list, or visit http://www.kadansky.com/newsletter
Did you miss a previous issue? You can find it in my newsletter archive: http://www.kadansky.com/newsletter
Your privacy is important to me. I do not share my newsletter mailing list with anyone else, nor do I rent it out.
Copyright (C) 2016 Kadansky Consulting, Inc. All rights reserved.
I love helping people learn how to use their computers better! Like a "computer driving instructor," I work 1-on-1 with small business owners and individuals to help them find a more productive and successful relationship with their computers and other high-tech gadgets.