November 18, 2019

Should you care about how your website looks on mobile devices? The answer is one hundred percent yes. Let’s look into why your website should be mobile friendly and why it is so important to have a website that looks good and is functional on mobile devices.

Why you should care about mobile

The analytics speaks for itself

As a web development company, looking at our customers’ website analytics, there’s no question that mobile is the most popular device used by the public to access our websites. Most of our customers show statistics of around 60 - 70% of all website traffic comes from mobile devices, another 5% from tablets and the rest from desktops. If your website does not provide visitors with a mobile-friendly and mobile functional experience, you will lose 60 - 70% of your potential customers, leads and conversions. It’s that obvious.

Mobile acquisition is growing fast

Mobile has also seen tremendous growth in the past 5 - 10 years, with smartphone manufacturers struggling to keep up with the growing demand. In 2017, Google announced that it had 2 billion monthly active Android users and in 2019 Google has announced at their IO event that they surpassed 2.5 billion monthly active users on Android devices. That only accounts for Android devices and not IOS devices from Apple. That’s almost a third of the world population that can access your website from a mobile device. Furthermore, if we don’t take “active” users into account, according to Statista.com, there are more than 6 billion people on earth who now own and use a smartphone.

Mobile is the most frequently used hands-on tech

Mobile is also more frequent and personal than any other medium on earth. Users are constantly using their phones or have it within 5m of them, even when they are in bed or commuting to work. According to Tech Times, more than 46% of Americans check their smartphones before getting out of bed, and according to Google, more than half of all smartphone users discover new products and businesses using their smartphones. To reference a saying from Gary Vaynerchuk, “Mobile is the new television and the television is the radio.”

Search engines promote mobile

A while ago, we have noticed that Google has changed the way in which they crawl websites and now focus on crawling primarily with the mobile crawler. We also saw this when using the webmaster tools or search engine console that they provide. It’s always interesting and equally important to study Google’s behavior, especially when it comes to crawling and indexing websites since they are the ones who control the search algorithm for the biggest search engine in the world.

So what is responsive design?

When you want to ensure that your website is future proof and that you are ahead of your competitors, you should cater for any device, not just mobile. Mobile is growing at tremendous speeds, however, who knows when a new device can emerge and start gaining mass adoption. Just look at what is happening in the foldable screen technology, creating new ways that we think about smartphone form factors and screen size.

Screen sizes are always changing and tomorrow your toaster might have a display or you might be browsing the web from your bathroom mirror. That is why you should always design your website for any screen size, which is the core idea behind responsive design. Responsive design or mobile responsive design in short means that a website is designed to look good on any device with any screen size, and can adapt to fit and scale according to the screen size, without having to zoom in and out in order to read or navigate the website, and without obscuring any of the contents on the website.

Have you ever found yourself asking “how do I stop a CSS layout from distorting when zooming in/out?” or “my website breaks when zooming”. This can all be avoided when using a responsive layout and responsive CSS.

Many websites have caught on with the latest responsive mobile trends and are mostly responsive, have some sort of responsive menu or mobile menu, or are at least mobile-friendly to some extent, however, many look terrible on mobile devices and many still break on mobile. Let’s explore some of the reasons why your website might break on mobile devices and why mobile optimization is important.

Reasons why your website breaks on mobile

Let’s assume that you currently have a website that is already broken in some form or the other when you open it on a mobile or tablet device. There could be many reasons why your website breaks on mobile. This could also impact your website’s mobile SEO and mobile performance ranking on search engines. Before we look at how we can fix some of the issues you might have, here is a list of a few mobile issues that your website might suffer from and might be the cause why your website looks broken on mobile.

1.) It was never designed for mobile.

Most of the time, the reason why a website breaks or looks ugly on mobile devices is that it was never designed for mobile devices and screens in the first place. We encounter many cases, even in 2019, where a website was only designed for large desktop screens. Luckily for many of these websites, there exist frameworks such as Bootstrap and Zurb Foundation that comes packaged with mobile support built-in. This is great, however, it will not look good and will break if not used properly. We see many websites that have a mobile menu and scales properly on mobile devices, however, looks broken and ugly or half of the page looks good where the other half looks broken.

2.) It was never properly tested for mobile.

Mobile devices come in all shapes and sizes. From the very small iPhone 4 to the large Google Pixel 2 XL. Your website should be tested on all of these devices and should scale perfectly on all of them. There are also different mobile browsers that should be tested, from Safari on IOS devices to the default Android browser, Chrome or Firefox mobile browsers. All of these are different apps and some run on different underlying software, which means that they are all slightly different and might render websites differently. The Safari browser uses WebKit as its rendering engine and Google Chrome uses Blink as its rendering engine, which might both produce slightly different results. There are also many HTML, CSS and Javascript linting tools that developers usually make use of for code optimisation.

3.) The website theme was designed for different content

Many businesses and startups don’t want to spend a lot of time and money on a website and decide to buy a template design from the internet. These templates usually look amazing and might work great for a short term solution, however, they only take into account the demo content that they ship with and are usually difficult to modify at a later stage. So a theme template is bought and later, more info is added to the website without taking into account the website layout and theme style. Thus, the website theme was not built around the content and the content was forced into the theme. We see this a lot and usually, this becomes more expensive in the long run since these types of websites usually need to be re-designed properly according to the actual content of the website.

4.) Your website needs updates

Many websites run on some sort of platform such as Wordpress or Drupal and require weekly security and plugin updates. Some of these plugins include template changes and updates to the underlying CSS frameworks that will have an effect on the design or structure of the website and if not updated, might break the website’s theme or layout over time. Examples of these include websites built with builder tools such as Oxygen or Divi. We have seen many of these website designs break when the new Gutenberg editor was introduced on Wordpress and the plugins were not updated in time. Even static websites will need to be updated over time or else they will look old or will still follow the mobile design trends of 10 years ago.

The above explains some of the problems and reasons why a website breaks on small screens or mobile phones, however, you might want to know how to make an existing website mobile-friendly.

How to avoid a website from breaking on mobile

You might wonder how to make your website responsive or how to make your website mobile friendly. If you want a mobile compatible website before spending too many hours trying to fix your broken website, we have a few suggestions to optimize your website for mobile free of charge. To get you started and avoid your website to break on mobile, let’s look at a list of solutions to fix and optimise your website for mobile devices:

How to optimize your website for mobile devices:

• Make sure you design your website with “mobile-first” in mind. It is always good practice as a website designer to design mobile-first and then moving to medium and larger displays. If you are targeting specific screen sizes, make sure to write media queries that will activate on each size.

• Make use of technologies such as flexbox to ensure your content translates and scales to any screen size.

• Use modern CSS and Utility frameworks such as Bootstrap, Zurb Foundation, and Tailwind to help build your “mobile-first“ design.

• Do not build your website or use a website builder to build your website. Many online solutions offer a mobile friendly website builder or template. It might look like a good solution but will only get you halfway there. Unless you are a professional website developer, never try to build your own website. You do not have the hands on day to day experience and skills to build it yourself.

• Make sure that no images or content on your layout overflows to the left or right on a mobile device or smaller screen.

• Make sure that the text is not too small on mobile and that the fonts scale accordingly so that they are legible on any device size.

• Make sure that clickable elements such as links and buttons are not too close together. Remember that users are using their fingers to press on links and buttons and they should be able to easily tap where they need to go. This is what we call “design for touch”.

• Make sure that your website loads fast on mobile. Mobile users usually connect via wireless services such as 3G or 4G and might not always have the best internet connection. Therefore, you want to make sure that your website loads in under 2.5 seconds on average. You should also be sure to load and deliver all critical CSS/JS first and defer the rest to optimize your page loading times. Be sure to encode your images in the best formats to minimize image sizes, especially when users are using cellular data on their mobile devices. You could also make use of caching rules and set the caching lifetime of your pages so that they load faster when a user returns. Furthermore, services such as Cloudflare can help speed up your page loading times by making use of a CDN and also help to minify your javascript and CSS. You can use the following tool to test your website’s mobile loading speed: Mobile test tool. Also note that Google will only crawl your website for a limited amount of time to index your content, which can lead to partially loaded pages if your website’s load time is slow.

• Make sure you follow the correct steps before building and designing your website. Gathering content and planning with your designer, wireframing, designing mockups, building, and testing are some of the essential steps to ensure that you will have a good looking, optimized for mobile website. For a complete guide, read this article that we wrote on how a successful website is built: Building a successful website

• Test your website with Google’s mobile tester link and fix any issues that are listed.

Here are more compelling reasons why your website should be designed for mobile and provide a mobile-first experience:

You are already ahead of your competitors if your website looks good on mobile. Customers would rather buy or support a company with a good looking website as it establishes trust and shows that you care about your business.

Developing a mobile-first website helps with SEO. Google, Bing and other search engines will rank you higher if your website is mobile-friendly. This means that you will get more traffic to your website since your website will be more relevant in search results.

Most of your potential customers are already used to a mobile experience. Having a mobile-friendly website will provide them with an experience that they are already used to.

Chatbots and virtual assistants can be used on your website to engage with customers via instant messaging. This provides a faster communication channel with the customer that can be utilized since most customers already have instant messaging apps on their phones. When implemented correctly, if a customer uses your website from a smartphone, most of the chat windows will seamlessly open with their already installed instant messaging apps.

If you want to stay ahead of the competition, make sure that your website does not break on mobile. Make sure that it follows good mobile design standards and functions properly on mobile devices before rolling it out to production.

Back