How To Design and Develop A Mobile Friendly Landing Page: Top 3 Tips

So you’ve been checking out your Google Analytics and realised that 45% of your overall site traffic is coming from mobile devices like iPhones and Androids. The problem is, you’ve only just finished developing your website for desktop and now you’ve realised your site sucks when viewed via mobile devices. So now, instead of creating a one-size-fits-all strategy for designing the layout of your website, you must consider how the site will appear when tested across a large range of devices with different screen sizes. This includes smartphones, desktop, tablets and beyond. Here are our top 3 tips for designing and developing the perfect landing page for mobile:

[responsive_youtube http://www.youtube.com/watch?v=c9W7jdleY5A]

1. Accessibility is Critical

When it comes to accessibility, you’re always looking for quick wins. In other words, don’t break your back optimising for marginal platforms. In terms of accessibility, do the least amount of complex design and development work to access the greatest number of people possible. Target the platforms with high volumes of users. Generally speaking optimising for iPhone, iPad and Google Android will give you a good accessibility to the overall market.

“I skate where the puck is going to be, not where it’s been”

(Wayne Gretzky, Ice Hockey Pro)

This is a quote from one of Ice Hockey’s all time greats. This relates perfectly to mobile optimisation. Dont skate where the puck has already been, i.e. desktop, skate where the puck is going – mobile. You must ensure that all of your content is viewable via mobile devices. Frames, flash, PNG-24 images and a wide variety of plug-ins designed for web are not compatible with mobile devices. From a technical perspective, try using mobile friendly technologies like HTML5, jQuery and image formats like JPG or GIF.

2. Be Fast – Optimise Page Loading Times

The number of Internet enabled mobile devices sold globally, is already greater than the number of PC’s sold. This is only the start of the explosion. Global Internet enabled mobile device shipments will increase drastically between now and 2017. Preparing for mobile has never been more important and optimising the loading time of your pages for mobile is critical. Your pages should load in less than 5 seconds and ideally be less than 20KB. There are a number of factors that can dramatically slow down the load time of your pages for mobile. Things that can negatively affect page loading times include the number of requests in terms of scripts and loaded images and the size of the page itself.

“43% of mobile customers are unlikely to return to a mobile site that loads slowly”

“74% of mobile site visitors wait up to 5 seconds, but 60% wait less than 3 seconds and never return”

(Source: Gartner)

 

Where possible, your goal is to optimise or remove scripts. You should also try to resize or create mobile optimised images for your site. You can utilise images sprites to facilitate caching one image as opposed to many. You can use CSS instead of images and apply additional optimisation tactics to your code where applicable. There are some great tools available to help you with this. Try W3C and Mobitest in order to get an understanding of the page loading performance of your site via mobile.

3. Design A Mobile Friendly Layout

There are some really simple rules when designing beautiful landing pages that convert site visitors. Remember, this not a process of beautification, mobile optimisation is about increasing conversions. Yes we want your site to look good, but it has to fulfil it’s primary function for being first and foremost – to make sales and generate leads. With desktop design, we’ve discussed the 5 point punch – that is using a strong leading statement, compelling supporting statement, providing 3 product/service benefits, implementing a call to action (CTA) and having an urgency statement to imply scarcity. With mobile the rules are more straightforward.

Firstly, always present content for mobile in a single column. If your mobile site is just reflecting what users see on desktop but minimised and squashed into your mobile browser, this is absolutely unacceptable. Once you have your single column layout, push the important stuff to the top. Desktop users tend to be benefit led, i.e. they’re looking to establish why your product or service fits. With mobile, users are more inclined to take action, so consider this carefully when designing your mobile landing page. This means you must have a CTA (call-to-action) positioned above the fold on mobile. Condense and minimise information. If you can minimise wording, do so. Every pixel is a soldier. If you’re positioning a CTA lower on the page make sure you entice users down the page by telling a story and using design elements to lead them down through your site.


Share this article

Subscribe to Our Thoughts