Site optimization for mobile devices: what to look for in the design

287 views
  • Home
  • /
  • Articles
  • /
  • Site optimization for mobile devices: what to look for in the design
Site optimization for mobile devices: what to look for in the design

Check if mobile optimization takes into account the main parameters that affect visitor loyalty and conversion.

A statistic of the visits to your website will certainly reveal you that the highest percentage of your traffic comes from mobile devices. The “Pew research centre”  made a survey in 2017 which showed the exponential growth of mobile usage from 2013 to 2017. This survey was back up in 2018 by stone temple’s statistic, showing how mobile drive more traffic worldwide, overcoming both desktops and laptops. In this article, we will try to walk you through the steps to optimize your site for mobile devices.

 

WHY IS IT  IMPORTANT TO OPTIMISE YOUR SITE FOR MOBILE PHONE?

To better understand the concept behind “Mobile Optimization”, let’s first look at what Google webmasters say about it:

“Previously, content relevance was assessed primarily on the basis of the version for computers. However, now most users search on Google using mobile devices, so the mobile version of pages will be more important when indexing.”

In a word, a Website that is mobile optimised offers a wealth of benefits. First, it gives you a head start over your competitors who do not have a mobile-ready website. Second, it increases your chances to have more visitors who could become your customers.

In addition to this, a website that has a poor mobile experience drives your audience aways.

According to recent surveys, 60% of the respondents confirmed that they do not return to or do not recommend websites which have inconvenient mobile versions.

Also, about 68 million search queries are entering into the search engine (Google) every single hour from mobile phones users, who can possibly become your customers. It is clear that Mobile-friendly Websites provide many advantages which are essentials for business owners. Now, let’s look at the necessary steps to make your site mobile friendly.

It looks like a mobile optimized website

3 WAYS TO OPTIMISE YOUR SITE

To enhance your audience mobile experience, you  should consider the 3 options and type of optimisation below:

  1. Develop a mobile version: another site on a subdomain or subdirectory that has its own URL (in the format m.example.com) for mobile devices.
  2. Make a responsive design for an existing site. The same HTML source code is adapted to the screen resolution of each user. This option recommends using Google.
  3. Supplement the original version of the code with options for dynamic display. The server identifies the device from which the user logged in and shows him the corresponding HTML code.

 

THE THREE TYPES OF WEBSITE OPTIMIZATION

 

ADAPTIVE DESIGN

 

Benefits                                                                                                                           

  • Single address, do not need forwarding                                                                  
  • Improved position on google ranking page                                                       
  • No need to rebuild your site from scratch
  • Short page load time (this speeds up your website)

 

Disadvantage

  • It takes a lot of time to build because designs have to be created separately
  • There might be a need to use more than one URL 

 

Cost

  • Free if you have the skills to connect and customize the corresponding free template
  • For a moderate fee, if you entrust this task to a specialist. In general, the cost of adaptive layout for the site is 40-100% higher than the cost of  static on

 

Aimed for                                                                                                             

Blogs, business cards, small online stores, information, and corporate sites. (Examples: Starbucks, Boston Globe)

 

DYNAMIC DESIGN

 

Benefits

  • Single URL
  • Increased loading speed of pages: “extra” elements are completely removed from the code
  • Flexibility, the ability to adjust to the behaviour for a better mobile experience

 

Disadvantages                                                                                                                        

  • Increased server load: as a result, the pages load
  • It will take system recognition devices, and this is an additional cost
  • For owners of different devices developed their own layout options

 

Cost                                                                                                                             

It will take system recognition devices, and this is an additional cost.                     

 

Aimed for:                                                                                                                            

Large news resources, portals (Examples: CNN, eHow)

 

MOBILE VERSIONS WITH URL

 

Benefits

  • Mobile version independent from the main site loads quickly
  • You can easily make changes or return to the main version if bugs or crashes are detected
  • The site is approved by search engines and gets a good position in the mobile issue
  • Easy navigation and a minimum of distracting information for a mobile audience

 

Disadvantages

  • Increased server load: as a result, the pages load longer
  • It will take system recognition devices, and this is an additional cost
  • For owners of different devices developed their own layout options

 

Cost

Includes costs for the development of a mobile site, the acquisition of a domain name, payment for hosting. If the content is different from the content of the main version, then this item of expenditure is included in the estimate.

 

AImed for:                                                                                                               

Large online stores, postal services, information portals, social networks. Sites with high attendance. (Examples: Walmart, Amazon)

 

WHEN OPTIMIZING YOUR SITE, ALWAYS REMEMBER THIS

Regardless of which way you choose your mobile audience, it’s worthwhile to make your website look as attractive as possible and user-friendly. Conversion, in this case, depends on many details that are not obvious at first glance. So to keep the interest of your audience,  you have to emphasize on the design and usability of your website.

Here are some mobile site optimization tips:

 

The correctness of the mobile version.

Make sure that your site is truly Cross-browser and cross-platform. Check how your site displays on various devices. You can do this with the help of services like Quirktools, Turbonet, and Browsershots

 

The Download speed.

According to statistics, every second download is “worth” 3-7% conversion. Good download speed for mobile devices – 3 seconds. You can check the speed of your site using: PageSpeed Insights, “Web Page Performance Test”, GTmetrix, Pingdom Website Speed, and Speed Test. 

 

Items that are not displayed on some devices.

Try to avoid animated effects using Flash, which are not supported by Apple devices. Be careful with widgets, be sure to test them before launching. In addition, the simpler the design, the faster the pages will load.

 

The number of fields on a capture form. 

Customers do not want to waste too much time entering their information on a form. Moreover, it is quite difficult to enter data from mobile phones. So to prevent your potential client to go away without having their contact, try to shorten the path from dating to order. In some cases, it is enough to take the phone number and to receive the rest of the information in a telephone conversation with the manager. In case you really need to take more information at once, divide the capture form into blocks and present in the form of successive steps, where at the first stage the visitor enters his name and phone number. In this case, even if he quits after the first step, you will at least have his phone number.

 

Contacts.

Some sites, unfortunately, place contact phones in the form of pictures and not giving the opportunity to their customer to click on their contact to make a call automatically. Just imagine how a person who has logged in from a mobile device will have to memorize the number, dial it, and then make a call especially when there are in a hurry. Phone number must be submitted in full version and in text format. The ideal option is a button for automatic dialling and buttons for instant communication in instant messengers (Viber, Telegram, WhatsApp).

 

The convenience of active links and buttons for touch-screen.

The fact that it is easy to click on the PC with the mouse cursor is not always as convenient to click on the touch screen. And it can play against you at the most inappropriate moment: when the client has already made a decision and wants to take targeted actions. If they click on the button or the link does not work, they will simply close your site and go to your competitors’. Therefore, adhere to the parameters of clickable elements:

  • minimum – 26px;
  • medium – 34px;
  • perfect – 44px.

Legible font, clear text content. It is unlikely that a person who has logged in from a mobile device will read the text or increase the text in order to activate your triggers, learn the advantages or heed the calls to action. Make sure that the text content in the mobile version meets the optimal standards:

  • The minimum font size is at least 16 px.
  • The presence of line spacing, which makes the text readable on any screen. Minimum – 1px.
  • Padding from the side edges of the screen: min 15 px.
  • Font – sans serif (Roboto, Futura, Helvetica, Apercu and others). No more than three fonts per page, in harmony with each other.
  • The text should be divided into columns with a line length of 70-80 characters (8-10 words) and set control points for them. Sample code gives recommendations to developers Google.

 

Autocomplete fields.

Entering information from mobile devices is extremely inconvenient, especially if the client is in a hurry. In this case, auto-fill will help increase the conversion and keep the client. Just add the appropriate code to the lines:

  • For email address – input type = “email”.
  • For a phone number – input type = “tel”.
  • The physical address is input type = “text”.
  • Zip code or card details – input type = “text” pattern = “\d*”.
  • Day on the calendar – input type = “date”.

 

Convenient design.

Anything that is difficult to perceive from small screen devices will repel the visitor. So such elements should be eliminated, even if they perfectly fulfil their role in the desktop version. Studies show that 57% of respondents will not recommend a site if its mobile version is not convenient or looks cheap.

  • Focus on the photo: high detail images, white background, the disclosure of the full screen when viewing.
  • Structured. Combine similar products or content into categories and categories.
  • Text content. It can be the same as in the main version but shortened. Or create separate content if the mobile version of the site has its own address and you need a unique text for promotion.
  • Large and contrast buttons action target. They should be easy and convenient to press from touchscreens.

 

Lack of hype.

More than 70% of mobile users consider advertising on their devices unacceptable. On the part of the search engine, Google has already received a warning that the sites on which advertising makes it difficult to access the content, will lose their position in the mobile issue. This is mainly about pop-ups, interstitial advertising and large banners that are larger than 20% of the screen. Optimally place on the site no more than one ad that does not block access to the main content.

 

Checklist for checking mobile optimization

The last step before testing and running. Check if mobile optimization takes into account the main parameters that affect visitor loyalty and conversion:

  1. Check if all elements on the site are displayed correctly, links and buttons are clickable.
  2. The information is readable, correctly displayed in the vertical and horizontal position of the screen.
  3. There are no “heavy” files on the pages (video, audio, image) that slow down the page loading.
  4. No Flash animated items.
  5. There are no intrusive ads that overlap the content.
  6. The telephone number for communication is easily copied or activated by pressing into the call.
  7. There is no need for horizontal scrolling regardless of the diagonal of the device screen.
  8. The form for the order of goods is brief, there is an auto-complete.
  9. Navigation allows you to quickly navigate to the desired category and find a specific product.
  10. The visitors can purchase in a single click.

Mobile optimization makes traffic from mobile devices the most profitable for your business. You can customize the mobile version of your site yourself if you have the appropriate skills. Or entrust this task to the professionals and get the result you need in a short time.