Responsive layout technology: how does app adapt to different sizes of devices

In recent years, large screen mobile phone, Android pad, iPad, folding screen mobile phone, car large screen and other large-size devices have developed rapidly. In particular, in the second quarter of 2020, China’s tablet Market shipped 6.61 million units, a year-on-year increase of 17.7%. Apple’s iPad market share accounted for 41.8%, and Huawei’s tablet market share accounted for 37.1%. < p > < p > Android system runs on more and more devices of different sizes. How to adapt the mobile app developed to different sizes is a pain point encountered by Android developers. At the same time, Apple also recommends the development of a universal version for mobile phones and iPad, which supports many new features of the iPad, such as side pull and split screen use. Based on the above background, we have launched the Youku app, which adapts to the display effect under different screen sizes. The most famous sentence describing the response is “content is like water”, which is translated into Chinese as “if the screen is regarded as a container, then the content flows like water”. < / P > < p > responsive is to develop an app based on the same set of code, which can be compatible with the display of multi size and multi terminal devices, can dynamically adjust the layout of the page and container, make full use of the size of the current screen, display more content for users, provide better browsing experience, improve the development efficiency of app, accelerate the iteration speed, and ensure the multi terminal business Synchronous development. < / P > < p > in order to obtain good display effect on terminals with different sizes of screens, the traditional application adaptation scheme is to develop multiple apps for different sizes of terminal devices. For example, many manufacturers will launch HD version for pad. The responsive app can display adaptively according to the specific physical size of the screen. It only needs to develop a set of code, which can be compatible with multiple sizes of terminals, and does not need to develop a separate HD version. < / P > < p > apps of different terminals, developed by different vertical teams, will bring different background systems and client-side technical solutions, and the front-end and rear-end technical capabilities will be differentiated. Responsive is that the same app runs on different sizes of equipment, uses a unified background system, develops at one time, and takes effect at multiple terminals. < / P > < p > responsive uses a set of interface adaptive layout scheme, horizontally pull through the page and container layout adaptation rules, which improves the display efficiency of the screen, and is more adaptable to different resolution devices to maximize the user’s operating experience. A set of design rules can adapt to different sizes, so as to keep constant and adapt to changes, which greatly saves the cost of design. < / P > < p > the responsive app keeps the same release rhythm on multiple terminals. During the iteration process, the business side will consider different usage scenarios of the multi terminal, and the business characteristics can be promoted synchronously in the multi terminal. < / P > < p > different terminals often have different operation systems. There may be multiple vertical operation teams, and one operation action needs to be operated multiple times. Based on the same client, background and operation system, the operation converges to a team, and multiple terminals take effect simultaneously. < / P > < p > how to effectively use the size of the screen in different sizes and resolutions? The simplest understanding is to display more content on a large screen. This requires the overall consideration of all sizes of the screen in the design side, pull through the design rules of different width to height ratio, dynamically adjust the layout of visible elements, and achieve the best display effect on different sizes of equipment. < / P > < p > 4) page margin is represented by physical size DP. Ensure that the physical size of the left and right margins and spacing remain unchanged on different devices, and the content should be adaptive; < / P > < p > 7) if the adaptation cost is too high or cannot be adapted under the multi-dimensional response adaptation, the design & Product & development needs to reach an agreement based on the consideration of experience, business and implementation cost, and complete the adaptation in a low-cost and non-destructive way. < / P > < p > 1) Stretch layout, content elements within the relative width by combining with the display and hiding of the content to carry out the corresponding stretch adaptation, such as top navigation and bottom navigation; < / P > < p > 7) column layout, page structure changes, according to the screen width of 60% left and 40% right display. In Youku video, the column layout is mainly used for the display of playing pages. The width of 60% on the left provides a good playing experience, and the width of 40% on the right is convenient for users to operate and recommend relevant video content and comments. < / P > < p > the core of responsive is to pull through the adaptation rules of multiple terminals, and develop a set of interfaces. An app is compatible with the display of Multi Size terminal devices, and can be based on the user’s behavior and settings The page layout and container size are adjusted accordingly. Therefore, the responsive SDK provides some basic capabilities, such as responsive state management, horizontal and vertical screen switching, container column number conversion rules, container size adaptation rules, page width and height acquisition method, and responsive basic controls. The service side only needs to access the responsive SDK, which can solve the adaptation problem in different sizes conveniently and quickly. < / P > < p > from the perspective of structure, responsive SDK, responsive page layout, and responsive container layout cooperate to complete. On the basis of these, it supports many business scenarios such as home page, channel page, broadcast page, member page, search and personal center. < / P > < p > how to manage responsive state on Android and IOS? How to get the page width and height under split screen? How to solve the page layout and component container layout under multi size and multi terminal? Please refer to the following two articles for details: < / P > < p > after the preliminary technical research, we have determined the adaptation scheme of Android, IOS, fluent, weex, H5 and other technology stacks, and completed the initial responsive adaptation and effect demonstration by taking the home page, channel page and broadcast page as the entry point. After verifying the feasibility of the adaptation scheme, it is decided to implement in all core business scenarios of Youku. In order to promote the smooth progress of the project, we gathered the technology, product, design and testing students of relevant core business scenarios to kick off the project, introduce the background and value of the project, and clarify the specific work and rhythm of the relevant business teams. After one month’s efforts, all students successfully launched the project in all core scenarios. < / P > < p > the specific core business scenarios involved in the transformation include: home page, channel page, broadcast page, search, member, member transaction, dynamic, personal center, secondary page, interaction, comment, etc. the adaptation effect of some scenarios is as follows: < / P > < p > the responsive business transformation involves many business scenarios and technology stacks. How to ensure all the business scenarios and technology stacks in the actual adaptation process The business scenarios and technology stack can be adapted with low cost and high efficiency, which is the key of responsive landing. So what specific work has the business side done in the adaptation process? How to solve the response transformation of multi technology stack? How to ensure the user experience after responsive adaptation? Because Youku has many business scenarios, the distribution and consumption scenarios are the most typical and important. < p > < p > Youku’s responsive matching test is facing great challenges, which not only ensures the adaptation effect on different sizes, but also ensures the integrity of the business. This requires functional testing, stability testing, performance testing and compatibility testing. Skip to content