How to make an impact by optimising your site for mobile

Sam Wood
By Sam WoodSenior Web Developer
5 minutes to read

Your website may not have been built with mobile devices in mind. If that’s the case; not only will your website be difficult to read and navigate on these devices, but you’ll also be left at a disadvantage by Google’s recent updates to their mobile SERPS.

Since April 2015, Google has started analysing websites to determine whether they are optimised for mobile devices from a design perspective. If websites don’t meet certain criteria then the website will drop in rank.

Therefore, not having a mobile optimised site not only makes for a difficult user experience, but will now directly affect your ranking in Google searches when using a mobile device.

Below we have provided some handy tips for making your website mobile-friendly and reduce the impact you will experience from Google’s update:

Responsive style sheet

Since your website will have been built without mobile in mind; it’ll be helpful to apply your responsive styles using a separate style sheet.

If you’re using a dynamic style sheet language (such as LESS), then you can just as easily create a separate .less file that will hold all of your responsive styles, whilst still being able to import this into your compiled .css file. Be sure to import this last.

By having these new responsive styles separate, you can keep it maintained whilst leaving your website’s desktop styles unaffected.

Pick your breakpoint

When creating a responsive website, you’ll need to use media queries in your CSS. For phones, we recommend using a breakpoint of 568px. This breakpoint works for the majority of phones in both portrait and landscape orientations.

@media only screen and (max-width: 568px) {
    // your phone styles here
}

If you are also applying styles for tablets, we recommend a breakpoint of 768px. This will allow you to apply specific styles for most tablets in portrait orientation. For tablets in landscape orientation, the desktop view should suffice in most cases.

@media only screen and (min-width: 569px) and (max-width: 768px)
    // your tablet/phablet styles here
}

Identify key content areas

For mobile, you’ll want most (if not all) of your key elements to be 100% width.

@media only screen and (max-width: 568px) {
    body, header, footer, article.body-content {
        width: 100%;
        display: block;
    }
}

You’ll notice that this will cause your content to stack. This is important as you want the user to be able to see clear and definable sections.

When applying this, it is important to keep images in mind. Large images may overflow outside of the body if a max-width of 100% isn’t set. You’ll also need to watch out that this then doesn’t distort your images. Add a height: auto to image elements to avoid this.

@media only screen and (max-width: 568px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

Optimise your content

A key facet of responsive design is streamlining your website. When your website is visited from a mobile device, that device is most likely using a mobile data connection. This will result in not only a slower connection, but also eat into your user’s data allowance.

At this point it would be beneficial to review the rich content on your site. You may be uploading images which aren’t optimised, they could have file weights over 1MB. Just a few of these would significantly decrease the speed of your page load and could potentially force the user away.

Look at optimising your images and getting them under 60KB where possible. Also look at where else you can reduce file sizes. You may want to look at minifying your Javascript and CSS files to help reduce the weight of your page.

Navigation

Your header and navigation will see the most dramatic change in styles when optimising for mobile. It is commonplace for the header to be stripped right down, leaving just the website logo and a hamburger menu icon, (along with search where applicable). Doing this frees up precious screen real estate, which you’ll want to reserve for your content.

Hamburger menus are easily recognisable to most users due to their frequent appearance in mobile optimised websites. They are becoming so ubiquitous that they are beginning to appear in desktop sites. These types of menu are handy for hiding your navigation, but also for making it easily accessible. By doing this, you can give your navigation room to breathe and treat it to a certain degree, as a separate entity to your main content.

Our recommended use of hamburger menus is to have the menu off-screen to the body. You can see an example of this type of navigation behaviour on this very site! That isn’t the only way to show and hide your navigation; you could just as easily have the menu drop down from the header, it’s up to you. The key point to remember here is to ensure your navigation is hidden but accessible.

Another way which is becoming less popular, but still useful in some cases (such as one-page websites), is “jump navigation”. These come in the form of drop-down select lists, where the user chooses an option and is “jumped” to that section of the page. You can see an example of this kind of navigation on the Alumni Timeline page we created for Leeds College of Art.

comments powered by Disqus

Articles by Sam Wood

Chief front-end bod and conductor of ELO - ED Light Orchestra.