How to Prepare Your Local Business Site For a Mobile First Web

Its growing dominance means that it’s the present and future. Smartphones are now so ubiquitous that you would be hard-pressed to find someone without one. New data from ComScore shows that total time spent online is now dominated by mobile devices.

Oliver Wood

Mobile isn’t a trend. Its growing dominance means that it’s the present and future. Smartphones are now so ubiquitous that you would be hard pressed to find someone without one. New data from comScore shows that total time spent online is now dominated by mobile devices. 1 Given this shift towards mobile, Google’s announcement of its mobile-first indexing system is not at all surprising. Previously, desktop results would be shown to users across all devices. The problem though is that mobile users may be shown a different version than what they were expecting. The new indexing system then would prioritise a website’s mobile version over its desktop version when ranking the site in search. ### Here is what Google says about the new changes to the index: > “Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results.” The writing on the wall has been quite clear for some now: Google is increasingly shifting towards a mobile web. If your website doesn’t have a mobile version or at least a responsive design, you can expect to see lower rankings in the search results. Another reason why mobile matters is due to sales. According to data from Google, 67% of mobile users indicated they were more likely to purchase a product or service if the site was optimised for mobile. And 61% said they were more likely to leave a site if they couldn’t find what they were looking for right away. As more people use mobile devices to browse and connect online, a new trend is emerging: Mobile first design. Businesses that are able to make the transition stand to benefit greatly. Here we take a closer look at what mobile first web design is and how to get started with your own local business website. What is Mobile First Design? For years it made sense for businesses to design their websites for the desktop. Mobile was generally built as an afterthought and not given much consideration. Browsing the web on a mobile device was simply not practical and network speeds made the experience even more frustrating. But that quickly changed. Mobile usage began seeing widespread adoption with the introduction of the smartphone and began steadily growing since 2009. Now, data from comScore reveals that the number of global users is higher on mobile devices than on desktops. 2 Figures from StatCounter also confirm that web browsing on smartphones and tablets has risen to 51.3% compared to desktop’s 48.7%. Given these figures it makes sense to prioritise a mobile first design, an idea that was proposed nearly 8 years ago by Luke Wroblewski and has since gained in popularity. 3 What mobile first does is prioritise mobile development. Certain design elements that work on desktops don’t always translate to its mobile counterpart. One obvious example is the use of Flash which doesn’t display properly on most mobile devices. Other instances (e.g. multi level menus, auto playing videos, etc.) can lead to a poor browsing experience for mobile users or make the site difficult to navigate. To better understand why mobile first make sense, it helps to look at comparisons between graceful degradation and progressive enhancement as depicted here. 4 Graceful degradation attempts to solve the problem of rapidly advancing technology. Originally, the term was used to describe the practice of building a site so that newer features could work on modern web browsers. But certain features would be stripped or degrade “gracefully” for users on older browsers. The idea is to serve up enhanced versions and then account for legacy system so the site would still be functional. In terms of mobile design, graceful degradation means building a full standard site and then scaling back to accommodate smaller screen sizes. The problem with this approach is that loading different features on a site may work great on the desktop version but could lead to slowed performance on mobile devices. On the other side is progressive enhancement which means designing and developing a website for mobile first. Essentially you start with the core foundation of your site on mobile which can then be “enhanced” to display more robust features for devices with larger screens such as tablets and desktops. Both take completely different approaches but progressive enhancement works for several reasons: * Increases your reach: The percentage of time spent on mobile devices continues to climb with no signs of slowing down. Having a site optimised for mobile is increasingly becoming necessary to compete. * Directs your focus: There just isn’t room for any extraneous feature on smaller screens. Starting with mobile first design forces you to focus on the most important parts of your website. * Adds new functionality: Starting with a mobile first design lets you incorporate mobile features into your design right from the start. Some examples include location information from GPS, multi-touch input, voice input, etc. We know that mobile is increasingly important and we also know that Google is preparing serious changes to its search index that will make mobile more of a priority. Now that you’re convinced of the value of mobile first design and its utility, how do you actually go about implementing it? Here we look at how to prepare your site for a mobile first web. ### Implement a Responsive Design Your first priority is to make sure your site is mobile friendly. If your site isn’t optimised for mobile devices, you risk losing potential sales from mobile visitors bouncing out. First, head over to Google’s Mobile-Friendly Test tool then input your site’s URL in the box and click the Run Test button. If your site is not optimised for mobile devices, you will see the following: 5 Google will even display a screenshot of what visitors see from a mobile device. From this example, users are presented with the desktop version of the site which offers a poor browsing experience due to its small text size and difficult navigation. One solution is to implement a responsive design which is a grid like structure that dynamically changes to fit all screen sizes and resolutions. This configuration is even recommended by Google. 6 Unlike creating a separate mobile site where you have another site to manage, responsive design solves that problem. It provides a better browsing experience across all devices whether users are viewing your site from a smartphone, tablet or desktop. Responsive design also offers a number of SEO advantages, one of which is that the Googlebots are able to efficiently crawl and index more of your site's content. But even with a responsive design, your priority is to keep mobile users engaged. Keep the following in mind when designing for mobile: * Don’t use Flash: Flash may have been popular in the early days of the Internet. But it is now largely obsolete and iOS (one of the most popular mobile operating systems) isn’t able to display Flash content. Instead, you’ll want to use HTML5 or JavaScript to display animations on your pages. * **Eliminate pop-ups: **Pop-ups may be acceptable on desktop versions of a website but they can be incredibly frustrating on mobile. * **Prioritise content: **Designing for a smaller screen size presents a number of challenges. But taking a mobile first approach forces you to prioritise your content and reconsider any extraneous elements that provide little value. * **Consider typography: **With limited screen space, you need to pay special attention to the typography and font size you use. Your content needs to be easily readable as most mobile users can’t be bothered to zoom in and out on your pages. ### Simplify Navigation Traditional websites typically display prominent menus at the top of the page where they are clearly visible. Here’s an example from Target: 7 But trying to fit in the same navigation menu on mobile just doesn’t work due to the limited screen space. One solution is to shrink the menu into a drop down list and make it accessible at the top of the screen. Here’s what Target does on its mobile site: 8 Tapping on the icon on the top left expands the menu: 9 Helping mobile users navigate your site is a high priority. But it can also be challenging due to the limitations of smaller screen space. Compacting the navigation menu in this manner helps mobile users easily find the right category. Site structure is another important consideration. Multi level menus with subcategories embedded within categories may work on desktops but it can lead to a frustrating experience on mobile. A flat site architecture (pictured on the left) works well on mobile devices as it ensures that pages are accessible within only a few taps. A deep site architecture may work on desktops but it can make navigation difficult and confusing for mobile users. As you prepare your site for a mobile web, put some time into how you will structure your site. Ideally, you want to keep all pages accessible within a few taps and make your navigation as straightforward as possible. ### Design For Conversions The primary purpose of your site is to convert your visitors whether it’s to make a purchase, sign up for a free trial or fill out a lead form. Designing for conversions is a tricky proposition especially on mobile devices where screen space has a higher premium and attention spans are shorter. HubSpot offers an excellent case study on how a few simple changes resulted in more sales. Analytics data revealed that conversions for one of their landing pages was 20 to 30% lower for mobile users. The hypothesis was that making their content more easily digestible and straightforward would increase conversion rates. Some changes that were made to the original landing page included shortening the content and formatting the images. 10 The signup form was also edited to be more straightforward by removing unessential fields. 11 With these changes, HubSpot was able to decrease bounce rates and increase conversion rates on the new mobile landing pages. The key takeaway is that switching to simple layouts not only kept visitors on the page longer but also resulted in more sales. ### Improve Loading Times Nothing is more frustrating than landing on a page while it continues to load. Mobile users are typically on the go so they are looking for information right away. They simply don’t have the patience to continue staring at a blank screen. As shown from this infographic, 1 in 4 visitors will abandon a website if it takes longer than 4 seconds to load: 12 Even a one second delay in loading times resulted in huge financial losses for online merchants such as Amazon. Each visitor that leaves is a potential lost sale that your competitors undoubtedly capitalise on. So site performance is one area that simply cannot be overlooked. Here are ways to boost loading times on your mobile site: Minify and Compress Code The idea of minifying is to combine and compress HTML, CSS, and JavaScript code. Doing so helps to keep file sizes even smaller, thus drastically improving loading speeds for your users. If WordPress is your primary CMS, download and install the WP Super Minify plugin. 13 Utilize Browser Caching Browsing caching saves web pages to a temporary storage location. When visitors revisit a page, the browser serves files that are already cached and only downloads updated content. Caching helps to reduce bandwidth and allows pages to load faster. Download and install the W3 Total Cache plugin: 14 Optimise Your Images Images help to add more colour and l