Going Mobile

By Ron Rosenberg

Designing websites used to be pretty straightforward - you just had to make sure they worked with different browsers and on different platforms.

Now it's more complicated. You have to make sure your sites work on an endless assortment of tablets and smartphones.

If you have any doubt about this at all, just think about the last time you brought up a website on your smartphone - even one from a big company - and all you got was the "desktop" version of the site.

Sure, you can find your way around by zooming in to read particular sections, and expanding the fields on a submission form so you can actually enter some text, but let's face it - this gets old very quickly.

If it's your website that's the "guilty culprit," then it may be causing serious frustration for your customers, clients, or members - seriously impacting your growth and revenue targets.

And this is becoming more and more important as the percentage of searches and page views on mobile devices (versus desktop searches and views) increases each year.

A Simple Example...

Here is a screenshot of one of our websites:
Ron's_Web_Site_-_DesktopIt's a pretty clean design, featuring a "triage page" to help visitors quickly get to the exact content they need. You can read it easily in the image above, but what if you were trying to view it on your smartphone?  It might look something like this:

Ron's_Web_Site_-_DesktopImaging trying to read the text and navigate through the site when it all looked this small.

I promise you, it would get frustrating very quickly, and the last thing you want someone to feel when they're visiting your website is frustration.

 

 

 

Ron's_Web_Site_-_MobileNow, let's look at the same site when it's actually viewed in a smaller display size:

You can see that the entire design and layout of the site have changed.

Instead of the navigation icons appearing in a bar at the top of the screen, they're now bundled in a single drop-down menu.

Instead of the "triage" boxes appearing side-by-side, they're now stacked vertically.

Notice that the content is exactly the same, it's just the organization and arrangement of the components that are different.

And the best part is that these are not two different websites - they're the exact same website - it's just that the WordPress theme we use automatically resizes it based on the current display dimensions - the normal "desktop" view for regular browsers and most tablets, and a more "compact" view for smartphones.

In fact, it's not just one or the other - if you view the site in a laptop browser window, and gradually shrink the size of the window, the format of the page will change accordingly, passing through several different renderings.

It's More Than Just "Resizing"

Yes, making your content easy to read in a smaller window is important, but it's only one part of having a mobile-responsive website. There are other considerations that are just as important.

  • Network Speed - If you're using your mobile device at home or at work, you'll almost certainly have access to a high-speed WiFi network. But what happens when you're on the road somewhere? Sure, you might be able to get 4G speeds in many locations, but if 4G coverage isn't available, then pages will be slow to load, making your visitors impatient, and quickly leading to frustration that will lead to them abandoning their search.
  • Get the Initial Content Quickly - This is the classic "above the fold" concept that print newspapers have had to deal with for hundreds of years. Think about a traditional newspaper. It's generally folded in half vertically, with only the top half of the front page initially visible. That content is said to be "above the fold." The same concept applies to web pages - whether in desktop or mobile versions - meaning that the important items, including strong headlines, relevant benefits, and compelling offers, need to be visible immediately. When combined with the network-speed issue, this means that you have to design your pages to render in an efficient manner that will keep your visitors from having to wait.

A Few Design Considerations...

When you're working on your websites, there are some important concepts to keep in mind. First, develop your web presence with "mobile" in mind. It's far easier to build your mobile capabilities from the start than it is to go back and "retrofit" an existing site.

Next: Test, Test, TEST! View your site on as many different devices as possible. Granted, this can get expensive, but fortunately, there are many different sites, like mobiletest.me, that will emulate various devices so you can test them "virtually."

Another consideration is how you select the tools you use in conjunction with your website. For example, the system we use for our webinars is completely mobile-responsive. You can register for a webinar on mobile-optimized forms, and even view the webinar on your tablet or smartphone without having to do anything special.

Finally, as with any website - or, for that matter, any marketing approach - be sure you have a way to measure key performance metrics so you'll know what's working...and what's not.

Additional Resources

There's a lot more to think about than we can include in a single article, so here are some additional resources you can look at, whether for yourself or to share with your IT or Web team:

The world is going mobile, and if you want your online presence to be relevant, you have to be playing in that media space.  These ideas and resources will give you a good start to help you navigate this path!