Things to consider when going mobile

Following the announcement that Google made on April 21st 2015 that it will be demoting websites that are not mobile friendly, here are a few things which need to be considered when making your site responsive from a web developer’s point of view!

Navigation

One of the main elements that needs optimising in order to work well on mobile. Screen real estate is much more valuable now that there is less of it, and people will be annoyed if it’s taking up the entire viewport every time they browse to a new page.

Fixed width sizes

Fixed widths on elements such as images need to be converted to a percentage width or given new width declarations for different screen sizes using media queries.

Image resolution

Not only do you need to make sure your images are fitting on the screen properly, you also need to consider the resolution of the images i.e. if they’re being enlarged, they can’t look too pixelated. One way to do this is to make sure your image source is as large as the largest possible size it will be served up on the screen. However, be mindful that this can also create an issue with load times. Large images scaled down for mobile viewing are still large images and mobiles have slower load speeds as it is. There are a few solutions that can be put in place to help with this, using media queries and javascript. http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

Tables with a large amount of columns

Sometimes using a table isn’t necessary at all and this can be removed and rebuilt using stackable elements. On occasion, a table is needed to properly represent the data and there are a few different approaches to this, really the solution depends on the content. For example, if the table data suits the use of a static left column. http://zurb.com/playground/responsive-tables.

Stacking importance

Here are a few tips to consider when thinking about the stacking in the mobile view:

• Calls to Action – the priority given to a CTA on a desktop view may be at the top of the page in a right hand column which may then stack down to the bottom of the page. Think about where you want it to be placed.
• Pop ups never look good on a mobile – serve a separate page instead?
• Is there large amounts of information on a page? This could be sectioned and tabbed.
• Horizontal scrolling can be applied to specific elements like a gallery to make good use of space.

Want to know how friendly your site is? You can use this free tool from Google to test some of your website pages.

If your website doesn’t pass the Google test don’t panic! We will be happy to assist you if you have any questions and we’re always on hand to offer advice.