Today, most people go online through mobile gadgets - tablets, phones, in this regard, website 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. And the search robot 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 make your website mobile friendly.
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. For implementation, CSS3 Media Queries are used. The site design itself does not change.
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 the CSS and HTML;
- one URL – the user does not need to remember several names, there is no need for a redirect (redirect from one address to another), which can complicate the work of a webmaster, and it is easier for a 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 doesn't support the same tasks on mobile as it does on PC. 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 this is a complex structured resource with many sections and subsections, then visitors will hardly like adaptive layout.
- 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 in abundance. 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 turn off the mobile version is another significant drawback. If some element is hidden by such a layout, youthere is nothing you can do to open it, unlike sites where you can turn it off and switch to a regular domain.
However, 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.
Second method - 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 design of the site just looks different. The advantages of this method are obvious:
- user-friendly interface;
- easy to change and edit as 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 there were some drawbacks here too:
- Multiple addresses - desktop and mobile version of the site. How to make the user remember two options? Web masters often prescribe a redirect (redirect) from the desktop version to the mobile version, but at the same time, if this page is in the mobileversion does not exist, 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 get 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.
Third way - RESS 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 targeting a resource into 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 access, 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.
There are, of course, here andits shortcomings, such as complexity in development, the high cost of labor of a large number of programmers, 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 should 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-ups will be cut offbanners, but the page will load quickly and without “lags”.
Principles for 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?
Remove everything 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 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 frommain.
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, not to the left or right.
Unification
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 in each individual cell there is 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.
Listings
By the way, about the 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 one and the samethe same name, and each drop-down list 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.
Autofill
This item is especially relevant for sites that sell something online, and you have to fill out standard forms for 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 purchase process should be made as quick and convenient as possible.
For 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 designing 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. store.
Some statistics
Speaking about the adaptation of the site to mobile devices, one cannot help but resort to statistics to understand how important this process is foronline promotion.
The numbers are as follows. Today, 87% of the population uses gadgets, 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 only a small 5th part of Internet traffic and the e-commerce market is occupied.
Think about these numbers. Does it make sense to adapt your resource? Of course yes. Moreover, while there is so much space in this market, you can carve your own segment in it.
Where you need a mobile version
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.
Can't exist without mobile version:
- news portals, because most of them are viewed from the phone on the way to work or school;
- 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, navigational sites, etc., where people go when they are looking for something;
- online stores - 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 theactive growth and development, therefore, striving for leadership in the market, 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 Android or Ios website 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 redirecting to it, using free templates, or creating a mobile application that will make it easier for the user to enter and be on the page.
This approach will not only help maintain the loy alty of existing customers, but will also provide an opportunity to attract new visitors.
