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?
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.
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.
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.
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.
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.
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.
Have a project in mind?
Let’s have a tomato juice together!
Our briefing templates for app and web projects help you to formulate your ideas clearly. And they help us to better understand your project right from the start. This saves time, creates clarity and lays the foundation for a successful collaboration.
Phone: +41 22 753 05 71
Email: hello@swisstomato.com
Meet Us: Route de Florissant 4, 1206 Genève
Phone: +41 44 527 72 16
Email: hello@swisstomato.com
Meet Us: Badenerstrasse 47, 8004 Zurich
