Tuesday, November 7, 2023

The Negative Impact of Mobile-First Web Design on Desktop

Kim Salazar, Tim Neusesser, and Nishi Chitale (via Hacker News):

Many modern websites are designed with a mobile-first approach. When these pages render on desktop devices, the content can appear overly large and stretched out. Screen-covering images, large bloated text, and excessive negative space result in long pages requiring more scrolling to consume all content. We call this design trend content dispersion.


Long pages also make it harder for users to find specific information on the page because the content is spread out over many viewports. Indeed, our study participants had more difficulty finding information on the dispersed product page than on its condensed version.


Because many websites with dispersed content are the result of a mobile-first design approach, they often use mobile design patterns that frustrate desktop users. For example, accordions work very well on mobile devices because they collapse a large amount of information into a smaller space, shortening the mobile page and making the information more accessible. They also provide a high-level overview of the content available, allowing users to access the area they are interested in directly. However, on large screens, long pages are less of a problem. Accordions can contribute to content fragmentation and significantly increase the interaction cost of finding crucial information, without the benefit they bring on mobile.

Unfortunately, mobile-first design affects apps, too.


Update (2023-11-20): Jerry Nilson:

Was really irritated over this the other day – Google want to dictate how web sites are designed and will give it higher rating even if it looks like shit if you adhere to their nonsense. I decided to revert and make sure my website looks good on mobile despite Google.

Update (2023-11-22): Sam Rowlands:

Fundamentally I agree with this statement, but I have a ton of mixed feelings.

As an engineer, I understand it.
As a pragmatist, I believe it is inevitable.
As an optimist, I believe it will get better.
As a Mac only developer, I hate it.

Learning SwiftUI, I think I've accepted a unified future.

2 Comments RSS · Twitter · Mastodon

CM Harrington

Nuanced take: yes, there are problems with mobile-first design. However, most of the problems encountered come not from mobile first approaches, but by using frameworks that are ostensibly ‘mobile only’.

Take for instance Google’s Material. That was designed for Android devices and wound up infecting all their web apps, which are often used on desktops. Bootstrap is similarly designed, as is SwiftUI/UIKit.

Now we have a desktop UI that follows conventions for an entirely different context *along with* desktop conventions that were trashed in studies since the 90s. Literally the worst of both worlds.

@CM Harrington

But then how do you explain:

- why a company like Apple has a website where the pages presenting the Desktop/Laptop products suck on Desktop and Laptop when viewed in Apple's own web browser on Apple's own desktop OS.

- why a company like Apple, which has plenty of money ships poorly designed mobile-like applications on its Desktop OS (e.g. Home, Shortcuts) when it could use real Desktop and native UI APIs (Cocoa).


For example how do you explain the dumb login window UI/UX in macOS Sonoma where the most important piece of the UI is located in the least visible part of the screen? Personally, I don't see how this could be related to SwiftUI, UIKit or Catalyst.

Leave a Comment