How to Perform a Quick Mobile Website Analysis

If more than 50% of your traffic comes from mobile, it’s time for a mobile website analysis to see if you’re looking as sleek as you think you are

In an interview, Hearst Head of Corporate Tech Allen Duan said, “We’ve removed the differentiation between the mobile and desktop experience. Fifty percent to 70% [of Hearst’s audience] are on mobile, so we pay attention to performance metrics like load time.”

Mobile, mobile, mobile (said doing my best Jan Brady impression). But if you’ve looked at your own metrics lately, you’re probably seeing the same thing. Our 2015 client average for mobile website traffic was 30% with another 13% from tablet, but many online publishers see half if not more of their traffic coming from mobile. A big reason for that is email. According to Litmus in its March 2016 Email Analytics report, 55% of email is now opened on a mobile device.

It makes sense, right? You carry your phone with you all day. It’s your personal assistant in many ways. Do you bring your laptop out to dinner, or out to golf, or even to the beach? Probably not. But I bet your phone is with you most of the time. And who hasn’t dusted the sand off in between taking photos of the kids, to check their email? It’s not an honorable truth, but work/life balance is skewed in the mobile age and people simply love being connected.

[text_ad]

Before you do a mobile audit of your magazine website, take into account these two things:

Pay attention to user input. Not all mobile devices are created equally. They differ in size and layout, but also in the ways users input information on them. Shocking I know, but beyond digital keypads there are still flip out keyboards, numeric keypads, and styluses. It helps greatly knowing what devices your audience uses the most.

Create a user interface that feels natural. If you’re developing a mobile-friendly site, there’s no need to dramatically change the look of the whole thing, as long as you make it entirely responsive to act similarly on a laptop as it does on a mobile phone.

A quick mobile website analysis checklist:

• Do your pop-ups or floaters have a button that can be closed, no matter which way the screen is held, or does the close or (X) disappear?
• Do your order flows scroll how they should, and can you easily complete an order?
• If a required field is left blank after submitting an order, will it erase all the other fields and make the user re-type their info all over again? (This is especially cumbersome on a mobile phone and could mean losing an order).
• Do you display a drop-down menu (this is called the “hamburger” you typically see on mobile sites) where a user can access any part of the site from any page?
• Does the site automatically rotate in a way that all content fits on the screen, no matter how you hold a mobile device?
• Can the user easily change the font size on your website, and if they can, does it ruin the user experience and break other things?
• How fast does the website load on desktop and on mobile?

As Duan mentioned, load time is a huge metric to watch nowadays. Load time isn’t just important to SEO, it’s also hugely important for mobile design. Nobody is going to hang out for 10 minutes on 2 bars of service for your page to load, they’ll just find the info somewhere else. To measure how quickly a website downloads on various internet connections, we turn to Google’s Website Speed Tool, which offers tips for mobile and desktop. While it’s not a 100% accurate measurement of how quickly your site loads, it will provide you with a snapshot. Google Analytics can also tell you your site speed according to your users.

Here are 13 ways to make slow-loading web pages load faster after your mobile website analysis:

1. Eliminate as many non-essential images as you can and optimize all images that remain on your pages. You may be trying to load images optimized for print resolutions when they should be just 72ppi for screen resolution instead!

2. Use system typography instead of images for navigation. Use CSS (a “Cascading Style Sheet” that allows site designers to define a consistent site look and feel, especially for typography) instead of a reverse image to create a rollover effect. This will also help with your search engine optimization, since search engines read text, not graphics.

3. Reduce the overall size of your pages. Fewer lines of code always load faster.

4. A skilled programmer can usually cut down the number of HTML tags by 50 percent, compared to a page that was created by an HTML generator or WYSIWYG editor. Content management systems like WordPress and a CXMS like Haven Nexus do this automatically.

5. The popularity of tables has decreased due to responsive design, but if you are using them, especially nested tables, some browsers have trouble loading them efficiently. Here’s a tip: if you can’t figure out where a nested table starts and ends, the code needs to be rewritten and simplified.

6. The size of stylesheets has quadrupled in size over the past few years. Use a clean, efficient stylesheet to reduce the redundant definitions of font, size, color, effects and other attributes of objects. Reference images in the stylesheets. Use short style names. Reduce render blocking scripts in above-the-fold content. Do an audit on your stylesheets.

7. JQuery & JavaScript must be loaded, interpreted and executed on the user’s computer, which robs speed and memory from their system. Therefore, you should try to minimize/optimize this code as much as possible. Note: Because of the variability among browsers, do some quality assurance (QA) of these scripts for a variety of browsers and platforms to get best results.

8. Whenever possible, use a server side language like PHP or a server side language that resolves to HTML rather than JQuery or JavaScript, because a browser can process HTML 10x faster than it can JavaScript.

9. Use “valid” HTML or XHTML to enable the browser to process the code more efficiently. Many browsers have a “quirks” mode that is slower, but much more forgiving of little mistakes. Use WC3′s Markup Validation Service to diagnose any errors in your code.

10. Make sure to optimize your menus to be as efficient as possible and avoid bloated code.

11. Never put a Java applet or other code in an HTML page where there is a risk of it only working on limited browsers or platforms. Minimize interactions with the database. Try to resolve all database calls and simply display the data in HTML on the page. If you must interact with the database, select only on indexed fields.

12. If you’ve made all of the above improvements and you’re still struggling with site speed, use a CDN or Content Delivery Network like Akamai, MaxCDN, which will allow you to load images and other files offsite from different servers. You can get even more features from CloudFlare.

13. Use a script that inquires which device is in use, before choosing which content to execute. When doing responsive design, you can show and hide content based on size, but hiding content still means it gets delivered – just not seen. Another method of controlling responsive design is to suppress content from rendering (this is different than hiding content). So, when hidden content is delivered to any device – mobile, tablet, or desktop – you could actually be delivering whole sets of code, like menus, nameplates, etc. that are hidden, not suppressed. So, you have doubled the size of the page. To remedy this, deliver code that’s going to be seen by specifying which device is in use.

If you’re on WordPress, you can also install a caching plugin like W3 Cache.

How responsive design can improve website traffic and loyalty

If your website works on any device, more people will view it. Google will include it in mobile search results. More known users will trust when they see a link in email or social that they can read it in the car, or on the train, and won’t need to bookmark it for later (also known as where content goes to die.)

As multiplatform publishers, a multiplatform website doesn’t just refer to the number of ways you recycle content across text, video, graphics, and other mediums. It also means your website is responsive and will show visitors these different types of media, no matter what device they use: desktop, laptop, smartphone, tablet, phablet, whatever you’ve got. More thoughts on responsive design.

The ultimate multiplatform subscription website, in particular, tackles both of the above two areas with grace: content and delivery.

Responsive design is slightly more expensive to build, but in the long run, the returns are huge.

A shameless, but helpful, plug: We build powerful and dynamic multiplatform websites (aka Mequoda Systems) for magazine and newsletter publishers. If you’d like us to prepare a business plan for your magazine or newsletter business that includes overhauling your site to be completely multiplatform and multidevice friendly – and that will transform your publishing business to optimize it for the 21st Century – please get in touch.