Mobile optimization. Use social buttons. Some background information

In this article we will look at:

How does website adaptability affect rankings in the PS?

Google's position

In November 2016, information about the launch of Mobile-first index appeared on the official blog. Translation of a fragment of the statement on the official Google blog:

“To make our results more useful, we started an experiment to make the mobile index the main one. While our search index will still be a single index of websites and apps, our algorithms will end up primarily using the mobile version of a site's content to rank pages from that site, understand structured data, and display snippets of those pages in our results."

In short– previously, when ranking a website, Google PS used the desktop version, now it will rely primarily on the content of the mobile version. ABOUT exact date Google representatives did not announce the launch; it is known that the Mobile-first index is now being tested on a limited sample. However, now we recommend checking the readiness of the site for its launch.

How to prepare a website for a mobile index

If your site uses responsive design or dynamic content, make sure it displays correctly on all devices, pages load quickly, and images and other dynamic elements are optimized for mobile devices.

If there is a separate mobile site on a subdomain, make sure that the entire important content and metadata is displayed the same in desktop and mobile versions. It is also important to make sure that both versions of the site use the same semantic markup. Read more about preparing your site for the Mobile-first index on Google Webmaster Central Blog.

Yandex position

In Yandex, adaptation for mobile devices began to be taken into account in February 2016 as a ranking factor in mobile search results.

How does Yandex determine whether a page is optimized for mobile devices?

If these conditions are met, the page is considered suitable for mobile devices:

1. No horizontal scrolling. Horizontal scrolling is the first symptom of poor website adaptation for mobile devices. All site content (text, images, buttons, menus, etc.) must adapt to the screen size.

2. There are no elements that do not work on popular mobile platforms. Such elements, for example, include flash videos that cannot be played by mobile browsers. Such videos were excluded from the mobile search results of Yandex.Video, since users still could not view them.

How to optimize a website for mobile devices

Mobile version of the site on a subdomain

A separate mobile version of the site is completely implemented on a different URL and can be significantly optimized for mobile devices and navigation on them.

Advantages: you can significantly simplify the design of a website for mobile devices, which will have a positive effect on loading speed mobile pages.

Flaws: the main disadvantage is the need to develop another independent version of the Internet resource, which requires additional time and money.

Dynamic content substitution

With this adaptation method, the server analyzes the type of device from which the request comes and shows users of mobile devices and PCs different versions pages under the same URL.

Advantages: URL remains the same

Flaws: complex development and high support costs. Errors when determining the type of device: the server may not recognize the user’s smartphone as a mobile device and will open the desktop version.

Adaptive design

A website that will be displayed correctly on all devices. Some elements will not appear on mobile devices (and vice versa) or will appear in a more compact form.

Advantages: URL remains the same, relatively easy to develop.

Flaws: slow speed downloads, and therefore it is recommended to simplify the functionality so as not to overload the mobile device.

We discussed more about ways to adapt to mobile devices in the article “”.

In February 2018, Google PS launched new format accelerated mobile AMP Stories pages. With its help, webmasters will be able to create publications consisting of several screens with images and videos.

Analogue of Yandex - Turbo pages. Unlike AMP, which requires you to work with the site to create, Turbo pages are built manually using a template-based builder. Here you can upload an image, create an application form with required fields and leave a link to go to the site.

Limitation: there is no access to the code, since all pages are on the system servers.

All connection information is available in the Y.Webmaster panel

Figure 7. Screenshot of Y.Webmaster’s data

Make sure that texts and pictures are legible without magnification

All important text on the site should be easy to read. We recommend defining minimum size 16 pixels and make sure that the line spacing does its job of separating one line from another. Use different devices to check the typography and make changes if necessary.

Make a big button

Make it possible to comfortably press a button both from a smartphone and from a tablet. The button size should be appropriate for a human finger.

The user should be able to easily call from the site

Make sure that a user visiting your site on a mobile phone has the option to call you by clicking on the phone number.

Do not post your phone as a picture or in the wrong format.

Product images must be scaled

The user should be able to zoom in on the product image to see the details at high magnification.

Select the correct viewport

Viewport tells the browser what size viewport we want. This is very useful, because, as a rule, mobile browsers They are trying to fit the entire website onto the display of a mobile gadget. If the screen size is small, the site looks so small that it becomes difficult to read anything. By checking the correctness of the viewport, you get a guarantee that visitors see an adequate version of the site, regardless of the device they use to view.

Remove pop-ups

Large pop-ups, sign-up forms, etc. get in the way when the user is trying to get the information they need

Conclusion

Share mobile traffic constantly growing. If your site is not optimized for mobile devices, you are already losing mobile traffic, and in the future you may lose desktop traffic because of this.

Therefore, if your website is not yet adapted for mobile devices, it’s time to fix it!

In April 2015, a search engine update was released. Google algorithm under the unofficial name “Mobilegeddon”, and in February 2016 Yandex announced the work of a similar algorithm called “Vladivostok”. Their essence is similar - in mobile search preference is given to those sites that are adapted for viewing on mobile devices. This means that mobile responsiveness can no longer be ignored.

And it's not just about the requirements search engines. Global mobile traffic caught up with desktop traffic at the beginning of 2014. And today, about 67% of traffic on the RuNet comes from mobile devices. Taking into account the needs of our readers, we are working to mobilize the blog. Very soon you will see our updated resource, which will be very convenient to read on various devices.

1. Analyze your target audience

Before you start mobile optimization, analyze your target audience by the following directions(for example, using standard Metrica reports):

• demographics (gender and age);
• geography (which regions have the most transitions);
• devices (which devices are most popular among your visitors - desktops, mobile phones or tablets);
• operating system (Android, iOS, Windows Phone, Windows 7, etc.);
• behavior on the site (browsing depth, time on the site, failures, etc.).

Knowing the profile target audience, you can adapt the design and content to the needs of your visitors.

2. Adapt the template for viewing on mobile devices

There are 3 fundamentally different approaches to mobile adaptation - all of them are described in Google documentation for developers. Each of them has its own advantages and disadvantages.

mobile version

In this case, there will be 2 sites: desktop and mobile. The mobile version is hosted on a new domain (such as m.site.ru).

Advantages:

• The site design is completely tailored for mobile devices, there is no need to compromise;
• webmasters have the opportunity to optimize content in accordance with the specifics of viewing on mobile devices;
• Sites can be modified independently of each other;
• easier to achieve high speed downloads.

Flaws:

• the need for full administration of the new site;
• Due to separate maintenance, costs increase when changes are made.

Mobile version on separate domain has a store trial-sport.ru

Dynamic display

In this case, the design is adapted for specific screen resolutions. Grid lines and element placement have fixed dimensions across devices.

Advantages:

• ease of development;
• there is no need to make separate changes to the mobile version;
• It’s easier for webmasters to control how the design and content will look on different devices.

Flaw- there may be problems when displaying on devices whose screen sizes do not match those specified by the developers.

The decathlon.ru website uses one URL with a different set of HTML code

Adaptive design

In this case, the site layout is precisely adjusted to any display size.

Advantages:

• correct display on all devices;
• there is no need to make separate changes to the mobile version.

Flaws:

• complexity of development, especially for existing projects;
• There may be problems adapting blocks on sites with complex designs.

The Vostok-Service website uses a responsive design that adapts to any device screen

Besides the above methods adaptation, you can use plugins for popular CMS. For example, for WordPress there is WPtouch and WP Mobile Edition. This is a cheap solution, but the correct operation of sites leaves much to be desired. And if this is a solution for blogs, then for complex projects such a solution is unacceptable.

3. Simplify your design

The design of the adaptive version of the site should be simple and concise. Today the so-called “ flat design”, which is characterized by minimalism that simplifies use. Expression is achieved through the play of colors, rather than gradients, shadows, textures and complex interactive forms and elements.

An example of minimalism in design

Also, when developing a mobile site, you should forget about Flash players, widgets and pop-up windows. The parallax effect, beloved by many, should also be left aside, since it is not reproduced on all mobile operating systems and slows down the rendering of pages.

4. Work on improving usability

When designing navigation, think about the user and their experience first. Any page should be accessible in a couple of steps - without complex filters and lists. To make a call in one click, correctly enter the number format with the country and city code +7 495.... Provide one-click authorization via social networks. In a word, try to minimize any actions of visitors to the goal.

Instead of a mouse cursor on a smartphone, a finger is used, so all elements must be of sufficient size. A person does not have to enlarge the image to click on any element. Avoid using serif, curlicue, or italic fonts. Optimal size font - 16 pixels, line height - 1.2 em.

5. Speed ​​up page loading

Loading acceleration, on the one hand, improves behavioral factors, and on the other hand, has a positive effect on ranking. Use various services compression:

• HTML and scripts (HTML compressor or Gzip);
• CSS code (CSS minifier or CSS compressor);
• JS code (Javascriptcompressor, jscompress, etc.);
• images (Optimizilla, Resizepiconline, EWWW Image Optimizer, etc.);
• use browser cache.

Check page loading speed and see possible problems possible using the service PageSpeed ​​Insights via this link.

6. Use social buttons

Mobile users actively repost content. Don't deprive them of this opportunity. This way you will ensure yourself additional traffic and improve social signals. Add link buttons to the most popular social networks, but no more than 4-5 in the visible part of the screen, otherwise the buttons will either be too small or take up a lot of space.

7. Optimize your content

Content needs to be created not only for ease of viewing on small screens, but also for behavior mobile users.

Follow these rules:

• linearity of content (the most important thing is on the first screen and then in descending order);
• use short headings (they can be read quickly);
• break the text into short but meaningful paragraphs (the mobile screen area is much smaller than a PC, and if the user is not captivated from the first lines, he will quickly lose interest; avoid water in the text and empty reasoning);
• add navigation elements for the article (content and anchors, “up”, “down”, “read” buttons);
• provide the opportunity to send the article by email (not everyone has time to read to the end - such useful feature will give you the opportunity to read the material that interests you later);
• adapt tables for viewing on mobile devices (use special plugins, scripts or a horizontal scroll element only for the table).

8. Don't restrict access to content

Some designers, instead of adapting all content for mobile, hide some of it. This is usually done due to the complexity of the template, but this is the wrong approach. Offering a "lite" version is unfair to mobile users. You need to work towards simplifying and optimizing the design, rather than cutting down content.

9. Stay on trend

Track current trends in the field of design and usability and make prompt changes so as not to remain “behind the locomotive”. For example, today the following trends are relevant:

• modular design (content is grouped into blocks that are arranged in one feed or several feeds depending on the screen size);
• flat design (shadows, penumbra, volume - all this is a thing of the past);
• mobile first approach (previously websites were made for PCs, and then, out of necessity, they were adapted for mobile - today it’s the other way around).

10. Don’t forget to analyze the site for mobile usability

Periodically check your site for compliance with search engine requirements for mobile adaptation. You can do this on Google using this link. Just enter the page address and wait for the verification result. Any errors found must be corrected as soon as possible.

To check mobile suitability in Yandex, add the site to Yandex.Webmaster, and then go to the “Tools” / “Check mobile pages” section and enter the site address. If there are errors, we correct them too.

If you don’t have time to independently deal with checking and errors in the mobile display of the site, you can order an audit service and get recommendations from the “Personal Manager” service.

So, mobile responsiveness is not only a ranking factor, but also a way to increase traffic and improve user behavior on the site. If you focus on making the user experience easier on your site, you will increase your competitiveness and conversions.

Hello, dear readers of the blog site. This is not the first time in articles that I have mentioned that There is a significant increase in mobile traffic in RuNet. And this is starting to have a pretty big impact on the lives of webmasters and SEOs.

Firstly, many website owners are starting to think about ways to make money on mobile traffic, which is becoming abundant (even such a monster as it already offers its own options for monetizing visitors visiting your website from mobile devices).

But the most important thing is that we are doing “second.” The fact is that a site that is not adapted to receive this same mobile traffic can seriously lose its position in the search results due to deteriorating behavioral characteristics. On mobile phone very inconvenient to use horizontal scrolling when reading text or searching for menus, so they quickly leave such resources and, as a rule, do not move on to other pages.

Naturally, I knew all this for quite a long time, but there was always something more important and paramount, and the complete concept of adapting the site for viewing on mobile devices never formed in my head. However, Google pushed me very hard yesterday morning, sending me a message that from April 21 when determining search ranking site, Google will take into account whether it is convenient to view web pages on mobile devices.

As they say, they have arrived. I had to take my head in hand and, in half a day, develop and bring the concept of site mobilization to life. Of course, the rush and incomplete understanding of all the options for solving this problem affected the elegance of the solution to the problem, but “what has grown has grown,” and it will be possible to finish it along the way. the main task completed - . And how this was done, read in the continuation of this publication.

Relevance of mobile website optimization and challenges ahead

So, first I will describe the current situation, and then the options for solving it that I have chosen. As mentioned just above, I started thinking about optimizing website pages for mobile devices a long time ago, but sometimes in order to take a step forward, you need someone to give you a good kick in the ass. This kick turned out to be a letter from Google Adsense saying that it was time to finally solve this problem.

Actually, similar letters from this addressee arrived regularly (they usually gave examples of how good it was for those sites that were optimized for mobile traffic), but here there was just an ultimatum:

17 percent of mobile traffic is, in my opinion, pretty decent, but to be honest, without mentioning a possible change in the algorithm Google ranking and taking into account the factor of optimizing the site for mobile devices, I would hardly move (there is always a more important activity, especially when you don’t have a specific plan for solving the problem in your head).

By the way, 17 percent of visitors access the site from mobile devices, and it can be seen that the failure rate of such users is much higher than that of those who accessed the site from a computer or laptop (i.e. the problem is obvious):

The link provided in the letter led to Google service, where you could evaluate the quality of mobile optimization of your website according to the principle: everything is fine, or complete horror. Initially, the site had, of course, a sad red verdict (alarm):

In the screenshot I used the blog of the respected Devaki for illustration, because now I have a slightly different picture. In my case, it seems to me, even three reasons were indicated that interfere with viewing the site on mobile phones, but this service, in fact, only makes a verdict.

But to find out the details, I recommend using another service from the same Google called. Here everything will be more or less detailed and at least it will be clear “in which direction to dig”:

They also have one more similar service, but it is only given an assessment, but, unfortunately, there are no recommendations for improvement. But you can subscribe to changes:

In our case, you should pay attention to the “User Ease” rating on the “For Mobile” tab. It’s clear that loading speed is also important, but for me personally it all comes down to the server settings, which I myself am unable to change (because I’m a noob in server administration), and I still can’t get around to reaching an agreement with Infobox technical support (again, obviously, I need kick in the ass to start moving). But this is probably a topic for a separate article.

The task facing me was solved by yesterday evening and the site received 95 and 100 possible points for convenience for mobile users. Accordingly, the Google service, the link to which was given in the letter, says that everything is fine now (thanks to the charger):

He boasted, now you can begin to describe the steps taken and planned strategies. So there was several problems that needed to be solved:

Numbers in pixels indicate break points. If you start reducing this window (with the site https://site open in it) in width (in the upper right corner of the browser there is a button with two squares superimposed on each other - said “Captain Obvious”), then it is when you pass the width 1025px and 760px there will be design changes.

First, the sidebar will fall off (it will fall to the very bottom) and the top menu will change a little (I want to make it a drop-down for mobile phones in the future, but I haven’t gotten around to it yet, as usual).

And at the second breaking point, you will notice that as you further reduce the width of the viewing area, text, pictures and videos begin to adapt to new size(adapt to it), and the sidebar located below will also undergo changes. In fact, I even enlarged the font for screens smaller than 760px in width (just in case).

In general, I chose the second option, but not right away, so I had to compare the contents of the small-device-min.css and small-device.css files with the original style.css in order to identify the lines where I made changes. Then I inserted these lines inside the curly braces of the @media directives shown above (at the end of the main style.css file). But this is no longer important.

We adapt the template for the convenience of mobile users

So, you have downloaded your site from the Internet, pushed it into a local server, and familiarized yourself with the principles that we will use. Now it's time to start experimenting. For obvious reasons, I cannot give you unambiguous advice (because all templates are different, even for the same engine), what exactly needs to be changed in your case and which breaking points to choose.

For simplicity, you can generally select only one point of the word, for example, equal to the standard width of the main part (the central one, where articles are displayed), and do not change anything before that. But my option seemed preferable to me, although I didn’t have much time to think about it.

What will users see with screens smaller than the first breaking point?

Look. To implement a multi-column design V modern layout are used . For example, my sidebar floats to the right of the main area thanks to:

#sidebar(float:right;)

So to break the two-column layout and make it a single-column layout, I'll need to replace the value for the float rule in the right places. I really poked at everything, because I had forgotten the structure of my template a little and therefore could have caught something unnecessary, but this is the specificity of “assembling a design on your knees” without having the appropriate experience. But since the experiment went on local server, then after an hour and a half I found all the necessary points (by trial and error), the result of which you can now observe.

Accordingly, first it was necessary to train the template to be laid out in two columns, which required writing inside the @media directive (with the first and second break points):

#sidebar(float:none;) #sidebar(float:none !important;)

Remained a problem with top menu , which does not break very nicely and takes up a lot of space on small screen, but there are plans to make it a drop-down for the mobile version of the site (if I do, I’ll write about it). Yes, the counters at the very bottom were built like a house (I only noticed it now), but it’s difficult to fix (the main thing is not to forget).

So, let’s assume that you will do some magic on a local server, experiment and as a result you will get a digestible option for adapting your site to visitors’ mobile devices. All that remains is to transfer this matter to a working site. Naturally, you will not copy all the files (let alone the database), because it will be enough to add (copy) a few lines to the header.php file and transfer a few more lines to the main style file (those inside the @media directives) .

After this, it will be possible to check the changes made (you may need to reset the cache in the engine or in the browser) on the computer screen when reducing the width of the browser window and on your mobile gadgets(phone, tablet). If something “comes out”, then it will be possible to quickly correct this matter.

The main thing is that after changes made your website passed the Google test for suitability for viewing on mobile devices (don’t forget to reset the cache before doing this). Well, you’ll finish the details over time.

Using adaptive block code from Google AdSense on a website for adaptive (responsive) design

Now let's talk about Google Adsense. If you are not working with this system contextual advertising, then you don’t need to read further. If you work and use the code for fixed-size ad blocks on your site, you will have to change it to the code for adaptive blocks (Google, as I understand it, insists on this) so that ads of the appropriate size are loaded on devices with different screen widths.

In fact, this is not at all difficult to do, but personally I had a blockage that required mental effort to resolve it. So, with enviable regularity (not to say that it gets worse, rather better, but when you don’t log in for a long time, you hang up a little). Because of this, I already had to rewrite the article cited in the link a couple of times, but it is again outdated, which means that its fourth incarnation will soon appear (however, this is tiring).

Okay, that's not the point. To create a new one advertising block You will need to click on the gear on the right in the Adsense interface top corner and select the “Settings” option. On the page that opens we need top point menu “My ads”, where to create a new block you just need to click on the button of the same name:

On the page that opens, the adaptive block will be offered to you by default. Here you should select the type of ads that will be shown (in most cases it is more profitable to show everything), and then specify for this block the same client channel, which you had set for the old block (which you will be replacing). The fact is that some advertisers can target their advertising to your website precisely through this client channel, and in order not to lose them, you need to select the same channel for a new advertising block.

This method didn’t work for me (it turned out to be some kind of garbage), so I tried go to Google Adsense help to look for a solution and finally found it on this page.

This is exactly the version of the code I used (blocks will be shown on different devices suitable sizes). It seems that everything began to appear as it should, but not quite. Firstly, I noticed that after changing the code, the impression statistics stopped changing advertisements on home page Adsense. When looking at statistics specifically for the new block, I noticed that there were practically no impressions.

Secondly, I decided to make the appearance of the ads (color, font) in the new adaptive block the same as they were in the old ads. After making the changes, there were even more misunderstandings. The advertisements displayed in the article have not changed their design. I started comparing the code source pages(in the browser you can do this by selecting the appropriate item from the menu right button mouse) and discovered that somehow a BR line break tag was added after some lines of code.

Therefore, I removed all spaces and line breaks in problem areas, after which the ads instantly changed their design and statistics began to be counted. This is the kind of problem that is possible.

Before this, I had a synchronous Adsense code (I installed it back in 2012) and in theory it could reduce the site’s loading speed. Modern code is all asynchronous, which completely eliminates the possibility of it causing a delay in page loading. I think that this is a buzz, but, as they say, we’ll see.

P.S. Here is a short report on what I completed after writing the article.

Ktonanovenkogo.ru="">

Good luck to you! Before see you soon on the pages of the blog site

You can watch more videos by going to

You might be interested

How to make a table of contents (contents, menu) for an article on a website

These days, more and more people prefer to surf the Internet using mobile devices and tablets. Therefore, today it is much more important for designers and developers to think about how their sites will be presented on these devices.

1. Meta viewport tag - page width in a mobile browser

Meta tag meta viewport is an HTML tag needed to define the width of the viewport and control page scaling. Using this tag, we can set the page scale during initial loading, specify the maximum allowed magnification, and also completely disable magnification.

Below I want to give an example of how the meta viewport tag is usually added inside the tag.

@-viewport ( width: device-width; )

The meta viewport tag is an essential tag (along with Media Queries) if you are going to develop a responsive website. However, technically you can use the tag in non-responsive designs.

2. Media Queries

Media Queries allows you to change the styles of your site using specific breakpoints. After all, not all the components of your traditional website will fit on the small screen of a mobile device.

Using Media Queries, you can add specific styles for specific screen widths. We can also add different styles based on the device's orientation and pixel density.

You can embed Media Queries either directly into the page code using the link:

Either use required code directly in cascading style sheets (this method is most often used by developers).

3. Modernizr

Modernizr is a javascript tool for detecting browser/device capabilities. Browsers differ from each other and do not offer identical feature support. When developing a website for mobile devices, you may want to take advantage of the modern and convenient properties of CSS3 and HTML5, which, unfortunately, are not supported by all browsers (not everyone uses latest versions browsers).

Modernizr allows you to provide users of legacy browsers with a fallback site that lacks various modern features and functionality.

4. Touch control on the site.

TouchSwipe is a jQuery plugin that allows you to implement support touch control on the website (on mobile devices or tablets). It supports a selection of their most popular gestures like swipe, pinch, zoom, and scroll.

Since today almost all mobile device manufacturers refuse physical keyboards, and implement touch support, you should definitely consider implementing touch support on your own website.

5. iOS icons

The first thing you see when you unlock your iPhone (or iPad) is the icons. In addition to application icons, in iOS you can also see website icons that have been added to the Home screen.

To create this icon for your website too, simply add following link in the head section of your site code:

On the other hand, you can simply delete these links, just make sure that the icons are saved in root directory and have the prefix apple-touch-icon-* in the name.

6. Splash Screen

The splash screen is the first image that is displayed when you launch an application. This screen informs users about the current application download. It is often recommended to use screensavers that also promote your brand.

To add such a screensaver to your site, just paste following lines in head.

When a user opens your site through the Home screen, the image specified in this link will quickly appear on the device screen.

Although using a splash screen as a quality advertisement is somewhat against the rules, if you use beautiful screensaver, which will only be displayed for a couple of seconds, this will create even more good experience interactions.

7. Windows 8 icons

Windows 8 and RT also offer the ability to add icon blocks to the Home screen. In Windows 8, these blocks are called Pin Icons.

Unlike iOS, which uses the link element, Windows 8 uses a meta tag. Let's look at an example.

The first meta tag determines the color of the cell, the second is responsible for the image of the icon. There is a site called Build My Pinned Site that allows you to easily generate meta tags like this.

In conclusion

The mobile revolution has changed the way we web developers create websites. And now you should consider at least those components that we talked about today. Of course, if you want your sites to look great on devices running iOS and Windows 8.

Surely you have already heard that mobile website optimization affects the speed and efficiency of promotion in the mobile segment, attracts new clients, clients and customers.

Traffic of mobile devices in RuNet for 2017. By according to Digital Report is 75%, and in 2018. will increase to 79%.

Without special training And mobile site optimization you are already losing hundreds and thousands of target visitors - clients who capable of making a profit.

The percentage of mobile users for different market niches and segments varies, but has a general upward trend.

• How to find out if you need to order mobile optimization site right now?
• How to independently check the mobile-friendly properties and indicators of a web project?
• How ready is your website/store to receive mobile traffic?

Mobile website optimization: 5 free tests

Swipe self-check your online store, sales website or landing page, to determine:

1. Do you need mobile optimization right now?
2. How convenient is it for your mobile clients?
3. What errors does your site hide?

Mobile website optimization is included in our standard range of services.

We simultaneously work with desktop and mobile (adaptive) versions in order to maximize the promotion of a website or online store in the TOP 10 and bring customers to you.

The degree of optimization of a mobile site is displayed in 2 parameters:

• Mobile Friendless (friendliness, usability - 96/100)
• Mobile Speed ​​(speed - 53/100)

In the example above, the tested site 100% needs mobile speed optimization. But with adaptability (convenience) everything is fine. The screenshot shows that the project also requires acceleration of the desktop version (Desktop Speed ​​- 66/100).

If the test shows “red” or “yellow” numbers in the report, correct the errors immediately.

Mobile site optimization is needed if your web resource receives more than 10% of mobile traffic in total. Customers are visiting your site from tablets and phones, but how prepared are you for these visits?

You can view the current percentage of mobile traffic in Yandex.Metrica statistics:

Reports -> Standard reports -> Technologies -> Devices

In this quarterly report example, 64.9% total traffic falls on PC (desktop personal computers), and the remaining 35.1% are mobile transitions:

• smartphones - 31.6%
• tablets - 3.5%

If mobile traffic is more than 10%, then mobile site optimization will result in increased sales. But complete absence mobile visits are a problem...

Zero mobile traffic indicates serious errors. Probably your web project:

• did not undergo mobile optimization
• loses mobile clients and profits
• has low competitiveness in mobile search results of Yandex and Google

To assess the growth trends in mobile visits over time and in the future, you need to slightly rebuild the Yandex.Metrica report.

On the same page of the report, select the period - “YEAR” and the display - “Lines” or “Areas”:

In the picture, PC web traffic is decreasing, and there are more clicks from smartphones. If you have a similar picture, order optimization and attract more mobile visitors. Earn money on mobile sales now, before competitors do this.

Please note that competitors do not sleep!

If competitive sites are better prepared for mobile visits, tailored for mobile traffic, convenient and quick to use, you lose customers and money. Even 10% of mobile traffic is a significant commercial value that cannot be neglected.

Mobile website optimization will provide additional potential and a competitive advantage to conquer the mobile segment of the market in your thematic niche.

5. Audit of mobile site optimization

The easiest way to check your web resource for readiness for mobile visits is to order an audit from our company “OPTIMIZER”. In this case you:

• get rid of the hassle of analysis and analytics at the development stage
• save time and money for your business
• get detailed recommendations how to improve a sales website, what to pay attention to

In 2 days, we will thoroughly, comprehensively and professionally check all the parameters of your sales chain, including the mobile version and traffic statistics. We will compile a detailed and step-by-step report with a list of tips from our best web developers.

What does mobile website optimization consist of?

1. Working with keywords

From phones they often enter short (keyboard) or very long ( voice dialing) phrases, and this must be taken into account. Semantic core is being adjusted for the mobile version!

2. Design

Everything unnecessary is removed. Mobile site optimization limits or adapts the viewing area to fit important page elements within small screens. The following are subject to optimization:

• fonts and styles
• blocks and modules
• colors and backgrounds
• structure and navigation
• menus and widgets
• margins and padding

3. Acceleration

Speed mobile internet mobile operators leaves much to be desired. If the site slows down and takes longer than 2-3 seconds to load, visitors will go to competitors. Therefore, it is important to speed up the resource.

4. GEO parameters

Search engines in mobile results for Android platforms and iOS take into account geolocation and show users the nearest offers in their region. Mobile site optimization is impossible without setting GEO parameters.

At a minimum, you need to add the project to popular GEO services, help services Yandex and local maps like 2GIS.

Shortcomings get in the way normal operation, reduce attendance and income. Removing errors - important stage website optimization for mobile devices and gadgets.

6. Mobile usability

You need to determine how convenient your business project is when opened from mobile devices. There are only 2 solutions for receiving and servicing mobile clients:

− Adaptive layout(design automatically adjusts to different screens gadgets) or...

− Special version website (the mobile version is created on a subdomain and is significantly different from the main resource in simplified functionality, a special menu, and design).

Can you do this work on your own without professional help? How much longer will you lose mobile clients and market share? Why don’t you correct the situation right now and order mobile site optimization?

After all, it is not very expensive, and all expenses will pay off in the next 2-3 months. Press the button and go to high sales!