4 Things To Keep in Mind When Considering Mobile Web Sites

Before we really get started, I’d like to first clarify something about mobile websites: they are NOT the same as mobile-friendly sites, nor are they the same as mobile responsive websites. This is your – slightly preemptive – first consideration to keep in mind.

#1 – Mobile Site ≠ Mobile-friendly Site ≠ Mobile Responsive Site

  • Mobile websites – these sites are separate from their desktop counterparts. The URL will often include an “m.” or “mobile.” These are time-consuming and a pain for everyone – SEOers, designers, copywriters, and even website owners – because if something changes on the desktop site, it also needs to be manually changed on the mobile site. While they had a good run in the early days of mobile Internet access, responsive web design basically sent mobile sites home with a participant trophy and a t-shirt saying, “I was on your mobile screen and all I got was this shirt.”
  • Mobile-friendly sites – these websites are designed as a single design that works well across multiple devices. Usually, the website you see on your phone is a scaled-down version of the website you would see on your desktop. Similar to all squares being rhombuses but not all rhombuses being squares, all mobile responsive sites are deemed mobile-friendly by Google, but not all mobile-friendly sites are mobile responsive.
  • Mobile responsive sites – these websites use media queries (embedded in a website’s CSS) to reshape a website depending on screen size and the browser being used. Elements of a desktop site will rearrange as you resize the window – fonts will adjust, images will adjust, and even the navigation will adjust. A well-developed mobile responsive website will reorganize and adjust page contents to provide a brilliant mobile user experience.

No, these terms are not interchangeable, and yes, recognizing them as separate entities from one another is important. We are sorry to say mobile websites are to mobile-friendly websites as laserdiscs are to DVDs. So, let’s change this “four things to keep in mind when considering mobile web sites” into “four things to keep in mind when building a mobile-friendly website.”

 

So, Moving On…

In late 2001, the first “responsive” website appeared in the form of Audi.com. While the responsiveness was optimized primarily for Internet Explorer, patient Netscapers could experience the responsive sizing if the page successfully reloaded from the server after being resized.
audi2001

Despite being rudimentary by today’s standards, this was the first real (read: documented) attempt at responsive design. Not much happened in the world of responsive design over the next few years. Cameron Adams, “themaninblue,” created a “resolution dependent layout” in 2004 (which you can still see here), and the words “flexible,” “elastic,” and “fluid” gained popularity in the Internet world.

Image Created by Stéphanie Walter The illustration is licensed under the Creative Commons Attribution - Share in Same Conditions France 3.0 (CC BY-SA 3.0 GB), you can use it, even for commercial purposes as long as you meet the conditions of the license (ie again mentioned "created by Stéphanie Walter" and share the same conditions).
Image Created by Stéphanie Walter
The illustration is licensed under the Creative Commons Attribution – Share in Same Conditions France 3.0 (CC BY-SA 3.0 GB), you can use it, even for commercial purposes as long as you meet the conditions of the license (ie again mentioned “created by Stéphanie Walter” and share the same conditions).

 

Responsive Web Design

However, it was an article published in May 2010 on A LIST APART that propelled this new site structure into the main stream. The article was called “Responsive Web Design,” a term coined by the article’s author himself – Ethan Marcotte. In this article, Marcotte not only defined what responsive web design is, but also provided the code and different working versions of a site with responsive, flexible, and linearized designs. At the time, this was basically just a cool functionality – especially since most people accessing the Internet were using desktop and laptop computers. A year (Spring 2011) after Marcotte’s article was published about 35% of American adults had smartphones. Not a number to scoff at, but also not a number to inspire game-changing action. Yet.

According to an April 2015 survey from the Pew Research Center, that number of American adults with smartphones skyrocketed from 35% to an astonishing 64%. In just four years, an idea from 2001 that had lain dormant for nearly ten years became .net magazine’s #2 web design and development trend to watch in 2012, and, by April 2015, had become a critical ranking factor for Google.

How This Applies to You

At this point, you shouldn’t be wondering if you need a mobile-friendly website. The answer is yes. Mobile commerce brought nearly $70 billion to e-commerce revenue during the 2015 Holiday Season. In fact, comScore’s chairman emeritus Gian Fulgoni said 2015 would be remember as “the one where mobile ate brick-and-mortar.”

holiday spending

That’s a lot of money up for grabs. Don’t miss out on some serious revenue simply because your website is not mobile-friendly.

 

#2 – Google’s Search Quality Rating Guidelines has a mobile rating section.

When Google released their proprietary Search Quality Rating Guidelines in late 2015, it was revealed that an entire section was dedicated to “Understanding Mobile User Needs.” While not surprising, it does underline the fact that Google cares about mobile-friendliness. Here’s an excerpt from page 67 of the Guidelines: “Important: Mobile smartphones should make tasks easy, even for mobile users with a small screen device (i.e., size of smartphone, not a tablet). Users want results right away, at that moment, and may not be able to spend a lot of time to find what they are looking for.”

How This Applies to You

With user experience as Google’s number one priority, your site better work – and look – great on a mobile device. Keep this in mind as you optimize and organize your website – the playing field is starting to level out. Not only will it be easier for you to maintain and optimize, but it will also be less confusing for search engines.

 

#3 – Content first, navigation second.

Luke Wroblewski, author of Mobile First, highlighted that when organizing a website for mobile devices, “content takes precedence over navigation on mobile … [people] want immediate answers to their needs and not your sitemap.” Think about how Facebook’s mobile appearance has changed overtime. In 2012, Facebook’s app looked like this (on mobile Apple devices):

evolution-mobile-app-design-facebook-2012

Today, Facebook’s app looks like this (on mobile Apple devices):

Source: Usabilitygeek.com
Source: Usabilitygeek.com

In 2012, the Newsfeed was a series of “this happened,” with very little information attached. In 2015, the Newsfeed delivers full posts, the information is easier to digest, and you have the ability to Like, Comment, or Share right there. As for the profile page, the 2012 version doesn’t provide much information that you want to know “at a moment’s notice.” However, the 2015 profile shows recent attended events, who your mutual friends are, and two obvious communication options if you need to say something to your friend. No, Facebook doesn’t have the greatest UI, but they have gotten the memo about content before navigation.

How This Applies to You

People use their phones to access the Internet for three basic reasons: they want to grow their knowledge, they want to know what’s near them, or they are bored. If your website’s content doesn’t translate well to mobile devices, no one is going to look at it. If your content doesn’t quickly meet the needs of one of these queries almost immediately, no one is going to stay on your site. Yes, it’s important to have easy navigation on your site, but before you worry about that you need to worry about what kind of information you are actually providing.

 

#4 – Be a Model for Mobile Behavior

Also known as user experience, getting in the mindset of how people act while on their phones is essential to building a great mobile-friendly website. In the Search Quality Evaluator Guidelines, Google talks about how we expect our smartphones to do a lot, do it quickly, and do it easily. While designing your mobile-friendly (and hopefully responsive) website, make sure it features:

  • Easy to read fonts
  • Clean design
  • Optimization for voice-based search (like Siri or Cortana)
  • Optimization for multiple search engines – including alternative options like Facebook or YouTube
  • Fast load times
  • Digestible content
  • Simple navigation

Remember, the primary reason a person is even using his or her mobile device to access the Internet is that they are searching for something. Make sure they can find it and use it, all while having a positive search experience.

How This Applies to You

While it may be tempting to design a ridiculously exciting and highly visual website with lots of movement – don’t. Think of it like the Vegas Strip. It’s so full of flashing lights and movement that you struggle to navigate it, let alone make sense of it, until finally frustration takes over and you go home. Or, you go into the nearest casino, which isn’t really much better. Let user experience be your guide (for a crash course, visit usability.gov). Make sure your website offers real-world functionality and addresses Google’s “micro-moments” – I want to know, to go, to do, and to buy. Also, the simpler your design, the easier it will be to make it mobile-friendly (or more ideally, mobile-responsive).

 

Four Things to Keep in Mind When Considering Mobile Web Sites Building a Mobile-Friendly Website

According to a 2015 report from CMSReport.com, 57% of users say that they will not recommend a business if the mobile functionality of its website is poorly designed. The same report revealed that the average smartphone conversion rates are up 64% compared to the average desktop conversion rates. So, take care when building your mobile-friendly website and remember these four things:

  1. Mobile site ≠ mobile-friendly site ≠ mobile responsive site
  2. Search engines care about the functionality of your website across all devices
  3. Content first, navigation second
  4. Design with user experience in mind

With these foundations in mind, you are well on your way to building a mobile-friendly website that will produce real-world results.