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:
Native vs Hybrid vs Responsive: What app flavour is best for you?
At some stage, during the design of your mobile app, you’re going to have to make a decision about how you will develop the app. Your choices include native apps, hybrid apps and responsive web sites and the decision you make will affect the final product. Learning to make the right decision requires understanding the way each type of developmen...
Responsive Design – Let the Device Do the Work
There may be some argument over whether responsive or adaptive designs are better, but in many cases responsive design is going to be chosen for budgetary purposes (at least today). That means designers need to become familiar with the concepts and some basic guidelines for their responsive designs. Before delving into this article, you might w...
A User-Centred Approach to Mobile Design and a 5 Stage Process for You to Use
The mobile web is here to stay. However, it’s important to remember that having a mobile website isn’t the key to success – it’s providing the right approach to the mobile user experience that brings success. Taking a user-centred approach to mobile (and other) design can help you keep in mind the outcomes that you intend rather than wasting tim...
Adaptive vs. Responsive Design
The differences between responsive and adaptive design approaches spotlight important options for us as web and app designers. Choosing with insight can empower you to plan and execute your designs with better aim, purpose and results.With the pervasiveness and diversity of mobile devices, as designers we need to cater to the variety of screen s...