The importance of responsive design

Responsive design is a really important thing in the UX design nowadays. Everyone in the business knows that having a truly responsive design means good usability. But what does “responsive” even mean? What separates a well designed responsive website from the bad ones?

What is responsive?

Responsiveness means we can adapt a screen to any reading device the user may use. In the old days one desktop screen was enough because there were only desktop computers. Now there are a huge range of desktop and notebook screens, also tablets with different screen sizes, and mobile devices with a way different browsing experience. A well optimised website must adapt to all screen sizes to keep the same user experience on all. This process is not easy and a lot of variable can make it very difficult.

Best practices

Optimized images

Images are really important in websites. The best way if the focus of the image still works in smaller screen sizes but if not cropping should necessary. Of course more versions of the same image affects on page load and spoils SEO so the best option is to use vector graphics where possible.

Navigation

Hamburger menus may be a bad choice as the primary navigation, but they make an excellent choice for mobil screens. In mobile apps the tab bar solution also ordinary but it’s complicated to use in web development. Hamburger menus can have multiple level menu to keep the desktop dropdown menu structure.

Slider

Sliders (carousels) also work on mobile devices too but the manual navigation between images can be difficult to solve. Swipe left and right gestures are common in mobile devices but imitate this in a web code can also be complicated.

Text sizes

Impactful headline texts work great in desktop sections but if we keep the same size in mobile screens too it can obscure the entire screen. Mobile text sizes should be defined.

Vertical length

In onepager websites a long vertical length can cause problems in mobile views. The designer should solve this problem with creative solutions like text dropdowns, batched sections, etc.

Users have very high standards nowadays. A website has to work on all devices. If we miss the detailed responsive design the user experience will be weaker which will worsen the perception of the product.

If you have any further question on how to implement this in your website, please contact Swiss Tomato’s experts at hello@swisstomato.com.