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.