When it comes to a website’s mobile presentation, slow and steady does not win the race. You want your web pages to load as fast as possible with a fluid, oft-simple navigational flow that lets viewers easily bounce around to find exactly what they want. It’s a different behavior than someone surfing the web via a desktop or laptop. Some of the reasons for this may be obvious while others may not.
It’s a given that we all despise the lag while our smart devices’ browsers fill our screens. An extension of this is cognitive drift – the point at which we’ve waited so long we just don’t care anymore. We move on to another site, which (in dire situations) might be an OTA or a direct competitor. While statistics vary by device, demographic and one’s state of mind at the time, a rule-of-thumb average for cognitive drift on mobile platforms is four seconds. Anything longer than that and you’ll risk consumers migrating away from your website out of frustration or not returning for subsequent visits.
Given that consumers nowadays are increasingly using smartphones and tablets for more and more of their daily web-related tasks, designing a comfortable user experience on these platforms must be a top priority. Add to this the fact that websites loading is delayed on mobile devices relative to desktops or laptops because of reduced processing speeds, memory capacities and 3G/4G/LTE setbacks. Not only is cognitive drift a problem, but any sluggishness in this regard decreases consumer confidence in your product; they’ll uphold another web address as their reputable source.
As a start, have you ever looked at your website from a guest’s perspective? Obviously this point-of-view exercise is something you embark upon right from the start. Furthermore, have you tried your site out on various mobile platforms? Given that the screen sizes are different, consumers’ purposes are likewise different from platform to platform. As it concerns travel, smaller devices are often used for quick information access whereas larger screens are for exploratory research. And if prospective guests cannot utilize your brand.com’s mobile presentation to speedily find what they need, they will look elsewhere while you will lose the chance to subtly build relationships and give said guests the opportunity to discover other pages.
While it’s great to know the magnitude of this issue, what’s better is to have a few solutions at the ready. While this could easily digress into a conversation about behind-the-scenes programming tactics such as consolidating a page’s cascading style sheets (CSS), eliminating unused code or utilizing image sprites, let’s steer clear of the outright tech talk and focus on what managers can do.
It’s crucial, though, that you understand why some websites lag, which unto itself should give you a few ideas to remedy the problem. Primary culprits to clog up a browser include large image files or robust plug-in attachments. For these two, reducing the image dimensions to thumbnails and installing smaller, singular-purpose plug-ins might do the trick. Also consider dedicated pages or pop-up scripts for hi-res photographs or embedded videos so they don’t automatically load on the more trafficked areas. The problem might not have anything to do with the end user’s internet connection either; your host servers may be the offender, in which case an upgrade to one with a stellar query speed is in order.
Oftentimes, however, it’s not the downloading of information that causes the congestion but the number of HTTP requests your website requires. To explain this in layman terms, when a user types in a URL, the website does not stream in a single chunk. Rather, it is divided into separate resource files, each of which entails a connection that’s opened between the viewer’s browser and the host server. Forming these individual connections frequently takes longer than the downloading of the files; hence, reducing HTTP requests is the way to go.
There are many ways to execute solutions along these lines and after analyzing your website’s code, any good developer will be able to offer a variety of opinions (and costs). One other option that my agency has had experience with has been building a compression engine in the CMS.
Think Of Flow
The previous section mostly addressed solutions that pertain to speed, but another approach is to tackle the problem through flow. That is, you must be able to track the breadcrumbs by which consumers are moving through your various pages and see if you can reduce the number of clicks needed to access any given information. It goes without saying that a website’s design must be intuitive, but often what’s intuitive for a mobile user differs from a desktop user. Furthermore, what’s intuitive for a manager or a developer is not for the consumer.
This recalls the (what should now be considered) age-old argument of responsive mobile website versus dedicated mobile app. The latter runs much faster because of its smooth, streamlined design and content preloaded onto a device. Obviously, the chief drawback is its price tag, both in initial launch and in upkeep. While responsive web design (RWD) will ensure that a site is properly framed on all devices, it doesn’t necessarily diminish the size of the content or the number of HTTP requests needed for a page to fully render.
The hybrid solution between the two is to build a separate mobile website (that’s still not an app because it functions within the browser). In this sense, the new site could be made lean and aligned to the most common queries of smartphone or tablet users instead of those from desktop visitors. While you’re at it, tweak the site map to simplify the layout and flow. The key question: is this page necessary for the mobile-framed site? If not, you still keep the page, but don’t code it for smaller devices. Let it retain the clunky desktop formatting and link to it via a gateway script that informs users that they are leaving the mobile site.
For this reinterpretation, a good exercise is to assemble the site map as a large, printed flowchart, and then look for incongruities or branches that can be amalgamated. Web analytics are also a great tool to help you discover where your mobile consumers are browsing and what sections they are ignoring entirely. Again though, cost becomes an issue as this requires more programming hours than a basic RWD port.
You might also consider contingencies for slow visitor internet connections. That is, if your server detects bandwidth problems on the client side, a page can be scaled down with less content loaded so that speed isn’t compromised. Discuss this with a developer as it may not be possible for certain advanced functionalities (or it might be out of scope for your web budget).
Another potential solution comes by analyzing your website from a search engine’s perspective. While this is an important task regardless of mobile discussions, you must understand that many people nowadays will seek to access a desired page under your brand.com’s umbrella directly from a search engine rather than enter via a landing page and click through to arrive at that same domain. Having accurate and up-to-date SEO will help make individual pages readily accessible from a search engine to better satisfy this behavior pattern.
My final suggestion is that you learn from the best. That is, look to the most palpable winners in the mobile space and pay attention to how they lay out their pages. Beyond scrutinizing your immediate competition and the major chains, I’d cite Amazon.com and the OTAs as good starting points for analysis. Yes, the OTAs have marvelous websites and apps for mobile platforms, and this can help explain why so many customers decide to book through them! As yourself: what can you glean from their designs? And more importantly, what can you apply to your own mobile website?
(Article by Larry Mogelonsky, published in Hotel Executive on March 1, 2015)