We all know that when doing web-related projects, whether it is C-side or B-side, responsive layout is often used. If responsive layout is used, a grid system must be used to ensure the normal execution of responsiveness.

However, whether or not to use grids on mobile terminals HE Tuber and how to use them has become a problem that bothers many people. We will use today’s sharing to explain it.
Why not use grid systems in mobile design
To understand mobile layout and typography design, you must first understand the difference between grid and grid system.

The first is the grid system. From the early Android specifications to Material Design 2, Google has advocated a grid system based on 8dp length and width (later added 4dp).
In short, it is recommended that designers use the hetube grid of this grid system as the standard when formulating the size of components, buttons, icons and other elements, align the edges with the reference lines, and ensure that the size and spacing of elements are multiples of 8.

Although this layout is very simple, it does not meet the national conditions, actual application scenarios and iOS adaptation. The main problem is the latter, because the grid system established with 8 requires the canvas itself to be a multiple of 8 to fit perfectly, such as the 1280*720 length and width of the Android standard canvas 720P.
Among the various Android devices and screen resolutions, many do not meet this condition, not to mention Apple's mobile phones, which are either 375, 390, 393 wide, etc. So this grid system No one is using it.

The grid system is different from the grid system. The grid divides the canvas into a number of grids of the same size and is used to fill the content above the grid. The grid system adds guide lines to the canvas so that the content can be laid out based on the guide lines.

For example, the picture below is also a responsive grid system that appears in Material Design 2.
Its function is similar to the responsive grid on the web page. The width of the grid is variable, and the module will adapt as the grid changes. The specific logic will not be explained here. You can read the sharing related to web responsiveness that I wrote before.

Android proposed this system in the official specification, which is basically the same as Bootstrap's responsive rules and includes the application of breakpoints. The main purpose is to allow the product to use only one set of code to adapt style layout on different terminals and screens.

For example, with so many folding screen phones and Android tablets now, developers only need to apply this system and use a set of codes to achieve adaptation to all devices and specifications.

It’s nice to think about it, right? But if you don’t do foreign projects, especially projects designed only for the Android platform, then this grid system cannot be applied. We will explain the reasons in detail below.

Application problems of grid systems
Why is the grid system difficult to apply in mobile terminal development? There are many factors affecting it. Let’s briefly summarize it:
The iOS system does not come with a grid system
Large screen adaptation cannot simply use responsiveness
Page layout differences within the project are too large
Question 1. The iOS system does not come with a grid system
This is the most fatal, because our main design object in UI design is based on the iOS specification, which is not provided in iOS.

The reason is also very simple. The specifications of iOS devices are very few compared to the Android camp, and there is no such urgent need for responsiveness. The logic of supporting iPad adaptation in the early years was basically abandoned. Officials apparently also found that forcing developers to do responsive design is not as good as running unadapted mobile APPs directly on the iPad or directly developing iPad APPs. The reasons are as follows. illustrate.
Question 2. Large screen adaptation is not suitable for direct use of responsiveness.
If you really understand the responsiveness of web pages, you will know that responsiveness can only be applied to very simple layout structures. If the content of the project is large and complex, then the responsiveness adaptation cost is far greater than directly developing multiple versions. .
In the same way, it is very difficult to adapt a mobile APP directly to the iPad using simple responsive rules. Because the layout designed for mobile phones is based on the interaction habits of mobile phones, and the interaction habits of iPad are different, it will naturally be awkward to use.
At the same time, there will be many very special and fancy component designs in complex projects. It is very difficult to adapt these components using responsive rules. A series of adaptation logic must be considered and a lot of additions must be made in the drawing process. Job Cost.
So why don’t the complex products of major manufacturers use responsive development to directly and seamlessly adapt to the iPad? The reason is that the development cost is too high, so high that they would rather give up the iPad user experience than be responsive.