13 ms·

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.

by 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
    I read that page, then browsed Wikipedia a little on desktop. It's a site that I use very often and I didn't notice anything weird. I could have sworn that it has been the theme of Wikipedia for at least 10 years. I also checked if I had created some rules for that site in Stylus and uBlock Origin, nothing. For once I'm lucky that a change didn't destroy one of my workflows. One could say that if I didn't notice the transition they could have spared themselves all the work, or one could argue that they performed a perfect job. Anyway, I get directly to the page I need from Google. I found several threads on Reddit complaining about the change and this one https://www.reddit.com/r/wikipedia/comments/10g2cir/im_pretty_bummed_about_the_new_update/ https://www.reddit.com/r/wikipedia/comments/10g2cir/im_prett... I see a different usage pattern "all I had to do was open the site and use the search bar. And then from there it was easy to get to the main page, current events, etc." The home page, current events? I'm sure I never heard about current events before now and about the home page, I know that there is one but the search bar of my browser is closer to Wikipedia's internal pages.
    - andrewprock 3y ago
      Without going into details about Vector22, it's certainly better today than it was at launch. It still has a very poor floating ToC UX.
  - nicoburns 3y ago
    Agreed. I had the pleasure to work with talented specialist UX designers early in my careers, and their designs were really fantastic. They also worked really closely with the developers, both to understand the medium they were designing for and as a first line of feedback before things got to real users/clients. Unfortunately some of the designers I've worked with more recently were primarily graphic designers without a UX background, and actually became an impediment to good design because they were given authority over it despite not really know what they were doing. I think it's probably an unfortunate consequence of there being more demand for UX designers then there are good UX designers, and simultaneously being a lack of jobs available for graphic designers. And a lot of hiring companies not really understanding what makes a good UX designer.
  - 3y ago
- bigDinosaur 3y ago
  People tend to dismiss UX 'experts' because frequently they end up being the ones who destroy perfectly good interfaces based on trends or similar. The principled ones who adopt a scientific approach are much rarer.
  - marginalia_nu 3y ago
    The ones who adopt a scientific approach are by far the worst. Design is ultimately all about how things ought to be, an act of judgement, meanwhile science is wholly unsuitable for such questions, since it only tells us what is, which following Hume, cannot on its own lead to conclusions about what ought to be. You get a sort of garbage-in-garbage-out effect if you apply science to a field like design, where it only serves to amplify your own convictions, as what is being fed into the scientific process as unquestioned assumptions inevitably fall out of it as conclusions. At best you get KPI driven design, which is a vehicle for enshittification, not for building great design.
    - bigDinosaur 3y ago
      The core of science is iteration based on experiment and hypothesis generation. The scientific approach to UX is simply a hypothesis that a UX change is superior, and an experiment with a measure as to whether or not this is true. Yes, of course you can optimise scientifically for user-antagonistic KPI's (no need to invoke Hume, his point is true and also useless) but the alternative to not adopting a scientific approach is literally just opinion which on the whole is far worse (would you want your airline cockpit's UX to be designed based on a designer's opinion, or real scientific approaches to how people process information and intuit controls?). Of course one would take a good designer's opinion over some MBA-ridden process but a good designer is likely intuiting what would be validated by a more scientific approach anyway.
    - itishappy 3y ago
      Can you relate that to specifics from the article? To my (admittedly non-designer) eyes it appears to be a great example of how science can be used to improve design, and I happen to agree with the findings presented, so I'm curious where you see this breaking down.
__xor_eax_eax 3y ago
Huge engineering cost though. If most of your customers are on mobile, makes sense to optimize for mobile, and hope its "good enough" on desktop. At the end of the day its all an ROI problem (as are most things)
- deleted 3y ago
  [deleted]
- bluGill 3y ago
  The cost need not be huge. Most of the costs should be content, and just the theme is different. However even ignoring that, two themes can be hard if you do them independently. However often only a few changes to one theme are needed to become acceptable, and that is good enough. This in turns means you can limit costs: spend 1 week on making a good desktop theme will already make a big difference as you get the worst offenders fixed.
threatofrain 3y ago
From an SSR perspective this seems rather hard. How do you correctly identify the user's device at serve time?
- RadiozRadioz 3y ago
  People say SSR like it's a new concept, but this was how it worked for a long time. Guess based on user agent (or other fingerprinting metric of choice), redirect to guessed site, provide user the option to override when the page appears, remember the choice in cookie (or local storage). Though personally I think you can do a lot with responsive CSS if you try hard enough - that is my preferred option.
  - progval 3y ago
    > redirect to guessed site I always wondered about that. What's the point of redirecting instead of serving a different template on the same URL?
    - RadiozRadioz 3y ago
      That works, you'd just have to put the setting in a cookie rather than local storage.
      - progval 3y ago
        Why? If you can detect mobile user-agents on the first page load, can't you do it in the next page loads too?
- Almondsetat 3y ago
  Devices should be truthful in the type of content they request. If your phone somehow tells my website that it’s a tablet or a laptop then you should reconsider the intelligence of who has developed your software
  - bluGill 3y ago
spookthesunset 3y ago
One problem with two separate designs is deciding when to show one vs. the other. This gets especially tricky when people share links. Wikipedia, for example, has two different URL's: one for mobile and one for desktop. How often do you get links to the mobile version instead of the other? And if you keep the URL the same but serve different output depending on the browser, then you get inconsistent behaviour between two different devices. Nailing the UX for mobile and desktop is actually pretty damn hard.
butlike 3y ago
You can request the desktop site on mobile, though
fsflover 3y ago
> Users on mobile can’t make their screens that big I can connect my Librem 5 phone to a screen/keyboard and I get a full desktop.
- olyjohn 3y ago
  It's not mobile when it's connected to a screen / keyboard is it?
  - fsflover 3y ago
    It's never mobile: It runs a desktop GNU/Linux. Dedicated apps are convergent, i.e., automatically change depending on the screen size: https://puri.sm/posts/converging-on-convergence-pureos-is-convergent-welcome-to-the-future/ https://puri.sm/posts/converging-on-convergence-pureos-is-co...
kylebenzle 3y ago
I split my laptop screen vertical with usually a browser on either side. Occasionally a web page will render itself as if on mobile because it thinks I'm on a narrower screen. I agree with comment above that it is very hard to make one website responsive to multiple screen sizes.
- robertoandred 3y ago
  Except you are on a narrower screen. Sounds like correct functionality to me.
LocalPCGuy 3y ago
I think you're trying to make a very nuanced point, and I tend to agree that there are different needs for different viewport sizes. But I think it's important to note the difference between the design and the technology to build it. The technology should, IMO, as much as possible, seamlessly switch between the various layouts when it makes sense from a viewport size perspective. Definitely don't want, IMO, to deliver completely different sites based on device type/site from a technological point of view, we've tried that before and it isn't a good idea. I also think one of the things good designers do is to take this into account, and make pages that are built up of components that work at various sizes, not just scaled up from mobile. In addition, a good designer will setup the page design such that it can scale up and down nicely from one viewport size to another. So, while I don't 100% agree that you need "individual" designs for each, I do think you need a designer that takes the different viewport sizes into account and provides the appropriate adjustments for each. And developers that are skilled at then building those pages.

by Nycto 3y ago

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
  I read that page, then browsed Wikipedia a little on desktop. It's a site that I use very often and I didn't notice anything weird. I could have sworn that it has been the theme of Wikipedia for at least 10 years. I also checked if I had created some rules for that site in Stylus and uBlock Origin, nothing. For once I'm lucky that a change didn't destroy one of my workflows. One could say that if I didn't notice the transition they could have spared themselves all the work, or one could argue that they performed a perfect job. Anyway, I get directly to the page I need from Google. I found several threads on Reddit complaining about the change and this one https://www.reddit.com/r/wikipedia/comments/10g2cir/im_pretty_bummed_about_the_new_update/ https://www.reddit.com/r/wikipedia/comments/10g2cir/im_prett... I see a different usage pattern "all I had to do was open the site and use the search bar. And then from there it was easy to get to the main page, current events, etc." The home page, current events? I'm sure I never heard about current events before now and about the home page, I know that there is one but the search bar of my browser is closer to Wikipedia's internal pages.
  - andrewprock 3y ago
    Without going into details about Vector22, it's certainly better today than it was at launch. It still has a very poor floating ToC UX.
- nicoburns 3y ago
  Agreed. I had the pleasure to work with talented specialist UX designers early in my careers, and their designs were really fantastic. They also worked really closely with the developers, both to understand the medium they were designing for and as a first line of feedback before things got to real users/clients. Unfortunately some of the designers I've worked with more recently were primarily graphic designers without a UX background, and actually became an impediment to good design because they were given authority over it despite not really know what they were doing. I think it's probably an unfortunate consequence of there being more demand for UX designers then there are good UX designers, and simultaneously being a lack of jobs available for graphic designers. And a lot of hiring companies not really understanding what makes a good UX designer.
- 3y ago
bigDinosaur 3y ago
People tend to dismiss UX 'experts' because frequently they end up being the ones who destroy perfectly good interfaces based on trends or similar. The principled ones who adopt a scientific approach are much rarer.
- marginalia_nu 3y ago
  The ones who adopt a scientific approach are by far the worst. Design is ultimately all about how things ought to be, an act of judgement, meanwhile science is wholly unsuitable for such questions, since it only tells us what is, which following Hume, cannot on its own lead to conclusions about what ought to be. You get a sort of garbage-in-garbage-out effect if you apply science to a field like design, where it only serves to amplify your own convictions, as what is being fed into the scientific process as unquestioned assumptions inevitably fall out of it as conclusions. At best you get KPI driven design, which is a vehicle for enshittification, not for building great design.
  - bigDinosaur 3y ago
    The core of science is iteration based on experiment and hypothesis generation. The scientific approach to UX is simply a hypothesis that a UX change is superior, and an experiment with a measure as to whether or not this is true. Yes, of course you can optimise scientifically for user-antagonistic KPI's (no need to invoke Hume, his point is true and also useless) but the alternative to not adopting a scientific approach is literally just opinion which on the whole is far worse (would you want your airline cockpit's UX to be designed based on a designer's opinion, or real scientific approaches to how people process information and intuit controls?). Of course one would take a good designer's opinion over some MBA-ridden process but a good designer is likely intuiting what would be validated by a more scientific approach anyway.
  - itishappy 3y ago
    Can you relate that to specifics from the article? To my (admittedly non-designer) eyes it appears to be a great example of how science can be used to improve design, and I happen to agree with the findings presented, so I'm curious where you see this breaking down.

__xor_eax_eax 3y ago

Huge engineering cost though. If most of your customers are on mobile, makes sense to optimize for mobile, and hope its "good enough" on desktop. At the end of the day its all an ROI problem (as are most things)

deleted 3y ago
[deleted]
bluGill 3y ago
The cost need not be huge. Most of the costs should be content, and just the theme is different. However even ignoring that, two themes can be hard if you do them independently. However often only a few changes to one theme are needed to become acceptable, and that is good enough. This in turns means you can limit costs: spend 1 week on making a good desktop theme will already make a big difference as you get the worst offenders fixed.

threatofrain 3y ago

From an SSR perspective this seems rather hard. How do you correctly identify the user's device at serve time?

RadiozRadioz 3y ago
People say SSR like it's a new concept, but this was how it worked for a long time. Guess based on user agent (or other fingerprinting metric of choice), redirect to guessed site, provide user the option to override when the page appears, remember the choice in cookie (or local storage). Though personally I think you can do a lot with responsive CSS if you try hard enough - that is my preferred option.
- progval 3y ago
  > redirect to guessed site I always wondered about that. What's the point of redirecting instead of serving a different template on the same URL?
  - RadiozRadioz 3y ago
    That works, you'd just have to put the setting in a cookie rather than local storage.
    - progval 3y ago
      Why? If you can detect mobile user-agents on the first page load, can't you do it in the next page loads too?
Almondsetat 3y ago
Devices should be truthful in the type of content they request. If your phone somehow tells my website that it’s a tablet or a laptop then you should reconsider the intelligence of who has developed your software
- bluGill 3y ago

spookthesunset 3y ago

One problem with two separate designs is deciding when to show one vs. the other. This gets especially tricky when people share links. Wikipedia, for example, has two different URL's: one for mobile and one for desktop. How often do you get links to the mobile version instead of the other? And if you keep the URL the same but serve different output depending on the browser, then you get inconsistent behaviour between two different devices. Nailing the UX for mobile and desktop is actually pretty damn hard.

butlike 3y ago

You can request the desktop site on mobile, though

fsflover 3y ago

> Users on mobile can’t make their screens that big I can connect my Librem 5 phone to a screen/keyboard and I get a full desktop.

olyjohn 3y ago
It's not mobile when it's connected to a screen / keyboard is it?
- fsflover 3y ago
  It's never mobile: It runs a desktop GNU/Linux. Dedicated apps are convergent, i.e., automatically change depending on the screen size: https://puri.sm/posts/converging-on-convergence-pureos-is-convergent-welcome-to-the-future/ https://puri.sm/posts/converging-on-convergence-pureos-is-co...

kylebenzle 3y ago

I split my laptop screen vertical with usually a browser on either side. Occasionally a web page will render itself as if on mobile because it thinks I'm on a narrower screen. I agree with comment above that it is very hard to make one website responsive to multiple screen sizes.

robertoandred 3y ago
Except you are on a narrower screen. Sounds like correct functionality to me.

LocalPCGuy 3y ago

I think you're trying to make a very nuanced point, and I tend to agree that there are different needs for different viewport sizes. But I think it's important to note the difference between the design and the technology to build it. The technology should, IMO, as much as possible, seamlessly switch between the various layouts when it makes sense from a viewport size perspective. Definitely don't want, IMO, to deliver completely different sites based on device type/site from a technological point of view, we've tried that before and it isn't a good idea. I also think one of the things good designers do is to take this into account, and make pages that are built up of components that work at various sizes, not just scaled up from mobile. In addition, a good designer will setup the page design such that it can scale up and down nicely from one viewport size to another. So, while I don't 100% agree that you need "individual" designs for each, I do think you need a designer that takes the different viewport sizes into account and provides the appropriate adjustments for each. And developers that are skilled at then building those pages.