When the same website is opened on a computer and on a phone, what you see is often not simply a scaled-up or scaled-down version, but a different layout. The practice of making one set of pages adapt to screens of different sizes is called responsive design.
Three foundational techniques
Fluid layout
The widths of elements on the page are no longer hard-coded to fixed values, but calculated proportionally. When the window becomes narrower or wider, the elements scale accordingly, without horizontal scrolling or large blank areas.
Conditional styles
The same page can apply different style rules based on conditions such as screen width, height, and resolution. The most typical use is to change horizontally arranged columns into a vertical stack on narrow screens. This allows adaptation without creating another set of pages; instead, the presentation is adjusted on the same structure.
Adaptive media
Elements such as images and videos need to be able to adjust their own size according to the container, avoiding exceeding the screen range. A common approach is to limit their width so that it does not exceed the width of the area they are in, and when needed, pair this with image resources of different sizes.
Benefits of doing this
- One set of content, one address. Different devices access the same page, so there is no issue of inconsistent content, and maintenance costs are lower.
- Reading and interaction are smoother. On a phone, there is no need to repeatedly zoom in and out, and buttons and forms are easier to tap and fill in.
- Unified structure. The page address does not change with the device, so search engines will not encounter duplicate content when crawling and indexing.
What can be checked during acceptance
Whether responsive design has been done properly can be roughly judged without technical knowledge. You can open the website on a phone and check the following points one by one: whether the text needs to be enlarged to be legible; whether buttons and links are easy to tap; whether tables or long lists are cut off; whether images load properly; and whether the navigation menu is usable.
It is worth noting that "being able to open on a phone" and "being rearranged for phones" are two different things. The former may simply display the computer page scaled down, while the latter truly takes into account the reading order and interaction habits on small screens.