Have you made sure that your site is mobile-friendly?
Did you know that Google introduced a new policy called Mobile-First?
More and more web users are shifting away from desktop computers and, instead, browsing and shopping using their mobile devices.
Responsive web design has made it possible to create sites that work across all platforms on an even level. But, even then, responsive design is only a fraction of UX optimization strategies for mobile.
If you want true performance optimization, you’ll have to consider other alternatives, too.
This is why there is such a strong emphasis on building your site as a mobile-first experience. In simple terms, mobile-first means that your design and content is optimized for mobile users first.
That being said, this post is not about designing an entirely new site. Instead, we’re going to be looking at some fundamental mobile-first design principles. And spend some time focusing on technicalities to optimize the user experience for your mobile users.
Designing with Mobile in Mind
The web is built largely on the principle of serving desktop users. The real web, the real advancements in technologies, is best displayed on a beautiful full-screen display. But smartphones and other mobile devices are a thing, and it’s time to start adapting to the concept of mobile-first design.
Other than the common-sense responsive design, what other design elements do you ought to implement in your mobile-first web designs?
- Prioritization. Mobile screens are limited to the available display space. Also, mobile screens present content in a vertical manner as opposed to a much wider — horizontal — structure for desktops. This means that you must design using prioritization. Which elements are of utmost importance for users to see? If there are CTA buttons, how easy is it to see them for the mobile user?
- Content first. Color second. You can do some interesting things with mobile design, but certainly not in the scope of desktop design. So, give way to content first. Make your copy and other content parts easily readable and accessible. A mobile screen is much less forgiving of distracting visual elements.
- Easy navigation. On a mobile device, you can’t just click anywhere and return to the homepage. Unless, of course, you plan for this type of navigation ahead of time. And you should. Experiment with Scroll-to-Top widgets but also seamless sticky headers whenever possible.
The best way to check whether you’re doing this right is to use your phone (I do it all the time!) and visit your site. Do a thorough examination of how things feel and flow together.
If you’re sitting in a cafe or waiting on a flight in an airport, poke someone on a shoulder and politely ask them to check your site for you. Then, sit back and hear their feedback. Most times you’ll surprise yourself with the way people perceive the user experience of your website.
Resource Optimization
How often do you find yourself using visuals for the sake of personal preference and not UX? It does happen, and if you’re going to go creative, it pays to understand how media optimization works.
Visual elements like photos, illustrations, icons, and videos are the biggest bandwidth consumers on web pages.
While there isn’t a set web page size that everyone must meet, it’s common sense that a smaller web page size equals faster loading times.
So, how can you trim some extra KBs or even MBs off of your visual content?
- Resize your images. Sounds simple, right? Well, I can’t keep count of how many times I have browsed a mobile site just to have 1980 x 1200 images load in the background. Instead, full-size photos should be provided as alternative links when appropriate. Resizing can shave off up to 80% of the total image size, depending on your required dimensions. For mobile devices, though, there’s never a reason to go above the 600-700px range at most.
- Reduce file size with compression. Image compression/optimization is the process of using third-party software to reduce the number of colors present in an image. This can be done to a degree that your photos don’t lose their innate quality but can have their file size reduced drastically. If you need help with compressing images, look no further than our comprehensive roundup of image compression tools.
- Explore alternative file formats. Everyone has heard of PNG and JPEG file formats. After all, they are the de facto image standards on the web. But, not for long. The latest and greatest tech in digital image delivery revolves around WebP and SVG file formats. SVG’s, for example, can automatically scale to screen-size, reducing the number of resources needed to load specific visual components.
User experience optimization for mobile-first is but a mindful thing. Designing on impulse means that you don’t consider the long-term effects of your decisions. Whereas a mindful approach helps you build with mobile users in mind from the ground up.
Insightful: Keeping in line with the concept of intuitive mobile design, you don’t have to reuse the same visual components on your mobile designs. Eliminating a few background images and replacing them with color backgrounds — on mobile — will not harm the user experience. Always look for ways to save even the tiniest amount of bandwidth.
Pre-loading and Lazy-loading
Is it necessary to load all media resources on pages that take a significant amount of time to read? And, can it help to render external pages ahead of users visiting them?
Let’s look at preloaders first, also known as browser hints.
Preloaders are ways for a page to tell the browser about potential navigation opportunities. E.g. A user might visit Page B from Page A.
With preloading, the user can render Page B before clicking the navigation link on Page A.
Keep in mind that preloading doesn’t always work, and it’s up to the browser to make the final decision. Factors like device type and bandwidth are weighed individually.
What are the most common preloader types?
- Prefetch. This type suggests that a specific URL is most likely to be the next navigation choice. And, if the browser grants the request, then it will automatically cache important page resources, which in turn makes the next page load much faster.
- Prerender. Whereas the above type only fetches certain resources, prerender will cache the entire page. All rendered content is stored inside the users’ device memory.
- DNS-Prefetch. DNS prefetch will resolve the specified DNS and nothing else. As a result, if a user makes a specific ‘turn’ on your site, you’re essentially shaving off the time it takes to navigate.
- Preconnect. Same as above, but also establishes connections and handshakes with TCP and TLS connections.
What are some code examples for preloaders?
<link rel="dns-prefetch" href="customURL.com">
<link rel="preconnect" href="customURL.com">
<link rel="prefetch" href="folder/script.js" as="script">
<link rel="prerender" href="customURL.com/preview.html">Since preloaders use dynamic HTML tags, you can preload content like Google Fonts or create a custom script for preloading JavaScript assets in WordPress.
BTW, if you are using WordPress, then WP Rocket can help you with that to supercharge your site.
Now that you know more about preloaders, let’s talk about the other hot topic: lazy loading.
What is Lazy Loading?
Whenever you visit a new web page, whether a blog post or a static site — the browser fetches the entire page content and then serves that content as a native browsing experience. In most cases, you are forced to download the entire page without actually seeing further than above the fold.
Whereas with lazy loading, the browser is told to load (render) content that’s only within the viewport of the user. So, if there are size-sensitive photos or videos added to a certain page, those files will only display whenever your browser screen reaches that part of the site.
And if you’re worried about potential SEO issues, don’t be. Yoast has confirmed that Google does render pages that use lazy loading and sees it as just another performance improvement signal.
My recommendation for a library to use is Layzr.js — simple and effective lazy-loading for your images! The script is activated on the project’s homepage, too, so you can see it perform in real-time. WordPress users can find dozens of lazy-loading plugins in the public plugin repo.
Web caching
Web caching is based on the concept of copying a version of a page, which can then be presented to the user at any time. Pages are cached upon the first visit to a website’s page. When a new user then tries to access that page, instead of serving the live version, the web server will show the cached version.
The goal of any kind of caching is to improve website performance and decrease the required back-end resources. Depending on your caching solution, you can configure custom intervals and other trigger-based events.
Some of the most popular names in web caching are Varnish, Squid, and Memcached. But rest assured that there’s plenty of other solutions on the market, especially if you’re a WordPress user.
You can also consider signing up for a CDN.
What’s a CDN (Content Delivery Network)?
A content delivery network uses a global cluster of distributed servers to provide incredibly fast content delivery. A CDN can quickly transfer all popular content types on the web: video, photo, JavaScript, etc. These days, most of the web’s traffic passes through some form of a CDN.
The one thing to remember about content delivery networks is that they work best when used on a high-demand website. So, if you only serve a few thousand visitors a month, seeing noticeable improvements might prove difficult. Nevertheless, a CDN is a great solution for improving your website load times, reducing the cost of bandwidth, increasing content availability, and strengthening overall security.
If you don’t have prior experience with CDNs, we recommend trying out Cloudflare — they provide a free-forever plan, and it’s a great platform to start learning with. And if Cloudflare doesn’t live up to your expectations, check out our post for the best free CDN providers on the market.
AMP (Accelerated Mobile Pages)
Google’s AMP project is mobile optimization on steroids! Essentially, AMP strips down your pages to bare essentials to provide a super-fast loading experience but also to make content readability a priority. Given how important page speed is, can you muster up the courage to say no to near-instantaneous loading times?
Okay, all those buzzwords sound great, but how does AMP work?
AMP is a bare-knuckle HTML page with certain limitations for what kind of content can be displayed. This leads to much faster load times and overall performance due to limitations for executing scripts and such.
JavaScript, for example, does not work with AMP. Unless, of course, you use the AMP JS library available on GitHub. Using the JS library does let you achieve certain results, like avoiding ad blockers, but if you want true performance, then raw AMP is the way to go.
Interesting case studies for AMP:
- Terra drives mobile viewership up with AMP
- Times of India reports 1.5X more revenue yields
- Fastcommerce drives conversions for clients by building AMP-first
Test Before Committing
In this day and age, there’s no excuse not to have a separate staging environment for your project. Most cloud hosting platforms offer staging environments by default, so check with your provider to see if you have access to one.
What’s a staging environment?
Well, the quickest way to explain this is by looking at your current live website.
This site is what you call a production site — a real-time version of all the code, scripts, and content that your site is based on. A staging environment in this context is a copy of your production site. A dummy site if you will. And in this staging environment, you’re able to make changes or add new features without breaking your live site.
I always think back to Ashley Harpp’s post, Don’t waste time – Test changes before committing.
Her take on how we ‘trick’ ourselves to avoid certain things is a prime example of how we don’t want to take responsibility when we do make a mistake. Nevertheless, Ashley’s post also includes links to useful tools for setting up a local staging environment.
Testing is not as scary as it sounds. But it sure as heck is scary when you accidentally delete your entire database on a production server!
Deploy Structured Data Markup
Structured data markup is commonly known as Schema Markup. It’s a kind of metadata that offers more background and details about the content of your website. So, adding this structured data markup will help your mobile website get more allowance from search engines. Thus, search engines will understand the meaning of your content more accurately.
Moreover, structured data markup annotates certain website components using a standardized format, such as JSON-LD, Microdata, or RDFa.
This contains information about the products, reviews, ratings, prices, dates, locations of the events, and more. Ultimately, search engines will extract these data while scanning your page and use it to highlight rich snippets in SERP.
To apply structured data markup, you can utilize a variety of schema markup generator tools. Using the tool, you can easily apply structured data markup to your website. You can choose the best kind of schema for your content and create the required code snippets.
After adding the structured data markup to your website’s HTML, use Google Structured Data Testing Tool to ensure its correctness.
Implement Voice Search Option
Voice search option-enabled website has gained much popularity due to the growing popularity of virtual assistants like Siri, Google Assistant, Alexa, and so on. To minimize browsing time and increase flexibility, people are now utilizing voice search options. It helps them to swiftly retrieve their desired info and complete activities without typing.
Here are the tactics you can follow to implement voice search-optimize your website:
Apply Long-tail Keywords
Voice search mostly takes the form of inquiries or queries in natural language. When utilizing voice assistants, users often talk in more casual tones. As a result, optimize your content by using long-tail keywords and responding to frequently asked queries about your category or specialty. Plus, consider the precise questions a visitor could ask, then respond to them in your content in a clear and succinct manner.
Provide Clear & Concise Answers
Voice assistants generally employ info based on knowledge graphs or highlighted snippets to provide concise, clear responses to user requests. So, if you can structure your content in a manner that directly addresses frequent queries, the possibility of your website being chosen as the voice search result increases massively.
Enhance Website Navigation & Structure
Ensure straightforward navigation in your site that is simple for voice assistants to crawl and recognize. Simply optimize your navigation menus, headers, and internal liking to enable a smooth user experience. This improves the indexing and retrieval of your material via voice assistants.
Target The Featured Snippet
Featured snippets are the best way to get noticed via voice search results since they are highlighted at the top of search results. Therefore, structure your material in such a way that it is grabbed and shown in a featured snippet. For example: answering questions briefly yet effectively, using bullet points, and organizing data in tables or lists.
Closing statement
Optimizing your website for a smooth mobile experience isn’t all that difficult. All you need is a little determination and willingly apply the outlined methods in this post. Chances are, you’re already familiar with things like content caching and lazy-loading, but what about staging environments or preloaders?
Hopefully, this post has shed some light on the current state of mobile website optimization.
