This article starts with a pretty big assumption:<p>> Now, I think we can all agree that, on our desktop computers, we prefer viewing the full-width layout of most web pages.<p>This assumption is not reflective of current accessibility research. For folks that regularly use browsers at high zoom levels, it's important for content to be able to reflow even on a desktop computer. This is disproportionally impactful for older seniors, who might struggle with instructions like "remember to put an m. in front of the url".<p>WCAG 2.1 success criterion 1.4.10: Reflow is a good starting point for learning about this: <a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html" rel="nofollow">https://www.w3.org/WAI/WCAG21/Understanding/reflow.html</a>
I agree with the general sentiment.<p>> What can the web designer do?<p>Completely disagree with this section.<p>Each of the suggested device categories (Desktop/laptop, Tablet, Phone) has many different screen sizes/resolutions. And all of them might have screens in landscape or portrait mode. All of these devices might support multi-tasking with varying split screen sizes. All of those devices support custom accessibility configurations for font-sizes, zooming or both. By detecting the UA and trying to shoehorn it into a certain category, you only <i>increase</i> the number of issues for the users.<p>One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left.
<i>> The most striking example is when a horizontal menu bar is converted to a vertical menu bar: all the user's spatial memory of the menu bar's links flies out the window! That option that you thought were there? It's actually here!</i><p>What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give.<p>Furthermore, vertical menus are far more common on mobile phones (not just on websites — apps too). Finding a way to shoehorn a horizontal navigation layout into a tiny screen is more likely to mess with a user’s spatial memory rather than respect it.
"A layout optimized for different viewports results in the layout changing when the viewport changes."<p>How ridiculous to complain about a phenomenon that is basically tautological. The solution? Apparently it's user agent detection of phones vs. tablets vs. desktops. Because (of course) all phones are the same size, all tablets are the same size, and all desktop browser windows are the same size. Oh, and phones and tables are apparently also square.
The complaint seems to be about bad implementations of responsive design, as illustrated in the gif. In other news, bad design is bad.<p>> on non-responsive pages, it is very clear if the window needs to be resized to fit the whole page, but on responsive pages, there isn't anything signaling to the user that hey! the whole page doesn't fit with your current window size<p>So instead of appreciating that someone tried their best (which, sure, sometimes isn’t good enough) to fit their site to your window, they should have deliberately made it worse just to signal to you that <i>you</i> should make <i>your</i> window fit their site? Like, if the site looks cramped to you, resize the window. If it doesn’t, what’s the problem? This is a super-weird and niche request that would be better solved with a browser extension.
The title is so click baity and the whole premise seems flawed.<p>Spacial reasoning wouldn't work on mac if the users were constantly resizing their monitor. If you always want your website to look and feel the same, keep your browser the same size.<p>If you don't want a site optimized for small screens, don't make your screen small.<p>Additionally, this is all complaints with no solution.<p>It's not an anti pattern if it's the only way to solve a real problem.
> maybe it would be better if we went back to some form of user agent detection<p>God no. Just because I have a desktop PC with a big monitor, doesn't mean that I'll always have one fullscreen browser window occupying all of it. For all the troubles of responsive design, it's really nice to be able to tuck a website into a very narrow viewport at the edge of the screen to do something else while keeping an eye on it.
The mobile-first approach that web developers have adopted reflects the desire to maintain one codebase regardless of device. What the author of the article proposes is what we used to have before responsive websites: separate mobile and desktop websites.<p>You can design responsive websites today using CSS Grid without needing media queries, and the resulting sites can offer a better experience than using media queries. Unfortunately, not many developers are taking such an approach. Why not? It may be they are:<p>- using a CSS framework (that does not use CSS Grid)<p>- using a CSS-in-JavaScript-style framework<p>- need to support older browsers<p>- simply aren't aware of modern CSS features available<p>CSS is still horrible and will never be anything less than that, but...modern CSS (for modern browsers) lets you leave behind all the horrible CSS hacks from the past.<p>I recommend watching this excerpt from an excellent video by Jen Simmonds (Developer Advocate at Mozilla) on CSS Grid from 2018:<p><i>CSS Grid: Assuming You Need Breakpoints</i>:
<a href="https://youtu.be/0Gr1XSyxZy0?t=189" rel="nofollow">https://youtu.be/0Gr1XSyxZy0?t=189</a>
> web designers need to think long and hard about how they implement responsive design.<p>No, web designers need to do their best to balance cost/value of changes. While this might be a hot button topic here, I doubt the general public knows or cares much. Silly and self centered to DEMAND everyone needs to change to fit a niche group of users
Good responsive design is _hard_. I think people tend to pave over this by just recommending "mobile first" and then giving a list of breakpoints named suggestively after device classes ("iphone", "tablet", "notebook" and so on).<p>There's sadly no easy, widely supported, reliable way to identify what designers try to deduct from these breakpoints. Even if you correctly identify my 4K screen as a notebook, that doesn't mean you'll take into account that it has a touchscreen. And even if you detect the touchscreen, I may prefer using the trackpad instead.<p>Microsoft had the right idea with the prominent touch/mouse toggle on their Office desktop apps, even if the solution feels a bit clunky and awkward. In the end you'll probably just need to take an educated guess and allow the user to override.<p>But sadly this means instead of a simple linear progression from lowres/touch to hires/mouse, we end up with a multi-dimensional matrix of touch/mouse, lowres to hires and so on, doubling or multiplying the variations with each new variable (e.g. dark mode).
Responsive design is great, lots of people do it badly. C'est la vie. Most are making practical decisions regarding time and cost. I can look at my analytics and see very few people actually looking at the site between "standard" mobile and "standard" desktop sizes. Then I can look at conversion rates and figure out what's worth spending time and money on.<p>As for the author and his predicament, why doesn't he just zoom out? I'm pretty sure every desktop browser can do that. He can make his window smaller and have the full desktop experience. Sure the text will be a bit smaller, but you can't have your cake and eat it.
It's crazy to me that a bunch of people that I don't know and who don't know me nevertheless separately and repeatedly duplicate attempts to pick the correct font, size, weight, line length and line height for me, and the browser client running on my machine let's them do this with only the most minimal and transient fig leaf support for personalization.<p>The tools we use to access and share information are broken.
> I personally like to my browser windows to be reasonably narrow […]<p>> What can the user do?<p>Just use a 1000+ pixel window width like everyone else.
The vast majority of desktop browsers are used with a 1000+ pixel with, often much larger. You are just the edgiest of edge cases.<p>I understand you’d like the whole world to cater to your weird preference for narrower windows, but making decent experiences for all sorts of operating systems, screen sizes, browsers, interaction models and so on is already hard enough. Asking for it to be made harder for your convenience is not a reasonable request.
The problem in that page is sidebarism -- there are two meaningless sidebars, a dark pattern, disinformation that we're accustomed to ignore, on the page.<p>Of course the real content should be privileged, but the #1 problem of the commercial web is the stuffing with trackers, distractions, time wasters, etc. and put responsive layout into that and it it is death.<p>I am working now on an HTML template to publish a photograph and some notes about it online and it revolves entirely around "taking over the viewpoint" so that I can put in a video-game style navigation bar (choose 1, 2, 3, 4 or 5 even if you don't know what it is it loads so fast you will) that always stays on the side but the other panel can have or not have a scrollbar, the photo automatically fits if you turn it, you can zoom in, etc.<p>It is possible with CSS and a polyfill, but it also takes a commitment to quality: I don't cookie you, I don't have to harass you with a cookie popup, etc.
Yup. This is super annoying. Web forums that I used to be able to use well on a <i>Blackberry</i> are now auto-flowed to a mobile setup even on a modern iPhone. And here’s the thing: the web forum actually HAS a separate mobile mode!
It is worth noting that responsive design is required for accessibility. The list of devices offered in the article omits, for example, ‘visually impaired users with zoom set to 400%’.
Web design isn't the answer. Web design is the problem.<p>I'm increasingly convinced that styling should be taken entirely out of the hands of the site / page designer, and into the hands of the user (or at least their device).<p>Offer a class of page styles (homepage, index, article, gallery, discussion, etc.). Offer a standard set of styles for these. Offer a set of minimal "identity" modifications for the site.<p>(The Microformats concept approaches this to a high degree.
As does Gemini, from another direction.)<p>And let the user agent (with an override for those few power users who know and care) choose which of those styles to apply. (Again, elites could modify/adapt the styles if desired.)<p>Yes, this means you're not going to be able to design "for X browser". Yes this means that appearance will be highly distinct across devices.<p>But at least those of us accessing content can read the motherlovin' thing.<p>(Accessibility, screenreaders, machine processing, etc., will also benefit.)
Based on analytics of the website for my company, only 5% of users have a medium browser width.<p>Instead of designing for three screen sizes, it is easier to design for two and give tablets the mobile experience.<p>It is also the most challenging size to design for as you are restricted with horizontal space compared to the much more common desktop size.
> One of the fundamental concepts that informed the design of the Macintosh, the first true consumer-oriented graphical user interface, was the idea that humans could interact with computers spatially.<p>Does anyone know a source to confirm this? I remember reading an anecdote years ago that users got so used to the folders being the same as the window that held their contents that they had difficulties when that metaphor broke down. That story had some good insights on user-friendliness in design.
> The crux is that it is not uncommon for web designers to lock the full-width design behind a media query and serve the mobile version by default.<p>This of course is in part thanks to Google's "mobile first" doctrine: <a href="https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for" rel="nofollow">https://developers.google.com/search/blog/2020/03/announcing...</a>
I think debating where the breakpoints should be is fair. My rule of thumb is that a site should not go to “tablet” mode until it’s below half the width of a laptop monitor: ie anyone on a laptop should be able to put two windows size by size and still see the “full-width” version.<p>However, this is impossible to actually implement, because we don’t get media queries in “what percentage of the screen is visible,” we just get how many pixels (or virtual pixels) we have to work with.<p>One variation on the authors idea: suppose that browser vendors implemented media queries differently so they provided “screen=small|medium|large|xlarge”. Then the widths which trigger these layouts could be configured in the browser (with sane defaults), and the user could “lock” their browser to whichever query they preferred regardless of the window size.<p>But, that would actually be really hard to deal with on the implementation and testing side. Do you - should you? - care if a user has their browser locked to “xlarge” but then the layout breaks when the window is shrunk down to 500px wide?<p>At the end of the day there’s no perfect solution here.
><i>I'm sure I'm not alone in frequently experiencing this phenomenon. I personally like to my browser windows to be reasonably narrow</i><p>If you "like [your] browser windows to be reasonably narrow" then you're probably mostly "alone in frequently experiencing this phenomenon".<p>Most people I've seen maximize (or close to maximize) their browser.
For anyone building a React site that wants a solid responsive UI framework that makes it easy to adapt to multiple screensizes, I highly recommend Chakra UI: <a href="https://chakra-ui.com/" rel="nofollow">https://chakra-ui.com/</a><p>It allows you to set width and height units (as well as any other CSS style) for each component using an array or object to describe how the component should render for each screen width (as defined by you). Also has built-in React hooks for responsive variables.<p>I've never had a better experience building responsive sites.<p>I think most of what the author is complaining about is bad responsive design. Media queries, by themselves, are a powerful primitive, but they get harder to work with and balance the more complex your site gets. Better tooling helps!
Maybe this can be solved on the browser side of things. I can imagine that a browser could communicate the width of the screen as the width of the window to the webpage, even though the width of the window in reality might be made smaller by the user.
I find it kinda ironic that the article is horrible to read on a phone, desktop style side paddings meet minuscule text ...<p>Given that i am using some hn reader app with integrated browser frame, it might be also safe to assume that the proposed imperative solution to "responsive design" would break on my edge case (it's not the reason for the current articles appearance though, it's just as badly optimised in the regular browser)
Would sure be nice if the website actually had a way of telling if its being displayed on a mobile device (in a way that would correctly detect a landscape mode ipad for instance), as well as a way of telling you are on a metered connection, or even slow connection. There are no reliable ways to do any of that in the browser.
Responsive web design caters both businesses (cheaper than having a separate mobile website) and users (single URL for everything). I guess the article author is out of the main demographics as most users don't notice this because they browse with maximized windows, and that's what the design trends are reflecting.
This article points to one poorly designed website which uses CSS media queries incorrectly (poorly chosen breakpoints) to try to justify that media queries are bad and it fails to mention the millions of websites which are doing it right.<p>> Cross-site inconsistency<p>The whole section doesn't present a single logical argument. The author later tries to argue that designing a completely different interface for each device type will somehow lead to a more consistent design across devices... That is completely contradictory. Also, maintaining all these different interfaces will involve a lot more maintenance work and will lead to inconsistent functionality between devices. I hate native mobile apps in part because the interface is often completely different from the website.<p>The whole point of media queries is to provide the most consistent experience possible between devices by sharing as much of the HTML layout and CSS as possible between all the devices. If the breakpoints are chosen carefully, it does an amazing job at this.<p>Responsive design is amazing. Just like any powerful tool, there will always be people who misuse it. It doesn't make sense to call something bad because it's flexible enough that it allows people to make mistakes.<p>People should stop blaming tools and start blaming people. Not all developers are the same. Many software developers these days are completely irrational and incapable of critical thinking... They should be working in a different industry. That's the real problem.<p>We try so hard to avoid hurting people's feelings that we end up blaming everything except the people. That's why so many people are completely incapable these days; most of them never received any criticism, never had any incentive to improve themselves.
there are some useful ideas in responsive design, but for the most part it has become a cargo cult where checking the box of responsive design matters more than a thoughtful design for any of the sizes in question.<p>There are a variety of screen sizes that <i>should</i> work. I once got a very small screen android phone and pretty much no apps worked correctly on it. But the responsive design approach where elements resize and reflow, etc., is at best only a partial solution. Perhaps the UX on a tiny screen should be fundamentally different.<p>Responsive design presupposes various layout oriented invariants that may not actually be the most sensible way to reorganize information. This combined with the cargo cult of DRY results in some pretty bad design.
To me it looks like adaptive design, not responsive design. Responsive design scales seamlessly and doesn't even need breakpoints when designers don't insist on pixel perfect mockup recreations and let the browser do it's thing.
I really miss the defunct `media="handheld"` attribute.<p>That said, available layout area and the kind of user interaction available to an interface are separate concerns. So can we have `media="touch-only"`, please?
That forced three column layout with only content in the middle column is worse. Two thirds of my screen is empty white but I have to scroll vertically to read things like sample code.
A probably more realistic 'fix' for this would be a browser extension that could strip media queries out of all websites' css, below a certain threshold (eg, 600px)
There's nothing to see here other than the Dunning-Kruger effect. Current responsive design practices are not perfect, but the author's conclusion (to target platforms with user agent strings) is downright regressive. There are a multitude of well documented reasons that we moved away from this, and it's offensive that the author didn't bother to educate themselves properly before penning this.<p>One thing that would help responsive design are breakpoints on elements, rather than the page itself. If my article preview component knows its own width, it can "break" accordingly into a better layout. While this is currently possible with JS, CSS support would greatly improve things (and enable the concept for non-js browsing experiences).
Echoing the idea, or restating it, I would say that a lot of responsive design is a failure to design in the first place. If a layout has to change radically between devices, browsers, etc., it most likely needs to be rethought from the ground up.