9 ms·

The problem isn't "mobile first" design. The problem is "mobile only" design. PCs and Laptops exist. They have wide, high resolution screens and precision poi

The problem isn't "mobile first" design. The problem is "mobile only" design. PCs and Laptops exist. They have wide, high resolution screens and precision pointing devices. All relevant technologies support changing the rendering based on the display available to the browser. It's not that hard. The problem starts when designers ignore these facts, and instead pop giant buttons, zero navbars, hamburger menus, and thin columns with low information density into the Webbrowser running on my PC with a 4k screen and a 120$ laser mouse. https://idlewords.com/talks/website_obesity.htm#sprawl https://idlewords.com/talks/website_obesity.htm#sprawl

ryandrake 3y ago
Our UX's are turning into the Hospital Computer scene from Idiocracy[1]. 1: https://www.youtube.com/watch?v=LXzJR7K0wK0 https://www.youtube.com/watch?v=LXzJR7K0wK0
- _chu1 3y ago
  As time goes on that movie becomes more and more of a documentary.
hombre_fatal 3y ago
> It's not that hard. It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors.
- stronglikedan 3y ago
  > It actually is very hard Only when folks try to get fancy. K.I.S.S(illy).
  - postalrat 3y ago
    Name a few example sites that kept it simple
    - SilasX 3y ago
      Hacker News, old Reddit. Both work fine on both mobile and desktop. (Reddit started breaking features like double tap to zoom though.) Yes, on a large screen you might have to increase the size. But a mediocre design you can recover from is better then being stuck with some meth addled designer’s unusable one.
      - kitkat_new 3y ago
        Hacker News YX could be way better though
      - imachine1980_ 3y ago
        Old Reddit doesn't work well on mobile devices at all. While it can scale the user interface, it's designed with a mouse in mind, making everything appear too small. I like using Old Reddit on desktop, but it's not user-friendly on mobile. For example, on HN (Hacker News), it's simpler; there are no images or different-sized icons. Even here sometimes struggle to tap the right links or flags, and I have to manually go to the settings to undo it. I'd prefer this over a poorly optimized mobile UI. However, optimizing the mobile web page would solve these problems.
        SilasX 3y ago
        Rotate your device to landscape and it's fine. I guess part of the problem is sites training everyone not to do that. (Quora's expert designers will happily throw content into the void of the iPhone's notch on landscape, inventing a problem that didn't exist in older designs, despite them having been created before the notch ever came out.)
        imachine1980_ 3y ago
        Rotate isn't good solution it like saying not open site in full screen open it in half screen o is similar to mobile, I use mobile on the go and can't acomodate bad design whit behavior changes you need too change the design, so people can use it whiout needing to change everything.
  - hombre_fatal 3y ago
    I don't think so. It's strictly more work than designing a good UI for a single device which is hard enough, and usually more work than designing multiple UIs for different devices no matter. A smartphone, iPad, and ultrawide monitor demand fundamentally different UX considerations. Generalizing across all of them, and in one codebase, demands a certain expertise or else everyone would be doing it.
    - denton-scratch 3y ago
      > demands a certain expertise I don't think it's a question of expertise; it's a question of effort (and cost). So it's a management issue; are we going to put the effort in to support desktops, or are we going to settle for a crap website? Because a website that doesn't support desktop is a crap website.
      - omarfarooq 3y ago
        Expertise properly applied would reduce effort and cost.
  - butlike 3y ago
    I always read that as "keep it simpple; stupid" as in: dont try and make the code too smart. Keep it simple and stupid and leave it readable. I never took it as a value judgement agaist the programmer's intellect.
- Nycto 3y ago
  Users on mobile can’t make their screens that big, and the average users on desktops don’t expect a webpage to work when they resize their browsers that small. Trying to make both work with the same design can have a negative impact on your customers, from both a usability perspective and by increasing page weight. Instead, my advice is to create individual designs for each, share when it makes sense, but actively diverge when it’s good for your customers. There doesn’t need to be a single version of a page. Your mileage may vary.
  - hombre_fatal 3y ago
    There are certainly trade-offs to consider which is one of the reasons UX design demands so much expertise no matter how many HNers dismiss it as some trivial practice (that they, conveniently, never want to do). Maintaining N versions of your application has costs that aren't necessarily great for your customers either. In my experience it usually cashes out into one version (either mobile or desktop) getting all the support and features while they slowly drip down into the other versions. Meanwhile a responsive design can have the upside of forcing support and feature rollout for all devices simultaneously. None of this is easy.
    - andrewprock 3y ago
      You're more than correct. In practice, working in small and medium organizations, I have met very few UX designers. Instead I have met plenty of graphical designers that know almost nothing about UX design. I've been at places where I - as a backend developer - know more about practical UX design than anyone on the design team. I think the reason why we have "bad mobile first design with awful desktop UX" is because very few of the people designing these experiences are UX designers. I was surprised the article didn't highlight the horror show that is Vector22 at Wikipedia, a design so colossally bad that after three years of suck costs the only path to saving face was to make it the default theme for all users: "Mission Accomplished!" https://en.wikipedia.org/wiki/Wikipedia:Vector_2022 https://en.wikipedia.org/wiki/Wikipedia:Vector_2022
      - pmontra 3y ago
- gedy 3y ago
  It's very hard for many designers and others to get their head around it, sure. But I think a lot of the challenge is using pixel perfect static mockups drawn in some design tool. It would be faster to have a napkin sketch and work with UI dev and figure out the cascading and wrapping at design time.
  - solardev 3y ago
    Figma has responsive design and reflow tools built in these days.
    - The5thElephant 3y ago
      Not really. No media queries, no percent widths or non-pixel units, no margins (everything is padding or gap), no viewport units, etc. I'm a CSS person who works in Figma every day and Figma absolutely sucks for responsive design and handoff to devs. I wish I could just design in Framer or Webflow but those tools while being Figma-like are entirely catered to content websites and not to product design. Design tools should render with HTML and CSS, not make the mistake Figma made in creating their own rendering engine they have to painstakingly recreate CSS from scratch with.
      - deleted 3y ago
        [deleted]
- vorticalbox 3y ago
  https://dev.to/swyx/100-bytes-of-css-to-look-great-everywhere-19pd https://dev.to/swyx/100-bytes-of-css-to-look-great-everywher...
- enriquto 3y ago
  > It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors. A motherfucking website made with plain html, no css and no javascript is responsive and works everywhere. Any problems found when you go beyond this are entirely self-inflicted.
  - dangus 3y ago
    And that website does nothing. It’s just text, and it has one image that’s too small on a mobile view. Now try to do the same thing with a complex app like your bank’s website, which needs to handle every type of account including credit cards, checking accounts, and investment accounts, rewards, and a travel/shopping portal.
    - usrbinbash 3y ago
      > And that website does nothing. It’s just text, and it has one image Which is pretty much what 99% of websites need to be able to display. That includes many sub-sections of web applications. > Now try to do the same thing with a complex app like your bank’s website Fun story, my bank has a website that works great on both my phone and my PC. On the one I can navigate it fully with one thumb, on the other it is information-dense and respects that I have a high precision pointing device available. They also offer different Apps for Phone and Desktop.
      - dangus 3y ago
        9 of the top 20 most visited websites primarily deal in video and multimedia. I disagree that “99%” of websites “just need text.”
        TeMPOraL 3y ago
        Those are the outliers, and winner-take-all ones to boot - they ate most other websites that "primarily deal in video and multimedia". Everything else deals primarily with text.
- solardev 3y ago
  Really? On every team I've worked since the media query and bootstrap days, it's been normal to have a mobile, tablet, and desktop version at least. Tiny phone and ultrawide were bonuses, but having at least the basic three meant a somewhat usable experience for everyone. These days it's even easier with MUI and similar UI libs that have responsive components built-in. Tailwind also makes it very easy to build your own.
  - civilitty 3y ago
    It’s going to get even easier once container queries are widely deployed (if they’re not already). We’ll be able to design components to scale to their parent instead of screen size, making them much more generic.
  - jasonlotito 3y ago
    Technically, that's correct (which means it's the best kind of correct). But... I'd add that doing that well isn't easy. I frequently find cases where the mobile version simply removes features the desktop version has. And tablet version are very very rare. They tend to be either just the desktop or mobile version. Rarely is someone designing for tablet. And that makes sense. Designing 3 different sites to all be the same feature-wise isn't trivial. Then you throw mobile apps on top of it, and suddenly it becomes much harder. Can it be done? Sure. But I wouldn't say it's trivial to do it well.
- phkahler 3y ago
  >> It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors. Sure I'll agree it's hard, but don't web designers do their work on desktop machines? It seems like even if they are primarily targeting mobile, they must see the results on desktop right? There have to be some known strategies for dealing with it, and they must be aware of the problems. Right?
- speak_plainly 3y ago
  If you're designing a website to work on the smallest smartphone to ultra wide monitors you need to work on a more serious quality management strategy.
- sebastianconcpt 3y ago
  Even if we go with the "is not that hard" narrative, is for sure damn laborious. Also let's not pretend that all the intermediate sizes aren't also a requirement as the dynamic adaptation from one to another medium being zero effort in order to "just work".
- irrational 3y ago
  Is it? CSS Grid and flexbox exist. What I do is design at the smallest screen size first (mobile first), then increase the screen size until it looks bad/breaks, then I set a breakpoint and use CSS to adjust things as needed. Rinse and repeat as many times as needed until it looks good at all screen sizes. It really is not difficult if you know what you are doing.
- javajosh 3y ago
  >It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors. Maybe the real solution is to treat a wide monitor as multiple mobile screens side-by-side. That is you give your user N-views into your app with no other coupling between them, almost like browser tabs. It sounds silly but I could think of worse solutions. Note: N would be equal to floor(laptop-width/mobile-width).
  - omarfarooq 3y ago
    TweetDeck is an example of this.
- fsflover 3y ago
  A tiny company called Purism did it, so it can't be that hard: https://news.ycombinator.com/item?id=19328085 https://news.ycombinator.com/item?id=19328085
- croes 3y ago
  At least make one mobile and one desktop view. It's strange that I have to scroll horizontally to view source code and at the same time 2/3 of my screen is empty.
  - butlike 3y ago
    Are you suggesting returning to the time when every site had "m." as a subdomain? Like m.facebook.com?
    - croes 3y ago
      No need for a subdomain. Just design one for mobile and one for desktop. Could be purely CSS, could be JS or SSR
- robbyking 3y ago
  I'm sorry, if Wix and SquareSpace can figure it out for their templates, a site with dedicated UX designers should be able to figure it out, too. The smartphone is 15 years old, designers know what to expect.
  - vitaflo 3y ago
    The problem isn’t UX Designers figuring it out, it’s managers not wanting to spend time designing different breakpoints because they want the site delivered ASAP. A lot of bad UX decisions come from bad management, not necessarily bad designers.
- leptons 3y ago
  It isn't that hard if you know anything about modern CSS. Sure, for some people that hate writing front-end code, it's going to be a real pain. But for anyone that focuses on front-end, it really shouldn't be difficult at all.
- bob1029 3y ago
  I would disagree with "very" hard. We don't have to touch every class of device with our B2B product, but we do have to support desktop/tablet/etc. We decided to make a tradeoff in terms of aesthetics and keep the overall design as simple as possible. When you don't plan to test the dimensions between iPhone and iPad or concern yourself with foldable/esoteric devices, you should probably not get too elaborate with your design language. Our app has 1 simple breakpoint @ 960px. Below this, we assume we are on smartphone and run with one column layouts. Above, we display the full width view. We combine the media query with CSS grid layouts to swap between modes. The specific number was chosen to allow full-size presentation in side-by-side window arrangement on a 1080p desktop (our most typical power user scenario). Again, we are B2B and only have to tolerate US audiences. So, we have the ability to get away with far more than developers who have to polish B2C experiences with international audiences. If I had to do B2C web properties and ideally support as many devices as possible, I would be more amenable to that adjective. Otherwise, I would say it is a normal amount of "hard".
  - quest88 3y ago
    How do you solve non-layout issues while keeping the site fast? Maybe you want your site to functionally behave differently, but don't want to implement client-side rendering.
    - bob1029 3y ago
      Perhaps you could provide an example of a non-layout issue?
  - Scarblac 3y ago
    But does the desktop version get more functionality?
    - bob1029 3y ago
      Same effective functionality between touch-enabled and desktop devices. The main differences are in certain edges. For example, on devices with integrated cameras we present extra options for acquiring photos whereas on the desktop w/out camera, you get a file/browse option instead. 90%+ of the javascript in our app is used to normalize device-specific I/O quirks. The rest is to do things like disable form elements when the form is submitted.
- BiteCode_dev 3y ago
  And costly in dev and support. Not to mention the market for this target is shrinking so much compared to mobile it's easy to understand how the choice is made.
- thunderbong 3y ago
  I'm sure the people who complain aren't the ones with the smallest smartphones or the ones with ultrawide monitors with a maximised window. Just as an example - Look at Google Drive in a regular laptop / desktop browser. All the relevant and frequently used actions are behind menus and icons.
- uoaei 3y ago
  The entire point is you don't have to design one UX for both kinds of devices. The screen resolution is an OK proxy but there's buttons in every mobile browser for requesting the desktop site so obviously there's more reliable ways to tell the webserver which kind of device is requesting the site.
makeitdouble 3y ago
> https://idlewords.com/talks/website_obesity.htm#sprawl https://idlewords.com/talks/website_obesity.htm#sprawl And this site quite fittingly has one narrow and centered column with huge left and right gaps. Otherwise I think the majority of windows laptops now have touch screens, so while they still have a pointer based input most of the time, touch friendly design is an advantage for the majority of the users. It would be nice to have specific dedicated designs for all cases, but I am sympathetic with how much of a challenge that is.
- softfalcon 3y ago
  Not trying to detract from your point, and maybe I’m “out of touch” but I don’t see hardly anyone but a rare few folks actually using touch screen laptops. I see many people with laptops, but other than one person I know who exclusively buys Microsoft Surface laptops, the average laptop user I know is just typing and clicking away like normal. How many folks actively go looking for touch in their laptop? I keep hearing about it on YouTube reviews, but even in families with kids, the kids don’t even use the touch features even if the laptop supposedly has it. I’m just amazed how much “touch on laptop” comes up and I quite literally never see it in reality.
  - Roark66 3y ago
    Well.. I've been using touch on my laptops since the start. My current laptop is a mini asus "tablet pc" with detachable keyboard. When I'm just web browsing I detach the keyboard and use touch. But even on normal laptops I got from work I'd prefer touch for many things like scrolling over the built in touchpad. Especially when I'm using the laptop as a portable device on my lap, in a plane or on a bus. I have to admit I don't use touchscreens that much when I can put a laptop on top of a desk. But when I'm sitting at a desk I much prefer a desktop pc.
    - ako 3y ago
      I mostly use an iPad when i don’t need a keyboard, especially when sitting on a couch (typing this on my iPad). I noticed that as soon as I pair the iPad with a Bluetooth keyboard, and an external display, I’ll also use my mouse to navigate. So, even for a touch first device like an iPad, when using a keyboard, touch is not the best way to navigate.
yaky 3y ago
The opposite to your 4K screen situation is also true - many modern sites have so much whitespace that I have to zoom out to 80% to use them comfortably on my old laptop with 1366x768px display.
- esafak 3y ago
  Have you tried setting your browser agent to mobile?
dheera 3y ago
> The problem starts when designers ignore these facts, and instead pop giant buttons, zero navbars, hamburger menus, and thin columns with low information density into the Webbrowser running on my PC with a 4k screen and a 120$ laser mouse. And using phones as a 2FA device. A giant, relatively immobile device is a much better 2FA device than something that is easily stolen.
layer8 3y ago
> 4k screen Another problem is designers working only on 4K/5K screens and not taking into account how little of their design fits on a FHD screen that a major part of the desktop population still uses.
- danShumway 3y ago
  Yep, I see this in both directions. People are still of the mindset that "desktop" means a single resolution and aspect ratio that everyone uses. That wasn't really the case in the past, but it's really not the case today. - On Linux, the assumption is that everyone has a 1920x1080 monitor, so if you get a high resolution 13-inch device like a Surface suddenly half of the apps are unusable because everything is scaled so tiny, and the apps literally just do not know how to handle the aspect ratio. - On Web and in popular design studios, the assumption is that everyone has a full 4K mac and so everything becomes larger and spread apart; you load them up on a normal monitor and everything becomes cluttered and the interface of the app starts taking up more room than the content you're looking at. Test your apps on multiple resolutions y'all, and for the love of everything that is holy if you're designing a desktop app, please add button density and font size controls to your settings. Some weirdos like me even use multiple monitors of different resolutions and pixel densities hooked up to the same computer at the same time, so being able to adjust on the fly or handle fractional scaling is kind of a big deal for apps that I use. Standard resolutions are a myth.
  - marssaxman 3y ago
    Caring so much about screen resolution has always seemed strange to me when not everyone maximizes their browser window, anyway. My browser windows are generally close to square.
    - danShumway 3y ago
      I think that differing device resolutions and aspect ratios in some ways forced designers to think about things that were always worth thinking about but were easier to ignore. I use a tiled window manager, I care about whether your desktop site is responsive even at minimal widths because I tile windows. I also have a touchscreen monitor hooked up to my desktop and I like to be able to use it. And sometimes I also full-screen windows on a 32-inch screen and use a mouse-and-keyboard. If a desktop site accommodates me in all of those scenarios, it'll probably be fine on a phone as well. But it was so easy in the past to just ignore that and treat PCs like they were uniform devices used in a uniform way, and phones meant that you suddenly had to care about what a website looked like in a single-column view, you couldn't just tell your users to maximize the browser window. Unfortunately, rather than taking away the lesson that design should adjust to nonstandard situations, layouts, and input-modes that can not be fully predicted or tested for in advance -- instead developers took away the lesson "okay, now there are two standard devices we have to support: mobile and desktop." The distinction isn't real, there is no hard line between a desktop and a mobile site. There are mobile tablets that are big enough that they should be served a desktop layout, there are desktops with touchscreen displays, there are monitors that are 3/4 ratios. And there never was a standard and computers were always like that, but it's an understated truth that every developer and every designer would secretly love to develop exclusively for consoles with integrated screens and one input method, and developers often kind of behind-the-scenes somewhat resent the fact that general computing is an open ecosystem with diverse devices. So designers often just treat computers like they have two completely discrete interfaces, or at worst decide that because they're not targeting one of them that they now have permission to target exactly one resolution and size again. Sometimes that takes the form of designing "mobile only" like the top-level comment talks about and calling desktops a dead platform. Sometimes it means designing desktop only and getting mad that somebody flipped their monitor vertically instead of horizontally and now wants the ability to move a side-drawer to the bottom of the screen.
denton-scratch 3y ago
> The problem is "mobile only" design. Agree. Actually, I think what happens is that the team adopts a "mobile-first" policy, which is reasonable, since most visitors wil be mobile. But they don't follow through with the "desktop-after" corollary, and they don't engage with the "progressive enhancement" philosophy, because that gets even more costly than simply having two websites. I find phones impossible to use as web browsers. My eyesight is too poor, and my thumbs are too fat. I use phones for making phone-calls and for trading SMS messages; if I need a website, I use my laptop. But that's just me. I think the real problem is that mobile phones make awful platforms for browsing websites. Native checkboxes and native select-boxes are often unusable, so developers use "frameworks" <spit> that replace them with Javascript monstrosities. Because that all depends on plugins and code, each website ends up with it's own idiosyncratic UX. I think the correct solution is for phone makers to deliver platforms that can render HTML so it's useable. Then the only problem for devs is create responsive layouts, which isn't that hard.
The5thElephant 3y ago
Designers usually not the problem here. Most are well aware that rendering should change between different types of devices and displays, they use these website and devices too! The problem usually is the resources and time available to implement such designs. Most of the time the devs simply don't have the time, desire, or even ability to implement more advanced responsive design, so designers will design what will actually get made.
- leptons 3y ago
  It takes maybe 2 hours for someone experienced to turn a desktop layout into a mobile responsive layout for all screen sizes using media queries. Longer than that usually means less experience.
  - The5thElephant 3y ago
    Sure for a content-site template, blog, or something else fairly basic. This is not at all the case for things like art-directed super-custom designed sites like magazines, fashion brands, museums, etc, OR highly complex interactive SAAS web apps like the ones I work on. These have lots of unique considerations like complex animations, layered menus and controls, optimizing for change from mouse to touch interactions, handling the higher rate of people who use zoomed text on mobile devices, adapting to device safe areas in portrait and landscape, etc. I am a designer and HTML/CSS coder so I am aware of the challenges from both directions.
    - leptons 3y ago
      Your use case sounds very much like an edge-case in websites. Of course highly customized animations and weird out-of-the-ordinary UI elements are going to be an extra pain in the ass. I have no doubt there are customer requests that simply can't be fulfilled with HTML and have to be done in WebGL. The fact is, most sites are "fairly basic" and only really need HTML, CSS, and a little javascript to accommodate the vast majority of use cases. I'm glad you're doing complicated things, but that doesn't change the reality of most web developers.
peckrob 3y ago
About 6 years ago, the company [0] that owns most of the local newspapers in my state did a "mobile first" redesign of their website ... which actually was a "mobile ONLY" redesign. It was so, so bad it was almost totally unusable on anything larger than a tablet. It made it virtually impossible to read articles on a desktop because everything was so spread out, the font sizes were all messed up, navigation was hidden in a tiny little hamburger at the far upper right of the screen, and a bunch of other problems. But what was wild was how easy it was to fix them. I ended up writing a small (maybe 100 line) CSS user style that fixed almost all of the problems. They did eventually "fix" the site so that it wasn't as bad on desktop. [0] https://www.al.com/ https://www.al.com/
dorfsmay 3y ago
And no way to adjust the sound volume. In a nutshell everything Instagram does!
- butlike 3y ago
  We should bring back below-the-fold auto-playing music on sites.
makingstuffs 3y ago
100% this. The amount of times I get given a mobile wireframe then subsequently brushed aside when I enquire about desktop is unreal. Our work flow often ends up: get design > ask for desktop > told to ‘use best judgement’ > uses best judgement > get a load of amends as best judgement wasn’t what the client has in mind > repeat. Don’t even get me started on the mythical black hole that is the tablet screen. It’s like designers have forgotten that they exist and people use them at times.
dehrmann 3y ago
> PCs and Laptops exist But it's a slowly dying market segment. We might be at a point where it's more likely a household as a Chromebook than a PC.
cmrdporcupine 3y ago
These days we're actually lucky to get any desktop experience at all. Look at e.g. Instagram Threads. The response to "desktop is hard" and "most users use mobile" is often now "only weirdos use desktop, don't even bother".
leptons 3y ago
I start with desktop layouts, create that, then make it responsive for mobile devices of all sizes. I'm often only given a desktop design for a page, and I'm fine with that. "Mobile first" is not the right way to approach the problem. I dislike desktop layouts that were obviously "mobile first" and only look like a wider version of a mobile layout. It's just the wrong way to do things. It's very easy to use media queries to make all the content of a desktop design fit into a mobile layout. I really don't understand the disconnect about this. I manage to get full functionality in both desktop and mobile devices of all sizes, but others cry "mobile first!" like if you don't do it that way, then you're doing it wrong? It's nonsense. "Mobile first" almost always leads to sub-par desktop experiences, and that's a shame. My favorite challenge is a design meant to be printed on a single page. The page also has to load on desktop and mobile browsers. With the printed page, the content absolutely cannot overflow even though it's dynamic content and could have text of any length, or list items of any length (scaling is used to a point, but often some items must be omitted from the layout). So in this case, it's absolutely "print first", not "mobile first". And yet I manage to make a perfectly good mobile responsive layout and a desktop layout out of a "print first" page.
- LocalPCGuy 3y ago
  The reasoning behind mobile-first was exactly what you say is "easy" and I disagree - it is not always "easy" to shrink contents of complex desktop layouts into a mobile one. Mobile first helps figure out the simplest possible version of a design. And whether building mobile first or desktop first isn't really a design choice, that's a development choice, and either way of building a site (as long IMO as you don't mix/match) is equally valid) and the same goal can be accomplished from a technical perspective. I agree though, that doesn't mean we need dumbed down desktop layouts or scaled up mobile versions, it just means we need to consider both and design accordingly. Mobile first is fine as the starting point, there are a lot of valid points to that design paradigm. But that is just the "first" part, then there are the rest of the parts to account for all viewport sizes.
willsmith72 3y ago
hahah, if you think the 4k screen and $120 laser mouse user is what designers are aiming for, you're dreaming. And that won't change. Mobile is king, second to 13-15 inch laptops.
deleted 3y ago
[deleted]

ryandrake 3y ago

Our UX's are turning into the Hospital Computer scene from Idiocracy[1]. 1: https://www.youtube.com/watch?v=LXzJR7K0wK0 https://www.youtube.com/watch?v=LXzJR7K0wK0

_chu1 3y ago
As time goes on that movie becomes more and more of a documentary.

hombre_fatal 3y ago

> It's not that hard. It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors.

stronglikedan 3y ago
> It actually is very hard Only when folks try to get fancy. K.I.S.S(illy).
- postalrat 3y ago
  Name a few example sites that kept it simple
  - SilasX 3y ago
    Hacker News, old Reddit. Both work fine on both mobile and desktop. (Reddit started breaking features like double tap to zoom though.) Yes, on a large screen you might have to increase the size. But a mediocre design you can recover from is better then being stuck with some meth addled designer’s unusable one.
    - kitkat_new 3y ago
      Hacker News YX could be way better though
    - imachine1980_ 3y ago
      Old Reddit doesn't work well on mobile devices at all. While it can scale the user interface, it's designed with a mouse in mind, making everything appear too small. I like using Old Reddit on desktop, but it's not user-friendly on mobile. For example, on HN (Hacker News), it's simpler; there are no images or different-sized icons. Even here sometimes struggle to tap the right links or flags, and I have to manually go to the settings to undo it. I'd prefer this over a poorly optimized mobile UI. However, optimizing the mobile web page would solve these problems.
      - SilasX 3y ago
        Rotate your device to landscape and it's fine. I guess part of the problem is sites training everyone not to do that. (Quora's expert designers will happily throw content into the void of the iPhone's notch on landscape, inventing a problem that didn't exist in older designs, despite them having been created before the notch ever came out.)
        imachine1980_ 3y ago
        Rotate isn't good solution it like saying not open site in full screen open it in half screen o is similar to mobile, I use mobile on the go and can't acomodate bad design whit behavior changes you need too change the design, so people can use it whiout needing to change everything.
- hombre_fatal 3y ago
  I don't think so. It's strictly more work than designing a good UI for a single device which is hard enough, and usually more work than designing multiple UIs for different devices no matter. A smartphone, iPad, and ultrawide monitor demand fundamentally different UX considerations. Generalizing across all of them, and in one codebase, demands a certain expertise or else everyone would be doing it.
  - denton-scratch 3y ago
    > demands a certain expertise I don't think it's a question of expertise; it's a question of effort (and cost). So it's a management issue; are we going to put the effort in to support desktops, or are we going to settle for a crap website? Because a website that doesn't support desktop is a crap website.
    - omarfarooq 3y ago
      Expertise properly applied would reduce effort and cost.
- butlike 3y ago
  I always read that as "keep it simpple; stupid" as in: dont try and make the code too smart. Keep it simple and stupid and leave it readable. I never took it as a value judgement agaist the programmer's intellect.
Nycto 3y ago
Users on mobile can’t make their screens that big, and the average users on desktops don’t expect a webpage to work when they resize their browsers that small. Trying to make both work with the same design can have a negative impact on your customers, from both a usability perspective and by increasing page weight. Instead, my advice is to create individual designs for each, share when it makes sense, but actively diverge when it’s good for your customers. There doesn’t need to be a single version of a page. Your mileage may vary.
- hombre_fatal 3y ago
  There are certainly trade-offs to consider which is one of the reasons UX design demands so much expertise no matter how many HNers dismiss it as some trivial practice (that they, conveniently, never want to do). Maintaining N versions of your application has costs that aren't necessarily great for your customers either. In my experience it usually cashes out into one version (either mobile or desktop) getting all the support and features while they slowly drip down into the other versions. Meanwhile a responsive design can have the upside of forcing support and feature rollout for all devices simultaneously. None of this is easy.
  - andrewprock 3y ago
    You're more than correct. In practice, working in small and medium organizations, I have met very few UX designers. Instead I have met plenty of graphical designers that know almost nothing about UX design. I've been at places where I - as a backend developer - know more about practical UX design than anyone on the design team. I think the reason why we have "bad mobile first design with awful desktop UX" is because very few of the people designing these experiences are UX designers. I was surprised the article didn't highlight the horror show that is Vector22 at Wikipedia, a design so colossally bad that after three years of suck costs the only path to saving face was to make it the default theme for all users: "Mission Accomplished!" https://en.wikipedia.org/wiki/Wikipedia:Vector_2022 https://en.wikipedia.org/wiki/Wikipedia:Vector_2022
    - pmontra 3y ago
gedy 3y ago
It's very hard for many designers and others to get their head around it, sure. But I think a lot of the challenge is using pixel perfect static mockups drawn in some design tool. It would be faster to have a napkin sketch and work with UI dev and figure out the cascading and wrapping at design time.
- solardev 3y ago
  Figma has responsive design and reflow tools built in these days.
  - The5thElephant 3y ago
    Not really. No media queries, no percent widths or non-pixel units, no margins (everything is padding or gap), no viewport units, etc. I'm a CSS person who works in Figma every day and Figma absolutely sucks for responsive design and handoff to devs. I wish I could just design in Framer or Webflow but those tools while being Figma-like are entirely catered to content websites and not to product design. Design tools should render with HTML and CSS, not make the mistake Figma made in creating their own rendering engine they have to painstakingly recreate CSS from scratch with.
    - deleted 3y ago
      [deleted]
vorticalbox 3y ago
https://dev.to/swyx/100-bytes-of-css-to-look-great-everywhere-19pd https://dev.to/swyx/100-bytes-of-css-to-look-great-everywher...
enriquto 3y ago
> It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors. A motherfucking website made with plain html, no css and no javascript is responsive and works everywhere. Any problems found when you go beyond this are entirely self-inflicted.
- dangus 3y ago
  And that website does nothing. It’s just text, and it has one image that’s too small on a mobile view. Now try to do the same thing with a complex app like your bank’s website, which needs to handle every type of account including credit cards, checking accounts, and investment accounts, rewards, and a travel/shopping portal.
  - usrbinbash 3y ago
    > And that website does nothing. It’s just text, and it has one image Which is pretty much what 99% of websites need to be able to display. That includes many sub-sections of web applications. > Now try to do the same thing with a complex app like your bank’s website Fun story, my bank has a website that works great on both my phone and my PC. On the one I can navigate it fully with one thumb, on the other it is information-dense and respects that I have a high precision pointing device available. They also offer different Apps for Phone and Desktop.
    - dangus 3y ago
      9 of the top 20 most visited websites primarily deal in video and multimedia. I disagree that “99%” of websites “just need text.”
      - TeMPOraL 3y ago
        Those are the outliers, and winner-take-all ones to boot - they ate most other websites that "primarily deal in video and multimedia". Everything else deals primarily with text.
solardev 3y ago
Really? On every team I've worked since the media query and bootstrap days, it's been normal to have a mobile, tablet, and desktop version at least. Tiny phone and ultrawide were bonuses, but having at least the basic three meant a somewhat usable experience for everyone. These days it's even easier with MUI and similar UI libs that have responsive components built-in. Tailwind also makes it very easy to build your own.
- civilitty 3y ago
  It’s going to get even easier once container queries are widely deployed (if they’re not already). We’ll be able to design components to scale to their parent instead of screen size, making them much more generic.
- jasonlotito 3y ago
  Technically, that's correct (which means it's the best kind of correct). But... I'd add that doing that well isn't easy. I frequently find cases where the mobile version simply removes features the desktop version has. And tablet version are very very rare. They tend to be either just the desktop or mobile version. Rarely is someone designing for tablet. And that makes sense. Designing 3 different sites to all be the same feature-wise isn't trivial. Then you throw mobile apps on top of it, and suddenly it becomes much harder. Can it be done? Sure. But I wouldn't say it's trivial to do it well.
phkahler 3y ago
>> It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors. Sure I'll agree it's hard, but don't web designers do their work on desktop machines? It seems like even if they are primarily targeting mobile, they must see the results on desktop right? There have to be some known strategies for dealing with it, and they must be aware of the problems. Right?
speak_plainly 3y ago
If you're designing a website to work on the smallest smartphone to ultra wide monitors you need to work on a more serious quality management strategy.
sebastianconcpt 3y ago
Even if we go with the "is not that hard" narrative, is for sure damn laborious. Also let's not pretend that all the intermediate sizes aren't also a requirement as the dynamic adaptation from one to another medium being zero effort in order to "just work".
irrational 3y ago
Is it? CSS Grid and flexbox exist. What I do is design at the smallest screen size first (mobile first), then increase the screen size until it looks bad/breaks, then I set a breakpoint and use CSS to adjust things as needed. Rinse and repeat as many times as needed until it looks good at all screen sizes. It really is not difficult if you know what you are doing.
javajosh 3y ago
>It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors. Maybe the real solution is to treat a wide monitor as multiple mobile screens side-by-side. That is you give your user N-views into your app with no other coupling between them, almost like browser tabs. It sounds silly but I could think of worse solutions. Note: N would be equal to floor(laptop-width/mobile-width).
- omarfarooq 3y ago
  TweetDeck is an example of this.
fsflover 3y ago
A tiny company called Purism did it, so it can't be that hard: https://news.ycombinator.com/item?id=19328085 https://news.ycombinator.com/item?id=19328085
croes 3y ago
At least make one mobile and one desktop view. It's strange that I have to scroll horizontally to view source code and at the same time 2/3 of my screen is empty.
- butlike 3y ago
  Are you suggesting returning to the time when every site had "m." as a subdomain? Like m.facebook.com?
  - croes 3y ago
    No need for a subdomain. Just design one for mobile and one for desktop. Could be purely CSS, could be JS or SSR
robbyking 3y ago
I'm sorry, if Wix and SquareSpace can figure it out for their templates, a site with dedicated UX designers should be able to figure it out, too. The smartphone is 15 years old, designers know what to expect.
- vitaflo 3y ago
  The problem isn’t UX Designers figuring it out, it’s managers not wanting to spend time designing different breakpoints because they want the site delivered ASAP. A lot of bad UX decisions come from bad management, not necessarily bad designers.
leptons 3y ago
It isn't that hard if you know anything about modern CSS. Sure, for some people that hate writing front-end code, it's going to be a real pain. But for anyone that focuses on front-end, it really shouldn't be difficult at all.
bob1029 3y ago
I would disagree with "very" hard. We don't have to touch every class of device with our B2B product, but we do have to support desktop/tablet/etc. We decided to make a tradeoff in terms of aesthetics and keep the overall design as simple as possible. When you don't plan to test the dimensions between iPhone and iPad or concern yourself with foldable/esoteric devices, you should probably not get too elaborate with your design language. Our app has 1 simple breakpoint @ 960px. Below this, we assume we are on smartphone and run with one column layouts. Above, we display the full width view. We combine the media query with CSS grid layouts to swap between modes. The specific number was chosen to allow full-size presentation in side-by-side window arrangement on a 1080p desktop (our most typical power user scenario). Again, we are B2B and only have to tolerate US audiences. So, we have the ability to get away with far more than developers who have to polish B2C experiences with international audiences. If I had to do B2C web properties and ideally support as many devices as possible, I would be more amenable to that adjective. Otherwise, I would say it is a normal amount of "hard".
- quest88 3y ago
  How do you solve non-layout issues while keeping the site fast? Maybe you want your site to functionally behave differently, but don't want to implement client-side rendering.
  - bob1029 3y ago
    Perhaps you could provide an example of a non-layout issue?
- Scarblac 3y ago
  But does the desktop version get more functionality?
  - bob1029 3y ago
    Same effective functionality between touch-enabled and desktop devices. The main differences are in certain edges. For example, on devices with integrated cameras we present extra options for acquiring photos whereas on the desktop w/out camera, you get a file/browse option instead. 90%+ of the javascript in our app is used to normalize device-specific I/O quirks. The rest is to do things like disable form elements when the form is submitted.
BiteCode_dev 3y ago
And costly in dev and support. Not to mention the market for this target is shrinking so much compared to mobile it's easy to understand how the choice is made.
thunderbong 3y ago
I'm sure the people who complain aren't the ones with the smallest smartphones or the ones with ultrawide monitors with a maximised window. Just as an example - Look at Google Drive in a regular laptop / desktop browser. All the relevant and frequently used actions are behind menus and icons.
uoaei 3y ago
The entire point is you don't have to design one UX for both kinds of devices. The screen resolution is an OK proxy but there's buttons in every mobile browser for requesting the desktop site so obviously there's more reliable ways to tell the webserver which kind of device is requesting the site.

makeitdouble 3y ago

> https://idlewords.com/talks/website_obesity.htm#sprawl https://idlewords.com/talks/website_obesity.htm#sprawl And this site quite fittingly has one narrow and centered column with huge left and right gaps. Otherwise I think the majority of windows laptops now have touch screens, so while they still have a pointer based input most of the time, touch friendly design is an advantage for the majority of the users. It would be nice to have specific dedicated designs for all cases, but I am sympathetic with how much of a challenge that is.

softfalcon 3y ago
Not trying to detract from your point, and maybe I’m “out of touch” but I don’t see hardly anyone but a rare few folks actually using touch screen laptops. I see many people with laptops, but other than one person I know who exclusively buys Microsoft Surface laptops, the average laptop user I know is just typing and clicking away like normal. How many folks actively go looking for touch in their laptop? I keep hearing about it on YouTube reviews, but even in families with kids, the kids don’t even use the touch features even if the laptop supposedly has it. I’m just amazed how much “touch on laptop” comes up and I quite literally never see it in reality.
- Roark66 3y ago
  Well.. I've been using touch on my laptops since the start. My current laptop is a mini asus "tablet pc" with detachable keyboard. When I'm just web browsing I detach the keyboard and use touch. But even on normal laptops I got from work I'd prefer touch for many things like scrolling over the built in touchpad. Especially when I'm using the laptop as a portable device on my lap, in a plane or on a bus. I have to admit I don't use touchscreens that much when I can put a laptop on top of a desk. But when I'm sitting at a desk I much prefer a desktop pc.
  - ako 3y ago
    I mostly use an iPad when i don’t need a keyboard, especially when sitting on a couch (typing this on my iPad). I noticed that as soon as I pair the iPad with a Bluetooth keyboard, and an external display, I’ll also use my mouse to navigate. So, even for a touch first device like an iPad, when using a keyboard, touch is not the best way to navigate.

yaky 3y ago

The opposite to your 4K screen situation is also true - many modern sites have so much whitespace that I have to zoom out to 80% to use them comfortably on my old laptop with 1366x768px display.

esafak 3y ago
Have you tried setting your browser agent to mobile?

dheera 3y ago

> The problem starts when designers ignore these facts, and instead pop giant buttons, zero navbars, hamburger menus, and thin columns with low information density into the Webbrowser running on my PC with a 4k screen and a 120$ laser mouse. And using phones as a 2FA device. A giant, relatively immobile device is a much better 2FA device than something that is easily stolen.

layer8 3y ago

> 4k screen Another problem is designers working only on 4K/5K screens and not taking into account how little of their design fits on a FHD screen that a major part of the desktop population still uses.

danShumway 3y ago
Yep, I see this in both directions. People are still of the mindset that "desktop" means a single resolution and aspect ratio that everyone uses. That wasn't really the case in the past, but it's really not the case today. - On Linux, the assumption is that everyone has a 1920x1080 monitor, so if you get a high resolution 13-inch device like a Surface suddenly half of the apps are unusable because everything is scaled so tiny, and the apps literally just do not know how to handle the aspect ratio. - On Web and in popular design studios, the assumption is that everyone has a full 4K mac and so everything becomes larger and spread apart; you load them up on a normal monitor and everything becomes cluttered and the interface of the app starts taking up more room than the content you're looking at. Test your apps on multiple resolutions y'all, and for the love of everything that is holy if you're designing a desktop app, please add button density and font size controls to your settings. Some weirdos like me even use multiple monitors of different resolutions and pixel densities hooked up to the same computer at the same time, so being able to adjust on the fly or handle fractional scaling is kind of a big deal for apps that I use. Standard resolutions are a myth.
- marssaxman 3y ago
  Caring so much about screen resolution has always seemed strange to me when not everyone maximizes their browser window, anyway. My browser windows are generally close to square.
  - danShumway 3y ago
    I think that differing device resolutions and aspect ratios in some ways forced designers to think about things that were always worth thinking about but were easier to ignore. I use a tiled window manager, I care about whether your desktop site is responsive even at minimal widths because I tile windows. I also have a touchscreen monitor hooked up to my desktop and I like to be able to use it. And sometimes I also full-screen windows on a 32-inch screen and use a mouse-and-keyboard. If a desktop site accommodates me in all of those scenarios, it'll probably be fine on a phone as well. But it was so easy in the past to just ignore that and treat PCs like they were uniform devices used in a uniform way, and phones meant that you suddenly had to care about what a website looked like in a single-column view, you couldn't just tell your users to maximize the browser window. Unfortunately, rather than taking away the lesson that design should adjust to nonstandard situations, layouts, and input-modes that can not be fully predicted or tested for in advance -- instead developers took away the lesson "okay, now there are two standard devices we have to support: mobile and desktop." The distinction isn't real, there is no hard line between a desktop and a mobile site. There are mobile tablets that are big enough that they should be served a desktop layout, there are desktops with touchscreen displays, there are monitors that are 3/4 ratios. And there never was a standard and computers were always like that, but it's an understated truth that every developer and every designer would secretly love to develop exclusively for consoles with integrated screens and one input method, and developers often kind of behind-the-scenes somewhat resent the fact that general computing is an open ecosystem with diverse devices. So designers often just treat computers like they have two completely discrete interfaces, or at worst decide that because they're not targeting one of them that they now have permission to target exactly one resolution and size again. Sometimes that takes the form of designing "mobile only" like the top-level comment talks about and calling desktops a dead platform. Sometimes it means designing desktop only and getting mad that somebody flipped their monitor vertically instead of horizontally and now wants the ability to move a side-drawer to the bottom of the screen.

denton-scratch 3y ago

> The problem is "mobile only" design. Agree. Actually, I think what happens is that the team adopts a "mobile-first" policy, which is reasonable, since most visitors wil be mobile. But they don't follow through with the "desktop-after" corollary, and they don't engage with the "progressive enhancement" philosophy, because that gets even more costly than simply having two websites. I find phones impossible to use as web browsers. My eyesight is too poor, and my thumbs are too fat. I use phones for making phone-calls and for trading SMS messages; if I need a website, I use my laptop. But that's just me. I think the real problem is that mobile phones make awful platforms for browsing websites. Native checkboxes and native select-boxes are often unusable, so developers use "frameworks" <spit> that replace them with Javascript monstrosities. Because that all depends on plugins and code, each website ends up with it's own idiosyncratic UX. I think the correct solution is for phone makers to deliver platforms that can render HTML so it's useable. Then the only problem for devs is create responsive layouts, which isn't that hard.

The5thElephant 3y ago

Designers usually not the problem here. Most are well aware that rendering should change between different types of devices and displays, they use these website and devices too! The problem usually is the resources and time available to implement such designs. Most of the time the devs simply don't have the time, desire, or even ability to implement more advanced responsive design, so designers will design what will actually get made.

leptons 3y ago
It takes maybe 2 hours for someone experienced to turn a desktop layout into a mobile responsive layout for all screen sizes using media queries. Longer than that usually means less experience.
- The5thElephant 3y ago
  Sure for a content-site template, blog, or something else fairly basic. This is not at all the case for things like art-directed super-custom designed sites like magazines, fashion brands, museums, etc, OR highly complex interactive SAAS web apps like the ones I work on. These have lots of unique considerations like complex animations, layered menus and controls, optimizing for change from mouse to touch interactions, handling the higher rate of people who use zoomed text on mobile devices, adapting to device safe areas in portrait and landscape, etc. I am a designer and HTML/CSS coder so I am aware of the challenges from both directions.
  - leptons 3y ago
    Your use case sounds very much like an edge-case in websites. Of course highly customized animations and weird out-of-the-ordinary UI elements are going to be an extra pain in the ass. I have no doubt there are customer requests that simply can't be fulfilled with HTML and have to be done in WebGL. The fact is, most sites are "fairly basic" and only really need HTML, CSS, and a little javascript to accommodate the vast majority of use cases. I'm glad you're doing complicated things, but that doesn't change the reality of most web developers.

peckrob 3y ago

About 6 years ago, the company [0] that owns most of the local newspapers in my state did a "mobile first" redesign of their website ... which actually was a "mobile ONLY" redesign. It was so, so bad it was almost totally unusable on anything larger than a tablet. It made it virtually impossible to read articles on a desktop because everything was so spread out, the font sizes were all messed up, navigation was hidden in a tiny little hamburger at the far upper right of the screen, and a bunch of other problems. But what was wild was how easy it was to fix them. I ended up writing a small (maybe 100 line) CSS user style that fixed almost all of the problems. They did eventually "fix" the site so that it wasn't as bad on desktop. [0] https://www.al.com/ https://www.al.com/

dorfsmay 3y ago

And no way to adjust the sound volume. In a nutshell everything Instagram does!

butlike 3y ago
We should bring back below-the-fold auto-playing music on sites.

makingstuffs 3y ago

100% this. The amount of times I get given a mobile wireframe then subsequently brushed aside when I enquire about desktop is unreal. Our work flow often ends up: get design > ask for desktop > told to ‘use best judgement’ > uses best judgement > get a load of amends as best judgement wasn’t what the client has in mind > repeat. Don’t even get me started on the mythical black hole that is the tablet screen. It’s like designers have forgotten that they exist and people use them at times.

dehrmann 3y ago

> PCs and Laptops exist But it's a slowly dying market segment. We might be at a point where it's more likely a household as a Chromebook than a PC.

cmrdporcupine 3y ago

These days we're actually lucky to get any desktop experience at all. Look at e.g. Instagram Threads. The response to "desktop is hard" and "most users use mobile" is often now "only weirdos use desktop, don't even bother".

leptons 3y ago

I start with desktop layouts, create that, then make it responsive for mobile devices of all sizes. I'm often only given a desktop design for a page, and I'm fine with that. "Mobile first" is not the right way to approach the problem. I dislike desktop layouts that were obviously "mobile first" and only look like a wider version of a mobile layout. It's just the wrong way to do things. It's very easy to use media queries to make all the content of a desktop design fit into a mobile layout. I really don't understand the disconnect about this. I manage to get full functionality in both desktop and mobile devices of all sizes, but others cry "mobile first!" like if you don't do it that way, then you're doing it wrong? It's nonsense. "Mobile first" almost always leads to sub-par desktop experiences, and that's a shame. My favorite challenge is a design meant to be printed on a single page. The page also has to load on desktop and mobile browsers. With the printed page, the content absolutely cannot overflow even though it's dynamic content and could have text of any length, or list items of any length (scaling is used to a point, but often some items must be omitted from the layout). So in this case, it's absolutely "print first", not "mobile first". And yet I manage to make a perfectly good mobile responsive layout and a desktop layout out of a "print first" page.

LocalPCGuy 3y ago
The reasoning behind mobile-first was exactly what you say is "easy" and I disagree - it is not always "easy" to shrink contents of complex desktop layouts into a mobile one. Mobile first helps figure out the simplest possible version of a design. And whether building mobile first or desktop first isn't really a design choice, that's a development choice, and either way of building a site (as long IMO as you don't mix/match) is equally valid) and the same goal can be accomplished from a technical perspective. I agree though, that doesn't mean we need dumbed down desktop layouts or scaled up mobile versions, it just means we need to consider both and design accordingly. Mobile first is fine as the starting point, there are a lot of valid points to that design paradigm. But that is just the "first" part, then there are the rest of the parts to account for all viewport sizes.

willsmith72 3y ago

hahah, if you think the 4k screen and $120 laser mouse user is what designers are aiming for, you're dreaming. And that won't change. Mobile is king, second to 13-15 inch laptops.

deleted 3y ago

[deleted]