Responsive Design User Experience (UX) topic overview/definition

Responsive Design: Concept Definition

Responsive design refers to graphical user interface (GUI) design that adjusts smoothly to different screen sizes. Designers apply it in GUIs such as webpages that must function on devices of various sizes. Responsive designs respond to changes in screen size by adjusting the placement of design elements to fit the available space optimally—a liquid quality offering versatility.

Responsive design is similar to adaptive design, which also adapts to different screen sizes. The difference is that content moves dynamically in responsive design whereas it is fixed in layout sizes in adaptive design. A responsive design thus has only one single layout, which resizes and moves dynamically according to the screen size. An adaptive design, on the other hand, uses multiple fixed layouts that do not resize, and the website will choose the most optimal layout for the screen size.

Because smartphone access to the internet is greater than PC access, responsive design is normally done using the principle “mobile first” – i.e., designers define the experience on mobile platforms such as smartphones and tablets and then scale it up to larger screens. The advantage of responsive design is that it enables the creation of GUIs for multiple screen sizes without the need to design each GUI separately. A disadvantage is that the designer does not have complete control over how the GUI appears on the various screen sizes. This is particularly problematic for complex designs which might not translate seamlessly across screen sizes. Another drawback of responsive design is that it requires a more complicated front-end code in order to be able to scale the content according to the screen size dynamically and correctly. Thus, the plastic nature of responsive design demands thorough consideration early on—particularly as webpage consistency is vital to brand recognition and the preservation of users’ trust.

For your convenience, we’ve collected all UX literature that deals with Responsive Design. Here’s the full list: