The pitfalls of designing web pages on desktop platforms, in the mobile age.

Over the last few days I’ve been putting together a website for a small theatre company, who are taking a production of John Godber’s Bouncers on tour later this year. Nothing lavish or particularly complex was required: the ticket reservation and payment side of things is being handled elsewhere, so I just needed to create a straightforward website to accommodate event info, images, video, biographies, reviews and one or two other bits and pieces.

The client had a particular image they wanted featured on the home page. This became a starting point for the site in many respects, as it suggests a colour scheme and makes a strong statement about the show itself. As I toyed with a few layout ideas and began to put things together in DIVI (my favourite WordPress Theme), I realised that the image would make a perfect parallax background, as it features the four guys from the cast staring stony faced at the camera (see below); their eyes maintaining the same intimidating glare as users scrolled through the homepage content.

The cast of the 2019 touring production of Bouncers that will be presented by Open Door Theatre.
The cast for Open Door Theatre’s production of John Godber’s Bouncers

My plan worked brilliantly and I set about building the rest of the homepage elements around the whole parallax background concept. Great!….

It wasn’t until I checked out the design on my tablet and phone that my gross error of judgement hit me, in what can only be described as a true Homer SimpsonDoh’ Moment. I’d forgotten that website parallax effects are about as welcome as scabies in the mobile world and I now had a homepage that, while looking great on a desktop browser, simply didn’t work on mobile!

The issue surrounds the resources that parallax effects consume from the host browser. Mobile browsers simply aren’t up to the heavy lifting required to manage the job effectively. As a result, parallax is an example of a web technology, which is usually disabled by default when viewed on mobile platforms. If you absolutely must have parallax, there are ways around this, by using a few tricks in CSS, as discussed here. However, the results will often be less than satisfying, with slow page loading, jerky movement and slow screen response all a distinct possibility; hardly the stuff of good user experience.

Six or seven years ago, when the trend for parallax scrolling was at its height, with huge numbers of new websites investing in the technology; desktop browsing was still king, so browser resource wasn’t such a big issue. However, the proportion of internet traffic enjoyed over mobile has continued to increase rapidly in recent years, overtaking desktop in 2016. This simple change in web habits is reason enough to be cautious about including elements in a website that, preference desktop use over mobile.

OK. I should have known better, but how many other web designers have been caught in the trap of making basic errors like this, when designing for a mobile world on a desktop machine? Most web design platforms and content management systems, WordPress included, give quite a vague approximation of how the site you’re working on will look on mobile, so it’s quite easy to get carried away, unless you get a real world look at your site on a mobile device. Even browser emulations like those available in Safari’s developer tools offer only an approximation of their mobile counterparts and tend to be specific to a particular ecosystem. Likewise, trying to carry out all but the simplest web design or development tasks on mobile, is about as gratifying and prone to success as shaving with a hedge trimmer. This leaves designers to predict/second guess many potential mobile issues.

So, I guess this leaves me with a few questions for the future of web design in the mobile era.

Firstly, will desktop web design ever offer a truly realistic design experience for mobile? With a bewildering and ever changing array of screen resolution and aspect ratio in the mobile world, I doubt it, unless some sort of updatable set of models was made available by hardware manufacturers. This has kind of worked in the photography world, where platforms such as Adobe Lightroom are updated to interpret lens specific metadata and adjust images to account for idiosyncrasies of different glass. But as mobile screen designs seem to have a shelf life measurable in months rather than years, this could become extraordinarily hard to keep up with.

This leads nicely into my second question, which is basically to wonder if the world of web design will ever enjoy a truly WYSIWYG experience? After all, when you still can’t rely entirely on your chosen colour scheme or font set appearing the same from desktop browser to desktop browser on the same machine, what hope is there when such a huge variety of screen variations is involved? I guess that, to some degree, it always be about guesswork; or at least informed prediction.

Finally, as with so many other issues in the tech world, I have to ask: does it really make that much difference to the end user that your site has myriad bells and whistles? After all, most sites are primarily about conveying information, with eye candy a secondary consideration at best….. surely?