Since mobile web searches first passed desktop in 2015, ignoring the mobile search community was no longer a valid option. Because mobile devices have different parameters and limitations, this means that sites not designed for a smaller viewing window don’t function properly. And few people want to stick around and try to work with a site that won’t work with them.
For years, Google and many web designers have been calling for mobile-friendly pages and planning for “Mobilegeddon“, the switch from a desktop-centric to a mobile-centric web. In November 2016, Google claimed it was months away, but backpedaled in March 2017 and gave an indefinite timeline due to all the differences in SEO factors needed to rank pages with a mobile-friendly mentality. But what does mobile-friendly actually mean? Google’s own mobile readiness test splits this into two categories: mobile friendliness and mobile speed.
Mobile friendliness essentially boils down to one idea; does your website provide a good user experience on a mobile device? While this depends on a number of factors, ultimately a separate version of the site needs to be made (known as an “M-dot” site) or it needs either a responsive or adaptive design to cover all of these factors.
When the mobile web was still in its infancy, developers quickly learned that large pictures and full-width content couldn’t fit onto tiny cell phone screens. But large corporations that were quick to create websites already had the content they wanted on their desktop page; the problem was that the user couldn’t see it. So how could they fix it?
The solution was to create a copy of the content on a separate but related URL. These m dot sites are the same as the desktop site only with “m.” at the beginning to show that it’s mobile, such as Facebook with https://m.facebook.com/effectivewebsolution/. These pages have smaller images, often condense content into expandable menus, and can be easily navigated with one hand. Perfect for phones, right?
It was a good solution at the time, when phones had a similar screen size. But now with the booming tablet market and screen sizes ranging from smart watches to 24 inches, a one-size fits all approach isn’t practical. What was once an ideal option now has a myriad of issues. Many companies are abandoning M-Dot sites in favor of responsive or adaptive designs, yet major corporations such as Facebook and Safeway still use the M-Dot style, likely due to resources put into them and site load speed.
A responsive web design is one that shifts and shrinks the content of the webpages to fit the screen size of the user. Think of that old message before a movie, “This film has been modified from its original version. It has been formatted to fit your screen” as a simplified explanation of responsive web layout. So why weren’t these used to begin with?
When mobile M-Dot sites were first used, this simply wasn’t an option. Responsive HTML and CSS tags needed to be created first and can now be accomplished through several creative methods. Now, a designer can simply load a responsive CSS sheet, make some customization options, and they’ll have a personalized responsive website!
An adaptive layout is sort of like a hybrid between a traditional M-dot site and a responsive layout. Like a responsive layout it still uses the original URL, but the content boxes only change at specific intervals. For instance, one version of the page would be loaded for a desktop screen size, another for a tablet, and a third for a smartphone. While this makes the assumption that only a few levels of screen size are used, they target the most popular device sizes and are often still usable on screens that differ slightly.
One major advantage of an adaptive design is that developers can format each size to look exactly as they like and know that it will look good on any of the options. With a responsive design, on the other hand, even on a desktop the layout will change with the window size and shrinking the window to a thin column makes some humorous-looking text that isn’t very viable to read. Of course, if a device were to use a screen the size of a watch band, it’s better than having no option at all!
That depends on the individual site and its goals. Generally, the trend is to move away from M-Dot sites, but whether an adaptive or responsive site works best depends on end goals, though a responsive site may the safer option to fit the most devices.
Mobile speed refers to how long it takes for a page to load on a mobile device. Because research shows that slightly over half of mobile users leave a page if it takes more than 3 seconds to load, fast load times are essential. So how can you speed up load times?
Optimizing media such as large pictures and video files is probably the quickest way to change load times. Image optimization involves several variables, but they all come down to the same basic premise; reducing the file size. Smaller files take less time to load. And less time to load means faster speed!
Loading all of the content at once, especially when only some parts of it are “above the fold” can slow page loading. If resource-taxing media such as videos are required, consider having them below the fold and having them load later, which should create faster initial page load and a seamless transition throughout the page.
Mobile sites aren’t going away. Instead of fighting and resisting change, it’s a smarter move in the long run to adapt (or respond!) to “Mobilegeddon”. Not only will this benefit page rankings, but it will also provide a better experience to the user so they can recommend your site to their friends and family too!
*Update 10/27/2017 – The first wave of Mobile-first sites have started to roll out. And while Google plans to implement this slowly, sites that haven’t started will be left in the dust. Fortunately for EWS clients, we’ve planned for this ahead of time and build websites with a responsive, mobile-first mentality in mind so you don’t have to worry!