how to optimize your site for mobile devices

Ways to adapt and optimize your site for mobile devices

The mobile version of a website –  is how a user sees your site from a mobile device – a phone or a tablet.

According to Statcounter, more than half of the world’s users search for something on the Internet from mobile devices. Google, for its part, states in The Mobile Playbook Google’s guide for busy executives that 40% of users will go to a competitor’s site if it has a good mobile version. It is no coincidence that an unoptimized mobile version, or the lack thereof, lowers an Internet resource’s ranking in the search results of this search engine.

It is also important to note that today the search engine indexes primarily the mobile version, and based on this information determines the position of a web resource in the results of the output. It’s all for the convenience of the majority, which is what mobile users are all about. Join the 20,000 entrepreneurs who already have an edge and get free online marketing advice Subscribe

How do I know if my site is mobile optimized?

If you’ve got a mobile-friendly website and you’re not sure if it’s optimized for mobile devices, Google can help you. Just enter your website URL into Mobile-Friendly Test and click “Test this page. The service will evaluate your site and also provide useful tips on how to improve it.

How to quickly adapt your website for mobile devices

For a website to take top positions in search engines, the potential audience did not leave it without committing any actions, and turned into loyal customers, and need to optimize the site for mobile. There are two main ways to make the adaptation of the website for mobile devices. For this mission, either the use of adaptive design or the creation of a separate mobile version of the site on a subdomain will do.

Fast Adaptive Website Design

 

optimize site for mobile

 

If an adaptive design was originally developed for the site, then, regardless of what device the user came from, the site will be displayed correctly. With adaptive design, any image, block, font size is automatically adjusted to the size of the user’s screen, which is achieved through CSS.

If you have some web development and design skills, and you’re going to adapt your site. Be prepared to implement the following steps:

  • Get acquainted with the instructions of Bootstrap – a popular framework for developing adaptive websites. They and painted all the following steps.
  • Connecting CSS and, if JS and jQuery components are required.
  • Checking pages for compliance with the latest standards of design and development, for example, whether HTML5 and the meta tag viewport, which is responsible for the correct display of the visible part of the page on screens of different sizes.

Adhering to these and other recommendations specified in the instructions will make every element of your site convenient and visible. And this greatly increases the conversion and reputation of the resource.

The advantages of responsive design:

  • You do not need to create two separate layouts. Adaptive design requires only one layout, which will automatically adapt to all sizes of screens.
  • No unnecessary burden on SEO specialists: no need to create separate links to pages, as the mobile version always has the prefix .m or .mobile; add rel=”alternative” and rel=”canonical” meta tags explaining to the search engine that content in the mobile version was not stolen and duplicated; worry about properly configured redirects between versions.
  • Manage one site, not two. If changes need to be made, they will automatically become visible to users who visit your resource from both desktop and mobile devices.
  • Google loves adaptive websites. And here’s why: Adaptive sites are crawled faster by Googlebot, and pages are indexed more accurately. A single URL is also more convenient for users. Such sites do not need redirects, which reduces the load time. Adaptive websites don’t have typical errors like mobile websites.

Templates and plugins

Relatively quickly adapt the site can be used with ready-made themes (templates) or plugins. This option does not require technical skills. However, it is not available to everyone – only the owners of sites on a separate CMS.

The first option – install a special plugin for an existing desktop theme, which converts it to mobile devices. For example, for Joomla sites, Responsivizer and Mobile Joomla plugins will do the job, for Drupal sites – ThemeKey and MobileTheme. For WordPress will do WPtouch. And even not so long ago, or rather until March 2020, often used the plugin for mobile optimization JetPack. However, the developers of the plugin removed the mobile theme function, which is responsible for adapting the site for mobile devices, explaining that “most of the themes now by default include a mobile design, so this function is no longer needed. In addition, they recommend using adaptive themes and not making it harder on yourself.

If you install a theme with an adaptive design on your site, it will automatically become accessible to visit and view from mobile devices. Depending on what engine your resource is developed on, you can easily choose the appropriate templates. There are both free and paid adaptive templates, it all depends on your preferences and budget.

Registration To quickly find and install a template

  • In WordPress pre-find and download the theme to your computer, go to the admin panel, Appearance & Themes & Add New. Note: a large list of paid and free themes can be found at WordPress.org. Before downloading carefully read the description and reviews, pay attention to the number of downloads.
  • In Joomla, admin panel & Extensions & Extension Manager & Download package file.
  • In Drupal, pre-download the theme from drupal.org, admin panel & Appearance & Install a new theme.

But what about a store on OpenCart?

With OpenCart everything is a little more complicated. Yes, on the Internet you will find many adaptive templates designed specifically for this CMS, but they are not always possible to apply. The fact is that the OpenCart site consists of different functional modules. As a rule, the modules “out of the box” are not enough for a full online store. For this use additional custom modules, in most cases are not supported by the mobile theme, which provides only standard limited functionality. To correctly display the OpenCart store and work on different devices you can:

  • develop a separate mobile design, that is, a separate mobile version of the site and configure it for redirection, pre-determining what device users come from (contact with the code can not be avoided).
  • Perform adaptive Bootstrap layout without developing a separate design (layout) for mobile.

A separate version of the site on a subdomain

site for mobile

 

The development of a separate mobile version of the site is more resource-intensive but has its undeniable advantages for certain types of websites, namely for large projects: portals, social networks, online stores with a wide range. Also, this option will be more convenient for those who already have a desktop site, because we will have to finalize only the mobile version.

Note! To show Google that this is not duplicated content, but the mobile version of the site should use special meta tags rel=”alternative” and rel=”canonical”.

Also, if you decided to have a separate mobile site, be prepared to do twice as much work – changes to the mobile version of the site are made regardless of its desktop version. Search engine optimization and content management are also done separately.

How to quickly create a mobile version of the site?

To create a mobile version of the site it’s possible to use special online services – mobile version designers. Such a solution will suit the owners of small and medium-sized sites of various types, with no coding experience. The most popular are Duda Mobile and Wix. With their help you will be able to convert your desktop site so that all of its content will be horrific, unnecessary elements and functionality will be cut down to make the resource easy to use on mobile devices.

The advantages of a mobile version of the site:

  • The high speed of loading the site. Since extra functionality and elements from the desktop version are not transferred to the mobile version, it reduces the load and increases loading speed. And the latter has a positive effect on SEO positions.
  • Usability and SEO. Since the mobile version of the site has nothing extra that could hinder or distract the user (awkward forms, secondary texts, and blocks, buttons, confusing navigation) improves behavioral factors. User experience affects the behavioral metrics, and in turn, the ranking of the site, that is, the “height” of its position in search results.
  • Flexibility. A separate version means separate code. You can quickly and easily make changes to the mobile site without the risk of breaking something in the desktop and vice versa.
  • Choice of version. With a mobile version of the site, the user can always switch to the full version if necessary.

Top 5 recommendations on how to improve the mobile site

1. Do not ignore the loading speed

The position of both the regular and mobile versions of the site in search results largely depends on the speed of its loading. In turn, the page loading speed is affected by the size of HTML, CSS, JavaScript files that make up the site, the weight of images, and even hosting, namely server response time. To optimize the site for better performance on mobile, it is important, if necessary, to change your hosting provider, minify the code, limit the amount and size of downloadable content, and clean up the homepage as much as possible, getting rid of everything unnecessary. Thus, you will be able to achieve a significantly higher speed of page loading. Pay attention! Ideally, the server response speed should not exceed 0.2 sec. You can check this figure in Google Analytics: Behavior & Site Load Speed & Overview. You can also check the loading speed of the website in a special free service Google PageSpeed Insights or Pingdom Tools.

2. Don’t forget to check how elements of your site are displayed

in the mobile version, because according to a study by Tony Hale of The Times, the user who first came to your resource decides in just 15 seconds whether to stay or leave the page. Therefore, your mobile site must be intuitive and easy to use. To do this, do not forget to check the page with the Mobile-Friendly Test. Don’t ignore page optimization tips from the search giant Google, especially since they are free!

3. Adhere to the principles of Mobile-First

Ideally, when creating a site, you should start with the design of the layout is for mobile. After all, placing a lot of elements on the big screen is not as difficult as on a small one. In addition, Google prioritizes the mobile version of the site. To win the top positions in search results, it is worth paying due attention to adaptation for mobile devices. Again, to check how much your site is optimized for mobile devices you can use the Mobile-Friendly Test.

4. Use technology AMP

If the loading of the site lasts more than 3 seconds, half of the users leave, according to statistics from Google, found David Kirkpatrick in an article on MarketingDive.

Significantly accelerate the loading of pages can be achieved by using AMP technology, which compresses the data volume of pages, reducing it by a factor of 8. Google developed the technology to increase the speed of loading sites. In search results, resources that use this technology are marked with a special icon-lightning. And also have a URL with the prefix /amp.

However, this method of speeding up pages will not suit all. The thing is that the user who enters the site with AMP, automatically redirected to a simplified version, which is likely to be no widgets, or comments section, or additional blocks, for example, “Recommended”, weighing the page. That’s how you get lightning-fast loading with AMP.

If you’ve worked hard on the design and aren’t ready to sacrifice the aesthetic part, this technology isn’t for you. But, if you have a blog or news resource with a lot of the same template pages, a technology that generates fast dynamic pages will only improve the user experience.

You should also pay attention to Google AMP Cache, a method in which site data (images, fonts, etc.) are saved, large pictures are automatically converted to formats for mobile devices. Such features help to improve server performance and your site will work much better on mobile devices.

Summary

As you can see, adapting your website for mobile devices is very important. This will not only improve the ranking of the Internet resource in search results, but also improve the experience and loyalty of users, who will be happy to come back to you again and again, and recommend your resource to friends and acquaintances.

So, once again, let’s list the options for adapting the site for mobile devices:

  • Adaptive Design. If you have web development skills or a developer on staff, you can adapt the desktop version so that it will automatically adjust for screens of different extensions through CSS. “Make” the site adapt for mobile you can use special plugins or an adaptive theme. This does not require technical skills. This option is available to owners of sites based on CMS WordPress, Joomla, and Drupal.
  • The mobile version of the site. If we are talking about a large project, a portal, a large online store, you should think about developing a separate mobile version. Here you can’t do without the help of the development team. If you own a small or medium-sized e-commerce site, blog, business card site, etc., you can try transforming your site with special mobile site builders. You will not need programming skills.

Leave a Reply

Your email address will not be published. Required fields are marked *