10 ms·

> 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.
        SilasX 3y ago
        I find landscape easier to use on mobile. I don’t get the hate for it.
    - jazzyjackson 3y ago
      old reddit never figured out how to deal with deeply nested threads without ending up l i k e t h i s
      - esafak 3y ago
        Maybe that is a feature: stop when you get to that point.
        SilasX 3y ago
        Or just load a comment closer to that one.
    - KronisLV 3y ago
      > Hacker News The links are too close together on a small phone screen and I cannot tap them accurately half the time. This might mean the difference between upvoting/downvoting something, or flagging something instead of clicking on the context option, when I don't mean to. HN is pretty great when it comes to desktop, though - simple design, no dark patterns, except for maybe the comments with lower score becoming unreadable, which is bad from an accessibility point of view and an odd design choice otherwise. > old Reddit Again - by far the best site when compared with the new version, which has bad performance on both desktop Firefox and mobile Firefox; in addition to lots of dark patterns, sometimes refusing you the ability to view a page if you don't sign in, in addition to nagging you to download their app. It's still bad, though - too zoomed out, can't read anything without zooming in a lot with a phone and when you do, you need to scroll horizontally, which makes reading paragraphs of text a pain. Curiously, they do/did have a version that actually looked okay on phones (i.reddit.com, or something like that), but it doesn't seem to open anymore and redirects to the main site instead. I think that once you go below ~400px of screen width, designing a decent UI becomes difficult regardless of what you do. It's so much easier to mess around with the meta viewport tag and offer a slightly zoomed out version, but even then you still have the challenge of making something usable across multiple platforms, input methods and so on.
      - SilasX 3y ago
        I said that they're fine -- which they are -- not that they do every feature the best possible way. In any case where the initial rendering is bad, it's trivially fixable with your existing browser affordances. On HN, yes, the arrows are small. And you can trivially zoom in whenever you need them to be bigger and more easily select one over the others. This is worlds ahead of mobile-first designs that lock you into one specific view that you can't modify. As I said in the other comment: "mediocre design you can recover from" is much more pleasant than meth-addled design you're stuck with -- which about sums up HN/old reddit vs typical mobile first. >It's still bad, though - too zoomed out, can't read anything without zooming in a lot with a phone and when you do, Huh? New reddit doesn't do that any better, which can fit only a tiny amount of readable text on the screen as well.
  - harrydehal 3y ago
    In terms of keeping it simple, but having a responsive design that covers mobile/tablet/desktop -- do these count? https://service-manual.nhs.uk/design-system https://service-manual.nhs.uk/design-system https://designsystem.digital.gov https://designsystem.digital.gov
- 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.

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.
        SilasX 3y ago
        I find landscape easier to use on mobile. I don’t get the hate for it.
  - jazzyjackson 3y ago
    old reddit never figured out how to deal with deeply nested threads without ending up l i k e t h i s
    - esafak 3y ago
      Maybe that is a feature: stop when you get to that point.
      - SilasX 3y ago
        Or just load a comment closer to that one.
  - KronisLV 3y ago
    > Hacker News The links are too close together on a small phone screen and I cannot tap them accurately half the time. This might mean the difference between upvoting/downvoting something, or flagging something instead of clicking on the context option, when I don't mean to. HN is pretty great when it comes to desktop, though - simple design, no dark patterns, except for maybe the comments with lower score becoming unreadable, which is bad from an accessibility point of view and an odd design choice otherwise. > old Reddit Again - by far the best site when compared with the new version, which has bad performance on both desktop Firefox and mobile Firefox; in addition to lots of dark patterns, sometimes refusing you the ability to view a page if you don't sign in, in addition to nagging you to download their app. It's still bad, though - too zoomed out, can't read anything without zooming in a lot with a phone and when you do, you need to scroll horizontally, which makes reading paragraphs of text a pain. Curiously, they do/did have a version that actually looked okay on phones (i.reddit.com, or something like that), but it doesn't seem to open anymore and redirects to the main site instead. I think that once you go below ~400px of screen width, designing a decent UI becomes difficult regardless of what you do. It's so much easier to mess around with the meta viewport tag and offer a slightly zoomed out version, but even then you still have the challenge of making something usable across multiple platforms, input methods and so on.
    - SilasX 3y ago
      I said that they're fine -- which they are -- not that they do every feature the best possible way. In any case where the initial rendering is bad, it's trivially fixable with your existing browser affordances. On HN, yes, the arrows are small. And you can trivially zoom in whenever you need them to be bigger and more easily select one over the others. This is worlds ahead of mobile-first designs that lock you into one specific view that you can't modify. As I said in the other comment: "mediocre design you can recover from" is much more pleasant than meth-addled design you're stuck with -- which about sums up HN/old reddit vs typical mobile first. >It's still bad, though - too zoomed out, can't read anything without zooming in a lot with a phone and when you do, Huh? New reddit doesn't do that any better, which can fit only a tiny amount of readable text on the screen as well.
- harrydehal 3y ago
  In terms of keeping it simple, but having a responsive design that covers mobile/tablet/desktop -- do these count? https://service-manual.nhs.uk/design-system https://service-manual.nhs.uk/design-system https://designsystem.digital.gov https://designsystem.digital.gov
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.