Why Modern Websites Should Be Responsive?

Having worked on different products, both consumer-facing (to C) and enterprise (to B), particularly in enterprise systems, there is a perspective that “users use the product on a computer, so there’s no need to consider the user experience on smaller screens.”

But is that really the case?

Take today’s common screen size 1920x1080, if a user splits the window in half: 1920 / 2 = 960, and adds a sidebar: 960 - 300 = 690, accounting for various whitespace and layout… the content size is not much different from that on mobile and tablet devices.

It becomes clear that the actual displayed size of webpage content is uncontrollable variable. Websites that aim to support only large sizes and half-heartedly implement responsiveness will result in:

1. strange layouts.
2. The impression that the product can only be used properly at specific sizes, giving a half-finished feel.

Is it faster for development to consider just one size? This could indeed be the case. However, this approach is increasingly becoming unworthy because:

1. Early habits: In the past, during the era of Flash or traditional desktop applications, people presumed that “users operate in full-screen on a computer.” As a result, product designs did not consider cross-size factors, and a single layout could satisfy the need.
2. Front-end was not a professional field: Front-end became a mature and standardized field only recently; interfaces are no longer just inputs and outputs but are now emphasized as an experience.
3. The rise of componentization: Nowadays, with the development of front-end engineering, designing UIs that can adapt to different sizes is no longer a challenge. Through reusable components and responsive layouts, it becomes more efficient to maintain and expand.

The early web design, which required designers to create layouts using Table slicing, has completely transformed into a different world with powerful CSS and a rich ecosystem of JS.

Further Reading

• How many breakpoints should you use? The less, the better.🔗