With all this talk about mobile friendly design, responsive design, adaptive design, etc., we thought it might be helpful to offer a primer to clear up the muddy waters. So with a nod to one of the classic primers of all time . . .
See Spot.
Let’s say Spot came up with a great idea to make and sell a line of mailman-themed dog toys. A rawhide chew toy that looks like a mailman’s pant leg. A frisbee with an image of a running mailman on it. A bed shaped like a mail truck. Treats shaped like mail. A line of doggie t-shirts that read “See Mailman Run” and “Run, Mailman, Run.”
Spot is one ingenious dog.
See Spot’s website.
So Spot got busy with his team of crack canine developers and feline graphic designers (Spot is an equal opportunity employer, except he won’t hire squirrels; productivity goes completely out the window) to make a website where he could sell his line of Canine’s Best Friend products. There was a cool slideshow on the home page, an About page, some testimonials (“My mailman pant leg chew toy gets two barks up!”) a Contact Us form, a Dog Blog and of course an online store.
Spot’s website was killing it…but after a few years, it became apparent that dogs were becoming more mobile and tended to be online while on the go. Home was for sleeping and eating. Riding in the car was when dogs were doing their business. Their online business.
Spot realized he was going to need to make his website more mobile friendly. But how? And what did that really mean? And how many Beggin’ Strips would that cost him? It was enough to make a dog want to eat a pair of loafers and binge watch Lassie episodes. (“What’s that, boy? Timmy fell down the well?”)
See Spot’s mobile friendly website.
So Spot did some reading and began discussing the options with his team. Here’s what he learned:
Mobile friendly comes in a couple shapes and sizes.
The term “mobile friendly” is rather generic and means just that: a site that is created (or revamped) specifically with how it displays on mobile devices in mind. There are two basic options.
1. Mobile or Adaptive Design
In this instance, you basically have two (or possibly three) different sites: a site that displays one way on a desktop, and another way on a phone. Each of these ways isn’t quite the same — coding is done so that when a site is viewed on a certain type of device, the server detects which kind of device is being used and serves up the appropriate version of that site. The site itself doesn’t actually respond and change (that’s discussed below). Instead, a predetermined version of that site, made specifically for that size display, is shown. Some elements may change; for instance, photos may be displayed at a lower resolution in order to load more quickly. Or a slideshow or video may be replaced by a single photo, again, so that the site downloads more quickly on the smaller device. Or, in some cases, the content itself is streamlined to provide just the information that customers and prospects are most likely to want when visiting from their mobile device.
In the old days (about 24 months ago) this was a fairly common approach. Creating an adaptive design may be less costly than a responsive design, but by saving some bacon you may have to sacrifice some elements contained in the full site. Also, these alternate sites require a different URL than the main site, which may cause Google to have some SEO hiccups. But the real problem was that this approach meant you were also having to maintain two different sites. Yuck.
2. Responsive Design
The other way to make sure your site is mobile friendly is to implement a responsive design. This type of design is exactly what it sounds like: when the site is served up, it automatically responds to the screen size available and its appearance conforms to that device’s configurations. So the page is simply reorganized to fit the screen. It’s pretty cool.
For instance, one thing that might happen is the configuration of the navigation bar. Rather than showing a long horizontal listing of “Home. About Spot. The Spot Shop. Dog Blog. Contact Us.” those would collapse into what is known as a “hamburger menu” — those three lines stacked on top of one another that, when clicked on, reveal the menu in a vertical format. (And when collapsed, they kinda resemble a hamburger. Now you know.)
The downside to responsive design? For the user, none. Correctly coded, the transition from one device to another is seamless and smoother than the proverbial baby bottom. The only real potential downside is the time and expense it takes to create it. Functional AND pretty won’t break the bank, but they’re not cheap.
The upsides? Because the content responds to the viewers situation on the fly, we’re able to provide the best possible experience to each person. The site contains all the elements of the full site, just rearranged. Or perhaps slightly modified — like on this site. We chose not to display the entire opening origami video on our home page, just key elements of it, when it displays on tablets and phones. And finally: Google loves responsive sites — no confusion over varying yet similar URLs.
See Spot soar.
In the end, Spot could not stop thinking about the hamburger menu and ended up opting for responsive design. The new site coincided perfectly with his new “I’m not a dog, Mr. Mailman, I’m just a harmless bush” line of camouflage wear. Sales are soaring. Smart, smart Spot.
Wondering what the right move is for you? Shoot us an email or give us a call. We’d be happy to talk to you about your options and make sure you’re not barking up the wrong tree.
