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, browse and shop 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 for optimizing the user experience for your mobile users.
#1: 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 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 opposed to 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 it is 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 on 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.
#2: Resource optimization; images, icons, etc.
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 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 on 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.
#3: 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. 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 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? 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.
#4: 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 websites’ 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 webs’ 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 CDN’s, 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.
#5: 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 limitation 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
#6: 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!
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.
