Why is responsive web design so important?

More and more web applications must be able to be used on different devices: from tablets and mobile phones to laptops and ever-expanding monitors. It is therefore very important that the design of your web application can adapt to the user’s screen. A term that is often used for this is responsive (web) design.

THE DESIGN

When an idea comes to the table, our UX/UI specialists get to work on the design. One of the first questions to be asked during this design process is which devices should be designed for. We have come a long way with a design for mobile and desktop. For tablet we can often use a scaled desktop size, but we test this extensively to make sure everything works as it should. Once the devices are established, we can start on the wireframes. Wireframes are 2D illustrations that map the functionalities, priorities and behavior of a page. We look at which elements must be present per page and how we can best place them on a page. We also check whether the elements on the mobile and desktop versions are the same, or whether there are elements that are missing from one of the designs. A good example of this is YouTube. On the mobile website (m.youtube.com) the button to make a video is missing, while on the desktop version (youtube.com) this button is prominent in the top menu bar. If the elements of the mobile design differ from the elements of the desktop design, an adaptive design can be chosen instead of a responsive design.

RESPONSIVE VS. ADAPTIVE DESIGN

Both responsive design and adaptive design are based on the principle that the web application can be used on different devices. Responsive design is based on a single design, whose elements, navigation and content adapt to the size of the user’s screen. We use breakpoints: fixed screen sizes for mobile, tablet and desktop to which our design adapts. This ensures that, instead of creating a design for each device, we can create a design for a device group (such as mobile phones).

Adaptive design does not have one design that adapts to the user’s screen, but several designs for different screen sizes. Although adaptive design allows us to have more control over how everything looks, it takes more time to create a separate design for each device group.

How do we deal with different devices?

Creating a responsive design comes with challenges. One of the most important things to be aware of is how our design adapts by device group. An image that we place across the entire width on a desktop is cropped on a mobile phone. And the fixed menu bar of the desktop design should become a pull-out menu on a mobile device. Sometimes design adjustments are necessary because not all actions are possible on both desktop and mobile. For example, on a desktop the user can “hover” with the mouse over various items such as links, while he/she cannot do this with his fingers on the mobile version. On the other hand, the user can use “swipe” movements on mobile, while this is not possible with a mouse on the desktop version.

From design to web application

When the design is approved, it is time to make the design a reality. You can make a web application responsive by just using HTML and CSS, but frameworks make it a lot easier. One of the best-known frameworks for this is Bootstrap, which can be used both on its own and together with other frameworks. Within Wolfpack we generally use a combination of Bootstrap and Vue.

One of the most important aspects of realizing a responsive design is testing. Only by regularly viewing and testing a design on different device groups can you be sure that the web application behaves as you had in mind. If after testing it appears that certain design elements do not work well on (one of) the two device groups, we will go back to the drawing board to review parts of the design.

WHAT DOES RESPONSIVE DESIGN MEAN TO YOU?

When you have an idea for a web application, consider how your users want to use it. Do they want the same functionalities on mobile as on their tablet, or will they mainly use the application on their desktop? Our UX/UI’ers and (frontend) developers are always ready to help you with these kinds of problems. Because a good responsive design can make all the difference for your web application.

ready for the next step?

Related posts