How to create a mobile version. Theme Options: Icons Bookmark

Doubt whether it is worth investing in the development of a mobile application? You can make it yourself and absolutely free. You may end up with a test variant that can be used to conveniently evaluate the effectiveness of a mobile strategy. And if you try, you will make a decent mobile application that will become the main tool for online interaction with smartphone and tablet owners.

Is it worth making your own mobile app?

Costs. If you don't believe me, here are some facts:

• According to Flurry Analytics and comScore, smartphone and tablet owners use the browser for only 14% of the total time spent on the device. And 86% of their time is spent on different applications.
• Installed application- your direct communication channel with the consumer. Just think: you do not need to spend money on advertising or wait for a person to find you using Yandex. It remains to support the functionality that the user needs and provide him with relevant content.
• The number of purchases made using tablets and smartphones is growing both on the Internet in general and in RuNet. According to the marketing agency Criteo, already in 2016 more than half of online transactions in RuNet will be made using mobile devices.

If you like, the app is mobile browser, which opens only your site. In which case would a user install such an Internet browser? Only if he is interested in your product or information. Therefore, remember: the client who installed the application is a loyal and ready to buy representative of the target audience.

In that case, is it worth taking the risk of offering DIY apps to loyal customers, rather than custom-made apps for Android and iOS made by professionals? Let's figure it out.

When you can create an application yourself

Do you remember what website visitors need? They come from the content or functionality of the resource. People want to get information, buy something, view and comment on photos of friends, and so on. Users mobile applications need the same. They are looking for information or make any transactions.

Do you remember when a business can make a website on its own? It’s right when there is no money yet for cooperation with professionals, but there is time and desire to deal with WordPress or Joomla. The same is true for applications. Self-created programs for iOS and Android can be roughly compared with sites on open source "engines".

You don't need to register to get started. Click the Create Now button on home page or select the Create App menu on the right upper corner on any page of the service.

Choose the appropriate application template. If we are talking about a content project, you may be interested in the following options:

• Manual . This template allows you to make a guide program.
• Blog. The application will help the audience of your blog to read new notes from the screen of a smartphone or tablet.
• website. The template converts the site into an application.
• Pages. With this template, you can convert any content into an application with simple functionality.
• News. The template allows you to create an industry or regional news aggregator application.
• Page . The template converts offline content into the application, for example, an e-book.
• VK Page and Facebook Page. Create an application that allows you to follow the updates of open groups on Vkontakte and Facebook.
• YouTube. Use the template to promote your YouTube channel.

How to create a blog app

Use the Blog template. In the corresponding field, enter the URL of the blog or RSS feed. Choose a color for the note title.

Specify the name of the application.

Add a description.

Choose a standard icon or add a custom icon. A suitable image size is 512 by 512 pixels.

For creating boot file click the Create App button. After that, you need to register in the system. Confirm registration and go to your personal account. Here you can install the application on your mobile device, publish it in Google Play and Amazon App Store. The system also offers a monetization option. If you use this feature, ads will be displayed in the app.

Check how the application works on your mobile device. On a tablet, the program should display a list of blog posts in the header and announcement format.

AT personal account With AppsGeyser, you can track the number of installs, create push notifications, publish the app in stores, monetize the program with ads, and edit the app.

Use the editor to add text, images, videos or links. To add a photo to the program, upload it to Imgur hosting and paste the link in the appropriate field.

After editing the content, specify the name of the application, add a description and an icon. Click the Create App button. After creating the boot file, install it on your mobile device and check if it works.

Please note that most mobile devices By default, it blocks the installation of applications from unknown sources. If a user downloads a program from your site or from an app builder site, they will see a security warning when they try to install it. Some customers will probably refuse to install the program.

8 constructors similar to AppsGeyser

If the AppsGeyser universal constructor does not suit you, pay attention to similar services:

• Apps Maker Store. Using the service, you can create applications different types: from programs for Ecommerce to solutions for content projects. The constructor makes applications for iOS and Android. The service interface is Russified. For beginners, there is an informative guide to using the constructor. The service is paid.
. Free constructor Android Applications. You can publish your programs on Google Play and monetize with ads.
• Appery. Paid constructor for creating universal applications. You can evaluate its functionality by taking advantage of the free trial period of access.
• good barber. With this service, you can develop Android and iOS applications. The constructor is paid, the cost of using it is 16 USD per month.

Most of the offered services have an English-language interface. If you are not comfortable working with constructors on English language, choose platforms with Russified content.

Application constructors: a stone ax or a thin modern tool?

Don't go from one extreme to another. With the help of the proposed services, it is really possible to create workable functional applications. The resulting programs can be used to solve various problems: from providing online trading to distributing content and educating the audience. Applications created in the constructor can be published on Google Play and the App Store, edited, monetized through advertising or paid installs.

Remember that it's not enough to just create an application. It is necessary to invest a lot of effort in its promotion. Contact us if you want to entrust this work to professionals who know exactly what needs to be done to attract new users.

Do not overestimate the services offered. Their obvious drawback is the stereotype. It is about both design and functionality of programs. In addition, access to platforms with decent functionality is paid. What is better: to pay once for the work of developers or to pay the owners of the constructor for many years? Count yourself.

And one more thing: if you do not have time to independently create a mobile application, please contact our company. We develop mobile applications and .

Contact us Let's discuss? Book a free consultation

Advantages and disadvantages of each of them. In this article, we will take a closer look at how to make a mobile version of a site on a subdomain with a redirect, and demonstrate the correct operation of the redirect, as well as the transition of mobile users to the main version of the site.

The basis of the method is that the server determines the device of the user who has visited the site, and then redirects to the desired web page using an HTTP redirect and a Vary HTTP header. The main site will have a domain top level(site.ru), mobile subdomain (m.site.ru).

Advantages and disadvantages of the mobile version of the site on a subdomain

The method is extremely time consuming, since when editing the content of one web page, you need to make changes to both documents at once, of course, if you do not use a common database. However, it is worth noting that the structure of the page and HTML markup on one or another version can be completely different. Thus, flexible configuration and arrangement of elements for the end user is achieved.

Another important factor is that, unlike adaptive layout, we will be able to optimize the mobile site as it should, eliminating unnecessary JS scripts and other data from there.

To avoid duplicate content and negative impact in SERPs search engines, developers will have to tweak the meta tags. To create a redirect of users to the desired page, it is also necessary to supplement the pages with additional code.

Stages of creating a mobile version of a site on a subdomain

Many developers get lost at the redirect planning stage. Indeed, quite a lot has been written about this on the net, but not every method is able to correctly identify all mobile devices.

Redirect from the main version of the site

At the very top of the main site document, insert:

AT mobile version it is enough to specify directly before the tag :

Link to go to the full site

Previously, we already laid down a rule so that we would not be sent back, so switching to full version site looks very simple:

">Full version of the site

Meta tags

On the main domain, you should indicate that the page has a mobile version:

">

The canonical tag is indicated on the subdomain, however, Yandex writes that it ignores this rule, but it will not affect the ranking of the site in any way. Paste into the mobile version:

" />

Today, most people go online through mobile gadgets - tablets, phones, in this regard, site optimization is also reaching a new level. If a user comes in and sees that the site is not optimized for mobile devices: the image cannot be viewed, the buttons have moved out, the fonts are small and unreadable, the design is skewed - 99 out of 100% that he will exit and start looking for another more convenient one. A will check the box that the resource is irrelevant, that is, it does not match the search query. Therefore, the design of the page must be adapted to various mobile devices. What is a mobile version of the site, how to make it, and what is the best way to apply it? Read more in this article.

So, there are four key ways to adapt the site for the mobile version.

Method One - Responsive Design

Responsive templates change the site image depending on the screen size. As a rule, they are set to standard 1600, 1500, 1280, 1100, 1024 and 980 pixels. Queries are used for implementation. It does not change itself.

The advantages of this method include:

• convenient development, since the structure itself adapts to the screen parameters, and any update does not require design development from scratch, it is enough to tweak CSS and HTML;
• one URL address - the user does not need to remember several names, there is no need to redirect (redirect from one address to another), which can complicate the work of the webmaster, and it is easier for the search engine to sort and rank a resource with a single address.

Of course, adaptive templates have their drawbacks, which, by the way, are more than advantages. Nevertheless, many developers adhere to this concept, for example, Google Corporation, whose mobile version of the site has an adaptive design. So, disadvantages:

• Responsive design does not support the same tasks on mobile as it does on desktop. If this is, for example, a mobile version of a bank's website, where information about the exchange rate or the nearest ATMs is more likely to be important to the user, then this design is quite enough. But if it is a complex structured resource with many sections and subsections, then visitors are unlikely to like it.
• Slow loading turns a favorite site into a hateful one. This is especially true for resources where animations, videos, pop-ups and other active elements are abundant. Due to the high weight, the page will simply “slow down”, the user will get angry and leave, and the site’s search positions will fall.
• The inability to disable the mobile version is another significant drawback. If some element is hidden by such a layout, there is nothing you can do to open it, unlike sites where you can turn it off and switch to a regular domain.

Nevertheless, such a mobile version of the site quickly, without special skills and costs, allows you to adapt the resource to any gadgets. But, in view of the listed shortcomings, it will suit small, simple resources with a minimum of information and multimedia, without complex navigation and animation. For a complex site, 2 other methods are suitable.

Method two - a separate version of the site

This method is very common and is often successful in making the site more readable on a mobile device. Its essence is to create a separate version of the page, drawn for the application and located on a separate URL or subdomain, for example, m.vk.com. At the same time, the main functionality is preserved, the site design just looks different. The advantages of this method are obvious:

• user-friendly interface;
• it is easy to change and make edits, since the version exists separately from the main resource;
• due to the low weight, a separate version of the site works much faster than an adaptive template;
• most often it is possible to go to the main version of the page from the mobile.

But even here it was not without drawbacks:

• Several addresses - desktop and mobile version of the site. How to make the user remember two options? Web masters often prescribe from the desktop version to the mobile version, but if this page does not exist in the mobile version, the user will receive an error. Here, difficulties arise with search engines, which find it difficult to rank 2 identical resources, and this directly affects promotion.
• The mobile version of the site from a computer, if the user visits it by mistake, will look ridiculous, which can also affect traffic.
• This version is often heavily curtailed, desktop, so the user will receive very limited functionality. But at the same time, if something is missing, the visitor can go to the full version of the page.

In general, a separate mobile site justifies itself and is the most common way to adapt a resource for mobile devices. It is popular with large online stores such as Amazon.

The third way - RES-design

Google search engine actively supports this direction of mobile design. This is the most complex, costly, but effective method to adapt the site to a phone or tablet. It's called RESS. This is resource targeting in a mobile application that can be downloaded for each device separately. For android - with GooglePlay, and for Apple - with iTunes.

Such applications are fast, free, convenient, have the ability to accommodate various types of information, while the phone's memory and Internet traffic are not eaten up like when visiting a site through a browser. They are easy to visit, as the link will always be on the screen at hand, and there is no need to enter a complex name in the browser address bar.

Of course, there are also disadvantages here, such as complexity in development, high labor costs for a large number of programmers, and the need to make several layout options. Sometimes the mobile device is not recognized by the application. Regular technical support, correction of shortcomings is necessary. Nevertheless, this option is considered the best of the three proposed due to its productive, uninterrupted operation.

The cheapest way to make a mobile website

All of the above methods involve, albeit not always long and complicated, but still paid work of a webmaster. If you do not see an urgent need for such development, a simple and free mobile version of the site will suit you. What is the easiest way to make it?

Download special templates (plugins) for responsive design. For example, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile and others. They will help to display the site more correctly on the phone, while you will receive a few tips on what needs to be corrected to better adapt the page to the mobile version.

Of course, this method is hardly suitable for serious resources. Rather, this free feature is intended for small and simple sites, blogs, news feeds. Do not forget that the Google search engine, as well as Yandex, today makes serious demands on mobile versions, so there is a huge chance to lower your positions using this method.

With this method, most likely, ads and pop-up banners will be cut off, but the page will load quickly and without “lags”.

Principles of creating mobile versions

It doesn't matter if the mobile version of the site was created for free or with the help of a staff of webmasters, it was made on the RESS system or using an adaptive template. Most importantly, for its effective operation, it is required to adhere to several extremely important principles. So, what should be the mobile version of the site? How to make it productive, efficient and productive?

We remove all unnecessary

Minimalism is what the developer of the mobile version of the site should strive for. Imagine how hard it is to perceive information that is replete with colors, buttons, banners, and which you have to endlessly scroll through in search of the right material. Mobile design should be simple and clean. Choose 2-3 colors to divide the space (for example, branded). Better if one of them is white. Divide the space of a small screen into understandable and readable zones. Virtual keys should be visible so that the user clearly knows where to press and sees - here is the product, here is the form for filling in the data, here is the information on delivery and payment.

All the additional options that would be useful in the desktop version and make life easier for the user will only bring difficulties here. Leave only the most important elements. Animation, advertising banners, multimedia, most likely, will only slow down the work of the site or application and distract from the main thing.

alignment

The issue of alignment is no less acute, because if done incorrectly, the user will only get the endings of important words. Left-aligned and vertical alignment is generally accepted. Imagine yourself scrolling through the news feed on your phone. You do it from top to bottom, but not to the left or right.

An association

When there is no possibility of a long chain of transitions, try to combine several steps into one. For example, the site requires data entry in several stages - a name, then an address, where each individual cell contains a separate house, street, apartment, etc. In order not to force the user to try to hit many small cells, ask him to fill in only 2 - name and address.

And disconnection

Sometimes, on the contrary, it is required to separate too much information. For example, in the drop-down menu you have a list of more than 80 cities where delivery is carried out. Group them by region so that the user does not have to scroll through this huge list. When he hover over the regional center or region, another list of cities will drop out.

Lists

By the way, about lists. There are two of them - fixed in alphabetical or other order and with substitution. Their choice depends on what will be listed.

Fixed is useful if the user knows exactly what they are looking for. For example, city, number or date. The second option is suitable for long complex names or for cases where there are many variations of the same name, and each brings the user one step closer to the goal. The auto-substitution option is more often used when a visitor needs help. For example, a knitting site offers to buy knitting needles. The user enters the search query “Metal knitting needles”, and in the tooltip he sees “Knitting needles 5 mm”, “Knitting needles 4.5 mm”, etc.

Autocomplete

This point is especially true for sites where something is sold online, and you have to fill out standard forms of payment, delivery, etc. If a person makes a purchase from a phone, then most likely he does not have time to get to a computer, which means that the process purchases should be made as quickly and conveniently as possible.

To do this, the forms may contain already filled data, you can resort to the most popular answers. For example, insert today's date, cash payment method, city if you work in the same region. They can be changed, but if you hit the target, the user's time will be saved.

Everything is read, everything is viewed

When creating the design of the mobile version of the site, remember that everyone's phones are different, and so is their eyesight. Perhaps your site will be viewed from a small screen, so the fonts should be simple and readable, the buttons should be large enough so that they can be clicked without being taken to another page, and the images should open separately, large, especially when it comes to the Internet. -shop.

Some statistics

Speaking about the adaptation of the site to mobile devices, one cannot help but resort to statistics in order to understand how important this process is for online promotion.

The numbers are as follows. Today, gadgets are used by 87% of the population, apparently, except for the smallest children and some elderly people. Economists predict mobile commerce will grow 100 times over the next 5 years. At the same time, only 21% of sites are adapted to work with mobile devices. This means that Internet traffic and the e-commerce market are only occupied by a small 5th part.

Think about these numbers. Does it make sense to adapt your resource? Of course yes. Moreover, while there is so much free space in this market, you can carve out your own segment in it.

Where is the mobile version needed?

Using the mobile version makes sense for any platform that aims to get a high ranking. After all, this is a direct impact on the user, creating comfortable conditions for him to stay on your site.

Without a mobile version cannot exist:

• news portals, since most of them are viewed from the phone on the way to work or study;
• social networks - for the same reason, plus there is an online communication factor, which means that a convenient, understandable chat should be created for this;
• reference, sites with navigation, etc., where people go when they are looking for something;
• online shopping - an opportunity to attract customers who do not waste time shopping, but buy everything via the mobile Internet.

Instead of a conclusion

Today, mobile technologies are in the stage of active growth and development, therefore, striving for market leadership, any company must ensure that its Internet resource meets the requirements. Due to the growing demands of the user, sites have to be constantly upgraded and adapted to various devices. It is clear that if a person is inconvenient to be on a particular resource, he cannot get information about a product or price there, place an order, find out about delivery, then he will find the site where all this will become possible. Therefore, in order to win the competition, it is important to have a flexible, convenient, functional and interesting resource.

The mobile version of the site Android or Ios will help to do this. To do this, you need to choose one of the above redesign methods - an adaptive template, creating a new site on a subdomain and going to it by redirecting, using free templates, or creating a mobile application that will make it easier for the user to enter and be on the page.

Starting in the summer of 2015, Google will change its work in such a way that the advantage in search results will be given to those sites that have a mobile version. This, and the realization that more and more people are using smartphones to browse the web, prompted me to develop a mobile version of my site.
Then I will tell you about my experience, and how you can do it yourself.

Obviously, the main feature when developing a site for mobile devices is a much smaller screen size compared to a full-fledged monitor of a computer, laptop or tablet. By and large, the tablet is also a mobile device, but its screen sizes are such that in most cases the full version of the resource looks great on it. Therefore, under the mobile version, further I will mean the version for the phone or, more correctly, the smartphone.

A bit of theory

Most modern sites operate on the basis of one or another content management system (CMS) or a simple web engine. For the appearance of the site in the web engine, i.e. then how the visitors of the resource see it respond to the so-called templates.
A template is, as a rule, a set of files that defines the appearance of a site. Each engine uses its own templates, but they all have something in common - this is a file (s) with CSS style sheets and a file (s) responsible for page layout, it can be PHP, ASP, etc. More exotic options are also possible , but in any case, the output of the web engine will be CSS and HTML and possibly something else. Well, I digress.

One of the options to make sure that the site looks equally good on all devices is to use several templates for different types of devices.
For example, there may be two:

• The first is for a full-fledged computer, laptop, tablet, in other words, for a device with a large screen.
• The second is for a smartphone, or other device whose screen is much smaller.

Depending on which device the visitor came from, the web engine will use one or another template to form the appearance of the page, its design, the arrangement of elements and content.
It is extremely important to understand here that it is impossible to make one template that would look equally good on both the phone and the laptop. To some extent, this will be a compromise, and by no means the best.

It is also possible to use three or even more templates, for example, from a separate version of the site for a tablet, but this is a slightly different story, which I will not consider here.
Let's go back to the template for the mobile version.

By and large, such a template is a lightweight version of the full one, differing in design, size and arrangement of elements.
This simplification is primarily due to the fact that the screen resolution of modern smartphones, as a rule, starts from 800x480 pixels with a screen size of about 4"" inches.
This means that approximately this size should be calculated during development.

Low screen resolution means that large elements, and elements located in a row, simply will not fit horizontally.

This is especially true if the device itself is located horizontally.

At the same time, on a smartphone, the pixel density of the screen is 2-3 times higher than on a computer or laptop monitor, which leads to the fact that the usual font size will look very small. In order to see something, you will have to use the zoom, constantly zooming in and out of this or that area of ​​the page, which is extremely inconvenient.
On this theory, more than enough, now about everything in more detail.

Setting up the web engine

As it was already written earlier, the content management system is responsible for choosing one or another template.
Some web engines are initially able to determine from which device the visitor entered and include one or another template, others will need to install the appropriate extensions for this.

For example, I will show you the Mobile Detector setup by BlackRed Designs, it has a minimum of settings, and all you need to do after installing it is to publish it and select a template that will be used to display pages on mobile devices.

Obviously, the template for the mobile version should be different from the main one.
In my case, I made a copy of the main template, renamed it, and then started making changes. This approach made it possible to make the mobile version as close as possible in style to the main one, and at the same time save a lot of time.
Next, I will talk in detail about the key changes that have been made.

Create a template

Creating a template completely depends on the web engine used, and it is not possible to tell about everything within the framework of this material. However, there are some common things that are common to all.

Meta tags and scaling

One of the common things that must be present regardless of the engine used is a special meta tag - viewport.

This math tag must be located in the section head next to the rest of the meta tags and look something like this:

The meta tag tells search engines and mobile devices that they have a mobile version of the site in front of them, and also sets the initial scale of the page.

Remember, at the very beginning, I wrote about how to consider this or that element on the page on non-optimized sites, you often have to use zoom, zooming in and out of certain sections of the page? So, the parameter initial scale=1.0 just sets the initial page scaling to 100%.
If you do not specify the initial scale for the mobile device, then it can set it independently depending on the device system, such as Android, iOS, Windows Phone, as well as the browser used, such as Firefox, Chrome, Safari, Opera, etc.
Better to avoid it in the first place. For those who do not find the scale convenient, they will be able to scale it at will, with the appropriate gesture.

Site boundaries

If for the full version of the site the template uses indents from the browser borders, for example, in order to highlight the content:

body (
margin-top: 20px;
margin-left:100px;
margin-right:100px;
border: 1px solid #dfdfdf;
}

Then for the mobile version this is already a loss of an already small usable space, which is better to use 100%;

body (
width:100%;
}

Hat

As a rule, there are no fundamental differences between the mobile and full versions in the header, and here you just need to remember that all elements fit on a smartphone and look appropriate.
It may be necessary to slightly change the placement of elements, such as in my case to move the search bar from the right edge:

Header-search
{
text-align:right;
float:right;
}

One level down and position left:

Header-search
{
margin-top:5px;
text-align:left;
}

Menu

On my site, in the standard version, the menu items are arranged horizontally, one after the other.

Topmenu ul li
{
display: inline;
}

Topmenu li a
{
display:block;
float: left;
}

Obviously, all menu items following one after another will not fit on all smartphones, especially when it is vertically oriented. Therefore, it is more correct to arrange the menu vertically as well.

Topmenu ul li (
display:block;
}

Topmenu li a (
display:block;
}

Font

As a rule, a 12-13px font is used for the full version of the site:

p, li, dt, dd, legend
{
font-size: 13px;
}

But, as it was already written earlier, the phone has a much higher pixel density, it is obvious that the font size should also be larger, otherwise the text will be too small and hard to read. Therefore, it is recommended to make the main font 16 pixels:

p, li, dt, dd, legend
{
font-size: 16px;
}

From the same considerations, the font size is selected for the rest of the text elements, for example:

h1(
font-size: 24px;
}

h2 (
font-size: 22px;
font-weight: normal
}

h3(
font-size: 17px;
margin-top: 5px;
margin-bottom:0px;
}

h4(
font-size: 16px;
}

Images

In the content of sites, along with textual information, images are constantly found. Here I do not mean design elements, but images that are found in content, in the content of posts, articles, etc.
As I wrote earlier, the screen resolution of modern smartphones starts at 800x480 pixels. This means that the size of the image should not exceed 480 pixels, since otherwise it will not fit on the screen and scaling will be required.

On the other hand, for a high-quality picture, 480 pixels in the full version of the site is quite small.
As a small trick, a construction of the form can serve:

img
{
max-width:100%;
height:auto;
}

This entry says that the image width cannot be more than 100%, i.e. more than the screen width, for example 480px. The second entry allows you to keep the proportions of the image.
Ideally, for the full and mobile versions, it is desirable to use different image sizes, but this is no longer solved by means of one template and requires more serious means.

tables

Along with textual and graphical information, you can often find tables on websites. And if they contain quite a lot of information, or the cells contain large blocks or images, then not all of them can fit on the screen.
In some cases it may be useful to write something like:

table tr td
{
display:block;
}

This design makes each cell a block element, thereby, as it were, expanding the rows of the table vertically. This is not the best solution, but in some cases it gives a good result.
Regarding tables, it all depends on the specific case, and there is perhaps no universal solution.

Now is the time to talk about how to check the results of your work, because it is simply not possible to develop a template without seeing how it will be displayed on a smartphone.

Checking the result, testing

Obviously, in the process of developing a template, it is best to check how it looks directly on the phone. Preferably on several different, running different systems: Android, iOS, Windows Phone, as well as on several browsers Firefox, Chrome, Safari, Opera, etc. This is the only way to be completely sure that everything looks as intended.

It is clear that keeping several phones at hand is not always feasible and not very convenient. For this, you can use emulators for mobile devices, browsers, etc.

To check in the iOS environment, for iPhone and iPod, there is a special development environment from Apple - Xcode. With its help, you can emulate almost any apple device.

Unfortunately, Xcode only works under Mac OS, and practically the only way to run it on a PC is to create a virtual machine.

A rather interesting verification tool is the Firefox OS Simulator, which is an add-on to the Firefox browser. You can download it at:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/

In fact, a full-fledged device under Firefox OS is emulated here.

Also, in the process of developing a template, it is quite useful to pass off your regular browser as a mobile one. For FireFox, this is done using the User Agent Switcher add-on, which can be installed from here:
https://addons.mozilla.org/en/firefox/addon/user-agent-switcher/

In this case, you get the opportunity to use the rather powerful web development tools built into FireFox itself.

Of course, there are similar tools in other browsers, but these are purely individual preferences.

Among other things, the Google search engine should also check the resource for its "mobility", because only in this case the site will gain an advantage over others. You can check whether everything is liked by the search engine at:
https://www.google.com/webmasters/tools/mobile-friendly/

To be completely sure that Google is happy with everything, it is advisable to check all the pages of the site. Or view the "Mobile Viewability" item in the webmaster tool at:
http://www.google.com/webmasters/

Conclusion

In my article, I tried not to focus on a specific web engine, and talked about general approaches to developing and testing a mobile version of a site. It is clear that in addition to the main points I described earlier, there are many others, but it is simply impossible to cover them entirely, especially within the framework of one article. Therefore, if you have any questions, or you need to make a mobile version of the site, leave comments, write through the contacts section and I will always try to help you!

Mobile traffic is growing and occupies, on average, already about 25% of all visits. If earlier the loss of these visitors was insignificant, now it is every 4 or 5 users. I don't think statistics are needed. We are closely and seriously engaged in the development of a new mobile version of the widget. We collected all the experience of previous mistakes and tested the results for weeks. Again, we were developing a mobile widget, not improving our own site. As a result, we have compiled a list of the most deadly mistakes in the mobile version of the site. We went through the mistakes of mobile design and mobile layout. All these mistakes kill the conversion of mobile traffic. And it's time to pay attention to this:

1. Too long forms of capture.

This is a real conversion killer on any website! Mobile versions are especially sensitive to this, since filling out questionnaires on the phone is extremely inconvenient. Get rid of them.
The example shows how competently the guys from Tinkoff Bank acted, who broke a long application "for a loan" into steps. By filling in only 4 fields, the visitor will become a lead, and if he falls off at the second step, then his contacts will remain.

2. The phone number of the company is indicated without +7 or as a picture.

This is just hell! There is a special place in hell for such sites, when instead of 1 click, you need to remember the number and then enter it yourself. Crap! What if I'm driving?

3. Use of Flash on the site or content that cannot be played on mobile.

It is desirable for the mobile version to completely exclude such content. It will not work properly and will cause a lot of difficulties for visitors. The video will not work, the game will not play, and the special animation in the menu will corrode the brain. Apple ios devices do not support Flash animation at all. Delete unnecessary, why complicate viewing.

4. Widgets and pop-ups on the site that are not mobile friendly.

Online consultants, callback widgets, social. sharings, e-mail collectors - these tools will help increase the conversion of the site, but if they are not adapted to mobile traffic, load the site, block content, then most likely they will do more harm than good. Therefore, be sure to check your site on mobile devices after installing a third-party service.

How to properly check the widget and what to pay attention to, see the short video review:

5. Lack of an adapted mobile version. Cross-browser and cross-platform.

What are the benefits of having a mobile version?
Firstly, search engines give preference in issuance. This is how Google marks websites as "Mobile friendly":

Secondly, it is convenient for users to view your site from different devices.
To do this, the mobile version must work properly on all types of mobile devices, including mobile phones and tablets with different screen sizes. Regardless of platform, manufacturer or browser. Yes, it's obvious, but it's still the most important criterion.

There are 3 key site speed issues - size, spacing and widgets. Usually, for a mobile user, no special effects are required on the site, the usual layout of the site without the “bells and whistles” will do. In addition, the screen of a mobile phone is often low resolution, so smaller images can be "shipped" for mobile users (and use a more progressive format, such as WebP).

To solve the distance problem, you need to make sure that the hosting of the site is normally accessible from the networks of the main mobile operators. It would be optimal to place it in a good Moscow (or regional - for regional projects) data center, which claims good connectivity with the networks of mobile operators. Foreign hosting is not very suitable (and has a number of problems with the speed of data transfer from abroad).

For a comprehensive solution to problems with the speed and availability of both a mobile and a regular site, you can use specialized services. For example, Airi.rf

9. Wrong redirect. Lack of transition to the full version of the site.

Naturally, all mobile users should get to the mobile version of the site, but typical redirect errors happen.
For example, how does it happen?

The user searches for a specific product in Yandex and goes to you. The system detects the entry from a mobile phone and redirects to the main page of the mobile version, and not to the right one for the client. You have to re-search for this product on the site or try to go to competitors.

Addition: The mobile version is not always enough, perhaps you have hidden the functions, links that the client needs, or in general, the client is used to the desktop version. Always leave the option to return to the full version of the site.

10. Autocomplete. Enable dialing.

The conversion grows if we reduce the resistance for the client. Each field can be made more convenient to fill out. To do this, we write accordingly:

Add-on for convenience
Few people know that you can bookmark a site on your desktop for quick access. The icon looks like an application and will be pinned to the user's home screen.

How to do it:
Make an icon 180px by 180px (no rounding) and add a tag on the site

I hope these 10 points will help you improve the mobile version of your site and make your customers happy. Some of them may already be known and obvious to you, but it would be wrong not to include them in the list of the most deadly mistakes.

High conversion of your mobile version of the site!