More and more web traffic nowadays comes from mobile devices, and as a result, websites need to adapt to this new paradigm.
Building a website today in a way means building multiple websites: one for desktop, and another for mobile, with some variations included here depending on screen size – mobile can mean tablet or smartphone. Thankfully, the tools we have at our disposal make this fairly accessible and not that complicated.
Today we’re going to take a deeper look at what optimizing your website for mobile means and how you can achieve some great results.
Here’s a list of 9 things you can do to ensure you website looks and works great across devices:
If a website is responsive, this essentially means that its contents adapt to the size of the screen that it’s being viewed on. This is obviously extremely important and an absolute requirement since most of your visitors will probably be viewing your website from mobile devices.
This is always the first step in mobile optimization. First thing’s first, you want visitors to be able to correctly see and use your website, regardless of what device they are using.
These days, however, responsive websites are pretty much a given. Whatever tools you may have at your disposal, they were built with responsiveness in mind, so this aspect should be fairly simple.
Most of the time, the biggest bandwidth consumers on websites are visual elements like photos, illustrations, and icons. There is no specific web page size that you should stay below, but the smaller the page size, the better.
Here are some steps you can take to reduce your page’s size:
Let’s talk about lazy-loading first, as it’s the most commonly used method to increase loading speed.
When you visit a web page, your browser will download everything on that page. This means that even if you don’t scroll all the way to the bottom – or at all – your browser still has to download everything there. This is where lazy-loading comes in.
In order to increase web page load times, lazy-loading only loads whatever resources are visible in the visitor’s viewport. As they scroll further down the page, the rest of the elements get loaded usually within a very short distance of them becoming visible. Google also takes this into account and sees this as a good measure for increasing load speed.
There are numerous scripts available to achieve this, such as Layzr.js.
Preloading, on the other hand, informs the browser about potential navigation intentions and allows them to preload pages before the user actually clicks on their links.
This essentially means either anticipating a user’s path and preloading resources in the background so transitions are instant, or preemptively preloading resources regardless of whether the user might need them or not (I’ll explain below).
Examples of preloading assets include preloading them when the user is on the login screen (you already know what page is coming up next), on hover, while in multi-step forms when you know what comes next, and so on.
One particular solution I’d like to talk about is Flying Pages, developed by Gijo Varghese of WP Speed Matters. Flying Pages preloads assets (with some exceptions) from every link in the viewport and limits the number of preloads to 3 requests per second so it doesn’t upset your server. It also stops preloading if the server is responding slowly or returns errors, as well as identifies a user’s connection speed to see if it’s slow or whether they have data-saver enabled so it doesn’t preload anything in those cases. If for some reason you feel this isn’t for you, you can also use it to preload links on hover, which may or may not be beneficial.
I’ve personally used this solution with some pretty amazing results, so I do wholeheartedly recommend it. If you’ve got a WordPress website, you can also check out Gijo’s Facebook group which is a community focused on helping members speed up their websites, sometimes with help from some cool tools developed by Gijo himself.
Caching essentially means making a copy of a page when it’s visited for the first time and then using that copy to serve it faster to subsequent visitors. This serves as both a way to load pages faster, as well as requiring fewer back-end resources for pages with many visitors.
CDNs (content delivery networks), on the other hand, use clusters of distributed servers to serve web pages. The pages are cached on these servers which are spread around the world and when a visitor wants to access a page, the server closest to them will handle the delivery, thus reducing load times.
Another advantage of using CDNs is that even if your website is down, it may still be able to show pages to visitors from their cache. Every website experiences downtime and no matter how rare this is, it’s still a welcome backup plan for visitors accessing your website during those moments.
CDNs have become extremely popular in the past few years, to the point where it’s safe to assume that all major websites are using it. One of the most popular solutions is Cloudflare and thankfully they also offer a free version which is perfect for getting started with a CDN.
Web pages using Google’s AMP are basically extremely well optimized pages that have been more or less stripped down to the bare essentials, providing visitors with pretty much instant load times.
WordPress users may have it a bit easier with the help of certain WordPress plugins, but if you’re running a custom-built website, things may get a bit tricky. Thankfully, the official AMP website provides documentation that is a great resource for starting out with AMP pages and there are a lot more helpful articles and videos available online.
One such tool is Google Search Console, which even has a test for verifying your website’s mobile friendliness. Along with Google Analytics which also shows information about your mobile visitors, you can learn a lot about what devices are used to access your website and how you can optimize for them.
Google also provides a great repository of information that offer a ton of knowledge on getting your website mobile-friendly.
Using AMP to speed up your website may not be an option for you and that’s understandable, you may need things on there that just aren’t compatible. Along with compressing your images and everything else mentioned above, you can also minify your code.
Depending on how well written the code already is, this might have a visible impact on your load times, or a somewhat unnoticeable effect.
Nonetheless, if you’re looking to reduce load times as much as you can, it’s definitely worth doing. There are many tools that can help with this and Minify Code is one of them.
Despite some criticism, pop-ups remain one of the most effective methods of getting users’ attention. Chances are you’ve already strategically implemented one or two pop-ups on your website, and if you haven’t, you may want to consider it.
Things can become problematic, however, when viewing a website on a smaller, mobile device. Screen space is very important on handheld devices and pop-ups are much more likely to be more obtrusive and disruptive than on desktops.
Google actually penalizes such pop-ups that harm users’ experience and have published a set of guidelines to help webmasters design mobile popups.
What you basically have to do is:
It’s all fairly common-sense and as long as you keep these guidelines in mind, you should be fine.
Some pop-ups, however, are exempt from these penalties:
If you’re designing for mobile devices, you’ll naturally want to keep that in mind whenever you’re making a design choice.
Besides using a responsive design, here are a few other things to remember:
We’ve reached the end of our list and if you followed most of the suggestions outlined above, you should already have a fast and well-designed mobile website on your hands.
One crucial thing to remember is to always test your design. Test it yourself for obvious shortcomings, but also have others test it and observe them as they are doing it. As a designer, you won’t always notice certain things like a regular user would, so it’s important to also have regular people test your website – ask a friend or a family member.