Updated: Oct 2023
I’ve noticed that many companies spend too much time and money on mobile apps; and not enough time considering their mobile web presence. With the rise of smartphones, mobile-responsive design is more than just a trend – it’s a necessity.
A critical principle to embrace is: adapt to the user’s screen size. This may sound obvious, but it is the golden rule that will help you provide a seamless user experience across all devices.
Don’t worry about detecting the user’s specific device — iPhone, Galaxy tablet, or whatever. Focus instead on ensuring content looks and functions optimally regardless of the screen size.
Technically this can be achieved using CSS breakpoints. Standard breakpoints can be leveraged to ensure content responds gracefully across a variety of screen sizes. The Tailwind CSS framework recommends the following easy-to-follow breakpoints:
- sm, small: 640px
- md, medium: 768px
- lg, large: 1024px
- xl, extra-large: 1024px
- 2xl, extra-extra-large: 1024px
Another tip: offer users an alternative view, in case you detect their device size incorrectly.
Recently I was exploring an official Irish health information site and the layout seemed a bit off. Eventually, I spotted an option to switch to the desktop view, and the design suddenly clicked into place — albeit I had to hold my phone in landscape mode.
Another compelling reason to offer an alternative view is the potential feature disparity between mobile and desktop versions. Due to constraints on mobile, some functionalities might be stripped back. However, users often have specific preferences and might sometimes want to access features only available on the desktop site.
For instance, while I appreciate the streamlined interface of certain travel or hotel booking sites on mobile, there are times when I opt for their desktop version to leverage advanced search or filtering capabilities, like browsing flights across an entire month.
This reinforces the importance of not just adapting to screen size but also providing users with the choice to switch between different views.
In the end, it’s about striking the right balance. While mobile web design should prioritise simplicity and user-centricity, adapting to screen size is crucial, so is providing choice. As UX designers, our role is to anticipate user needs and offer the best possible experience across all platforms.