Hacker News new | past | comments | ask | show | jobs | submit login
The negative impact of mobile-first web design on desktop (nngroup.com)
565 points by skadamat 7 hours ago | hide | past | favorite | 335 comments





Danny o'brien, he runs one of the oldest surviving blogs, oblomovka, coined a term "hinternet" sometime in 2007, that was when the internet was still being run by the technological elite, for themselves, but normal people have also joined. The idea of hinternet was that there was essentially two internets. One is the sophisticated technology and a value add, and the other one is the internet of the viagra pills and popup banners. We, the technology elite, would rarely venture into the hinternet, like going into a bad neighborhood, where's normal people had no such mechanism for discernment, so their experience of the internet was distinctly different and inferior.

Now most of the internet is hinternet, and we're all forced more and more to rely on it. Banking systems, mortgage platforms, car payments, utilities payments are generally designed mobile first, desktop later, they employ various dark techniques for "verifying real user", which break on open platforms, forcing you to access them from iPads and other such locked down devices, or not at all. If hinternet used to be the dark shady streets where hucksters were peddling you knockoff watches, then now hinternet is the dystopian landscape of vertical information integration, ran, behind the scenes, by para-governmental institutions. You can't log in into irs without using id.me, a digital wallet and identity management platform, that sells you things.

There are attempts to cultivate little gardens of sophistication, but they are of mixed success. On a personal level there's a strong disincentive to participate in the hinternet beyond the mandatory, carefully navigating poorly designed and conceived systems just long enough to achieve an objective. One has to login into irs, but one doesn't really need to read that popup and upsell blocked, mobile centric news article.

From this perspective "mobile-first web design" is a symptom removed from its greater context.


This "hinternet" is a cool concept, but there's something missing from its account.

On one side we have the cultured elites of academia, the military and government - as rightful founders.

On the other, the unwashed masses, immigrants of the Eternal September. Eventually this hoi polloi of hucksters, chancers and grifters became naturalised as the businesses and bankers in the new world.

The dotcom era is a colonisation story and the elites are the aboriginal natives driven off their own land. It sure fits a "woke" narrative.

But what's missing from this fairy-tale is the actual real people.

The truth is, dotcom, Web2.0 and the empire building between 1997 and about 2010 was still a marginal affair, where existing money and power moved into the internet, along with a handful of rugged "entrepreneurs" (as we like to call ourselves around here).

The 99% remained spectators caught between the Scylla and Charibdes, and now they are corralled into ranches, all lovingly watched over...

The potential for a "people's internet" still remains, but we have not solved many (indeed any) of the classical problems of freeloaders, tragedy of the commons.... and at this point I think "Web 3.0 and blockchain web" is dead (?)

A good start to moving things forward to an internet that is once again public, high-quality and large might be looking more closely at the history/narrative of the internet and who the real stakeholders are.


The people have their Internet already. They like Netflix, they like Amazon Prime, they love TikTok, they like Instagram, they like Pinterest, they like their various chat apps, they like their online gaming, and so on.

That is all that they want. Along with some decent ecommerce for shopping and safe, easy to use mobile banking.

There's nothing magical about it, and there never will be. They don't want fluffy magical bullshit. They already have most of what they want and there's nothing grandiose about it, it's overwhelmingly just quasi-boring pedestrian entertainment and amusement to pass the time. That's what they wanted before the Internet, and it's what they naturally want with the Internet. It's because they're tired from their days, their 307 serious life problems (health, mortgage, bills, stress, job), and their exhausting children (that they love dearly of course).

No no no, the peoples Internet must be a vision of splendor! The masses want to spend all day creating extraordinary art, and thinking deeply about complex subjects they just educated themselves on! That's not reality, and it's not what the masses want at all. Not even remotely close.

They want a garbage pile of chaos like Reddit. Where they can insult people without getting punched in the face, and they can learn some tips about wood working other there, and they can look at photos of modded cars over in another sub, and they can go back to insulting someone over in another sub, and then they can watch a stream of rockets being fired at/from Gaza in another thread.

The peoples Internet is already here.


There's two types of wants. The low want of a heroin addict who wants his next fix, and the higher want of the same heroin addict who wants to get clean and a better life. These "wants" can both coexist. If you only use their actions to infer their wants you completely ignore the existence of their higher order wants. It's dehumanizing.

The people want the internet in the "next fix" sense. But I'd argue that the increase in mental illness globally the last ~15 years (starting a couple of years after the introduction of the iPhone) or even just the recent popularity of "digital detoxes" implies that there is a collective higher order want for a better internet.


Both you and GP are assuming people to be perfectly spherical rational actors in a philosophical vacuum. Under this assumption, people are indeed responsible for what they get, as the market only serves the demand. But that's not the world we live in - in our world, "revealed preferences" are bunk, because the suppliers have a lot of tools to control the demand.

The "hoi polloi" aren't born with fully fleshed out idea of "what they really want". Nor do they have much ability to communicate their wants to the market directly. Rather, their wants are in large part created by marketers, and the only signal they can send to the market (via "voting with your wallet") is their relative preferences for options available on the market. That is, they only get to choose from what's available. And what's available is under control of the vendors.

The way this relates to your "lower/higher order wants" is that my actions can actually communicate either of them. Where I spend my attention, or my money, can be driven directly by a high-order want - but I'm still limited to expressing that need only by choosing from a very limited set of actions or products that are available, and then my choice is also heavily biased by sales tricks and manipulative advertising strategies.

In short: I claim that the market is currently robbing all consumers of agency - "hoi polloi" and ${whatever the complement to that is called} alike. This is especially pronounced in tech industry, as commercial software resist commoditization - most apps and services are sticky and not interchangeable, so the UX decisions aren't being strongly influenced by competitive pressure. The vendors have an actual choice of how useful or how abusive they want to be. And they should get the blame when they choose the latter.


> The people have their Internet already. They like [...]

Those are the things that have literally no value me. You'd think the internet would be large enough to address pretty much everybody's needs, including mine, but it's getting pretty clear that it's not.


There's a huge amount of truth in what you say. Hence I used the pejorative "Hoi Polloi".

But you can probably tell I once worked for the BBC. And what might look like elitism (of the kind I wouldn't apologise for) is really hope for wider humanity in spite of the Rupert Murdock effect, in spite of a concerted 50 year assault on education, and in spite of the misappropriation of the internet as a giant firehose for diarrhoea. The West's self-devouring and terminal-stage enshitification is quite the spectacle.

So when we look at "the people" and say this or that is "what they want", something recoils inside me. Do we know that? A perpetual cycle where people know what they like and they like what they know is not a stasis or fact of the world but a precarious place of comfortable mediocrity we've come to be. A local minima. There are other places. Cultures have flourished. And sometimes they wane.

The Internet (big I) was more than just a lot of wires, it was an idea. Maybe some fragments of that idea are still alive, I don't know.


> The Internet (big I) was more than just a lot of wires...

Yup, it was a series of tubes :)


> So when we look at "the people" and say this or that is "what they want", something recoils inside me. Do we know that?

The famous (controversial) Indian teacher Osho had a saying on this: "Democracy. Government of the people, by the people, for the people...but the people are retarded."


We often look down on "the people", but the masses have more wisdom than the elites, even if societal consensus can sometimes lead to terrible solutions to problems.

Democracy is nuanced, much like reality, and this bothers people.


> the masses have more wisdom than the elites

I used to think this way also but in recent times I have become less sure. Maybe the easiest way to explain my thinking is to recall that line from the movie Men in Black: "A person is smart. People are dumb, panicky animals, and you know it."

Obviously the truth is way more complex than that but I really do doubt the wisdom of the crowds.

A different example might the guys who wrote up the Constitution of the United States. More people were illiterate than literate back in those days. The founders were a small elite, but they created a framework that has served millions of people for a few hundred years.

In any case, yes, democracy is nuanced. It is the best system despite its flaws. And to be frank, the real issue with democracy is that it's run by people...and hardly any of us walk on water. :)


Yeah, it's about how in a monarchy not only can things get way more rotten, but also transitions of power tend to be very bloody (and wasteful) affairs.

> [...] terminal-stage enshitification is quite the spectacle.

I see you're an optimist. I believe things can - and will - get worse for a looong time.


I'm struggling to understand from your explanation what is this "hinternet".

The hard-to-use internet of the 90s, centered around IRC and Usenet? The seedy parts of the 90s internet with illegal content hosted on free hosts? Because you say today's internet is like that, and I don't see any comparison at all however I look at it.

How is the 90s Internet (forums, IRC, Viagra spam and goatse) anything like the modern sterilized version full of dark patterns in the hands of a dozen megacorps?


By way of analogy, 90's internet was like exploring a town where you could wander around and check things out, and some open lots had billboards with ads on their property. Every property had a list of other properties that you might want to also check out.

Current internet (hinternet?) is like walking through the same town but now there are fences around everything and posts with security cameras at every property boundary. When visiting a property now you are required to show your face and maybe ID, and also have to sign up to get a rewards card. When visiting a property you also have people with clipboards following you around and taking notes which they pass to people with clipboards at other properties.


> How is the 90s Internet (forums, IRC, Viagra spam and goatse)

That wasn't at all the internet I had in the 90s. I know that part of it existed, but there were really great parts, too.


From what I gather from Oblomovka[1] [and based on my own memory of this period]:

It was a place where the primary early users of the Internet did not frequent, but could be something an ordinary person would be exposed to out of necessity. (Think, maybe some service that lets one send faxes via email; notably you'd need to create an account and spend money.) But, at some point, this reversed, and ordinary use cases dominate - online banking, e-commerce, school - such that even finding the original sort of content that comprised most of the Internet can be very difficult.[2]

As an example, cooking recipe websites in the early Internet contained cooking recipes - no stories, no SEO optimization - and then sometimes at the bottom of the page participated in some sort of link exchange with other recipe websites and perhaps a page hit counter. This was an Internet for the technologist, and one might find their way there from a BBS, IRC, email, word of mouth, or early search engines that naively indexed keywords, or you know, by surfing a webring. These sites seldom existed for any sort of commercial gain and were often a hobby project.

Today you could reasonably expect to find your way to a cooking recipe site via a search engine where each recipe has been SEO optimized with a nonsense story and you might be prompted to log in with Google or create an account to view the actual recipe. The target audience are the people who are the norm and would have been those visiting the hinternet two decades ago, out of necessity [e.g., pay to send a fax via email], but today they are just normal people performing normal activities.

Something like today's network of sites two decades ago would be hinterlands by the blog's definition - not frequented[2]. Today, it is the norm.

1. two competing definitions, circa 2001-03: https://www.oblomovka.com/wp/2003/04/16/hinternet-fallout/

2. it's been decided to call this sort of genuine content "Small Web" https://kagi.com/smallweb

X. the competing definition of hinternet, which I also like (search "hinternet"): http://thegestalt.org/simon/cluetrain.html


There were also tech sites that reviewed computer hardware in writing. Sometimes with pictures. There were websites with video game walkthroughs - also in text, with pictures! There were websites with silly things people wrote about, and funny stories, and the usual tinfoil hat stuff. But the tinfoil hat stuff was secluded away on a tinfoil webring on angelfire.

There were tons of stores. Usually the more legit ones partnered with yahoo shopping or whatever. I remember buying Pokemon Yellow from a video game store based out of Canada lol. I think it was called dragon.ca? There were TONS of places. Some would take a week to ship but you usually got your stuff. :D

IRC had something for everyone. Those networks had tens of thousands of people online at any given time, talking about everything from tech to trash (literally) lol.

There were also web directories. As I recall, google started off using one of those as a source.

There was also stuff like AOL that had its own little ecosystem of corporate-sponsored stuff.


> How is the 90s Internet (forums, IRC, Viagra spam and goatse) anything like the modern sterilized version full of dark patterns in the hands of a dozen megacorps?

The hinternet was the Viagra spam and goatse part. The modern, sterilized version is exactly that - continuous abuse and exploitation. Just with a fig leaf of legitimacy.

EDIT: perhaps a better distinction would be this: O'Brien's Internet was/is that which comes from focusing on benefit for the user (be it utility or entertainment). The hinternet is that which comes from focusing on making money. Now, focusing on utility does not preclude commerce - in fact, the most basic and honest way of making money is by exchange for something of value. Focus on value provided includes figuring out how to provide it sustainably. In contrast, focusing on making money does, in practice, detract from making things good, as fraud and abuse have much better ROI.


From the context, I assume it is a pun on hinterland as borrowed into English. Here, it is mostly synonymous with backwoods. The hinterland may sound more literary than folksy, or may emphasize an unexplored or less navigable zone rather than merely natural or undeveloped.

I wonder what the original blogger really meant by it. The discussion here seems to be focusing on either an axis of academic vs commercial or high culture vs pop culture, or maybe conflating the two. This isn't really about the level of development nor navigability but some other more abstract quality or purpose.

The developed land could hold a grand cathedral, a brutalist housing block, or a luxurious department store. The hinterland could have a frontier mission, a rustic cabin, or a trading post.


Can you expand on "hard-to-use internet of the 90s"? Beause I honestly think it is in most ways harder to use nowadays.

you had to read stuff

It’s basically what computer illiterates (which is growing, not declining because of mobile use) endure on windows desktop computers. At some time they’ve clicked the wrong link, managed to install a toolbar in their browser - and slowly it’s been infested with random dark patterns. I see it fairly frequently when relatives call me about computer issues.

This is an interesting thing. Honestly can't remember the last time I saw an ad or easy phishing thing. Like obv in your junk mail but thats literally the extent of my exposure to it, everything else is curated and "good" or probably aligns with your concept of the priveleged netizens/areas even though Im poor as hell. Knowledge wise I suppose I rich so there's that but there's also seems like a tradgedy of the commons type situation that depends on all the tech-illiterates to be the meat shields for advertising and paying for things like YouTube

You’re lucky if it works with an iPad and that it doesn’t make you sign your life away to Verizon or T-Mobile the ur-Carrier (sic).

I alway get voted down when I use words like “phonish” or “phonishness” but I feel that smartphones made life worse not better and made people serve computers than the other way around. Here’s to the next platform.


Don't we technically still have the non-hinternet in the Darknet/Tor? I've been there a super long time ago and I don't remember it being any better.

> There are attempts to cultivate little gardens of sophistication, but they are of mixed success.

Mastodon comes to mind, whose openness allows me to browse it from emacs with mastodon.el.

Removing full or even useful content from both RSS and notification emails comes to mind as well.


An internet for the technical elite… sounds like gopher (if more people used it)

> You can't log in into irs without using id.me, a digital wallet and identity management platform, that sells you things.

Wow, I just assumed it was some kind of auth flow the government runs themselves and never did any research


login.gov is the government's (quite fantastic) auth flow - id.me is a private one that the IRS contracted. I wish there were a rule that all online government services needed to use login.gov, but alas it's optional.

They’re supposedly working on it [1] but I don’t have any sense of whether they’re likely to succeed. In particular, the IRS is beginning to onboard to login.gov and the goal is to be fully migrated away from ID.me at some point.

[1] https://federalnewsnetwork.com/agency-oversight/2022/02/irs-...


The US government loves outsourcing technical problems and hates developing that stuff in-house. Even for things we'd assume, naively, to be a core competency like "identifying a citizen."

It's how we ended up in a world where some 70% of all retail transaction is now fundamentally brokered via private institutions using not-real-money (in the sense that credit on a credit card is "numbers the private institution tracks themselves" until the cash clears, and most cards have a loyalty discount program that sums up to the dollars spent on the credit card having different value than bare cash), in spite of the fact that control of and guarantees for the monetary system are something a government should have as a core competency. So on 70% of transactions, Americans get nickel-end-dimed by private institutions for basic commerce (on top of government taxes; the private tax atop the public tax).


No congressperson ever got rich from the government doing things in-house.

Fix that aspect and the situation will improve significantly.


This is the difference between building a website as an experiment for an untested audience and running a modern business. The simple reason most websites are optimized for mobile is because most users are on mobile. And the reason there are ads and email acquisition forms is because they are worth something to businesses. Text-only, ad-free, non-responsive text content isn't worth much.

But they all suck on mobile!

Using the internet on a phone is a terrible experience. Websites take forever to load, they randomly resize things, they add pointless headers and footers to the limited space, they move the focus around at random etc.

You know how websites sometimes have that button that scrolls you back to the top near the bottom right? Those buttons tell me that the people making the website never use phones themselves. The amount of times I've found that button helpful vs the amount of times that I've hit it by accident while scrolling is so small that the entire thing feels like a cruel joke. Mobile websites are full of these kinds of UI patterns.

HN is actually one of the few nice to use websites on a phone because it doesn't try to do all of these things. On reddit you're better off using the old desktop view than any of the mobile views. Same for websites like YouTube.

Google doesn't even have parity in functionality between the mobile and desktop websites. On desktop you can filter results between arbitrary time stamps. On mobile you can only pick between "past hour, past 24 hours, past week, past month or past 12 months".

There are a million small things like that that are wrong with mobile websites. They ruin the experience.


Sure, anyone can screwup, I'm just saying "mobile first" is valid business strategy. A lot of the annoying things like ads and whatever are just never not going to be annoying. It's kinda their raison d'etre. Things like date filtering on google results probably get so little usage there's no incentive to make them fully available. Very few apps are built to optimize utility, they're built to optimize revenue.

Over the years it's become clear to me that frontend is probably the hardest part of the stack. People think they can just shit out some bootstrap react app and it's perfect, but being able to write complex UIs that can work on any browser, any device, with all assistive technologies, and all languages, is extremely hard. You need someone with a deep knowledge of html, css, and the supportive web apis. A good frontend engineer is incredibly rare, even at big tech. What's even more rare is a UX designer that also thinks about these things, who are worth a million bucks.

Thanks for saying so. I was a front-end developer for many years, and felt both the difficulty and the persistent lack of appreciation for that difficulty. I ended up quitting and just becoming a designer, because if I'm not going to get any respect, at least I shouldn't have to keep running on the treadmill of new technologies. I have also done back-end development, and it is certainly difficult in its own way, but for the money I'd rather work on that than the front end.

Having done all three, I have a mental model with two axes: appreciation and meddling. It might be appropriate to sketch it here.

With design, the result of your work ends up being visual, so you get a lot of appreciation for it. Maybe too much, sometimes. On the other hand, everyone has an opinion about how you could do your job better, and they're happy to stick their fingers into your work (because it's so easy, you know?).

With back-end development, nobody is going to meddle in your work except other engineers: by meddle, I mean step in and tell you how to do it better. That's because they don't know what you do at all. The other side of that opaqueness, though, is that you rarely get credit for good work. Stuff just works the way it should.

Front-end development is in between the two. People will give you credit when things work the way they should, and when they look nice, and so on. But, half the time when an application is "snappy" and performant, they'll credit the designer for it (ha ha). At the same time, they'll also tell you how things "should" work, based on how other applications do it. Meanwhile, you're stuck between what the designer approved, and what the back-end supports, and you're just doing your best to make it all work.


You've outlined it so well! "you're stuck between... and you're just doing your best to make it all work."

Couple that with the fact that the whole front-end world has gone completely bonkers, reinventing the wheel so many times in the last 10 years I'm surprised my head hasn't separated from my body.

It's funny that things have come full-circle these days, going back to server-rendered views. My career literally witnessed the entire move from HTML -> SPA -> HTML again. It only took roughly 16 years.


You don't see the value add?

I like the mental model and I have often witnessed the meddling you mentioned. My favorite kind of meddling: The current state of a software product is presented to C-Level. After listening (usually) for a few minutes one of the most senior people in the room starts expressing a strong opinion about how a certain color should be changed. Now the color scheme discussion starts. The complexity of enabling an interaction of a user with the software through the interface is not discussed at all. At least changing a color usually doesn't harm the usability too much.

Not only are good frontend engineers rare, but I've also noticed that it seems to be common for the best ones to migrate out of frontend work. They get tired of spending all day fighting with colleagues who have coding skills but not design acumen, and the same traits that make them a good frontend engineer also make it very easy to transition to a role that comes with a less psychologically costly work environment.

Personally, I love front end work. I love the crazy challenges and weird constraints. I love seeing a UI — something that a human interacts with — at the end of the process. Server side work can be interesting for a little while, but if I don’t see the results in the UI, it feels hollow.

Strangely, even though I’ve been doing this for twenty five years and I’ve never been better at it, in today’s bullshit interviewing environment, I can’t get a job because I can’t solve algorithms or do system designs in forty five minutes. And so I’m sitting on the sidelines right now. It’s the most bizarre experience of my career.


Yeah I moved out of frontend work for the backend. Backend work is a series of black boxes. You can make a million mistakes and it won't necessarily be an issue. With the frontend your work is exposed for everyone to see and critique. Not only that, but it's very hard to actually compartmentalize changes. A component that looks fine in isolation might be completely out of place in a larger peice. I frequently found myself near panicking that I didn't mess something up before launch because it was nearly impossible to handle all cases that we cared about through tests. Of course we would hire people to run through the site once before launch. But what about after we fix all the bugs? Did we introduce new ones after fixing the old? Are all of our translations stoll appropriate? Where they ever?

While I don't do frontend work, I still push UX and management to minimize the surface area and complexity of the frontend. Keep to simple html elements, flowing top to bottom with minimal css, etc.


Personally I try to find work where:

1. I'm the only FE dev, with a strict separation between BE and FE work (and a BE team that's happy with this arrangement).

2. I'm given the keys to the castles in terms of technology and architecture for the FE.

This lets me maximize time spent understanding our product, our users, and iterating with PM/Design.


That, and you have to spend so much time justifying your value. Most people can appreciate when things look nice. However the bar is usually pretty low, set to above “barely working” in most cases. That, coupled with the things you mentioned above, makes the field difficult.

Frontend is complex. That's also why some people think the tech stack is "overly complicated". Deploying rich interactive user interfaces with the push of a button to the entire world is a marvel, why would people expect that to be easy anyway?

UI, in my mind, has always been the hardest part of the stack. It is even more true today. A front-end dev must: - Deal with a subjective human (not an objective machine) - Deal with designers and product managers - Be constrained by the back-end engineer and infrastructure - Make it work on multiple devices and browsers - Use the framework someone else chose - Not break anything

Kudos to all front-end devs out there!


I know we all generally just do what the boss tells us but:

> being able to write complex UIs that can work on any browser, any device, with all assistive technologies, and all languages, is extremely hard

Why do we keep doing this? If you get rid of the animations, popups, and invasive ads, then with what's left you can probably do away with all of this crap.


I agree wholeheartedly that frontend work is very, very complex (and has only gotten more so in recent years), but I disagree it's the hardest part of the stack simply because you typically don't have to worry about scale.

Imagine a system processing billions of records per day/week/month, dealing with data caching, data warehousing, providing realtime notifications to users and external systems, managing queue workloads, handling inbound requests from various APIs, syncing data between backend systems, running multiple data stores and scaling across multiple regions, redundancy, and handling incidents that arise on the backend. This is typical for complex web software.

A frontend system that provides the interface to that backend system will usually not have issues arise in the middle of the night due to the automated processes happening on the backend, will not have to worry about how many users are using the system nor how much underlying data there is.

No matter how difficult it is to do the initial development of the frontend (or to keep that code updated when browsers change), at the end of the day once the development is done it's static code interfacing with a much more complex underlying system that requires constant attention as underlying data and business requirements evolve.


The frontend isn't done after the initial work. Requirements frequently change and update as management gets new ideas. Additionally, the frontend isn't spared from the concerns of scaling. You'll often be tasked with demands to decrease load from clients to help the backend keep up, which will involve lots of clever caching and tricks like debouncing. Finally, scaling on the backend isn't nearly as hard these days given all of the existing tech you can leverage like k8s and the cloud. Modern tech has only made the frontend harder as requirements have increased.

At a previous job I did (not tech related) I had to use some internal web app, and that thing was absolutely full of these mistakes, everything has padding, the text has padding, the box around the text has padding, the table row cotaining that box has even more padding.

This led to an app that could fit like 4 table rows on a standard 1080p display, and every row of that table had very little actual info

On top of that, for some ungodly reason text size was defined by view width, and on some of the old 4:3 displays that were there, it was damn near unusable


Generally speaking, interfacing with users is the hardest part of almost any program. Even when writing simple CLI tools, 80-90% of the code is often UI-related, even though it barely qualifies as an 'interface'. Flags, documentation, sanitization, reasonable error messages, type-checking and sanity-checking the inputs...and then, generally, a handful of lines of actual, useful code.

This is pure for my information only.

Has flex+grid eased the situation somewhat? With media + container queries?

If not, why not? Are these models too complex or the browsers still are buggy/inconsistent in their implementation of these layout algorithms?


There are nice technical solutions. Media queries + flex + grid (when you need it) give you all the tools you need. There's just a lot of ways to do it wrong.

I think UI's are an inherently hard problem and HTML/CSS/JS are the completely wrong tools for the job. Every time I'm doing front end webdev it feels like I'm trying to hammer square blocks into round holes.

The irony is that we are now all very enthusiastic about a text based user interface.

I'm mostly a backend engineer, but I occasionally have to make UIs. It's not only that it's the hardest part of the stack (I agree with that, but it can also be an interesting challenge), it's also that it's the part of the stack where everyone and his dog think they have a say. It's infuriating really.

> Over the years it's become clear to me that frontend is probably the hardest part of the stack.

I learned how hard frontend is when developing a browser-based game.

The backend code was simple and easy to test with unit tests.

Frontend though is a slog to write, and even greater slog to test.

I wonder how much better frontend would be if JavaScript wasn't the chosen language. It's just such a bad language in so many ways.


Honestly that’s the reason I stayed in backend work. Frontend seemed to be too much like the English language- more exceptions than rules, only changing nearly constantly.

I’m grateful to those who have the patience and skill for it.


Indeed. It’s really a bummer that “frontend engineer” has more become synonymous with “react engineer”.

Thanks for this, my peers thought I was insane to move in the front end about 10 years ago (after having been in the industry for 10 years already).

But it’s so important for SaaS type companies to do this correctly, I felt like I was treading water and stagnant with "backend code" that was mostly just piping the db data to the UI.


Yeah, agreed. Somehow CSS and a very general concern for UX have become my most valuable skills as a developer. I think the title of the article isn't correct. It should be "The Negative Impact of Responsive Design by People Who Aren't Good At It."

The problem sadly isn't even mobile-first vs. desktop, but rather designers who still haven't figured out that the web is dynamic content that should be allowed to flow according to the user's display device size and shape. It's not and never has been a static medium like paper. It's not limited to a specific size and shape like paper, and should not be treated as if it were. Web "designers" should not be trying to force the content into any specific size or pixel resolution, as there's just too many different resolutions of screens and width vs. height layouts of those screens to ever be able to cover them all appropriately without adapting to the idea that the content must be able to flow accordingly. It also severely harms accessibility for folks with vision issues who might scale up their fonts to compensate if doing so causes the content to break in horrible ways that make it unreadable.

It's easy to say stuff like this, but go try and implement it. It's really hard.

But that is the job. The job of developing on the web is developing for a platform where you do not know the size or format of the display or what the inputs are in advance.

The job of a UX designer on the web is to consider this kind of stuff and to build a design that's very reactive to evolving displays within the demographics and market segments that the client wants to support. If that's not happening, if the CSS people are just getting handed static designs and being told to figure it out -- the problem is not CSS or the developers, it's that the designers building those designs are not good at their jobs. And there are ways to make this easier: notably UX designers involving the CSS department in the design phase, and/or making a point to always lay out the contents of the page without styling in a hierarchical way before making decisions about how to present that content.

But a lot of programming is hard. It's hard for me to write maintainable Javascript that doesn't fall apart if a project goes over 100,000 lines of code. It's hard to document methods. It's hard for me to write code that does complicated things that can work on low-end machines. These are skills that programmers get better at over time with practice. Responsive design is the same; it's just another skill to learn.

Imagine trying to shoot a movie and having the cinematographer tell you that it's hard to frame everyone in the shot since they don't know exactly where the viewer will be looking, or the sound mixer telling you it's hard to balance dialog and sound effects so everyone is audible without it being noticeable that they're muting background audio. Or a recorder telling you that it's hard to master a pop song given that everyone has different speakers and sound profiles on their headphones. Imagine you're building a car and the designer tells you that it's hard to make sure the controls can be reached by people who are different heights and weights.

On one hand, yes it is; all of that stuff is very hard. On the other hand, yes, that is also the reason web UX designers and developers get paid money; because the job is hard and requires training and expertise, and designing a website interface requires more thought and intentionality and planning than is required to make a PDF.


Yeah, it's not really "easy to say stuff like this" because everyone who thinks they know better than actual real honest-to-goodness web designers will instantly want to argue with you to the bitter end why their fantasy web design has to be 100% "pixel perfect" layout exactly as they envision it on every single device or browser ever invented. It's a huge part of why I'm no longer a web designer. More of my time was wasted fixing literal one pixel differences in layout between browsers (and browser versions) than almost any other part of the process.

I haven't encountered a "pixel perfect" designer for at least 15 years now, if not more. Virtually every single UX designer I've worked with provides flexible designs that scale with screen size.

In my side of the agency world there are a lot of designers who design UX that aren't UX designers. A lot of them want started in print and expect pixel perfect designs/don't understand the need for breakpoints. We had a client who got on our case about a design being a half a pixel off. That sounds like a joke but it genuinely happened.

I have worked with one of those freaks last year. She argued that every block had to be exactly like it was on Figma, and she once sent me a screenshot with a little ruler drawn on it, to show me a 3px gap. It was such a waste of time and energy...

How _do_ you get a 3px gap though?

Good. I've finally gotten over my nightmares where I'm chopping photoshop designs and literally using <img src=""> to add a rounded edge on a <td>

This is the most awesome approach for rounded corners: https://ridiculousfish.com/blog/posts/roundy.html

Oh wow, it's even worse than I imagined

There is pixel-perfection and 'pixel-perfection'. One is a pointless fight against the nature of the medium while the other is love for the craft, sophistication, and actually giving a fuck that something isn't needlessly 2 pixels off of where it should have been. A certain attitude that will show its mark throughout the UI.

I'm not UX person and I don't know whether "pixel perfect" and absolute positioning requirement come from clients or designers on average. I'd guess it varies by organization, industry and whatever.

But it's worth being clear that mixing such thing with flowing text and graphic is where things get hard. Html 1 had flowing text in the 90s and you can still do that.

Moreover, all this is related to overall user hostile designs. Organizations broadly don't want their pages to be neutral streams of information but want to control a user experience that nudges people this way and that and fixed are important to that.


If we had an API for web data then accessibility would've been a solved problem. The user's client would decide the best presentation of information.

That’s too deep on the generic/specific trade off to be legitimately useful

"It needs to look exactly like this PSD file I made!"

You get the same with some native UI designers. They kick and scream until you've got some custom widget that precisely apes the Photoshop layer effects. Then kick and scream again when they make changes that take non-zero time to rebuild with that custom widget.


http://bettermotherfuckingwebsite.com/

It's literally 120 characters to make a website that flows on any (reasonable) screensize and adapts perfectly.

Modern webdev is just throwing frameworks at self-caused problems.

(I'm exagerrating of course. But most websites are just about showing text, maybe with some images every now and then (news sites, reddit, hackernews, google, come to mind). For those websites this is certainly true).


Some designers can use Figma's equivalent of grid and flexbox and some can't. What's hard is implementing all the shades of gray between two pixel-perfect designs because the designer didn't do this basic work.

> It's easy to say stuff like this, but go try and implement it. It's really hard.

Here you go:

main { display: flex; flex-direction: row; flex-wrap: wrap; }

..and set reasonable width/margin constraints on your primary content blocks.

Linear, scrollable flow on small/vertical displays, and a denser "grid" on large/horizontal displays.


It's not that hard. Especially for the modern-ish web (aka of the past 6-7 years). And especially not for the 99.9999999% of the web sites out there.

The designers probably know that, but it costs money to design for 2 platforms. So they pick the 2 biggest platforms for non-hackers... Android and iOS...

You're not designing for two (or more) platforms at all. You're designing for one platform. The Web. It's built on some pretty well defined standards that a ton of folks seem hellbent on breaking to force the web into a shape that it simply isn't.

They didn't mean platform in this way. But in the sense that small touchscreens are fundamentally different than big monitors + mouse & keyboard. That's why anything that is not the simplest website should use two different interfaces. (Also, apps don't belong in browsers.)


> So they pick the 2 biggest platforms for non-hackers... Android and iOS...

I can't imagine you are talking about the same thing here. (Or if you are, then you are making OP's point.)


>It's not and never has been a static medium like paper. It's not limited to a specific size and shape like paper, and should not be treated as if it were.

I often get "print first" page layouts, created from dynamic data that can have varying amounts of content. These pages also have to work in mobile and desktop browsers and look good on all of them. I don't find it to be that difficult. Sure it takes a little longer, but it's what the job requires. Media queries make it all possible, as well as a little bit of javascript.


Hamburgers and Hieroglyphs! Ahhhhhhhhhhh!

I get why they are used on mobile. If you only have room for content, it makes sense to tuck actions away into a hamburger menu except for a small number that you assign to tiny little hieroglyphs. Fine. However, if you have space, this is a terrible way to use it. At best it adds steps, at worst it invites experimentation and disaster to figure out what the heiroglyphs do (which wouldn't be so bad if undo worked but we've apparently decided undo is fine to break too). Like the Apple HIGs used to say, on Desktop you should want to get the most common actions out of menus and onto labeled buttons so that users can answer "what can I do?" without playing hide and seek. Undo should be baked in from the very start (it's hard to retrofit) to reduce the consequences of experimentation.

Unfortunately mobile design has taken over so completely that even on apps which will be used almost entirely on desktop, even on apps with an internal advocate for Desktop design, UI designers go for the hamburgers and heiroglyphs and broken undo because it's standard these days. Sigh.

Oh, and modals are back with a vengeance, but I need to stop here or my blood pressure is going to get unhealthy.


I don't think there's any excuse for hieroglyphs. Even a low-end 5 year old phone like the moto e4 has a 1280x720 display; there's plenty of pixels available to label the icons. Hieroglyphs are a "we hate our users and want them to know it" first design.

Hamburger menus could also frequently be done away with when you look at how many options they have. Like Gmail's app has them when it could fit the icons across the screen as a bar. And it's hard to argue that real estate was important since they put in a bottom bar for chat, video, and spaces whatever that is.


Pixel density isn't the problem, physical size is. Phone screens are small and many people have poor vision. Some even scale up the contents of their browser 25% or 50% or even 100%.

The more text you have, the more difficult it is to ensure a usable UI on small screens, let alone a good one. Don't be upset about the use of symbols instead of text, but about the use of bad symbols. Nobody needs the "play" button on a video widget to say "play" - they know what the right-facing triangle means. (Ironic because I don't know if it makes geometric sense to even say the triangle has a facing, but as a symbol it's well understood.)


I suggest “right-pointing triangle.” Indicating direction with the vertex on the longer axis is a common idiom.

> Hamburger menus could also frequently be done away with when you look at how many options they have. Like Gmail's app has them when it could fit the icons across the screen as a bar.

Just cracked open Gmail to check this. In the hamburger side menu, there's 18 items not even counting labels. No shot you fit this across the screen as a bar.


I like having greater content area by default, and the text next to an icon in the Gmail Android app is nice too. (The spam button, with its explanation mark, could easily be mistaken for an important button otherwise.)

It's one of the reasons I prefer how Vim and VS Code look over Intellij and Visual Studio standard. Let me better see what I'm focusing on without distractions (the content) instead of shoving a gazillion buttons on your UI in the default view.

Edit: I was too harsh about Intellij I think. The old UI I was thinking of doesn't look bad in my opinion, but I still think I would have enjoyed my experience with Visual Studio more if it had a stronger focus on content (the code) visually.


>1280x720

screen resolution vs browser resolution

the most common mobile browser resolution is 800x360

also, 5 years is not that old


I deal with some legacy web apps and ticketing system at work. They could use a hamburger menu or two. 10 buttons, 15 tabs, and a million inputs most people don’t use.

> Hamburgers and Hieroglyphs!

Hieroglyphs sums it up so nicely. Lol. I'll also add hidden, context sensitive options to that list. I like having options that are disabled (aka greyed out) if they're unusable because at least I can see there's a possibility to do something if I get conditions right. Instead, modern designs will hide those options and, if you don't know the magic conditions needed to expose them, you'll never see them.

An example of this is Ubiquiti with their Unifi stuff. If you go to manage switch ports, the page they give for that doesn't have an option to "Select All" ports. You need to select at least one port first, and then the "Select All" option magically appears. So not only is it hidden, it gets the context wrong. Think of having it as a disabled checkbox. Everyone would immediately realize the context is wrong because having the "Select All" checkbox disabled when no ports are selected would be obviously dumb.


I agree hieroglyphs make discovery difficult. But I believe designers like them because they allow for consistent design across different languages. E.g. accommodating for German localisation can be difficult.

I built the nav bar at the top of my website[0] to be scrollable if the content doesn’t fit horizontally. I’m slightly concerned about users not realizing there are more options to scroll over, but I prefer it to a hamburger menu that has to open and cover the content since you can see every option and read the corresponding word. No need for any of that when visiting on a desktop however.

[0] https://www.winstoncooke.com/


It looks to me like any device with at least 300 horizontal CSS pixels can see your whole nav bar, which should be nearly everyone.

On the other hand, hamburger menus typically have a lot more entries than this, enough that a horizontal menu wouldn't look good even on desktop.


I think the biggest opponent to what you're advocating are new users, they are so easily intimidated by too many things on the screen. These are the people that dominate focus groups and so designers seem to have wrapped themselves around the axle over this one (terrible) rule.

Many websites will completely alter their UI based on resizing your window. Sometimes I want to set a browser to take up half of a monitor so that I can put something else next to it. This often fails on modern websites because the UI becomes unusable after the window is resized

This is the "responsive" part of "responsive design". When done well, it's great, but you're right that many websites are way too aggressive about it, as if they only really tested two size classes.

I'm mostly appalled at how many desktop users just maximize everything.

I even had juniors maximizing terminals.


I wrote my own window manager that's mostly centred around maximized windows and terminals (it's like a wiling WM but without the tiling, where most things are always maximized).

Guess I must be a junior then.

Stop judging other people's personal preferences. It's their computer and whatever works for them is a good solution.


I have to maximize my terminal so I can slice it into a bunch of tmux and vim windows and make a pseudo-tiled window manager.

I do maximize terminal when I have to do something more complex and I have multiple zellij (I used tmux before) panes opened.

For me it is much better than multiple terminal windows...

Some websites are better maximized too, like maps for example.


Why is this appalling?

I think it’s fine until someone sends me a screenshot of my website in fullscreen on a giant 4K monitor.

Because the point of huge monitors in the WIMP paradigm is to display multiple windows simultaneously.

I assume you're not referring to Weakly Interacting Massive Particles as a theory of dark matter - what does WIMP mean here?

https://en.wikipedia.org/wiki/WIMP_(computing)

The design developed at Xerox Parc.


^multitasking

"We suffered for years waiting to get true multitasking and this newb doesn't even use it!" ;-)


Bemoaning people maximizing terminals - what a weird hill to die on.

would you rather them use half the screen for their terminal and the other half for subway surfers?

The thing that I truly find awkward is no nice touch equivalent to hover.

It's such a useful piece of the UX to have thrown away in the move to mobile first.

Other than that I probably fall in the "it's not that hard" camp. Of all the problems you have to solve, getting it to look reasonable on a few different screen sizes is pretty far down the list in terms of time and complexity.


I think long press handles both that and right-click on touchscreens. Or at least that's what I use to get at image alt text on mobile firefox.

Actual hover detection would be possible, but I imagine that UX would suck unless you were using a stylus.


Long press is already an engrained mobile OS behavior (begin text selection). And it doesn't solve the problem because the hover state is largely non-visible beneath the user's finger.

hover like effect with touchscreen was possible in Xperia Sola.

Yes! I hate websites that put useful content in a thin column in the center.

What's worse, formerly normal websites start degrading. Typically, when a new manager is hired and decides to "reimagine" the product with the "mobile-first" vision. The recent Patreon is a good example.

And of course, in some cases normal websites go away entirely, and are replaced with crapps: Venmo, Amazon Alexa, Chamberlain, etc.


I hate the “hero” UX concept and how everyone uses it in a useless landing page. Scrolling and clicking through endless marketing BS to figure out what you do and why it’s relevant to me. It’s the business equivalent of restaurant sites that don’t put their hours, address, and phone right in your face.

I enjoyed making simple, fast websites using HTML, CSS and a smattering of JS for progressive enhancement, usually with Django on the backend.

Industry got obsessed with JS frameworks made for giganto-orgs as a “solution” for everything.

Eyes became fixated on the claustrophobic mobile-first screens.

Went back to doing primarily graphic design. Less money, much happier.


As a webdesigner myself I kind of disagree. Simple content per screen just works better for the example they gave. It’s easier to visually parse. Their condensed version has a lot of multi column layouts which I really dislike.

High content density works for desktop applications, but not for what’s basically a brochure website.


What's cool about the article's take, though, is that it's based on an actual usability study and not just something someone said.

Where's the peer review?

A study needs peer review, but some web designer's opinion is just to be accepted as gospel?

Let's not set up a double standard here. It's not like non-evidence-based opinions are subject to peer review.

Agreed. It's hard to believe that marketing pages, after decades of evolution and testing, haven't landed on what users actually want, rather than what they say they want.

Scrolling is such a natural behavior for internet natives. Being able to leverage a large screen to visually compare things has its place, but the article uses a horrible example:

> Our condensed product page prototype took the same information from the original dispersed page and arranged it in a 2x2 grid that allowed users to compare multiple services simultaneously, without having to remember the details of each service.

What's to compare? They're disparate services.

I do like the example of the product specifications. But that was more of an objective usability issue: requiring more clicks for more information.


Another web designer here: I agree. Notice how the screenshots are "zoomed out" which makes the multi column look rich and more visually appealing. While I'm all for using the horizontal space available to you, everything we're taught about "call to action" leads to single element design.

What you really want is two apps, completely different UX's and its not worth the effort more times than not. No one is going to Herman Miller's website for example and not buying a chair because they don't like the desktop web app experience.

They might pass though if they can't get the site to work well on their phone.


The prissy prima donna web developers in this thread would have you believe that all users are just like them and obviously bounce from any site that isn't perfect (as defined by them of course). In reality most sites are shit and people just suffer through them anyway because something they want is on the other end.

You and I live in completely different worlds. I will absolutely not complete a purchase if your website is unusable.

In fact, this happened last week--I was trying to purchase a plane ticket and the animations were so excessive and poorly done that it obscurbed a form field that made it impossible to book the ticket. I bounced and booked a ticket from a competing airline.


I have just cancelled about $500 in monthly subscriptions on Patreon, because I refuse to reward utter management failures.

I refuse to go to restaurants that have QR-code menus that download a PDF with unusably small entries.

Unless you HAVE to use something, you can still vote with your wallet. Herman Miller is not the only furniture company in existence.


> I refuse to go to restaurants that have QR-code menus that download a PDF with unusably small entries.

I either go on the restaurant's website directly to find the menu or ask for a physical menu. I've never been tripped up by that. I understand I'm still rewarding the owner for their bad choice, but I'm not going to force my friends and family to get up and leave a restaurant we all wanted to try out because of it.


Huh? I've definitely bounced off shops because their web app experience sucked.

Same for restaurants who over-design their website and make it difficult to find the only three things I care about: location, hours, menu.

The trend that I have found to be truly aggravating is restaurants recognizing that sometimes I just want to look at the menu. I don't want to place an order. Don't make me tell you when I want to pick up my order or where I want it delivered. I just want to browse and make a decision later.

Don't forget contact too. It was difficult to find contact information on some sites. I remember 10 years ago contact information are usually at the bottom of the main page or in the nav menu. Now, it took some soul searching to find it where they buried it in the submenu. Sometime I usually use Google Maps to get the address or phone number since some site don't make it easier to find it

It's not just web design. Desktop software is being ruined by mobile-only app design.

Desktop software has been ruined by touch UI. Big buttons made for fat fingers means we get "Fisher Price" UIs. Not a bad thing for the casual user, but for power users it feels like we're moving backwards.

I’m less concerned with brochure and ecommerce sites. But mobile first design for productivity sites and tool interfaces drive me crazy. Who normally accesses these tools from their phones?

I recently had the misfortune of having to use a background check app that was mobile only!

It was a real pain to enter past employer and residence names and addresses on a mobile keyboard, but even worse when it came to dates, because the date picker would only scroll a month at a time, starting from the current month and year. To enter my birthdate, I had to tap ~550 times.

(I was kinda tempted to file an EEOC claim, since the broken date entry has a disproportionate impact on older workers, a protected class. But that's not a great way to introduce yourself to a new employer's HR department.)


I’ve been a web developer since before “mobile first”, and since before mobile as a serious web target. Granted when it did become a serious target, we had different terms as well: adaptive and responsive design come to mind. “Mobile first” as a concept was not then—and never has been, for anyone who takes those other concepts seriously—“mobile at the expense of all else”.

What I mean is that quite a lot of these examples and others people frequently cite when complaining about “mobile first” are not inherent to “mobile first” per se. To my mind, they’re an incomplete application of the principle. And the principle became prominent when the inverse problem was more universal: designs (or simply their implementation) targeted desktop first, and added mobile affordances as an afterthought.

“Mobile first” shouldn’t mean that other web experiences aren’t just as important a consideration. Philosophically, it comes from the perspective that a broadly usable and accessible web experience accounts for the most stringent constraints and works out from there.

I distinctly recall solving problems like those discussed in the article well over a decade ago. It was a lot of work. It requires a lot of care and attention to detail. That doesn’t excuse skipping any of it! And it really should be more achievable as the standards have evolved. But it does require dedication to addressing a large matrix of users’ needs and usage conditions.


This is definitely not a web-only issue. I have seen the same issue with convergent KDE apps (Qt UI based).

Not an expert in this space but intuitively it feels that what is missing in a widely adopted heuristic of how to "best", or at least, "least-bad" map the information and interactivity components of a given UI to different screen geometries.

It feels like a hard problem to crack: in some cases there might not be a good solution at all. So the heuristic should be able to say "no, what you are trying to do does not match any known Homo Sapiens sensory configurations".

Think e.g. how you would map a large and busy DAW screen [1] with hundreds of dials on a small mobile. You'd probably have to rethink the entire workflow, segment into small chunks, smoothly switch screens while providing summaries and connecting elements etc.

[1] https://soundcamp.org/music-and-sound-production-blog/best-f...


Mobile-first is not mobile only design!

This article has completely misunderstand the term, mobile first it's the technical way of organizing the CSS to render the mobile viewport first and then the rest of the 'breakpoints'.

Mobile-first design has the advantage, over the desktop-first design, that it directly render first the mobile design and the cellphone experience is much faster and with less rearragning flickering.

Mobile-first doesn't have the corresponding disadvantages at the desktop browser since they tend to have a land line internet and much faster cpu and memory.


I think they're assuming or taking the case of mobile first design with desktop as an afterthought.

Omg yes!

It has finally been told! I was crying and talking about making the return of information rich websites, but people were just following trends blindly :(


view point in article mostly from an user perspective, but if same stuff would be reviewed from companies perspectives most of that negatives has positive effects for marketing/sales needs which probably a reason why is so widespread.

It's like: our visitor can't just see our half page table with tech spec to know everything, he should go trough 20 images on 2 long pages and during that we will show him all our 'important' messages that he won't be interested otherwise.


The irritating thing is that it is neither mobile first nor desktop first. Most websites I come across are designed and built for desktop but using a mobile aesthetic.

It’s an indicator that most of their userbase is mobile. Look at B2B SaaS apps and they tend to have the opposite problem

Vanguard has been guilty of this as well. Its recent site redesign has been all over the place, and sometimes leaning heavily toward folks using its phone app (not that its phone app is very user friendly either; for example, checking what orders one has placed by account is impossible). It used to be that the website has a table view that shows almost everything I need to know about my holdings. Now, it takes a few clicks to find that info and even then, the layout is so sparse (mobile optimized) and hard to read.

Maybe I'm getting really old and just like to complain about this because I'm not very much used to this phone-oriented UIs.


Vanguard's website has always been a mess, to be honest. It's really hard to figure out how to do some basic stuff like transfer money.

I figure their website is so bare bones because it reflects their low cost ETFs. They'd rather have a crappy website and cheap ETF's than a fancy website with slightly higher cost ETFs.


I think they also eliminated some of the color hierarchy in favor of just making everything big black text swimming in a sea of white. So it's a little harder to see which pieces of text belong together.

I hate it lol


The visual design problem mirrors a problem with the organization producing the website. Before mobile, a website was the entire online presence of a company; every subdivision within the company had a presence above the fold. The culture and conceptual structure of web development developed around this concept. As mobile mandates pushed things below the fold or off the site entirely, web teams found themselves unprepared and have adapted awkwardly, as this article shows. Mobile app teams never had this cultural baggage, which is one of the many reasons native apps are perceived as superior.

> to consume all content.

I've decided, whenever anyone weighs in on information/interaction design, and says "consume...content", what they are saying is, "Hey, we've been stabbing everyone in the face all wrong, here's a better way to stab everyone in the face."


Our AB testing indicates 12% higher laceration engagement is possible with additional modal enstabbators.

I wonder how a global brand like IKEA manages to have such a horrible browsing experience

This is a really long article to say "Content dispersion is bad".

Yeah, obviously. More so if you use a generic image like Waze. It's not a usability problem, it's a quality problem. Apple does just fine with full width desktop heroes because they include relevant images.


I disagree with almost all of these conclusions. I appreciate web pages that are sparse and concise. High information density is _not_ generally a good thing.

I like clean websites with lots of space. I don’t mind long scrolling websites, though I don’t particularly like the trend of stupid animations that happen as you scroll down.

I appreciate that “mobile first” has forced web designers to simplify web sites to be concise. Less is more!


Not directly related (or is it?): I just hate sites where all I see is some fancy wallpaper image and a slogan (if at all).

Then I have to scroll down on my 27" monitor to be able to actually read anything on that site. That is stupid - at least in my opinion.


Proposal to introduce the term "villain image" for this sort of thing.

Yeah, as someone who can't use touch screens, this is a serious pain point in a lot of my web browsing. Mobile first design is an accessibility problem.

Think a lot of the issue is the difficulty grasping what size the actual screen is. I get webpages on my 1080p monitor where everything is just far too big but I guess as far as the code is concerned it has limited knowledge of whether the physical size of the screen is 24" or 5"

I think that many user interfaces only make sense on desktop, like development IDEs for example

I could say the same about web on desktop. Desktop native is still the best for desktop. Browsers insert friction and are rent seekers.

PREACH

opposite way in: 2013 article about high density on the japanese web being (in part) a legacy of their pre smartphone era


Someone told me that Japanese websites tend to look outdated because all of the tooling and code is itself in Japanese, and since that stuff hasn't been updated in a while, the final products are a bit stuck.

The apps go where the money is, most normal people are mobile-first or mobile-only.

90% on e-commerce sites.

90% mobile? If so, wow!

i wish that "Compact" and "Comfortable" options for spacing were as common as dark/light mode

Dark mode requires visual content rich sites to have two sets of assets. Example would be a marketing chart with a white background needs to have a corresponding asset with a black background with different color text and bars.

That can be solved with transparent background images, and brand color palettes that balance contrast in the two modes.

Don't hire this guy, I guess. Mobile first problems was solved like what, 10 years ago? The problem the other way around is still way more prominent. The amount of sites that still can't function normally on any mobile is just silly.

I also wonder how the heat maps looks like during these tests. Let me guess, there are none...

Display: inline-block is the answer :p

Add Substack to the list of brain-dead companies that use a mobile-first UI for an app that's primarly used on the desktop. Cause nobody types 3,000-word newsletters on their mobile, that's for damn sure!

Shit like this makes me want to learn more about using accessibility features of my browsers. I'm far from going blind, but I don't want to scroll through the angry fruit salad of alegria art, huge stock images that take a huge amount of screen real estate and the important bits being tucked away probably somewhere in the bottom.

"Minimalist design" and it still takes multiple megabytes of bandwidth to show a pretty nothing.

I'm using Reader Mode or an equivalent whenever I can. If a site cannot be dealt with using RM, I mostly go elsewhere.

Now get off my lawn, kids.


The Negative Impact of not being mobile first: it took me 5 attempts to dismiss the annoying cookies popup.

I've been seeing this more in content, and also apps that are "browsers" really - some view control that have a mobile & PC/MacOS equivalent - like they are intentionally formatting everything for portrait type display on mobile

My devices are a literal ton of iOS ones, and then 4k and a 2560 × 1440 display which I use most frequently lately.

Tons of whitespace, oversized text everywhere and incorrect use of Z-index are some of the hallmarks of this mobile-first design.


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


> 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.


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".


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.

Perhaps you could provide an example of a non-layout issue?

But does the desktop version get more functionality?

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.

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.


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.


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.


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.


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.


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.

I don't think it is an issue of "scientific" versus "unscientific"

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.


It's 2023, I don't think that's really the case any more. If anything, designing for print is now the part of the discipline that has to suffer through "web-isms".

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.


It's 2023 and I am still explaining how responsive design works to new design grads that my company just hired so there's definitely some failure somewhere.

A great recent example is the Slack redesign that didn't improve any user flows and lowers the information density. And that activity badge with sticky notifications. (Shift + ESC is your friend here.)

You can’t even exit a search. And god forbid you click a notification while doing a search and have to click “back” 500 times to get to a useable interface.

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.


I'm not following. Science gives us good guidance on what works well or will let us achieve our goals, all the time. It's basically the whole point of doing it at all.

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.


What science doesn't give good guidance is how to select those goals in a vacuum. The goals at best end up being a version of someone's personal opinion, since there that's the only form of opinion we have access to.

Any opinions you get out of the scientific method were put in there by the person designing the experiment.


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.

The tacit assumption being made in the article is that good design shouldn't frustrate the users.

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.


> The ones who adopt a scientific approach are by far the worst

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.


> People tend to dismiss UX 'experts' because frequently they end up being the ones who destroy perfectly good interfaces based on trends or similar.

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).


There's two things here.

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.


> Wrt the second point, this means designers aren't designing to the brief you would give them.

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'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


Not getting it. They increased readability, by limiting maximum line length! That is a colossally good thing. Surely, that's like a graphic design 101 kind of decision. (It's a design rule that significantly predates "UX").

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...


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.


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_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.


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.

How is Vector2022 bad? Text columns that are 100 words wide is bad desktop UX.

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)


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.

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.


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.


You can request the desktop site on mobile, though

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

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.


> 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?


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

> Devices should be truthful in the type of content they request.

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.


My phone often does tell remote sites it is a desktop because as bad as the desktop experience is, often that is the only way to get at something. (I don't want an app for my doctors office - I check it after my yearly physical and the rest of the time it takes up space I could use for another picture)

Does it do that automatically or does it have an option?

If you can't, give me at least a choice

> 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.


It's not mobile when it's connected to a screen / keyboard is it?

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-co...

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.


Except you are on a narrower screen. Sounds like correct functionality to me.

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.

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.

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.



> It actually is very hard

Only when folks try to get fancy. K.I.S.S(illy).


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.


> 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.


Expertise properly applied would reduce effort and cost.

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.

Name a few example sites that kept it simple

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://designsystem.digital.gov


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.


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.

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.)

> 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.


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.


Hacker News YX could be way better though

old reddit never figured out how to deal with deeply nested threads without ending up

l

i

k

e

t

h

i

s


Maybe that is a feature: stop when you get to that point.

Or just load a comment closer to that one.

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.


Are you suggesting returning to the time when every site had "m." as a subdomain? Like m.facebook.com?

No need for a subdomain. Just design one for mobile and one for desktop.

Could be purely CSS, could be JS or SSR


>> 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?


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".

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.

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.


> 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.


A text column the whole width of your screen is readable on phones and tablets (portrait) but unreadable on notebooks and desktops. So columns are necessary… Also firm design usually is better if labels and fields are inlined. That’s just the beginning… you can’t avoid design decisions even if you want to favor functionality and content over form.

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.


> 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.


9 of the top 20 most visited websites primarily deal in video and multimedia. I disagree that “99%” of websites “just need text.”

A bank is a bad example. The only thing we use bank websites for is to check our transactions and transfer money.

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.


Banks are basically the ideal "this is just text, tables, and forms" website that html 4 was perfect for.

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.


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.

>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).


TweetDeck is an example of this.

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.


Figma has responsive design and reflow tools built in these days.

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.


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.

A tiny company called Purism did it, so it can't be that hard: https://news.ycombinator.com/item?id=19328085

> 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.


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/


Our UX's are turning into the Hospital Computer scene from Idiocracy[1].

1: https://www.youtube.com/watch?v=LXzJR7K0wK0


As time goes on that movie becomes more and more of a documentary.

> 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.


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.


I have actively gone looking for a way to disable the touchscreen on my laptop, because I explicitly never intend to use it - who wants to look at smudgy fingerprints? It only gets activated by accident and I'd rather not have it at all.

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.


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.


I saw it a bunch with family members. They're not using touch as a primary interface, but more as an alternative to click a button in the middle of the screen or select stuff on the laptop screen wen their mouse is on their external display. I'd suspect there's many "occasional touch" users, in particular on laptops where the trackpad is not great.

But yes, people going full hog on touch usually have Surface pro or Yoga like devices in the first place and won't be an average user. And people used to point fingers at their screens tend to hate it now that it actually reacts.


In uni, a couple students had those tablet/laptop reverse foldable devices as a fancy notepad, used with a stylus.

Started uni recently. My friends have those. They don’t have or use a mouse. All they use is touchpad and the touchscreen. Well, to be honest, a lot of them don’t have a touchscreen yet still don’t use a mouse.

Most Windows laptops definitely do not have touch screens, and most(?) users also tend to use a desktop monitor most of the time (the only ergonomic choice).

> Otherwise I think the majority of windows laptops now have touch screens

a) I would be really interested in the reasoning behind that opinion

b) Even if a laptops screen is touch-capable, it still has a precision pointing device

c) PCs exist, and so do docking stations.


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.


> 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.


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.


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.

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.


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.

Have you tried setting your browser agent to mobile?

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.


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.

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.


And no way to adjust the sound volume.

In a nutshell everything Instagram does!


We should bring back below-the-fold auto-playing music on sites.

> 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.


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".

> 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.


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.


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.


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: