A common user experience issue with websites being viewed on a mobile device is the unwanted sideways scroll resulting from content not being resized or scaled down to the viewport size of the mobile device.

The most common culprit of this is the home page carousel. In order for these to work they often need to have fixed widths and heights for a seamless experience but are dependent on JavaScript to respond to a change in device or viewport size.

How Does Oversized Content Affect User Experience?

Content that displays off the screen extends all the visible content making a horizontal scroll necessary for users to view visual and text content. As mobile devices are designed primarily for vertical scrolling and interaction, this often leads to a negative user experience.

With Google’s mobile first index being rolled out across the internet, it is now essential that mobile usability be a priority for all websites. Fixing oversized content is just the first step to be done in conjunction with optimising viewport settings, font sizes and touch screen interactions.

Working with Percentages Over Fixed Widths

When developing responsive websites, it is now an industry standard to work with percentages rather than fixed widths and heights. Fixed widths rely on standard screen sizes and are often adapted using JavaScript.

How well do you remember your maths? – via GIPHY

If the website’s JavaScript fails to load for any reason it can render a website unusable. For the average user, they won’t have the knowledge to realise that a resource has not been loaded which can result in a high bounce or abandonment rate. Although the numbers that are available for users who have JavasScript disabled in their browsers are small (0.2% of users in the UK), there are a series of barriers that could result in JavaScript not being downloaded:

1. Corporate firewalls that strip JavaScript files for security reasons
2. Slow networks
3. External CDN’s going down – yes, it does happen

In short, relying on JavaScript for layout is not recommended. We recommend having your layout dictated primarily by CSS (inlined above the fold if you can manage it) and saving JavaScript for subtle tweaks.

Turned off by the Psychobabble?

At the ArtLab we specialise in constructing web experiences that are optimised for mobile delivery and search engine visibility. We design and develop new websites and work with recurring clients to keep their websites visible on all major search engines.

If what you’ve read here doesn’t seem to be your bag, give us a call at 0161 974 0974 or drop us an email here hello@theartlab.co.uk. We can discuss how to make your website mobile friendly and search engine visible so that you can continue to grow your business.