10 tips on how to adapt your site for mobile devices

People spend more than three hours a day surfing the Internet from their smartphones. It is mobile devices that have become the main gadget that people use to read the news, watch videos and make purchases. Today, it is not enough to make a site that loads quickly and looks good on the PC. Most visitors access sites from smartphones, so developers are increasingly using a “mobile first” strategy when creating sites.

There are several ways to adapt the site to mobile devices. Adaptive coding or installing an adaptive theme – the easiest and most modern way to “friend” the site with smartphones and tablets.

What is a mobile-friendly site?

Mobile devices are a hot topic in web design because traffic from smartphones and tablets now exceeds visits from PCs. The site is mobile-friendly optimized for mobile devices and displayed correctly on each device.

There are several ways to “friend” the site with mobile devices:

• Adaptive design. This is the simplest way, which involves installing an adaptive template (or creating one from scratch). Such a template adjusts to the size of the screen, changing the placement and size of elements, or hiding them altogether. If your site runs on a CMS, such as WordPress or Joomla!, choose one of the adaptive themes to make the site mobile-friendly.
• Mobile version on a subdomain. This is a more time-consuming way, involving the creation of a separate version of the site. In fact, this is a separate domain with full functionality, scripts, shopping cart, separate product catalog. Such a site would require a multi-domain SAN certificate so that you don’t have to buy several SSLs for each subdomain.

For most sites, creating an adaptive design is more appropriate. A separate mobile version is suitable for large portals, social networks, bulletin boards.

What is adaptive design?

Adaptive sites can adapt to the size of the user’s screen. As you scale the page, the content will rearrange and resize so that all elements are presented in the best possible way. Adaptive sites look equally good on a PC, laptop, tablet or smartphone. However, the website needs to be optimized for this.

A typical website consists of a set of pages. Each page contains HTML code and content (text, images and video) and scripts. The design of a web page is formalized using files called cascading style sheets (CSS). For ease of explanation, let’s assume that a non-adaptive website has a single CSS file that controls the design. Adaptive website applies an additional CSS file depending on the device from which the user enters the site. The design will appear differently depending on the device.

Adaptive design does not require a separate layout for each device. It is enough to install one adaptive theme or order the development of a single layout. It also eliminates the need to set up redirects to direct the user to the correct version of the site. And if you manage several domains and want to outsource this work, TutHost offers inexpensive DNS records management.

10 tips on how to make a mobile-friendly website

The following tips will help adapt your resource for mobile devices. This will not only increase traffic from smartphones, but will also be a positive signal for Google.

1. Install an adaptive theme

This is the first and most important step. Today, every leading website builder offers adaptive templates. Squarespace adapts perfectly to mobile devices and will be the best choice if you are building a website from scratch. All Wix templates are adapted for mobile devices, but be sure to check the placement of elements when designing.

If you’re building a site with a CMS such as WordPress, make sure the theme you choose is adapted for mobile devices. Just type “responsive” into the WordPress theme library or search for the template on a third-party site like Themeforest. Be sure to read the reviews and, if possible, check out any sites that use this theme from your cell phone to evaluate it.

If your website was created using an old, non-adaptive template and you can’t change it for some reason, add the following line of code to the section of each page:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

This means that your pages must automatically reformat to fit the width of the visitor’s screen.

2. Simplify the menu

One of the best tips for creating mobile-friendly sites includes developing easy-to-use navigation. Whenever visitors enter a resource, they should be able to easily understand the structure of your website and navigate to the sections of interest without any confusion.

Suppose a visitor comes to your site to buy a certain product. Do not overload it with articles about the product, newsletter subscriptions and offers to subscribe to you on social networks. You just need to make the buying process as easy as possible so that visitors can select a product and order it in seconds.

In software and web application development, the KISS (Keep it simple stupid) model is used to create an application with a user-friendly interface, clear navigation features and a minimum number of tasks. According to this principle, any user should go to the site, perform the necessary actions, without distractions, and eventually get what he wants as easy as possible.

3. don’t scare away visitors with fill-in forms

Another important thing to consider when creating a mobile version is forms. They are often long and complicated, and not always easy to fill out on a mobile device. Filling out forms too long is a common reason for refusing a targeted action.

To make forms easier and more convenient to use on mobile devices, turn off the auto-replacement feature. This will prevent the keyboard from changing what you type and will make it easier to fill out the form. Make sure that all of the form fields are large enough to be easily clicked on small-screen smartphones.

If the form is longer, reduce the number of fields or break it up into multiple pages so that users don’t have to scroll through a long list of fields.

4. Clearly display the CTA button

When creating an adaptive or mobile version of the site, remember that you have limited opportunities to attract the attention of visitors. Mobile users expect to find the information they need quickly. If you don’t offer them a targeted action within seconds, you reduce the likelihood of conversion. Ideally, the CTA button should be visible immediately, within 1-3 seconds.

Place the CTA in a prominent place. The more visually distinct and obvious you make the CTA on your site, the faster you will achieve the ultimate goal. 49% of mobile users use their thumbs to navigate and click on items that are within reach. This means that any element placed in the corners of the website will be hard to reach for most users. Make sure that all CTA buttons are large and located in the center of the screen, where they are easy to reach.

5. Add a search function

A search function is necessary for almost any major site. Whether you’re selling products or publishing articles, it will be much easier for visitors to find the information they need in the search bar. Make the search bar prominent so that users don’t have to look for it for a long time. So you’ll help them find the right category or product, thereby increasing the conversion rate.

6. Make it easier for customers to contact support

Visitors may want to contact you. The reasons are varied: a question on the product, difficulties with the order, comments on the site, to express gratitude. Make it easy for your customers to contact support. Popular options include online chat, a feedback form, or just a phone number prominently displayed.

Make sure that even a child can easily find contacts or an online chat button.

7. Size matters

This statement applies to all elements of the site when it comes to the mobile version. Users are uncomfortable to press too small buttons, select small menu items, read small or, conversely, very large print.

Make the buttons large enough, separate menu items to avoid accidental clicks, choose a large font. Do not place interactive elements in the corners – this is the most uncomfortable place for smartphone users.

8. Eliminate or minimize pop-ups

Users don’t really like pop-ups, but if used carefully they can work very well on the desktop version of the site. When it comes to mobile devices, it’s best to avoid pop-ups. On the small screen, they cause users only irritation. Such a window interferes with viewing content, and it can be difficult to close it – you have to hit the little cross in the corner of the screen with your finger.

9. Select the correct font

Font size is important when viewing the site from a cell phone. No one wants to look closely at the small letters, but huge symbols will scare away visitors, too. It’s recommended to use a font size of at least 14 pixels, but check how it looks on the mobile version – you’ll probably find that it’s small and you’ll want to enlarge it a bit.

Check the readability of the font. You can try an experimental font on the desktop, but this step is hardly appropriate on mobile devices.

When working on a mobile site presentation, you have much less room to implement an original design. In the desktop version, you can separate text with gaps, blank spaces, or images. On mobile devices, try to use lines or bold text instead, so that they don’t merge with each other.

10. Speed is a priority

Speed is one of the most important factors in the operation of the site. According to statistics, 47% of visitors leave the site if it loads more than 3 seconds. If we are talking about the mobile version, their number increases to 53%.

To increase the loading speed, you need to compress files such as images, CSS and scripts. The lighter these files are, the faster the pages will load. To increase speed, try to keep the interface clean and simple, not overloaded with images and videos. This will help users see the content faster and stay on your site.

Site security is also important. Install an SSL certificate from Comodo to enhance it. We also offer handy SSL utilities.

Regularly test and optimize your site on different devices and screen sizes, even after development. Gadgets are constantly changing and evolving, so optimization is critical to retaining traffic and advancing in search engines.Using the techniques mentioned above, you can regularly improve your website throughout its lifecycle. These tips will help you identify and fix potential problems that mobile users may have with your resource. And if you want to make money together with TutHost, we offer a profitable reselling SSL certificates which are in high demand in Ukraine and abroad.