> 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.
It actually is very hard to design a responsive UX that can handle anything from the smallest smartphone up to ultrawide monitors.
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".
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.
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.
We’ll be able to design components to scale to their parent instead of screen size, making them much more generic.
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.
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.
It's really an issue that many UX designers don't know how browser rendering works, so they design static pages as if they were printing in a magazine.
Pixel perfect mocks are terrible for designing responsive UIs. Trying to build pixel perfect pages in a browser is impossible. Somehow these designers get through school with zero understanding that designing for web is different from designing for print.
The reality is just that designers gonna design - and designing is often an unscientific craft, pursuing aesthetic values before practical considerations. Google and Apple designers are well-paid and experienced web-heads, and still they led us into a land of well-padded desperation.
yep. i guess that reddit hired one of those.
old.reddit.com is awesome and stood the test of time, the new reddit is awful and slow (and i hate it).
One, not all Reddit users prefer old.reddit (I do).
Two, Reddit aren't designing for users, they're designing for advertiser's to push adverts at users.
Wrt the second point, this means designers aren't designing to the brief you would give them. Like when engineers design obsolescence into a product (it's purposefully inferior for the end user).
Any idiot can see it's bad user experience to keep forcing a user to a design they don't like, but it's not for UX reasons that they do it. The trick is keeping UX good enough.
To extend that: note that the very companies that spend most money on UI, that hire the experts and pay them well, that set the trends for entire field of UX - are all companies whose primary business is user abuse - advertising, high engagement, etc. That's what they pay the UI/UX experts to optimize for, and that's what ends up leaking into the wider field - leading astray people who are trying to build things beneficial to their users/customers.
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.
I took the poster as meaning UX that considers the results of, and perhaps even performs, actual user testing & observation, to decide what works and what doesn't. Like operating system vendors used to. I'll grant that "scientific" UX that's just incompetent (99% of the time) application of "telemetry" and A/B testing is awful. But that—and the other bad kind that's just trend-following, personal preference, and whatever will get the best reaction in a design presentation meeting full of non-experts—aren't what I understood as being advocated.
The good kind performs & pays attention to science.
Any opinions you get out of the scientific method were put in there by the person designing the experiment.
I don't disagree with this, but it's none the less an assumption that went into the study, and likewise a conclusion that fell out of it.
I strongly disagree.
Design without considering all of the HCI research that has been done is what you call "garbage-in-garbage-out." We already know how humans perceive information, what makes things salient or invisible, and so on, yet the current design trends completely disregard that with flat UIs and trendy designs that have poor usability.
> At best you get KPI driven design, which is a vehicle for enshittification, not for building great design.
No, you just get trendy design, not usable design.
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!"
The issue at hand is that overly long lines reduce reading speed and comprehension of the content[1]. The optimum length for a digital line of text is somewhere between 66 characters per line and 100 characters per line. I personally use the 100cpl rule. For reference, this HN page has ~185 characters per line on my 1920x1080 display at default scaling.
I do actually remember un-minimizing my browser in order to improve the rate at which I could read the text of ur-Wiki pages.
And then they provided an escape for old men shaking their fists at the sky. Given a choice, I would, without hesitation, choose the new design.
[1] https://en.wikipedia.org/wiki/Line_length#:~:text=characters...
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.
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_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.
At the end of the day its all an ROI problem (as are most things)
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.
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.
I can connect my Librem 5 phone to a screen/keyboard and I get a full desktop.
I agree with comment above that it is very hard to make one website responsive to multiple screen sizes.
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.
I always wondered about that. What's the point of redirecting instead of serving a different template on the same URL?
I think that websites should assume that devices are being truthful. I should be able to request the desktop view on my phone or request the mobile view on my computer. The former I can do sometimes, the latter I can only do with developer tools (and usually doesn't work because the website detects that I'm on desktop!). Browsers could add a header to switch to the mode in which the website dynamically readjusts based on actual device parameters like window size, but by default I need the view to be what I requested regardless of my window size and device type.
You know how Wikipedia has no table of contents on mobile? I made my browser request the desktop site by default so that I could see the table of contents and don't have to tap to open the article sections. (Unfortunately, Wikipedia changed its desktop view UI by moving the table of contents into a hamburger button. On mobile the desktop view forces me to tap the hamburger button to view a blocking popout of the table of contents, while on desktop the contents are automatically opened in a sidebar.) If Wikipedia had forced a dynamic design on me to restrict me to the mobile view on mobile, then I would've wasted time opening article sections to decide whether I wanted to open them in the first place.
A lot of bad UX decisions come from bad management, not necessarily bad designers.
Only when folks try to get fancy. K.I.S.S(illy).
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.
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.
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.
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.
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.
l
i
k
e
t
h
i
s
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.
Could be purely CSS, could be JS or SSR
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).
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?
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.
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.
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.
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.
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.
Sounds like you’re the right person to convince everyone to buy cars with manual transmissions and crank windows. After all, they are more reliable and simple, and everyone is wrong for not buying them anymore.
I’d also like to know how you expect all of our serious business productivity apps to work as text-only or server-side rendered plain HTML web pages without being seriously compromised. Google Docs/Sheets/Slides? Jira? Google Meet? draw.io? Tableau? PowerBI? Gong? Notion? Slack? AWS Console? I honestly don’t even know how I would avoid getting fired if I only used text-only websites.
No. I'm saying that there are only few websites that "primarily deal in video and multimedia". They may take 9 spots in a top 20 list, but that 9 is like half of all such websites. The rest deal primarily with text (which includes formatted, rich text).
My business checking account has started offering partner promotions from the transfer screen and I’m tempted to switch to another bank because of it. Their developers and designers were tasked with delivering that component. At the same time they took away their mobile app and mobile check deposit because it was not secured properly.
Most bank websites and apps are examples of teams and organizations focusing on the wrong thing in my opinion.
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.
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.