Mobile-Friendly Design and Why it’s Important

Mobile UX and UI planning on a desk

Here’s a little bit of information about what mobile design is, and why it’s increasingly important.

What is Mobile-Friendly Design?

In a nutshell, mobile-friendly design means sites can look good, show the right content, and perform well on mobile devices. Mobile devices are devices with screens smaller than traditional laptops and desktops. This used to be mainly phones and tablets, but Google has recently indicated that they no longer view tablets as true mobile devices. They now expect them to have more of a similar layout to desktops than that of phones. Google are the market leader to listen to when it comes to online marketing as they have the vast majority of search engine traffic. As such, we’ll assume in this post that mobile-friendly design applies mainly to mobile phones like iPhones and Androids.

In technical terms, there’s three main ways of making web design mobile-friendly. These are responsive design, dynamic serving, and by having separate URLs for desktops and mobiles.

Responsive web design

Responsive website design, or RWD, is a design that works well regardless of the screen size that the website is displayed on. This means that the website page will look good, show necessary content, and perform well on desktops, tablets, and phones. The website will use both the same HTML code and URL address for all screen sizes. The difference for users will be that the website will render differently on screen depending on the screen’s size.

Some pros of the responsive web design method are:

  • There is one URL for each page. This keeps the structure more simple for navigation and less prone to bad links.
  • There is no need for complicated device detection because the same URL is access on all devices.
  • The website will be easier to maintain and update because the content runs across all devices.

And some of the cons are:

  • If the website has large desktop pages, the mobile version might take longer to load as the content will all still be there. This isn’t good for either the user experience as the user might get impatient. Also, Google can penalize websites in search results for being slow to render.
  • The code has to work across all sizes, so the user experience might not be fully mobile-centric. Therefore, the designers might have to make compromises between different screen sizes.

Dynamic serving

Dynamic serving means that the website will show the user specific HTML and CSS code depending on the user’s screen size. This means that content might be visible on one device such as a desktop and not on a mobile, and vice versa.

Some pros of dynamic serving include:

  • This method still uses one URL for all devices, the same as for responsive web design sites.
  • Designers can selectively hide the website’s elements depending on the screen size. This means the design can be fully mobile-friendly.

The cons of dynamic serving are:

  • Building these sites can be harder and more time consuming as two separate designs combine into the same URL.
  • These websites are harder and more time consuming to maintain and update. This is because users might have to change the content more than once.

Separate URLs

Website’s designed on separate URLs means that one design would be coded for large screens, and one for mobile devices. They would be hosted on separate URLs, and multi-directional annotation will determine which URL is loaded depending on the screen size. In simple terms, this means that there are multiple websites. For example, one website will be built for desktops, one for mobiles, and maybe even one for tablets.

Why it can be good to be mobile-friendly through this method:

  • The design can be truly mobile-friendly as the mobile website is in effect a different website to the desktop one.
  • This method can make some functionality more effective, such as in the case of mobile specific searching.

How Separate URLs can be problematic:

  • If the multi-directional annotation isn’t correctly setup, search engines like Google will penalize the website for duplicate content.
  • Technically two or more websites need building. This means it can take more time to design and build.
  • Maintenance and changes have to be done across two different sites.

Why has mobile-friendly design become so much more important?

So now that you know a little bit about the different ways of designing mobile-friendly, here are the reasons why it’s getting even more important to have mobile-friendly design.

Search Engine Visibility

This is probably the most straightforward and obvious reason why its so important to be mobile-friendly. The biggest search engine, Google, penalizes websites for not being mobile-friendly.

The practice of making sure your website is friendly to Google is called search engine optimization, or SEO. You need to make sure that your website is optimized. To do this, you need to make sure that your website design is mobile-friendly. If a business website isn’t mobile-friendly, it’s harder for customers to find them online.

This means that it’s more likely that they will never be seen by most customers in the first place and is a serious problem, especially for businesses.

Of all the methods to become mobile-friendly listed above, Google prefers the responsive web design option. However it’s important to note that with good development, Google accepts the other two types of website design (dynamic serving and separate URLs) are also very acceptable, and will not punish these sites in rankings.

The User Experience

Assuming the user or customer makes their way to the website, even if it isn’t mobile-friendly, they are more likely to quickly leave the page and find another website that they can enjoy more. This is called the user experience, or UX. This is literally the experience that the user has when they are navigating through and using the website.

This can be particularly relevant for e-commerce websites, where the customer needs to browse through products, and make a payment. If the UX isn’t smooth, the user will most likely abort the purchase and move on. For a business this is catastrophic as they’ve lost the sale altogether. A business with a very good UX on the other hand will be more likely to have customers completing sales, and these customers are also more likely to return for repeat sales.

So, the extent to which a website is mobile-friendly or not has a real impact on the users’ journeys, and needs to be taken seriously, especially by e-commerce companies.

Changing Trends

Responsive web design has been around in practice since the early 2000s. Yet, according to some estimates, as of only a few years ago up to 90% of small business in the US do not have mobile-friendly designs. When you consider that around 90% of US businesses have 20 employees or less, you can see that SME’s make up a huge proportion of the economy. We’re only using the US as one example as it is the world’s largest economy, but we think it would broadly apply to most developed economies.

Now, look at the rapidly changing nature of how people access the internet and do business. In 2017, up 30% from last year, 50% of all web traffic is now via mobile phones. At the same time, the share of desktop web traffic has fallen from 65% to 45%. It’s also estimated that the amount that people buy online grows year on year 23%, of which most growth is on mobile phones.

If you take both of these sets of statistics, it’s easy to see that businesses that don’t adapt are facing a losing battle, as the changing trends are starting to turn to quickly against them. Now is the time to get mobile-friendly!