Google has declared it will rank 'mobile-friendly websites' higher in its search results from April 21st. A change that Google states as 'significant'.
Serious consideration must now be given to mobile users when designing a website. So how do we need to think differently?
Here are our Top 5 new things to consider when designing a website for mobile users:
When thinking about page layout we assume desktop and tablet devices are viewed in 'Landscape' orientation (wider than they are high). However, most smartphones are used in 'Portrait' mode (higher than they are wide).
While watching video content, users will turn their phone on its side often automatically to mimic a TV. For more conventional pages we should probably assume smartphone layouts need to work best in 'Portrait' mode.
Although we talk about people 'clicking' links. In reality this becomes 'tapping' or 'prodding' on a touchscreen device. Imagine playing a piano with thick woollen mittens on! While a mouse pointer is a precision device, the end of a finger is not!
To get around this we need to make links and buttons bigger for viewing on a mobile device, making it easy to use these elements without error. Of course, making a link larger and clearer on a desktop view doesn't hurt either – especially when it's an important 'call to action!'
With desktop and laptop screens becoming larger over time, it's easy to think we can just fill each page with text and other content. This can lead to each element having less visual priority (the 'value' or importance a user attributes to that element). At worse it can overload the user so that they don't have a clue what they should be looking at!
To get over this problem we need to take a long, hard look at our content and prioritise it so that just the most important elements on the page are in view. Nowhere is this more important than on mobile devices. It's good practice to hide content that isn't essential on mobiles so that users don't miss what you're trying to say.
While hiding content is a good idea to keep the user focused we need to remember that many 'mobile' users aren't actually moving! Many of us use our smartphone and tablet devices for convenience while sitting at home.
If we're going to initially hide some content then we should also consider ways to get back the hidden content if needed. Tabs, drop-downs and other web elements can make this nice and easy so users can choose their content according to their needs.
While not all mobile devices are being used when on the move, many are. Therefore, the files we send mobile devices files should be as succinct as possible to avoid long page load times and overuse of data allowances.
Images should be downsized according to the device in question while stylesheet and script files should be combined where possible. File compression algorithms such as Gzip should be enabled on the web server to speed up load times. These are just a few of the more important considerations for mobile and responsive websites.
If you'd like more, then feel free to get in touch for a no obligation chat.