{"id":41022,"date":"2023-11-07T14:29:31","date_gmt":"2023-11-07T19:29:31","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=41022"},"modified":"2023-11-22T12:15:52","modified_gmt":"2023-11-22T17:15:52","slug":"the-negative-impact-of-mobile-first-web-design-on-desktop","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2023\/11\/07\/the-negative-impact-of-mobile-first-web-design-on-desktop\/","title":{"rendered":"The Negative Impact of Mobile-First Web Design on Desktop"},"content":{"rendered":"<p><a href=\"https:\/\/www.nngroup.com\/articles\/content-dispersion\/\">Kim Salazar, Tim Neusesser, and Nishi Chitale<\/a> (via <a href=\"https:\/\/news.ycombinator.com\/item?id=38025767\">Hacker News<\/a>):<\/p>\n<blockquote cite=\"https:\/\/www.nngroup.com\/articles\/content-dispersion\/\"><p>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.<\/p><p>[&#8230;]<\/p><p>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.<\/p><p>[&#8230;]<\/p><p>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, <a href=\"https:\/\/www.nngroup.com\/articles\/mobile-accordions\/\">accordions work very well on mobile devices<\/a> 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. <a href=\"https:\/\/www.nngroup.com\/articles\/accordions-on-desktop\/\">Accordions can contribute to content fragmentation<\/a> and significantly increase the interaction cost of finding crucial information, without the benefit they bring on mobile.<\/p><\/blockquote>\n<p>Unfortunately, mobile-first design affects apps, too.<\/p>\n\n<p>Previously:<\/p>\n<ul>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2023\/02\/07\/macos-isnt-as-small-as-you-think\/\">macOS Isn&rsquo;t As Small As You Think<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2022\/05\/12\/the-apple-services-experience-is-not-good-enough\/\">The Apple Services Experience Is Not Good Enough<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2020\/07\/03\/big-surs-narrow-alerts\/\">Big Sur&rsquo;s Narrow Alerts<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2019\/12\/16\/catalyst-and-cohesion\/\">Catalyst and Cohesion<\/a><\/li>\n<\/ul>\n\n<p id=\"the-negative-impact-of-mobile-first-web-design-on-desktop-update-2023-11-20\">Update (2023-11-20): <a href=\"https:\/\/twitter.com\/eyelessish\/status\/1722060556813652341\">Jerry Nilson<\/a>:<\/p>\n<blockquote cite=\"https:\/\/twitter.com\/eyelessish\/status\/1722060556813652341\"><p>Was really irritated over this the other day &#x2013; 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.<\/p><\/blockquote>\n\n<p id=\"the-negative-impact-of-mobile-first-web-design-on-desktop-update-2023-11-22\">Update (2023-11-22): <a href=\"https:\/\/bsky.app\/profile\/samrowlands.bsky.social\/post\/3kdn6wsraak2k\">Sam Rowlands<\/a>:<\/p>\n<blockquote cite=\"https:\/\/bsky.app\/profile\/samrowlands.bsky.social\/post\/3kdn6wsraak2k\">\n<p>Fundamentally I agree with this statement, but I have a ton of mixed feelings.<\/p>\n<p>As an engineer, I understand it.<br \/>\nAs a pragmatist, I believe it is inevitable.<br \/>\nAs an optimist, I believe it will get better.<br \/>\nAs a Mac only developer, I hate it.<\/p>\n<p>Learning SwiftUI, I think I've accepted a unified future.<\/p>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2023-11-07T19:29:33Z","apple_news_api_id":"ce7178ba-2cc8-463e-aba9-4d47339f59e6","apple_news_api_modified_at":"2023-11-22T17:15:55Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAQ==","apple_news_api_share_url":"https:\/\/apple.news\/AznF4uizIRj6rqU1HM59Z5g","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[1621,77,30,2385,1812,96],"class_list":["post-41022","post","type-post","status-publish","format-standard","hentry","category-technology","tag-marzipan","tag-design","tag-mac","tag-macos-14-sonoma","tag-swiftui","tag-web"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=41022"}],"version-history":[{"count":3,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41022\/revisions"}],"predecessor-version":[{"id":41174,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41022\/revisions\/41174"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=41022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=41022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=41022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}