What is Mobile-First Indexing?

Mobile-first seeks to flip the standard design process on its head, encouraging designers and developers to create the perfect browsing experience for users on smaller devices first.

Previously websites were built for desktop, with the mobile version an afterthought. This meant that mobile websites suffered, with key elements being hidden or removed for convenience. Each of these factors meant risking a poor user experience. In those days, mobiles were not the primary user base for most websites. Nowadays though, Google suggests you do the total opposite – mobile design and then move outwards, adapting for larger screens.

Google themselves have recognised the importance of this movement. Last year, they began altering the Google search algorithm to give preference to mobile friendly websites and eventually removed non-compliant sites from mobile search results entirely. This update was, somehat playfully, called “Mobilegeddon” and acted as a wake up call for lots of businesses.

The long-term plan is expected to be a blanket removal of all websites that don’t work well on mobile, regardless of the searcher’s device. Be that smartphone, computer or any other device.

The Background of Mobile-First

Mobile web use continues to grow exponentially, with a consistent upward trend in mobile web browsing evident for a decade at least.

Once the bridesmaid, mobile internet use is now well and truly the centre of attention. Having overtaken desktop back in 2016 and continuing to pull away ever since, mobiles have become a pain for some web developers. StatCounter’s latest figures showed mobile browsing takes 52% of the total share, with desktop averaging 44% and tablets making up the remainder.

Mobile Vs. Desktop Internet Usage

The lines between desktop and mobile screen sizes are becoming ever more blurred. Phone screens are getting bigger, whilst computers are morphing into tablets and this serves as confusion for many. A greater emphasis on fluid responsive design is therefore required now. If only to alter one’s approach to the web, mobile-first indexing has changed so much in the digital world. What was once unheard of has become the standard, particularly over the last couple of years.

In the past many developers opted for separate mobile versions of a website, effectively duplicating the content. This doubled the time and effort required to complete the project, but was best practice. This approach quickly became antiquated as responsive web design (RWD) took over. Developers’ focus switched to building a website which can adapt accordingly, rather than for a specific device or screen size.

Previous “Approaches”

This approach followed the concept of “graceful degradation.” We all began with all-singing all-dancing website designs and were slowly forced to remove functionality and features until the website works on mobile too. Whilst this method is effective, it is not ideal.

A different approach quickly started gaining traction: “progressive advancement”.

In essence, this is a reverse of graceful degradation. Progressive advancement focuses on starting with the most effective solution for a limited environment, in this case a smaller screen size. The task then, is to enhance it as much as possible, as on-screen real estate and processing power becomes available. In terms of the web, this became known as the “mobile-first approach.”

The Challenges of Mobile-First

Mobile-first presents several unique challenges to web designers and web developers.

Firstly, and most importantly, is user accessibility; an individual browsing your website on their phone shouldn’t be punished for doing so with a bad experience. Accessibility goes beyond making sure text can be read and colours don’t clash. Aspects such as connection speeds and browsing environments will be considered too.

Unlike with traditional computers; people browsing on a phone could be anywhere in the world, with any connection speed. Filling your site with large images and unnecessary fonts could cause problems for those on a patchy mobile data connection. There’s no reason that stunning, full-screen photography, for example, can’t be used on your site. However, you shouldn’t necessarily expect mobile users to wait 30 seconds for a picture to download. This is likely to frustrate and, in most cases, drive users away completely.

Formatting Solutions

Displaying different sized images depending on the screen resolution of the device enables small screen users to enjoy a fast and enjoyable experience. This is shared with those on a desktop using a high-speed internet connection.

Another thing to consider is the way in which elements are ordered and displayed on mobile.

The traditional approach to responsive design has simply been to stack horizontal elements vertically on a smaller screen size. However to stick out in the crowd, pages try to featue complex layouts more. Doing so leads to an unnecessarily confusing mobile browsing experience.

For example; let’s say you have a layout on your website that features left-aligned text, followed by a floating image on the right. On the row below, the layout is flipped.

Stacking this on mobile would result in text-image-image-text, whereas the “ideal layout” would be text-image-text-image. See the illustration below:

mobile first design

Fortunately, there are plenty of ways to achieve this using modern development techniques.

Most notably; the rise of “flexbox”, which is a must-have tool for layout manipulation in mobile-first design. If you’re a developer and you don’t use flexbox, the likelihood is you haven’t heard of it.

Another perk of building in mobile-first format is that it helps with clarifying the design process better as a whole. It’s even better when you’re considering a bespoke website design.

By attacking a project mobile-first, your ability to understand the most important elements of your website improves massively. Giving priority to certain aspects of content over others becomes more of a priority than adding in an extra picture. In most cases, seamless translation into desktop view becomes simple.

Providing a better experience for all visitors has never been so easy; the welcomed side effect of a more painless web development experience.

Why Should My Website Be Mobile First?

Put simply, if you want your website to appear in Google, you need to take a mobile-first approach.

Remember, when it comes to driving traffic to your website and growing your business, the power of Google (and SEO) is obvious.

If your website does not follow the mobile-first approach, your search rankings will suffer. The site will appear further down the search results and could disappear entirely. Over half of the potential traffic coming to your website (though the exact figure often depends on the nature of your business) is coming from people on mobile devices and to alienate these people simply doesn’t make sense.

Aside from this, you also want your customers (both existing and p.rospective) to have a positive experience when using your website. This should be regardless of where they are or what device they are viewing it on.

Summary

There’s no getting away from mobile-first, particularly with giants like Google actively encouraging it’s use. The benefits are clear to see, both from a business view and that of the team building the site. Some adjustments in process and mindset may be needed initially, but the advantages of this approach vastly outweigh any potential bumps along the road.

At the end of the day, it will be your customers who make or break your business and with many of them finding you through your online presence, you need to make sure that your website is set up to give them the best possible experience, regardless of how they find it.

You never get a second chance to make a first impression, so make it count! If you would like any advice about updating your website, contact us today to talk to one of our experts: 01284 706842hello@logicdesign.co.uk

It All Starts With a Conversation

Request a quote or pricing, ask a question, book a meeting or for a quick chat...