Mobile website development quick wins

Modern websites are usually designed with mobile in mind – Some even focus on mobile over desktop visitors. These quick-wins will help older websites keep up to speed and display on mobile.

Modern websites are usually designed with mobile in mind – Some even focus on mobile over desktop visitors (See ‘mobile first’ framework Bootstrap). But what about older websites? They might work perfectly on mobile browsers, but what if they don’t? Follow these quick wins to form an interim mobile website whilst you work on developing a proper mobile solution.

Add the viewport metadata to the header of your website

The first step when designing a responsive website is to add the viewport metadata. This allows custom CSS to be activated when the screen (or viewport) meets certain criteria (such as is no wider than 480px which is likely to be an iPhone or similar device. You can use ‘max-width’ and ‘max-device-width’ as media queries to trigger the custom CSS.

<meta name=”viewport” content=”width=device-width, initial-scale=0, maximum-scale=2″>

After the width has been set, we can establish an initial scale of ‘0’ which will set the content to the width of the browser. The outcome – the website is displayed as it is on the desktop.

Note that we can also set a ‘maximum-scale’ which tells the browser how far we can zoom (2 would allow users to zoom up to 200%).

Stop talking in ‘pixels’ and start talking in percentages and rem

Pixels are comfortingly reliable. They display exactly as they’re set. But in terms of usability and responsive design, they’re not that great. They are fixed size (no scaling) and can cause issues between mobile and desktop screen resolutions.

EM values are one solution to availability, but there’s something to bare in mind – They’re compounded. Instead, use REM (which takes reference from the root – or body – font size).

Switching your font sizes from ‘px’ to ‘rem’ is a great starting point, leading naturally towards replacing your page elements with percentage values. Ideally you want to end up with almost no reference to pixels.

Replace your flash with HTML5

This may be the longest of the three proposed quick wins to implement, but it’s well worth doing. It’s well documented that Safari and the iPhone/iPad aren’t compatible with flash, so any content that you display this way won’t be visible on these devices. Flash is a temperamental beast, and will likely cause issues on many other mobile devices too.

Using the HTML5 video tag (‘<video>’) can replace any Flash embed videos with HTML5 ones – However always consider using YouTube which not only have a great HTML5 embed solution but also can be detected easily in mobile browsers and played full screen thanks to built-in YouTube compatibility with many modern smart phones.

John Alexander Rowley

An enthusiastic digital marketing professional passionately dedicated to increasing the online presence of businesses and individuals in order to improve engagement and ROI.

Why I love digital marketing

Mobile email optimisation factors you should consider

More and more emails are being delivered to mobile inboxes, which is why mobile email optimisation and location segmentation are so important in modern email marketing.

Read the full article

Five mobile strategy tips for small business

Whilst large organisations like Argos and Tesco are engaging both new and existing customers through increasingly intelligent mobile marketing, many smaller organisations aren’t taking advantage.

Read the full article

Mobile email marketing best practices

A study by ReturnPath revealed that mobile email open rates increased by 34% in 2011. Comparatively, desktop open rates dropped on average by 9.5% and via webmail access by 11%.

Read the full article