How to Deliver a Great Mobile User Experience (UX)

Since Google announced their “Mobile First” algorithm update in November last year, the days of lavish desktop sites as ranking factor are fast becoming outnumbered. As mobiles have become our primary device for going online, we need to cater to the small screen. A website’s content has to impress in those few square inches available. Yet at the same time, we don’t want to sacrifice on content. So how exactly can we deliver a great mobile ux?

Here are our top tips on how to create an impressive mobile ux:

 
Responsive Design
If your website hasn’t already switched to a responsive design, now is the time to do so. Mobile friendly sites are websites with a layout that is exactly the same across all devices. The page elements, such as navigation, columns and images, remain in fixed positions. Flash is blocked on many mobile phones, and consideration given to navigation and button sizes for use on a small screens. A responsive website is designed with mobile ux in mind – such that each element of the site is rearranged and placed differently according to the device being used: it “responds” to the size of the device in use. For example, a blog viewed on a desktop might have a 3-column layout with lots of images scattered throughout. Viewing the same blog on a mobile, the 3-column layout will become one column with only one image per post, while the content itself is dynamic. For some examples, have a look here.
 
Relevant Content
Space is limited on mobiles and tablets, so use it wisely to create a great mobile ux. Our attention span is quite limited too, so create a good first impression by presenting valuable content. When designing or re-working your website, think about which elements are crucial and which can be displayed as secondary information. For example, if you are running a blog, subscription is a key feature. Don’t be tempted to use pop-ups as Google will penalize you for using them on mobiles. However, you could cleverly add a subscription field that maybe sits on your menu. Also, the most recent post with one image featured on the main page shows your readers the latest news. An image carousel or introductory banner might be superfluous as it doesn’t give your visitors the real juice.
 
Structured Markup For Desktop and Mobile Versions
If you still have two different versions of your website for desktop and mobile use, Google reminds you to make sure that the structured data on each version is equivalent. This data is used by Google to generate the snippets we see underneath the URL when performing searches, and is information that should make you want to click on the link. If the data on the mobile site is different to that of the desktop version, it can cause problems when it comes to ranking. Check both of your sites on Google’s structured data testing tool to keep that mobile ux going strong. Also, why not use this tool to make sure your mobile version is accessible to Google’s bots? Last but not least, register both mobile and desktop versions to Search Console.
 
General Tips
Just to stick to best practise, all buttons, menus and functionalities need to work flawlessly at all times across all devices. Users don’t have the patience to click more than once, or to deal with menus or dropdowns that are complicated to use on a mobile. This alone will make for a good mobile ux.
Want to go responsive? Check out our Website Builder 7 now!