In the initial phase of designing the user experience, Typeform focused on visitors filling out the form using only a keyboard. Once this task was solved perfectly, it was time to refine the interface for mobile devices with touch screens.
It would seem that from the very beginning it was necessary to develop an adaptive design suitable for displays of any size: theoretically, this solution would save effort and time - the same code would allow the same user interfaces to be displayed on widescreen monitors and on mobile gadget displays.
In practice, things weren't quite so smooth: after a series of philippines phone number data experiments displaying the same UI on a mobile device and a desktop, David discovered that "responsive design" works, but with noticeable limitations.
There were two problems:
The entire lead form must be rendered at once. Resource-intensive fast UI rendering, however, can degrade the performance of a device with limited RAM, especially if the form contains a lot of multimedia content.
Inefficient use of limited display space by displaying unnecessary interface elements.
The goal of using responsive design is to display the same content and provide the same user experience regardless of the type of end device. The important point: responsive design is based on universal optimized code, the developer does not need to write a separate “mobile” version of the landing page or application. In the case of Typeform, this method did not work.
The basic ("desktop") solution used automatic scrolling and page turning; rendering these operations required powerful hardware, which the average smartphone could not have by default. It was necessary to design a "mobile" UI that saved display space and RAM - without scrolling form lines.
The final solution looks like this: the UI code received by the browser depends on the type of device used. On a PC with a large display, the form is displayed with the previous and next questions “shaded”, while on a smartphone you can only see the current question, which saves screen space. “Mobile” users can switch between questions using a swipe, which allows them to navigate the lead form without first showing it. And this is just one of the many tricks that the Typeform team has resorted to in order to make their forms work well on desktop computers and mobile gadgets.