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:

1. Use a responsive design
2. Optimize resources
3. Use lazy-loading & preloading
4. Use caching or CDNs
5. Use AMP
6. Use Google’s tools for insights
7. Minify your code
8. Redesign pop-ups for mobile devices
9. Design with mobile in mind

1. Use a responsive design

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.

2. Optimize resources

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:

• Resize images – it stands to reason that you’re not going to need huge images on mobile devices – sometimes even on desktops, too – so a quick way to reduce their footprint is by lowering their resolution. If you’ve got a lot of images on your page, this can have a substantial impact on your page size.
• Compress images – another thing you can do that will also significantly impact your page size is to compress your images. With tools like TinyPNG (or whichever other you prefer), it’s all quick and painless. Compression essentially reduces the number of colors in your images and can often be done without any visible quality loss, not to mention the size reduction can sometimes be dramatic.
• Use web optimized file formats – while PNGs and JPEGs have been the norm since forever, newer file formats have been developed and some, even better ones, are still being worked on. One of the most popular and increasingly widespread is WebP. With tools like Convertio, converting classic formats to WebP is a breeze.

3. Use lazy-loading & preloading

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.

4. Use caching or CDNs

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.

Popular caching solutions include Squid and Varnish, and if you’re a WordPress user, there are many more options available in the form of WordPress plugins.

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.

5. Use AMP

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.

While these AMP pages do load blazingly fast, it’s worth noting that it comes at a cost. Some things, such as JavaScript, are not allowed on AMP pages, which means you won’t be able to have certain things that you might think are essential, such as a customer-facing chat widget.

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.

6. Use Google’s tools for insights

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.

7. Minify your code

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.

With all the plugins and extra functionality we add to our websites, things can quickly become bogged down and sluggish with all the extra HTML, CSS, and JavaScript code. What minification does is basically strip down the code to the bare essentials, removing parts of it that don’t interfere with its functionality, like comments, formatting, unused portions, and more.

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.

8. Redesign pop-ups for mobile devices

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:

• ensure pop-ups are non-obstructive – with screen realty being so limited, pop-ups should only cover a very small portion of the screen
• ensure pop-ups are easy to close – the close button should be clearly visible and appropriately sized

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:

• login dialogs
• age verification forms
• pop-ups containing essential information – e.g. cookie notices

9. Design with mobile in mind

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:

• prioritize – since mobile screens are much smaller and present content vertically instead of horizontally, you need to decide how to prioritize your content. This means placing the most important content as high up on the page as possible – e.g. CTAs, offers, etc.
• content first – while mobile devices allow for some creative design choices, they are much more limiting than desktops. As such, focus on your content first and foremost, making it accessible and easier to read. Mobile screens are less forgiving on distracting visuals.
• make navigation easy – keep in mind the limitations of mobile devices and ensure your users can easily and intuitively navigate your website. Examples of easy navigation include scroll-top-top buttons appearing on the bottom of the screen as users scroll down past a certain point, or sticky headers with a clickable logo that leads to the homepage and a navigation menu the helps users get to any page from wherever they are on the website.

Final thoughts

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.

‍