4 Critical Tips for Executing a Smart Mobile-First Design
“Mobile-first” has been an unavoidable buzzword in the business, design, and marketing space for a while now. You probably heard something back in 2015 when mobile searches officially outnumbered desktop. While the indications have been pointing to an imminent mobile takeover for years, this was the defining moment in which prioritizing mobile became crucial for survival.
Moreover, the major Google algorithm updates of 2018 saw two big changes to mobile indexing and mobile search. These trends further solidified the common reality that mobile websites need to be impeccable.
In addition to following the best practices for mobile indexing and search, webmasters need to be placing a priority on smart mobile-first design and functionality.
Here are four pointers to keep in mind.
1. Focus on Speed
No one likes a slow loading website, especially a slow loading mobile website. As a mobile user yourself, you can likely agree that waiting even a couple of seconds for a mobile site to load can feel like an eternity.
Additionally, more and more people are becoming cautious of the amount of time they spend glued to their smartphones (thanks, Apple update). Those extra seconds can quickly cause a user to leave your site and never come back. These days, the best mobile webpages take no longer than one second to load!
At the core level, a fast-loading mobile website starts with simplicity. Now, it’s important to note that simplicity does not equal minimalism. A simplistic website should convey all the key bits of information, CTAs, and functionality — just more concisely without all the flair. On the other hand, minimalism in web design often equates to the reduction (or elimination) of important website aspects.
Take Etsy’s “simplistic” mobile website for example:
It conveys everything it needs to right away without using any fancy bells and whistles. The more you can simplify the overall layout and reduce clutter, the less there is to bog down the speed.
Moving on, images are a huge factor that slow down web pages — both on mobile and desktop. Much of this comes down to using the proper image format for mobile. According to httpArchive (as of February 2019), the common formats for images are JPEG 46%, PNG 29%, GIF 19%, WebP 1%, and SVG 2%.
In terms of the content, if you typically get traffic from around the globe, it might be smart to invest in a Content Delivery Network (CDN). CDNs are a network of geographically distributed proxy servers and data centers that can be used to deliver content quickly to users who are located a long way away from the original host. This will make your pages load quicker for international visitors.
Lastly, if you haven’t already, definitely get a mobile caching plugin. These work to create dedicated cache files for mobile devices for every document. The result is that returned visitors will have much quicker access to your pages.
Above all else, speed needs to be your main concern. Ultimately, it doesn’t matter how pretty your site is; if it takes forever to load, not many people will be patient enough to wait for it to load.
2. Think About One-Hand Accessibility
Back in the old days of smartphones (I’m talking iPhone 4 era), most people could comfortably reach all corners of their mobile screen with one hand. Nowadays, phone screens are getting bigger and navigating them is typically a two-hand job.
With this in mind, user-friendliness in this age of gigantic smartphones involves proper attention to the “thumb zone” and stretch points.
A good mobile-first website should be easily navigable with one hand. Now, a rule of thumb here (no pun intended) is to keep CTAs and interactive buttons close to stretch points in the edges and corners — particularly closer to the bottom.
Let’s take Spotify’s mobile layout for example.
You’ll notice that all of the core interactive buttons and action points are located at the bottom. Moreover, the button to pause the music is positioned perfectly to be tapped one-handed.
As you design your mobile site, put yourself in the shoes of the user. Ideally, you should be able to access everything on the platform with one hand.
3. Avoid Blocking JavaScript
Avoiding JavaScript on mobile sites is an outdated practice that needs to be left in the past. In prior years, it was a common understanding that using too much JavaScript in mobile design would almost certainly bog down the speed of the site and cause a number of UX issues.
Nowadays, most mobile devices are powerful enough to manage JavaScript without fail. In fact, between 2012 and 2019, the amount of JavaScript used on the average mobile page has more than quadrupled!
If executed properly, JavaScript can do amazing things. It helps make websites more dynamic and interactive by implementing customer scripts for a better UX.
Additionally, as mobile devices are now better equipped to manage JavaScript, so are the Google bots. That said, it’s highly recommended to implement SEO-friendly JavaScript on your mobile site for indexing. Here are a few things to keep in mind:
- Server-side rendering: This refers to server-side code that is immediately available for Google to index. It does not require a second pass to render client-side content. While this may use more server resources and potentially slow down initial page load times, it is a smart move for critical pages — like the initial layout and main content.
- Hybrid rendering: This is a balance of server and client-side rendering for UX, SEO, and overall performance. While server-side rendering should be used for critical web content, client-side rendering should be used for non-critical components.
- Dynamic rendering: Dynamic rendering is a relatively new Google policy. It is ideal for large sites or ones that change frequently with timely content.
Always be sure that you are running periodic mobile-friendliness tests to gauge your site’s usability.
4. Optimize Your Conversion Process
When you have web functionality that requires users to enter in information or complete a task, the common reality is that you have to keep it simple. Any extra step or distraction is usually more than enough to send people packing. On mobile, this concept is even more pressing. It’s been said that every added field beyond three can slash mobile conversions by 50%!
As you create your conversion processes for the mobile screen, you need to evaluate every step multiple times and critically ask yourself, “Is this 1000% necessary?”
If people have to fill out personal information forms, do they really need to enter their address, phone number, etc.? Do they need to enter their information at all? Can they convert as a guest?
When it comes to financial information, no one likes having to pull out their credit card, enter the 16-digit number, expiration date, and security code. If possible, incorporate quick options like Apple Pay, PayPal, Android Pay, etc.
Having a progress bar in the conversion/checkout process is always a good touch.
Lastly, and this should go without saying, you need to make it clear that EVERY piece of information you collect is secure. Displaying trust badges and logos stating your checkout is secure can help a lot in gaining conversions.
We’ve seen many news stories in the past couple of years about sketchy data practices, so don’t fall into this category!
Wrapping Up
A “smart mobile-first design” is a term in which the specifics change from day-to-day. Mobile users’ demands are growing and common tactics need to be continuously refined to meet them.
Ultimately, the name of the game is simplicity. The best mobile sites don’t require much time (if any) for visitors to grasp the UX, get the information they need, and take action. These core concepts apply to both users and Google bots. Hopefully, these tips will help you arrive at a solution that pleases both.
