Kontur is developing an ecosystem of products for business. Tasks can come up for an entrepreneur or employee at any moment — on the way to a meeting, while waiting in line at the tax office, or during lunch. Some tasks are simply more convenient to do using smartphones and tablets, such as scanning a QR code, uploading a photo of a document, or reading feedback from a colleague.
Adaptability is the ability of an interface to change depending on the type and size of the device. An adaptive interface is one that:
- works and looks equally well on different devices: computers, tablets, and smartphones;
- maintains a balance between important and secondary information — important elements are always at hand;
- ensures text readability and accessibility of interactive elements: nothing goes beyond the screen boundaries;
preserves the hierarchy of elements and the structure of information presentation.
Responsive layout allows the interface to automatically adapt to different screen sizes. The points at which the interface changes are called breakpoints. To ensure that the interface is displayed correctly on all devices, the designer prepares several layouts: at least two — for desktop and mobile devices. Intermediate layouts are often added for tablets or narrow laptop screens.
Advantages of responsive layout
- No special team of mobile developers is required. The responsive version of the service is created and maintained independently by product teams.
- The interface remains consistent even if the user zooms in on the system or browser.
- The entry threshold is lower: users don’t need to search for the app in the store and install it.
- There is no need to get used to the interface again: the patterns remain familiar.
When to make an adaptive interface
- If some users access the service from mobile devices, this is already a reason to consider an adaptive version.
- If you have a mobile app and mobile devices are an important point of entry. An adaptive version will provide a backup in case something happens to the app.
- If you plan to expand your audience and want to attract users who work from phones and tablets.
- If it is important for users to stay up to date with events on the service and they are willing to check for updates even from their phones.
How to organize work on adaptives
- Collect data. Collect or request statistics on logins from different devices on your service.
- Discuss the details with the team. Consult with front-end developers and testers. There may be technical limitations that could affect the implementation of responsive design. It is also worth considering that after development is complete, the tester may need to increase the number of test cases. Notify the entire team of upcoming changes.
- Define the scope and priorities. Decide which product pages will be responsive and in what order the work will be done. We recommend making at least the home page responsive, as it is the first point of entry. Then you can proceed according to one of the following scenarios:
- If your service does not have a main page, make the start page responsive — this is the page that opens via a direct link or immediately after authorization.
It is important to understand that responsiveness is not a one-time task. It must be integrated into all processes, and you need to think in advance about how to maintain this responsiveness with minimal effort and ensure that it does not deteriorate over time.