Checking your website’s mobile display: Lessons from a proofreader

Today's article is all about optimizing your editorial business website so that it works for clients using different device types.

My website is the single biggest driver of my proofreading and copyediting work. It’s therefore essential that it shows potential clients my best face.

​I’ve spent years tinkering – tweaking current content, adding new information and removing text and images that have outgrown their usefulness.

Weebly, like many web-hosting services, allows me to optimize my website for mobile devices.* ​

​It takes my chosen desktop theme and adapts the design for optimal viewing on a smaller device such as a tablet or mobile phone. This function has been available for several years. I can’t remember when I became aware of it, but I figured it made sense to switch it on because I couldn't imagine anyone with a smart phone having the patience to navigate through my content if it wasn’t mobile friendly. I congratulated myself on being so forward-thinking, and carried on as normal.

Note: If you're unsure whether your website is mobile friendly, it's easy to find out. My colleague Averill Buchanan alerted me to Google's Mobile-Friendly Test site.

Is it pretty, or pretty awful?
Most website-hosting services help non-designers like me to make our websites look pretty. They give us dividers, shaded boxes, spacers, columns, textboxes and image placers to enable us to put our content exactly where we want it. The result is that on the desktop version, at least, everything looks just so.

You might be the kind of person who likes to keep things simple – you might have opted for minimal text on your site, and the text you have placed might not be broken into separate textbox elements. To date, I’ve not been this kind of person. I’ve overly complicated things, and, I might add, it hasn’t done me any favours. Here’s just one example.
​
This is the contact information on my site:

Now, back in 2011, when I first typed this information into my contact page, I didn’t like the vertical alignment of the information after the colons. Weebly doesn’t allow tabbing, so I created two textboxes (below, outlined in red) and placed them next to each other in two columns.

Okay, so it was never going to win a design award, but I’d achieved my goal. However, there was a problem – it looked perfect in the desktop view, but the mobile layout was a disaster:

This wasn’t Weebly’s fault, it was mine. Weebly’s mobile optimization tool was working perfectly logically – finding content in a single textbox and ensuring that said content remained unbroken.

The solution was simple – I had to restore my original layout, putting all the text back into a single box – but the impact was huge.
​
It did mean sacrificing the alignment issue that I’d had a bee in my bonnet about, but it was worth it. Now my mobile display looks like this (on iPhone 6):

It’s not perfect (there are unsightly end-of-line breaks on smaller mobile screens), but it’s a far more sensible and logical design for my mobile visitors. I’ll shortly be making decisions about how to reword this information so that I can remove the unwanted wordbreaks – it needs some care because I don’t want to compromise the design of the desktop view.

What devices are my visitors using?
The crux of the matter here is that I want to put myself in my customers’ shoes. I need to bear in mind the following:

• Different customers will use a variety of different devices to access my content. For example, not all customers have a smart phone; and even if they do have one, they might prefer to access web content on a larger screen.
• One customer might use multiple devices to access the same content. For example, I tend to access web content using my tablet at home during the evening, my phone when I’m out and about, and my desktop during working hours.

A webpage that looks perfect on a mobile might be less pleasing to the eye on a desktop screen, and vice versa.

I’m under no illusion that I can optimize my design for every potential client all of the time. But paying attention to the mobile display has been a learning experience for me.

​I’ve discovered that I’ve not been showing my best face, and that’s simply not an option in the current market. I know this because my data tells me so.

Looking at the data
Honestly, I’ve only recently started looking at data about which devices my visitors are using. The following was taken from one of the analytics programs I use, StatCounter.

​The above image shows two days’ worth of data (8–10 October 2016). A whopping 30% of my visitors used mobile phones and tablets to access my content.

Some tablet screens are big enough to make browsing my website in desktop view perfectly palatable, so some of the visitors using these devices may not be looking at a mobile view.

Here’s the thing, though – I don’t know which view they’re seeing and it’s not under my control. It’s therefore important that I do what I can to put my best face forward, just in case.

​Even one lost customer who searched and found me via their mobile, and then dismissed my services because my content was illogically presented, is something I want to avoid.

The view from an expert
My friend Andy McNair, who’s forgotten more about website analytics than I’ll ever know, pointed out that two days’ worth of data could be horribly skewed by a range of factors. He prompted me to dig a little deeper using my Google Analytics historical data.

Says Andy in relation to industry at large:

In 2016, 1 in 5 visits to corporate communication sites are made on smartphones. Tablet has been static at 1 in 20 for the last 3 years. Desktop is still the most important group so don't cripple your user experience there.
 
The crucial thing is to look at your audience in analytics and then work out how vital a mobile-friendly site is to your audience.
​
If you're using Google Analytics, it's easy to compare this quarter with the same quarter last year – a couple of days can be horribly distorted by a handful of users on a small-traffic site.
 
Another thing to consider is that (in general) mobile visitors have shorter attention spans. They visit fewer pages for less time and they are more than 50% likely to "bounce" after a single page.

You can see these stats for your own site in Google Analytics in Audience>Mobile>Overview.

Check your mobile 'bounce' against your desktop – if it’s much higher, then it suggests people are finding you on mobile devices but your site is putting them off.
​
The final thing to bear in mind is that the tasks people perform on mobile devices tend to be different to big-screen devices. I would suggest making your contact details very easy and simple to find – they should always be front and centre on any marketing site but if your client is looking for you on their phone there is a possibility they might be, you know, thinking about phoning you!

I followed Andy’s advice and compared data in four quarters (August–October) from 2013, 2014, 2015 and 2016.

• The percentage of mobile-user visitors has more than doubled. In 2013 it was 1 in 10. In 2016 it's 1 in 5.
• Tablet use has remained relatively static.
• The desktop view still easily dominates.

This rather basic analysis supports Andy’s industry view and has encouraged me to continue to work on my mobile optimization to ensure that it’s user-friendly, while respecting the fact that desktop visitors are still the most important group. Therefore, mobile responsiveness mustn't come at the expense of the desktop-user experience.

When thinking like a editor isn’t enough
This exercise has shown me how, until recently, my website design was dominated by two modes of thinking:

1. I think like a desktop user, as I’ve primarily used a desktop or tablet to view content, and I’ve accessed that content in desktop view.
2. I tend to consider the design of a webpage from a human visual point of view, rather than from the point of view of an automated tool. I’ve failed to consider the logic of automation – for example, what is the widget looking for when it ‘decides’ to move several horizontally displayed elements into a vertical layout?

I now know that I need to think less like an editor and more like a designer and a potential client when I’m building webpages.

Taking the long view
Keeping an eye on user behaviour is a work in progress, but I'm on the case. Four years ago, mobile usage mattered less. Now, to me, it matters twice as much (though the desktop-user group is still by far the most important). 

So, take a look at your analytics to assess what devices your visitors are using.

If mobile has become more important and your website host allows you to easily optimize your design for mobile devices, without compromising your core visitor group, do use the function. But check that the results are showing your best face. 

​A few small tweaks could make a very big difference.

​More importantly, they could turn a closed page into a closed deal.

---

* If you’re a Weebly user, and you’re not sure whether you’ve optimized your website for mobile devices, open up your dashboard, go to your site, click on the Settings tab on the ribbon, scroll down to Mobile, and make sure the ‘Display the mobile-optimized version of this website when someone visits from a mobile device’ box is ticked.

To take a quick look at how your content is being displayed on mobile devices, choose the Build or Pages tabs from the ribbon, and click on the Device Switcher icon (also on the ribbon).

A word of caution: I’ve found that after toggling back and forth between the desktop and mobile views in Device Switcher, I have problems making some types of amendments to my content (for example creating bullet points, italicizing and moving textboxes). Don’t worry if this happens to you. Simply exit Weebly and reopen; you’ll be able to amend as required.

---

Louise Harnby is a professional proofreader and copyeditor. She curates The Proofreader's Parlour and is the author of several books on business planning and marketing for editors and proofreaders.

Visit her business website at Louise Harnby | Proofreader, say hello on Twitter at @LouiseHarnby, or connect via Facebook and LinkedIn.

---