Stop making regular sites. Adaptive is not scary

    How many times have you been unable to find a map with their office on the company’s website? How many times have you clicked on the screen, hoping to get to the link you need? How many times have you cursed website owners for not being able to read the text? And all these problems could have been avoided if the developers had provided an adaptive version of the site.

    Today I want to tell you how to calculate an adaptive website, what is important not to forget, so that later it will not be excruciatingly painful. Information is mainly for managers and their sympathizers.

    If you don’t know what an adaptive website is and work as an Internet project manager, I am truly sorry for you. You are far behind life, immediately run into Google. I will not waste time even on copy-paste from Wikipedia.

    Lyrical digression
    I did not consider a separate mobile version of the site in the article, because I believe that this format was born dead. Devices are growing every year, screen ratios, the number of pixels per inch and so on are changing. A separate mobile version will not withstand all these regional cases or require an unreasonably large budget for support.

    Also, the mobile version is often done on a subdomain, which affects seo badly with the same content, and further development of such a solution causes only headache attacks.

    Why and who needs it?

    You want to get a loyal customer and some money? Then urgently run to customers and sell adaptive. Adaptive is useful for e-commerce, as more and more people fall into the trap of their phones and make purchases from them. Simple companies need an adaptive (corporate site) so that potential customers, employees and just couriers do not have problems finding a phone number and address on your site. And you, my beloved bloggers, need adaptive so that users of mobile devices comfortably read articles in any conditions.

    Not enough selling arguments? Then know that Google lowers websites that are not "mobile friendly". And where Google is, there other search engines will catch up.

    And here we are at the client

    We are sitting with you in the comfortable armchair of our beloved customer’s office, talking about adaptive solutions and waiting for a solution. If you are a rare lucky one, the client says, “You know, I have long wanted to update the site design, and it would not hurt to make it convenient for all users to use it.” At this place, you kiss the client and leave, satisfied to take the estimate.

    If you're out of luck, don't be upset. A client may say, “I like my current site, but adaptive is cool and fun, let's do it.” There is nothing to worry about, the main thing is to inform the client that the site may change a little, as the adaptive must obey some rules, but you, of course, will do everything to make the site like him as before.


    We take into account that you have some kind of basic estimate, according to which you make up the KP for the client. Obviously, the basic estimate depends on the complexity of the project.

    So ...

    How do estimates differ when creating a site from scratch with and without responsive design?

    It all depends on how you calculate the initial estimate. From experience, I can say that a professional frontend developer will spend a little more time on adaptive, the main thing is to properly build his work. If you take my experience, then in the basic estimate there were such changes:

    • In designing time increased by 30%. This completely covered the time to create an adaptive prototype.
    • Added the line "Description of the behavior of active elements on gadgets - 3 hours";
    • In layout, the time of each layout increased by 1.5 times + risks were adjusted;
    • Layout testing also increased 1.5 times + risks were adjusted;
    • Layout debugging increased 2 times.

    As you can see, the estimate has grown, but not by much. I think that it will not be difficult for you to explain to the client why the price increase occurred.

    Everything is pretty clear with the site from scratch, but what if the client does not want to change a large version of the site?

    • First, keep calm;
    • Secondly, explain to the client that the technological process will be from scratch, since the layout needs to be completely redone;
    • Thirdly, if the client is very picky, then you need to explain that the big version will change a bit, since it will need to lead to a new grid.

    Now back to the estimate for such a project.

    I have already said that you will have to go through almost the entire technological process, which is the same as when creating a site from scratch. The estimate is highly dependent on which way of adaptation you decide to go. On average in a hospital, estimates change as follows:

    • The designer should make a prototype, taking into account the structure of the current site, and build the blocks so that the logic does not break during the rebuild. Feel free to increase the time 2 times from the base estimate. Remember, the designer here does the most crucial job.
    • Designer. Here you can put the design of two permissions of one page in the budget, but then it will be difficult to approve, and it’s not very professional :) I recommend laying the designer’s work on tasks such as “Drawing icons in SVG” (you use it, right? 21 century in the yard), “Drawing additional elements of the site” (for example: the appearance of the gallery for phones, menus, tooltips, etc.).
    • In the layout and further everything is as in the project “from scratch” (see above).

    Development process

    Adaptive makes some changes to the site development process.

    Most importantly, the designer, designer, and frontend developer agree on the project grid at the very beginning. Otherwise, it will be painfully painstakingly redo everything. For sites in which the design of a large version is already ready, I advise you to use 24 columns, since it will be much easier to pull the current site under the grid.


    As I said above, the designer must make an adaptive prototype. We didn’t have any problems with this, we use Axure RP in our work, it allows you to do several layouts. The designer must also decide what the user will see at a resolution of 1024.

    Problem 1024
    There are still users who are sitting with monitors of 1024 px in width. Agree, showing them the version for tablets (for example, the iPad in the horizontal position has 1024 px) is somehow illogical. In theory, such users should see the version for the PC. But then you decide.

    According to the statistics of the projects that I came across, the percentage of users with a 1024px monitor was negligible, and we simply neglected them.


    If you chose the option of rendering all layouts, the process in the design does not change very much, it just takes much more time. But if you choose partial rendering, then you have to work hard so as not to miss anything. To get started, make a list of page elements that are most often repeated across the site, let's call it the widget page. Be sure to show how the buttons, input fields, form error messages, headers and so on change depending on the screen size, I think you understand. After that, draw a menu for mobile devices to understand exactly how it will look and work. Do not forget about vector icons and other small graphics that need to be removed in the sprite. If you have an e-commerce project, then after this stage you can return to design and make changes to the prototype. So you better understand

    Frontend development

    There are almost no changes. The front-end uses the previously agreed grid and is guided by the principle of “Mobile first”.

    In the task, the executor should receive the following set from you:

    1. Prototype (helps to orient on the behavior of blocks);
    2. Design (widgets and text description of changes when resizing);
    3. Checklist of features to consider.

    Speaking of features, I mean things like:

    1. By tap on the phone number, the person must go to the dialer application;
    2. In inputs, where only numbers can be entered, a numbered keyboard should open;
    3. A mobile user should not suffer and download pictures of 2 megabytes;
    4. If there is functionality that cannot be implemented on mobile platforms, do not forget to make an understandable stub for users;
    5. Pages should pass the Google test adequately ( ).


    The presence of an adaptive site almost does not affect the programming process.

    There are several cases where a programmer will need to be more careful:

    1. There is a case when a large table for smartphones takes the form of a list. Usually this means that the output will be in two different layouts.
    2. It is found that the site menu (burger menu) is an anchor to the bottom of the page, where the items are located. In this case, the programmer will also need to ensure that two layouts are always connected and work the same way.


    Responsive design is easy and not very expensive. By increasing the project budget by an average of 30%, you keep your head in order and do not encounter problems with mobile users in the future.

    I hope that my article has helped you overcome your fears, and you can sell responsive design to customers. I want the sites to be convenient for everyone and everywhere.


    Universal joy will come when we can solve the problem of left-handed people. The problem is far-fetched mainly, but it’s still a pity that there are no tools to determine if the user is left-handed in order to adjust the interface.

    Also popular now: