Unless you’ve been hiding under a log, you’ll have heard the news that the folks at Google are getting serious about site speed and they will be rolling out a new set of criteria in mid-June, called Core Web Vitals. 

By the way, if you’d like to learn how to properly test your website speed, then watch this free workshop which shows you how.

The thing to really note (and act upon) is that your website is going to need to satisfy those Core Web Vitals on a 3G mobile network as opposed to unthrottled broadband.

So, when it comes to mobile design, let’s all agree that speed is important.

Next up is readability and user experience. The folks at Google are also cracking down on what they call ‘Cumulative Layout Shift’ (another core web vital). An example of CLS is a spammy click-bait site, filled with pop ups, sliding panels and video overlays, that effectively cause the core content to move around and be difficult to access. 

Understandably, Google doesn’t want this. Fair enough. 

Finally, let’s talk about engagement. The time your visitors spend on your site and the number of pages they visit is important to Google. Dwell time and bounce rate aren’t Core Web Vitals, but they contribute to your rank. More engagement = better content and authority.

In this post, I’ll be focusing on better mobile design to help improve these three things – speed, user experience and engagement. 

Oh and how to make your website look gorgeous too. You know I’m deadly serious about that!

Size your images for speed

Let’s dig into your website speed. Chances are you’re a small, creative business which means that your website is going to be image-heavy. 

When creatives tell me that their site feels ‘slow’, almost every single time it’s down to images not being properly optimised for web. They are often too big both in dimensions (size in pixels) and in file size (kilobytes and megabytes).

If you are exporting images to use on your website or blog, you must do both things – resize them and compress them.

There are plenty of tools you can use to do this.

For example, Lightroom allows you to control the size on the longest edge and set a cap on the file size. You’ll have to play around with the settings to reach the right balance. There is always a trade off between speed and image quality. 

If you don’t own Lightroom or Photoshop, then my favourite free tool is Bulk Resize Photos. It allows you to batch compress and resize at the same time – a real time-saver.

An honorable mention also goes to the well-loved JpegMini app, for desktop. I often use it as a fail-safe compression tool to make sure I’ve squeezed every drop of compression out of a batch of images.

For me the gold standard is ShortPixel. There is a free resizing tool on their website, but their plugin is an important part of my workflow, because you can compress images you’ve already uploaded, images you are going to upload in future and set maximum dimensions. Most importantly, you can convert your images to the up-and-coming WebP format which Google is loving.

The plugin is free to upload but you will then need to buy some blocks of credit (very affordable and well worth it).

Note: the best setting to retain quality and get the best compression is ‘Glossy’.

Plan ahead for a mobile experience that makes sense

We’ve all clicked through on mobile to a gossipy news website and been bombarded with pop ups, fake buttons and auto-play video panels. Annoying, right? 

I know your website won’t be resorting to those kinds of dirty tricks but as website owners, we can do a lot to make sure that we are laying out a clear and enjoyable narrative path for our visitors. 

When it comes to designing responsively, the trick is to think ahead to what is going to physically happen when your website hits a break point and switches to tablet or mobile.

One of the key things to consider is how your columns will stack. 

If you are using two or more columns, will your content stick appear in an order that makes sense?

In simple terms, that’s why it’s better to place headings and introductory text on the left and an image on the right, so that the key written information (text) is presented first and then followed by the visual information (image). 

Of course, there are CSS tricks to reverse column order on mobile (and page builders like Elementor allow you to do this just by checking a box) but it’s better to plan for the mobile outcome you want, in the first place.

Need to reverse column order on mobile? Watch this quick video showing you how to do it using Divi or Elementor.

@media only screen and ( max-width: 980px ) {
.flip {
    display: -webkit-flex;
    -webkit-flex-direction: column-reverse;
    display: flex;
    flex-direction: column-reverse !important;}
}

Choose Tools That Give You Control Over Tablet and Mobile Experience

I’m just going to come out and say it. If your website platform doesn’t allow you to edit or tweak your how your site is displayed on table and mobile (eg. font size, padding, image placement), then you’re at a serious disadvantage. 

I often say that the best website tool is one you can use, but with a renewed focus on mobile performance and more than half of all web traffic happening on mobile, you really do now need tools that give you every advantage. 

It’s no secret that I’m a big fan of page builders because you can combine front-end design and get tablet and mobile controls. Controls include specifically tweaking font size for tablet and mobile, reversing columns, showing and hiding elements for each device and controlling padding and margin. Without having controls over those basic settings on a per device basis, you’re going to struggle to create a seamless and engaging user experience on mobile.

The big hitters I use myself are Divi, Elementor and lately Kadence Blocks. Not surprisingly, the development teams at both Divi and Elementor are working hard on massive speed and optimisation improvements which they say will be delivered by the end of 2021. Kadence is a block-based plugin that already performs well speed-wise.

If you’re interested in how they stack up against each other in terms of cost and workflow, you can check out my blog post here

Use Fluid Font Size Settings

We’re all used to using points or pixels to control font size on a per device basis (this is called responsive design), but there are other ways of setting font sizes that are gaining in popularity. 

Pixels represent an absolute value (eg. 16px) and to make sure your text is readable on all devices, you’ll end up tweaking the pixel size for every device. Not only is that an annoying repetitive task, when resizing a browser, you’ll often see a ‘jump’ when the font snaps up or down to the next device-specific pixel size. 

Wouldn’t it be nice if fonts scaled up and down gracefully, and stayed in proportion to the viewport or screen? Well, the good news is that they can and it’s called fluid typography.

Before we dive into the settings, let me introduce the concept of viewport.

Essentially, viewport means the screen of a mobile device or the browser window you are using to view web content. Fluid values are calculated as a percentage of your viewport height or width. 

At a basic level, you have two options when it comes to using fluid values.

• vw – viewport width
• vh – viewport height

For example, a setting of vw:1 is equal to 1% of the viewport’s width.

Massive caveat. It’s not as simple as slapping a fluid value on a font and calling it done. There is greater complexity at play and if you’re serious about learning about fluid typography, then I can recommend this very comprehensive article from Smashing Magazine.

Use Percentages For Controlling Spacing & Margin

As we’ve already touched on, when we use pixels we’re setting an absolute value that won’t change, whatever device or browser size we’re using. Sometimes pixel values are important when it comes to exactly positioning elements at various breakpoints. 

But when it comes to general padding and margin, wherever possible, I try to use percentages. With most themes and page builders, you can set standard percentage padding values for your sections, rows and modules for all devices and just override them when you need to. 

When using percentages, I find I need to make far fewer tweaks at every breakpoint to achieve the look and feel I want.

How To Test Across Devices

No article about mobile design would be complete without tips on device testing. Here’s the thing. Often, the mobile viewport you see on screen when you’re editing your website, doesn’t look exactly like what you’re seeing on a real phone or tablet.

And we can’t own all of the mobile phones. Luckily there are some great simulators out there which are completely free to use. 

Firstly, you can use your browser’s developer tools. Chrome, Firefox and Safari all offer the ability to switch between devices and set and check breakpoints. This is super handy when you’re writing CSS or checking layouts during your build process. 

But it’s still not as good as seeing your site loading on a real phone. My favourite tool for real-world simulations is Responsive Design Checker, which I use as a final sanity check before launching a site or showing it to a client.

What I like is that you can choose specific devices and I’ve found it to be pretty accurate.

The Future Is Mobile

We all wish that the future could hurry up and just get here and make responsive design much faster and much easier. The good news is that the tools most of us use to build websites are on a steep improvement curve and are giving us more and more control over how our websites look on tablet and mobile. 

With Google mobile-first indexing and the new Core Web Vitals about to drop, make sure you’re not neglecting your website’s mobile experience.  

If you’d like to join an inspiring online community, you can find out more about Melissa’s online membership, The Marketing Fix, at www.themarketingfix.co.