15 ms·

The anti-pattern of responsive design

162 points by mrzool 5y ago

Robotbeat 5y ago
Yup. This is super annoying. Web forums that I used to be able to use well on a Blackberry 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!
- deleted 5y ago
  [deleted]
psychometry 5y ago
"A layout optimized for different viewports results in the layout changing when the viewport changes." 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.
- 8note 5y ago
  Why does the website or browser have to choose this on behalf of the user? Why not let the user choose what they want as a setting?
this-pony 5y ago
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.
- taylodl 5y ago
  Imagine having a "lock layout" button on your toolbar. Once locked, the browser would continue reporting the window width as being what it was when the layout was locked - regardless of window resizing. I think this is a great idea!
  - this-pony 5y ago
    Indeed!, that is exactly what I had in mind.
themoose8 5y ago
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)
- lolinder 5y ago
  Does this solve the problem OP mentioned of many sites hiding the desktop version behind the query?
  - themoose8 5y ago
    Alas, I mentally skipped over that part of the article and reacted to this being somehow on the onus of the web designer. It seems it may not be quite as simple as I described, but you could probably spoof the device width being sent to the web page
- deleted 5y ago
  [deleted]
- DHPersonal 5y ago
  The consensus that I believe has been reached in the front-end community is to design the CSS with mobile versions as the default — no media queries — and then adjust the design with cascading media queries to manage specific needs of the various sizes that grow from the default. With grid and flex offering truly responsive layouts without excessive or restrictive media queries, adjusting for tablet and desktop screens consists largely of filling in any layout rendering/browser quirks or handling design quibbles. The reasoning for this is fairly simple: a majority of users visit the site on mobile devices. Sites are being developed with a single code base for the largest group of visitors, with tablet and desktop users being added on afterward almost as alternative views. Using this process doesn't always produce the best results for any browser size because it requires a design plan that considers the requirements of this method.
  - jfengel 5y ago
    Even if a majority of users aren't on mobile, there will be at least some. And mobile renders better on a desktop than desktop renders on a mobile. Desktop-only sizes and features are great add-ons if you have time. But being able to get MVP to 100% of users is the top priority.
open-source-ux 5y ago
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. 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: - using a CSS framework (that does not use CSS Grid) - using a CSS-in-JavaScript-style framework - need to support older browsers - simply aren't aware of modern CSS features available 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. I recommend watching this excerpt from an excellent video by Jen Simmonds (Developer Advocate at Mozilla) on CSS Grid from 2018: CSS Grid: Assuming You Need Breakpoints: https://youtu.be/0Gr1XSyxZy0?t=189 https://youtu.be/0Gr1XSyxZy0?t=189
FrontAid 5y ago
I agree with the general sentiment. > What can the web designer do? Completely disagree with this section. 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 increase the number of issues for the users. 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.
- yohannparis 5y ago
  I agree with your sentiment. But instead of just using CSS units, you can use hard breakpoints, but not for the whole site. Each UI elements needs to be tailored based on width and height of a browser, you cannot bucket everything.
  - jakelazaroff 5y ago
    The best way to accomplish this is container queries, which are just starting to show up in browsers. Essentially, you define breakouts based on the dimensions of individual elements, not the full browser window. https://css-tricks.com/say-hello-to-css-container-queries/ https://css-tricks.com/say-hello-to-css-container-queries/
    - chrisco255 5y ago
      Sounds like they just dropped in Chrome Canary, so this is very, very early. That typically means it'll take years for it to be supported in all browsers or 99% of browser versions in use. Is there a polyfill solution for this in the meantime?
      - FrontAid 5y ago
        Container queries have been suggested for a while now, it is not a new idea. But it has gained a lot of momentum recently, for example [1]. So maybe it will not be years until all modern browsers might support it. Until then, you might want to try [2] (not a polyfill, but a workaround with JavaScript). [1] https://github.com/w3c/csswg-drafts/issues/5796 https://github.com/w3c/csswg-drafts/issues/5796 [2] https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/ https://philipwalton.com/articles/responsive-components-a-so...
pantulis 5y ago
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.
rhn_mk1 5y ago
> 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. 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.
- lou1306 5y ago
  For instance, this article [0] talks about implementing the Finder, and how it "was the first to begin to take advantage of the idea of spatial organization". But really, all of e.g., Jef Raskin's work on UIs revolved around spatial metaphors. [0]: https://www.folklore.org/StoryView.py?project=Macintosh&story=The_Grand_Unified_Model_The_Finder.txt https://www.folklore.org/StoryView.py?project=Macintosh&stor...
zebraflask 5y ago
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.
tobr 5y ago
The complaint seems to be about bad implementations of responsive design, as illustrated in the gif. In other news, bad design is bad. > 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 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 you should make your 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.
mobjack 5y ago
Based on analytics of the website for my company, only 5% of users have a medium browser width. Instead of designing for three screen sizes, it is easier to design for two and give tablets the mobile experience. 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.
- mumblemumble 5y ago
  When I'm using my tablet, I'd rather get the desktop layout. Because my tablet's screen is higher resolution than that of many laptops, and, even if the screen itself is physically smaller, I also hold it closer to my face, and, most of all, because layouts designed for phones just look bad on it. I kind of wish my browser could just set a flag that CSS can see, so that I can decide for myself how much I like hamburger buttons and four words per line of text.
DocTomoe 5y ago
> 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. This of course is in part thanks to Google's "mobile first" doctrine: https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for https://developers.google.com/search/blog/2020/03/announcing...
jakelazaroff 5y ago
> 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! What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give. 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.
- ncallaway 5y ago
  Exactly this. You can either having pages that scroll horizontally or content that reflows. There is really no other option available when dealing with a layout that can be arbitrarily resized (edited to add: there are a couple other options such as scaling down all individual UI elements, or simply removing some elements but those aren't really viable solutions in most contexts). Since we have collectively decided that horizontal scrolling is unacceptable in almost all web contexts, that leaves reflowing content when the window gets smaller. I understand the complaint and I sometimes have a similar frustrations. But, what other options are there that don't introduce horizontal scrolling?
  - thinkloop 5y ago
    Not all reflowing is created equal. Say you knew for certainty your users were only on desktop. In that case you may still want responsive design but it will likely be a different responsiveness than what we get with the cliff dive to "the mobile site". Reflowing can be done gently and granularly at the exact maximum points needed with minimum changes - rather than the stark nuking to a completely different site at 700px.
    - ncallaway 5y ago
      Sure, but even if 100% of your users will be on a desktop site, you still need to deal with a browser window that has resized down to 300px. At _some_ point, you will have to have a significant transition if you have an website that is mostly optimized for a desktop, full window experience. I agree that many sites overdo the transition, but there are some things that really do warrant a phase-change at some point.
dbjorge 5y ago
This article starts with a pretty big assumption: > Now, I think we can all agree that, on our desktop computers, we prefer viewing the full-width layout of most web pages. 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". WCAG 2.1 success criterion 1.4.10: Reflow is a good starting point for learning about this: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
- phreack 5y ago
  Something barely related that drives me nuts, is that if reflow is something so important (it is), then why is Opera the only Android browser which implements text reflow? ! It should be a top concern for browser and page devs IMO.
  - thinkloop 5y ago
    Could you explain what you mean with an example?
    - gmueckl 5y ago
      Not the OP, but I think I know what they mean. If you zoom in so that you see a div full of text that would get wider than the screen, Opera will reflow the text to fit the width of the screen even if the underlying page layout is wider. This allows you to read pages at high zoom level without having to pan the page side to side for each line of text.
      - kbenson 5y ago
        > Opera will reflow the text to fit the width of the screen even if the underlying page layout is wider. That is not something I would want in many cases where I'm zooming in on mobile, if I understand you. A lot of time I'm doing that so I can accurately click a link that was too small. I want the text to stay positioned so I can zoom to a specific part of it without it changing underneath me. That's what a zoomed in view means, IMO, especially when considering the origin of the meaning.
dreen 5y ago
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.
- madeofpalk 5y ago
  What's a "mobile device"? Is an iPad in landscape a mobile device? What about if that iPad has a 13" screen, the same size as laptops?
jamestenglish 5y ago
> web designers need to think long and hard about how they implement responsive design. 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
burlesona 5y ago
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. 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. 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. 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? At the end of the day there’s no perfect solution here.
chrisco255 5y ago
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: https://chakra-ui.com/ https://chakra-ui.com/ 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. I've never had a better experience building responsive sites. 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!
scooble 5y ago
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%’.
hnbad 5y ago
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). 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. 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. 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).
- terrortrain 5y ago
  Just assume everything is touch and mouse... My laptop is touch, and I use touch and the mouse frequently. Most apps work fine with either. If you do and context menu or whatever for right click, make sure you also implement them for long touch. All clickable things should be 40px or greater. Is there something I am missing? Some great mouse functionality that I never learned?
terrortrain 5y ago
The title is so click baity and the whole premise seems flawed. 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. If you don't want a site optimized for small screens, don't make your screen small. Additionally, this is all complaints with no solution. It's not an anti pattern if it's the only way to solve a real problem.
majewsky 5y ago
> maybe it would be better if we went back to some form of user agent detection 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.
mitchdoogle 5y ago
Why not just use browser zoom and font size to your liking?
- exac 5y ago
  It would be interesting to find out what percentage of the population knows that their browser can zoom in, or pinch-to-zoom on mobile.
  - jfengel 5y ago
    It would be interesting to know what percentage of web sites have disabled zooming.
coldtea 5y ago
>I'm sure I'm not alone in frequently experiencing this phenomenon. I personally like to my browser windows to be reasonably narrow If you "like [your] browser windows to be reasonably narrow" then you're probably mostly "alone in frequently experiencing this phenomenon". Most people I've seen maximize (or close to maximize) their browser.
PaulHoule 5y ago
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. 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. 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. 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.
iamben 5y ago
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. 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.
- SilasX 5y ago
  >As for the author and his predicament, why doesn't he just zoom out? I'm pretty sure every desktop browser can do that. Oh wow, I can't believe I never thought of doing that. (Not sarcasm.) I guess I'm just accustomed to responsive design being so poor that any client side change borks eveyrthing. I just tried that on Facebook, and it actually doesn't break the site, but moves it a little more toward the usability of the old design. Thanks! Edit: With that said, "just zoom out" doesn't work on mobile: once you get to a threshold, at least iOS interprets further zoomout as "I want to see all my tabs". Bleh.
  - iamben 5y ago
    Haha, no worries! :-) On mobile (Chrome/Android at least) you can tick the "Use Desktop" box and it'll display the full desktop site. You obviously have to pinch zoom in to actually read stuff (for the most part).
    - SilasX 5y ago
      Yeah I move to desktop on a lot of sites, but then n some it doesn’t make a difference because of the ugly mobile first. What’s worse, there was some iOS update that made double tap to zoom very rarely work.
  - eurasiantiger 5y ago
    Pinch zoom doesn’t work for that, but you can actually set the page zoom in the aA menu on the left of the address bar.
matt_morgan 5y ago
12 years later, Mobile-first design still solves this.
idownvoted 5y ago
> when I reduce the width of the browser window by a couple of pixels. > I'm sure I'm not alone in … I personally like to my browser windows to be reasonably narrow I do share his annoyance but I'm always hesitant to deduce UX needs of the masses from the needs of specialists. Especially if said specialists specialize in UX. Most users don't resize their browser windows all the time and of those that do, most non-techies don't care if the layout jumps. This GIF is a problem that only exists in UX people's heads. He's not alone as I've seen countless teams optimizing these jumps, animating them. > I can't believe that I'm saying it, but maybe it would be better if we went back to some form of user agent detection: I think here he touches on the root cause: Why don't devices send a media-type like "print", "screen" etc?
cryptica 5y ago
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. > Cross-site inconsistency 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. 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. 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. 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. 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.
- mrtranscendence 5y ago
  How do you go from (paraphrasing) "this guy is wrong; responsive design is a powerful tool that can do an amazing job" to "kids these days suck because they never got enough criticism"? That's way out of left field. Who knows why the guy is wrong, or can you magically determine from that blog post that he's just an incapable schlub who was never subjected to enough shaming?
- ska 5y ago
  > Responsive design is amazing. Just like any powerful tool, there will always be people who misuse it. This makes it sounds like most responsive site work really well, but there are some cases where people have done a bad job. That really doesn't match my experience.
lamontcg 5y ago
The thing I hate the most is click on some link in HN or reddit and getting the mobile site. Just make that go away, please.
mdoms 5y ago
I don't think we should re-architect entire websites just because a handful of people like to browse in unusually narrow windows.
dredmorbius 5y ago
Web design isn't the answer. Web design is the problem. 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). 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. (The Microformats concept approaches this to a high degree. As does Gemini, from another direction.) 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.) 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. But at least those of us accessing content can read the motherlovin' thing. (Accessibility, screenreaders, machine processing, etc., will also benefit.)
politician 5y ago
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. The tools we use to access and share information are broken.
- ryandrake 5y ago
  Bingo. Browsers have given away so much power and control to web designers that should be in the user's hands. I know what size text I like. I know what font and colors I prefer. Why make it so difficult to configure my browser to use them, and so easy for web developers to override my preference? The John Gruber site frequently comes up here as the poster boy for this problem: I have an enormous 27" beautiful monitor, but he just -decides- for me that I should be reading text in a tiny narrow horizontal sliver of that screen. Who the hell are you to tell me how I should be reading text on my screen? And the browsers are complicit.
Fauntleroy 5y ago
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. 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).
deltron3030 5y ago
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.
masswerk 5y ago
I really miss the defunct `media="handheld"` attribute. 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?
resters 5y ago
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. There are a variety of screen sizes that should 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. 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.
croes 5y ago
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.
mikl 5y ago
> I personally like to my browser windows to be reasonably narrow […] > What can the user do? 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. 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.
fanf2 5y ago
I am amused that this article was unreadable on my default browser window because the text is too wide
krsdcbl 5y ago
I find it kinda ironic that the article is horrible to read on a phone, desktop style side paddings meet minuscule text ... 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)

162 points by mrzool 5y ago

Yup. This is super annoying. Web forums that I used to be able to use well on a Blackberry 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!

deleted 5y ago
[deleted]

psychometry 5y ago

"A layout optimized for different viewports results in the layout changing when the viewport changes." 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.

8note 5y ago
Why does the website or browser have to choose this on behalf of the user? Why not let the user choose what they want as a setting?

this-pony 5y ago

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.

taylodl 5y ago
Imagine having a "lock layout" button on your toolbar. Once locked, the browser would continue reporting the window width as being what it was when the layout was locked - regardless of window resizing. I think this is a great idea!
- this-pony 5y ago
  Indeed!, that is exactly what I had in mind.

themoose8 5y ago

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)

lolinder 5y ago
Does this solve the problem OP mentioned of many sites hiding the desktop version behind the query?
- themoose8 5y ago
  Alas, I mentally skipped over that part of the article and reacted to this being somehow on the onus of the web designer. It seems it may not be quite as simple as I described, but you could probably spoof the device width being sent to the web page
deleted 5y ago
[deleted]
DHPersonal 5y ago
The consensus that I believe has been reached in the front-end community is to design the CSS with mobile versions as the default — no media queries — and then adjust the design with cascading media queries to manage specific needs of the various sizes that grow from the default. With grid and flex offering truly responsive layouts without excessive or restrictive media queries, adjusting for tablet and desktop screens consists largely of filling in any layout rendering/browser quirks or handling design quibbles. The reasoning for this is fairly simple: a majority of users visit the site on mobile devices. Sites are being developed with a single code base for the largest group of visitors, with tablet and desktop users being added on afterward almost as alternative views. Using this process doesn't always produce the best results for any browser size because it requires a design plan that considers the requirements of this method.
- jfengel 5y ago
  Even if a majority of users aren't on mobile, there will be at least some. And mobile renders better on a desktop than desktop renders on a mobile. Desktop-only sizes and features are great add-ons if you have time. But being able to get MVP to 100% of users is the top priority.

open-source-ux 5y ago

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. 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: - using a CSS framework (that does not use CSS Grid) - using a CSS-in-JavaScript-style framework - need to support older browsers - simply aren't aware of modern CSS features available 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. I recommend watching this excerpt from an excellent video by Jen Simmonds (Developer Advocate at Mozilla) on CSS Grid from 2018: CSS Grid: Assuming You Need Breakpoints: https://youtu.be/0Gr1XSyxZy0?t=189 https://youtu.be/0Gr1XSyxZy0?t=189

FrontAid 5y ago

I agree with the general sentiment. > What can the web designer do? Completely disagree with this section. 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 increase the number of issues for the users. 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.

yohannparis 5y ago
I agree with your sentiment. But instead of just using CSS units, you can use hard breakpoints, but not for the whole site. Each UI elements needs to be tailored based on width and height of a browser, you cannot bucket everything.
- jakelazaroff 5y ago
  The best way to accomplish this is container queries, which are just starting to show up in browsers. Essentially, you define breakouts based on the dimensions of individual elements, not the full browser window. https://css-tricks.com/say-hello-to-css-container-queries/ https://css-tricks.com/say-hello-to-css-container-queries/
  - chrisco255 5y ago
    Sounds like they just dropped in Chrome Canary, so this is very, very early. That typically means it'll take years for it to be supported in all browsers or 99% of browser versions in use. Is there a polyfill solution for this in the meantime?
    - FrontAid 5y ago
      Container queries have been suggested for a while now, it is not a new idea. But it has gained a lot of momentum recently, for example [1]. So maybe it will not be years until all modern browsers might support it. Until then, you might want to try [2] (not a polyfill, but a workaround with JavaScript). [1] https://github.com/w3c/csswg-drafts/issues/5796 https://github.com/w3c/csswg-drafts/issues/5796 [2] https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/ https://philipwalton.com/articles/responsive-components-a-so...

pantulis 5y ago

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.

rhn_mk1 5y ago

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

lou1306 5y ago
For instance, this article [0] talks about implementing the Finder, and how it "was the first to begin to take advantage of the idea of spatial organization". But really, all of e.g., Jef Raskin's work on UIs revolved around spatial metaphors. [0]: https://www.folklore.org/StoryView.py?project=Macintosh&story=The_Grand_Unified_Model_The_Finder.txt https://www.folklore.org/StoryView.py?project=Macintosh&stor...

zebraflask 5y ago

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.

tobr 5y ago

The complaint seems to be about bad implementations of responsive design, as illustrated in the gif. In other news, bad design is bad. > 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 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 you should make your 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.

mobjack 5y ago

Based on analytics of the website for my company, only 5% of users have a medium browser width. Instead of designing for three screen sizes, it is easier to design for two and give tablets the mobile experience. 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.

mumblemumble 5y ago
When I'm using my tablet, I'd rather get the desktop layout. Because my tablet's screen is higher resolution than that of many laptops, and, even if the screen itself is physically smaller, I also hold it closer to my face, and, most of all, because layouts designed for phones just look bad on it. I kind of wish my browser could just set a flag that CSS can see, so that I can decide for myself how much I like hamburger buttons and four words per line of text.

DocTomoe 5y ago

> 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. This of course is in part thanks to Google's "mobile first" doctrine: https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for https://developers.google.com/search/blog/2020/03/announcing...

jakelazaroff 5y ago

> 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! What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give. 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.

ncallaway 5y ago
Exactly this. You can either having pages that scroll horizontally or content that reflows. There is really no other option available when dealing with a layout that can be arbitrarily resized (edited to add: there are a couple other options such as scaling down all individual UI elements, or simply removing some elements but those aren't really viable solutions in most contexts). Since we have collectively decided that horizontal scrolling is unacceptable in almost all web contexts, that leaves reflowing content when the window gets smaller. I understand the complaint and I sometimes have a similar frustrations. But, what other options are there that don't introduce horizontal scrolling?
- thinkloop 5y ago
  Not all reflowing is created equal. Say you knew for certainty your users were only on desktop. In that case you may still want responsive design but it will likely be a different responsiveness than what we get with the cliff dive to "the mobile site". Reflowing can be done gently and granularly at the exact maximum points needed with minimum changes - rather than the stark nuking to a completely different site at 700px.
  - ncallaway 5y ago
    Sure, but even if 100% of your users will be on a desktop site, you still need to deal with a browser window that has resized down to 300px. At _some_ point, you will have to have a significant transition if you have an website that is mostly optimized for a desktop, full window experience. I agree that many sites overdo the transition, but there are some things that really do warrant a phase-change at some point.

dbjorge 5y ago

This article starts with a pretty big assumption: > Now, I think we can all agree that, on our desktop computers, we prefer viewing the full-width layout of most web pages. 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". WCAG 2.1 success criterion 1.4.10: Reflow is a good starting point for learning about this: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

phreack 5y ago
Something barely related that drives me nuts, is that if reflow is something so important (it is), then why is Opera the only Android browser which implements text reflow? ! It should be a top concern for browser and page devs IMO.
- thinkloop 5y ago
  Could you explain what you mean with an example?
  - gmueckl 5y ago
    Not the OP, but I think I know what they mean. If you zoom in so that you see a div full of text that would get wider than the screen, Opera will reflow the text to fit the width of the screen even if the underlying page layout is wider. This allows you to read pages at high zoom level without having to pan the page side to side for each line of text.
    - kbenson 5y ago
      > Opera will reflow the text to fit the width of the screen even if the underlying page layout is wider. That is not something I would want in many cases where I'm zooming in on mobile, if I understand you. A lot of time I'm doing that so I can accurately click a link that was too small. I want the text to stay positioned so I can zoom to a specific part of it without it changing underneath me. That's what a zoomed in view means, IMO, especially when considering the origin of the meaning.

dreen 5y ago

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.

madeofpalk 5y ago
What's a "mobile device"? Is an iPad in landscape a mobile device? What about if that iPad has a 13" screen, the same size as laptops?

jamestenglish 5y ago

> web designers need to think long and hard about how they implement responsive design. 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

burlesona 5y ago

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. 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. 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. 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? At the end of the day there’s no perfect solution here.

chrisco255 5y ago

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: https://chakra-ui.com/ https://chakra-ui.com/ 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. I've never had a better experience building responsive sites. 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!

scooble 5y ago

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

hnbad 5y ago

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

terrortrain 5y ago
Just assume everything is touch and mouse... My laptop is touch, and I use touch and the mouse frequently. Most apps work fine with either. If you do and context menu or whatever for right click, make sure you also implement them for long touch. All clickable things should be 40px or greater. Is there something I am missing? Some great mouse functionality that I never learned?

terrortrain 5y ago

The title is so click baity and the whole premise seems flawed. 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. If you don't want a site optimized for small screens, don't make your screen small. Additionally, this is all complaints with no solution. It's not an anti pattern if it's the only way to solve a real problem.

majewsky 5y ago

> maybe it would be better if we went back to some form of user agent detection 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.

mitchdoogle 5y ago

Why not just use browser zoom and font size to your liking?

exac 5y ago
It would be interesting to find out what percentage of the population knows that their browser can zoom in, or pinch-to-zoom on mobile.
- jfengel 5y ago
  It would be interesting to know what percentage of web sites have disabled zooming.

coldtea 5y ago

>I'm sure I'm not alone in frequently experiencing this phenomenon. I personally like to my browser windows to be reasonably narrow If you "like [your] browser windows to be reasonably narrow" then you're probably mostly "alone in frequently experiencing this phenomenon". Most people I've seen maximize (or close to maximize) their browser.

PaulHoule 5y ago

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

iamben 5y ago

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

SilasX 5y ago
>As for the author and his predicament, why doesn't he just zoom out? I'm pretty sure every desktop browser can do that. Oh wow, I can't believe I never thought of doing that. (Not sarcasm.) I guess I'm just accustomed to responsive design being so poor that any client side change borks eveyrthing. I just tried that on Facebook, and it actually doesn't break the site, but moves it a little more toward the usability of the old design. Thanks! Edit: With that said, "just zoom out" doesn't work on mobile: once you get to a threshold, at least iOS interprets further zoomout as "I want to see all my tabs". Bleh.
- iamben 5y ago
  Haha, no worries! :-) On mobile (Chrome/Android at least) you can tick the "Use Desktop" box and it'll display the full desktop site. You obviously have to pinch zoom in to actually read stuff (for the most part).
  - SilasX 5y ago
    Yeah I move to desktop on a lot of sites, but then n some it doesn’t make a difference because of the ugly mobile first. What’s worse, there was some iOS update that made double tap to zoom very rarely work.
- eurasiantiger 5y ago
  Pinch zoom doesn’t work for that, but you can actually set the page zoom in the aA menu on the left of the address bar.

matt_morgan 5y ago

12 years later, Mobile-first design still solves this.

idownvoted 5y ago

> when I reduce the width of the browser window by a couple of pixels. > I'm sure I'm not alone in … I personally like to my browser windows to be reasonably narrow I do share his annoyance but I'm always hesitant to deduce UX needs of the masses from the needs of specialists. Especially if said specialists specialize in UX. Most users don't resize their browser windows all the time and of those that do, most non-techies don't care if the layout jumps. This GIF is a problem that only exists in UX people's heads. He's not alone as I've seen countless teams optimizing these jumps, animating them. > I can't believe that I'm saying it, but maybe it would be better if we went back to some form of user agent detection: I think here he touches on the root cause: Why don't devices send a media-type like "print", "screen" etc?

cryptica 5y ago

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. > Cross-site inconsistency 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. 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. 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. 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. 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.

mrtranscendence 5y ago
How do you go from (paraphrasing) "this guy is wrong; responsive design is a powerful tool that can do an amazing job" to "kids these days suck because they never got enough criticism"? That's way out of left field. Who knows why the guy is wrong, or can you magically determine from that blog post that he's just an incapable schlub who was never subjected to enough shaming?
ska 5y ago
> Responsive design is amazing. Just like any powerful tool, there will always be people who misuse it. This makes it sounds like most responsive site work really well, but there are some cases where people have done a bad job. That really doesn't match my experience.

lamontcg 5y ago

The thing I hate the most is click on some link in HN or reddit and getting the mobile site. Just make that go away, please.

mdoms 5y ago

I don't think we should re-architect entire websites just because a handful of people like to browse in unusually narrow windows.

dredmorbius 5y ago

Web design isn't the answer. Web design is the problem. 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). 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. (The Microformats concept approaches this to a high degree. As does Gemini, from another direction.) 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.) 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. But at least those of us accessing content can read the motherlovin' thing. (Accessibility, screenreaders, machine processing, etc., will also benefit.)

politician 5y ago

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. The tools we use to access and share information are broken.

ryandrake 5y ago
Bingo. Browsers have given away so much power and control to web designers that should be in the user's hands. I know what size text I like. I know what font and colors I prefer. Why make it so difficult to configure my browser to use them, and so easy for web developers to override my preference? The John Gruber site frequently comes up here as the poster boy for this problem: I have an enormous 27" beautiful monitor, but he just -decides- for me that I should be reading text in a tiny narrow horizontal sliver of that screen. Who the hell are you to tell me how I should be reading text on my screen? And the browsers are complicit.

Fauntleroy 5y ago

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

deltron3030 5y ago

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.

masswerk 5y ago

I really miss the defunct `media="handheld"` attribute. 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?

resters 5y ago

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. There are a variety of screen sizes that should 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. 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.

croes 5y ago

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.

mikl 5y ago

> I personally like to my browser windows to be reasonably narrow […] > What can the user do? 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. 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.

fanf2 5y ago

I am amused that this article was unreadable on my default browser window because the text is too wide

krsdcbl 5y ago

I find it kinda ironic that the article is horrible to read on a phone, desktop style side paddings meet minuscule text ... 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)