Copyright © 2023 by Westpac Banking Corporation. All rights reserved.

Think responsive

Justin Spencer

Image showing a row of people sitting on a couch with their legs crossed looking at different devices.
An increasing number of people are accessing information and services on their mobile devices. New devices are being introduced every day. We can’t keep creating custom solutions for every device that hits the market. So, how do we deal with the situation?

A different approach

Responsive web design suggests that the user interface should respond to the user’s behaviour and environment based on screen size, platform and orientation. This practice consists of a mix of flexible grids and CSS media queries. As the user switches from one device to another, the interface should automatically respond and accommodate for layout, resolution, media size, content and interactions. In other words, the interface should have the smarts to automatically respond to the user’s preferences. This eliminates the need for a different design and development phase for each new gadget on the market. Responsive web design is not only about adjustable screen layouts and fluid images, but rather a whole new approach to design delivery. Achieving user interface design and code quality must be a priority — to do this greater emphasis on design and front-end development skills and collaboration is paramount.

Illustration showing different devices and orientations and how this affects the viewport size

Responsive architecture

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies are using “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

Ethan Marcotte. A list apart

Transplant this discipline into web design, and we have a similar yet whole new idea. Why should we create a custom interface design for each group of users; after all, architects don’t design a different building for each type of visitor. Like responsive architecture, interface design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.

Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive web design requires a more abstract way of thinking. This has given rise to processes and technology such as fluid grids, media queries and breakpoints. These enable us to reformat screens and content effortlessly and are now embedded in the best practice principles when designing and building a digital user interface.

Read about the grid and how it helps achieve responsive design

Access the grid from the design system