This blog post is about the approaches of building a design for multiple screen sizes. Users today, prefer different devices for accessing the web according to their user profile and goals. As diverse user profiles prefer different devices for the same website, designers try to provide a consistent experience across those devices. The end goal of a design across multiple devices is making the experience consistent across various screens and devices.
Generally, Design experts define some key concepts that ensure interusability for any cross-platform UX, for a coherent experience. These concepts include Composition of functionality across those platforms, Consistency of interfaces across these devices, and Continuity of content and data for possible transitions between platforms.

User trends are changing

We have seen noticeable growth in mobile users visits on websites during 2020. 68.1% of all website visits consist of mobile users. According to the projections of Statistica.com, there will be more than 300 million mobile users in the US within the next five years.
Keeping numbers aside, the daily screen time of an average user on their phone and desktop while scrolling through web stores and apps sums up the story. Users now prefer using their phones for accessing websites and actually reading content rather than doing the same on their laptops or desktops. What we’re trying to get at is that you can optimize your website for mobile use but usually at the expense of functionality or interactivity that affects the experience of your mobile users.

Mobile-first approach in Design

The mobile-first approach stems from the concept of progressive enhancement. The idea with this approach is doing the hardest part first. Hence, designing for other devices becomes easier. It comes down to the most essential features that the website, store or app can’t do without. The core concept is designing for a smaller screen to take care of your user needs without any constraints and then progressing to the bigger screens with more freedom. In simple words, mobile-first focuses on giving optimized views to mobile users followed by desktop users. On the contrary, the responsive design prioritizes desktop readers. Generally, it is easier to design a site that fits the content in a mobile device first as then it’s able to render across different screens.

Desktop-first approach in Design

The desktop-first approach can lead to the trouble of aligning the content and some last minute compromises on user experience for mobile users. Responsive web design and mobile-first design are not the same. A Responsive design is mobile friendly whereas mobile-first caters to the mobile users as a priority. Similarly, Desktop-first can be an approach in Responsive web design where your priority can be a Desktop design (like most cases in RWD)

Responsive Web Design

Responsive Web Design is the widely followed approach where the design is flexible, responsive and can be rendered across different screen sizes. A couple years ago, Google started indexing and ranking websites by their mobile content. In the past, the content on desktop versions was used primarily for indexing that majorly influenced the Search Engine Optimization and the user query results. According to Google, the change was made due to the fact that the majority of online users are surfing the internet through mobile devices. Hence, the Googlebot now crawls the pages with the smartphone agent.

Distinctions between Design approaches

The mobile first approach usually prioritizes users resulting in the process being more content-centric. The smaller screen breakpoints allows the design to naturally fit around the corners. Moreover, the approach compels you to design multiple layouts based on different screen sizes and orientations. Although the approach can make you go the extra mile and make some extra effort, it also saves you the compromises in the desktop first approach where you are prone to the risk of “cutting down” on the experience.

Conclusion

At the end of the day, it boils down to the user experience and the objectives of the design for its audience. A good design is always built for the end user. Therefore, before you decide to follow an approach you must keep your end-user and their journey in mind. Your consideration should account for the screen size, device and orientation that the end-users prefer. In conclusion, following the approach that suits you the most to cater to the experience and journey of the end-user is the way to go.