You walk into a waiting room filled with people. They’re not watching the television; they’re not reading magazines. No, the majority of those seated have their heads down, thumbs expertly typing on mini-keypads with eyes glued to small screens.
Dorothy, we’re not in Kansas anymore!
Five years ago, this scene would have been radically different. But thanks to ever faster and cheaper data plans, mobile devices are ubiquitous; they are a rapidly growing force in the way we access information.
Without a thoughtful mobile website design, you could be losing traffic; people won’t take time to dig around on a site, or zoom in on a page to make the links large enough to click on. They’ll find another site that’s easier to use.
If you have an existing site, it’s likely that a significant number of your site visitors are mobile users. But you don’t have to take my word for it: Google’s recent release out of beta of Universal Analytics (UA) will help make the case. Among other useful tools, it lets you follow which devices are being used to access your site.
Understanding how people access your information is an important first step in tailoring your site to best serve your visitors.
Review and test your mobile site — repeatedly
The next step is to see your site through your visitors’ eyes. Have you paid much attention to what their mobile experience is like?
It’s time you did. Browse the site extensively with your smartphone. Love your Galaxy? Grab your friend’s iPhone, too. Take your site through its paces with your nephew’s tablet. Any unique device you can get your hands on should be used to see how your site looks, functions and feels.
As you test, keep a notepad handy.
- Think about key reasons people go to your website: Can they easily find important information or complete key transactions?
- Take notes as you go on what’s working, what’s clunky and what’s unbearable.
- Tag any problems, and note whether they’re specific to a certain device or a problem across all of them.
Once your list is made, you can come up with a plan of action for your website’s mobile design.
One site or many?
There are two different philosophies in designing a website for mobile devices: The device-customized site, or responsive design.
If you opt for a device-customized site, you have a few different options:
- create a native app for each device operating system;
- employ adaptive design, which uses pre-determined layouts based on which device is accessing the site; or
- redirect mobile visitors to a mobile-only site, which is usually a web version of the native app option.
While device-customized design is often faster for the end user (i.e. your customer), it is typically heavier on upkeep. When making changes and updates, for example, you’ll have to modify the various versions of the website individually.
Your second option is to create one website using responsive design: regardless of the device, each visitor is served the same HTML information as the desktop version of the site, but cascading style sheets (CSS) are used to adjust the layout based on screen size.
One advantage of this method is that mobile users can access all the same features that are available to desktop users. However, it can also make your site much slower — and potentially more complicated — for mobile users to navigate.
It’s time for change
There isn’t really a one-size-fits-all strategy — your business site is unique. That’s where engaging an experienced mobile web developer is extremely helpful. They can provide expert advice about the methods and design choices that will provide the best mobile experience for your customers.
Just remember: all those mobile users browsing their phones in the waiting room is a scene that is being repeated around the world. The sites that leave these smartphone-tethered users happy are popular only because they provide a mobile-friendly experience; if your site is headache-inducing, they won’t be back.
Do you have a question about mobile web design? What advice would you give? Share your thoughts and advice in the comments section below.
image by Esther Vargas on flickr (CC BY-SA 2.0)