Hacker News Reader

Comment by dbjorge | Hacker News Reader

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

View on HN

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

I am one of those people; I have ~150% zoom on most sites, often higher. It's 240% on HN right now, which is my "default" for HN. This is not because I'm visually impaired by the way – I don't even use (or need) glasses – I just like it. I've been doing this since I was in my mid-20s and I just find it more comfterable.

I find these kind of reflows frequently make the page worse, not better. Even with a high zoom level the full desktop site usually works better than the "mobile optimized" site.

It's not uncommon that zooming will make the text smaller. You're at 140% and want to go a tad higher, so you go to 150% and bam: you're over the limit, the text becomes smaller, and now you need to zoom to ludicrous amounts to actually get the desired 150%.

The overall layout also often becomes worse. A common issue is that it makes the box in which the text is displayed too narrow, wasting a lot of space.

This is basically what's going on in this story: it's not that the website shouldn't work well on all different zoom levels or that it shouldn't have any kind of reflow at all, it's that it shouldn't give me a "mobile" site when the desktop version is actually still just fine. I think you've misunderstood this post a little bit.

In my own websites/webapps I generally take a gradual approach. If the screen becomes too narrow to display a certain UI element then tweak that element a bit, and do this individually for every UI element. This is quite a different approach than the "IF smaller_than(1200px) THEN serve_mobile_site". IMHO that's just lazy and bad design.

I usually avoid device detection, but do use it for a few things (e.g. <input type="date"> is ugly on the desktop, so it always serves a JS version for that).

A related note: forcing mobile UX patterns on desktop in general is usually not a good idea. Today I wanted to copy some text from the Dutch parliament website, and I couldn't as the UI element was one of those "swipe left/right" things, so actually trying to select text would swipe the thing to the left/right. I had to resort to the inspector mode to actually be able to select/copy the text.

I'm doing this also, and for the same reason.

>It's not uncommon that zooming will make the text smaller

At least in Firefox you can enforce the minimum font size through settings without using any third-party plugins or custom themes (look in about:preferences → "minimum font size"). I have it set to something like 16 or 18.

This doesn't fix the actual problem, but I gave up on trying to change the world a long time ago.

The problem with minimum font size is that sometimes you want the text to be smaller, especially in cases where it's used as UX labels or the like. I used to set it fairy high in Opera (long time ago, Opera Presto) and even back then it would break stuff.

I have a few custom userstyles to deal with the worst of it; topnavs that grow to 20% of the page height and stuff like that.

> It's not uncommon that zooming will make the text smaller. You're at 140% and want to go a tad higher, so you go to 150% and bam: you're over the limit, the text becomes smaller, and now you need to zoom to ludicrous amounts to actually get the desired 150%.

In fact, the video in his link that shows "correct" responsive design does exactly this, the text becomes larger or smaller in a seemingly random fashion as he zooms in. But to be fair to the BBC, I went to bbc.com and it doesn't seem to do that currently.

Yes, but how showing (shoving) everything under a hamburger menu on desktop helps accessibility? Usually if you back from such a full-page menu, you'll completely leave the website, because it's implemented as some <div> overlay with no one bothering to at least push an entry into history, so it looks like navigation but isn't and is in general very confusing.

On mobile people may be using back button less, but on desktop it's always easily visible and accessible in multiple ways, incl. the keyboard, and at least for me it's almost a reflex to use it. Just ctrl+[ away.

Yes, navigation links that don't behave like normal links are also an accessibility problem[1]. That's a separate issue, though; I don't think it is a reasonable argument against supporting reflow based on perceived window size.

[1] https://www.w3.org/WAI/WCAG21/Techniques/failures/F42

Mixing links and dropdowns is a 'well-known' antipattern, in the sense that lots of people don't know not to do it, so everyone is familiar with it once you bring up the subject, but most people don't think about it until someone mentions it.

This is why you see icons in the menu bar indicating that clicking here doesn't navigate you away from the page, but clicking over here instead might send you away from whatever it is you're doing here.

I commonly use it on mobile, it's on the right side at the bottom, a very easy position to reach for my thumb

We have desktop users with anywhere from 1400 to 3200pixel screen widths, so the concept of having a 'desktop site' without any kind of flow logic at all just doesn't make sense to me.

You end up with sites like daringfireball that is always 512 pixels of content centered in however wide your window is. On a 16:9 display this is extremely awkward. On a 1.85:1 or 2.39:1 display this looks dumb as hell.

> 512 pixels of content centered in however wide your window is

I'll still take it over Paul Graham's blog with all the text way over there on the left edge.

The way I see it, if I wanted my text constrained in a narrow column, I'd resize my browser window. Why specifically take the choice away from users by declaring in the code "512 pixels is the one and only way"? Browsers have given way too much design control over to web developers, taken from end user's choice.

As a user, I encounter three kinds of sites:

1) Sites with multi-column or table design that can show more information when the browser window is wide. I tend to widen the browser window to get the most out of these pages.

2) Sites like Daring Fireball that have a fixed width, so I can still read the content just fine whether or not the window is wide.

3) Sites that expand the line length to wrap at whatever width the browser is at. I find these impossible to read unless I narrow the browser window because I lose track of which line of text I’m reading.

Types (1) and (2) are compatible and make up the large majority of sites I visit. Type (3) isn’t compatible for me, so I find it inconvenient. It’s not the end of the world, but it slightly inhibits my desire to visit such pages. I’d rather not maintain a multi-level navigation hierarchy with multiple windows and multiple tabs in a window.

The choice hasn't been removed. You can choose not to use the author's css quite easily.

Daring Fireball, PG's blog, Hacker News and anything that is primarily text...I just click the little Reader View icon and it looks the way I want it to look.

Ecommerce sites are a minefield.

Saas and anything table-y or app-y, you're also out of luck for the most part.

This is my default for mobile - Reader view for ALL content by default - need to whitelist a few (mainly CMS-style) sites, but no ads, just text and an occasional pic.

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.

Reflow can mean a bunch of different things. Do you mean that Android browser implements text flowing from one div/tablecell to another?

I replied a wall of text in a sibling (cousin?) post, but here's a video of what the feature I meant. I'm not sure what the most accurate name for it would be, I've always seen it called text reflow. https://www.youtube.com/watch?v=yAWTd9h1lbI

Could you explain what you mean with an example?

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.

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

You'd be surprised how well this feature works. I don't recall ever having had an issue like the one you describe. The browser isn't changing the entire page layout, mind you. It only re-layouts the text when all you're seeing on screen is pretty much a single div. I guess you have to experience it to understand.

Also works good on sites that are not responsive.

When looking at a desktop sized web page such as old Reddit, most likely an entry's title won't fit horizontally on the screen. What some browsers do (and I really dislike) is that they somehow guess what's important on the page, and bump those elements' font size in ridiculous ways, while leaving others as they are. I believe this is called font inflation, or text size adjustment. This makes it so the title of a Reddit post becomes huge, while the 'see comments' button below it stays ridiculously tiny and unclickable.

Other browsers just don't care, leave the text in desktop-like proportions, and when you zoom in you end up needing to scroll sideways back and forth to read a sentence, quite cumbersome.

The most reasonable solution is Opera's where if you're on a desktop like site and you zoom to a block of text, it allows the letters to increase in size naturally according to your pinching, but when you let go it reflows the text block and makes it wrap once a line (at its new zoom level) reaches your phone's screen width. This way if you see a long paragraph (or Reddit title, for example), you can zoom until the text is readable, and then only need to scroll up and down, instead of sideways as well, without compromising the original site's design by wonking up the font sizes at (apparently) random.

I'm not sure I did the best job at explaining it, but basically the goal is to be able to zoom into small text on desktop-like pages until I'm comfortable with the size, and then make it wrap to the screen's width so you don't need to scroll sideways to read the text.

Easiest demo is to download Opera on Android, go to old.reddit.com and zoom around. Once you get used to it, every other browser becomes annoying.

Edit: lol, after typing all that I thought of looking up a video and here it is. Looks like some phone's default browsers already do it well too. https://www.youtube.com/watch?v=yAWTd9h1lbI

Yes, we found our customers like to shrink our webapp down to half the screen, multitask, etc. Assuming full width even if their screen dimensions were large was a bad idea.

I often scale my browser window to 30% of the screen's width(it's a large screen).

Webapps and responsive webpages often like to either switch to a layout made for smartphones which looks really weird and makes some links and options inaccessible, or it just breaks in some ugly way. I've seen websites literally becoming unscrollable when the browser window got too narrow, websites where writing in a text field would gradually shift the site out of the visible area, forums that would hide away the "reply" button in narrow windows, instead showing the "report" button in the same location(facepalm).

Web developers should stop assuming their website is the center of my world and attention.

> Web developers should stop assuming their website is the center of my world and attention.

They really should just focus on the content, and not obsess so much about how each and every pixel might look on my various browsers, and stop trying to make assumptions and guess about how I might prefer things to look based on silly things like browser width and user-agent string.

Yes, I almost never have my browser fullscreen (only when the page layout forces me to), and instead use a roughly 1:1 aspect ratio in the middle of the screen, so that text lines aren’t too wide and text starts not too far on the left. That’s with a 27" 16:10 screen.

While the wording isn't particularly clear, the later remarks contrasting full-width with full-screen makes it clear that full-width in this instance does not refer to the full-width of the screen, but only that the "widest" responsible layout is used.

I don't think the article is using unclear wording; I think it is clearly arguing the exact opposite of what you're describing. I think the clearest demonstration of this is the concluding section, where the author specifically talks about using "is desktop/laptop" as a preferred alternative to breakpoints that are based on window size.

Not only do I zoom in all the time, I also, you know, use my operating system's capabilities to put the page into a non full screen window, sometimes even a small (especially narrow) one.

Reply on news.ycombinator.com