Hacker News Reader

Comment by Aardwolf | Hacker News Reader

Hacker news is easier to read on mobile than many so called made for mobile sites. It's as if made for mobile means: "abuse the small mobile screen to show as much as possible spammy bars and social network buttons on it and make them even bigger when you zoom in, while hiding actually relevant information that you can see on the desktop version of the site"

While IMHO mobile optimized should mean: wrap the text automatically at the width of the screen, in a readable size in portrait mode, don't hide anything that's visible on the desktop site (like dates, user comments, version history, ...), and support zooming in in a sane way

Even Wikipedia fails at showing the user comments pages and sane zooming in of pictures (it's always those sticky bars that ruin it)

View on HN

Most "mobile" versions of web sites are objectively worse than their "desktop" versions.

Actual advantages of mobile devices are:

* High DPI, handheld. You can look at a mobile screen from different distances for different use cases and screen contents.

* Less eye movement required than for using a typical HD desktop monitor. This makes it easier to navigate unknown applications / web sites.

* Easier to tap anywhere than to click anywhere with a mouse.

* 360° scrolling with high accuracy and intuitive control over the velocity.

* Zooming with quick and intuitive gestures.

Mobile devices are perfect for navigating wide, complex web sites. That's why "mobile" versions that ignore the advantages of mobile devices are usually worse than the desktop versions.

How "mobile-optimized" apps / web sites often fail:

* Overly large elements and fonts that cannot be zoomed out from. High DPI goes to waste.

* Fixed elements that obscure parts of the screen. They make the scrollable area so tiny that you have to move your eye balls quickly when scrolling.

* Hiding important elements in hamburger menus or making them inaccessible. Finding stuff has to require multiple taps so that it is even slower than with a mouse.

* Horizontal scrolling is evil except in awfully implemented code snippets. It is unimaginable to the modern web developer that someone would double-tap a column of text to read it and scroll around afterwards to discover what else the site has to offer.

* Vertical scrolling is too hard even though a touchscreen is perfect for that. All the "important" shit has to be fixed because users would be too stupid to find the menu by scrolling. A fixed "back to top" button is the icing on the modern web cake.

* Zooming is too hard so it should be better disabled, bugged or useless.

> * Easier to tap anywhere than to click anywhere with a mouse. > * 360° scrolling with high accuracy and intuitive control over the velocity. > * Zooming with quick and intuitive gestures.

I disagree about those. "taping" lack a lot of precision a mouse has. And don't get me started on the typing experience as you can't use all your fingers and have no tactile return. Also Ctrl-F "the thing I'm looking for" anyone ?

The intuitive gestures are all but intuitive if you have never used them before. My first reflex to zoom is sure not to move diagonally 2 fingers on a picture.

> Also Ctrl-F "the thing I'm looking for" anyone?

I always forget that mobile browsers say "find in page" rather than "search" when you're trying to search for something on the page, so my eyes skim past it all the time in the hamburger menu.

On iOS you can put find in page in the bottom row of the screen that pops up when you hit the share button. I also put request desktop site there for easy access (although I recently accidentally discovered that that's available by long pressing the reload button.)

Long pressing the reload button ... wow ... yep it does that. I wonder: Is there some site that just lists all the different tricks for mobile safari in a list?

I feel like I am 8 again bombing random walls / burning random trees in Zelda looking for a super secret fabled (atleast in my grade school) green potion of unlimited refills when I'm using iOS safari half the time.

Also, I feel like double tapping the address bar used to scroll to the top of the page too but it seems like it doesn't do that anymore so showing what was ninja patched out would be useful too.

On iOS, tapping the middle of the status bar will scroll up to the top.

You can also find in page by typing into the URL bar and picking Find "<search text>" at the bottom of the suggestion list.

For me, there's a viscious circle at work here.

I don't use my phone that much because the usability is rubbish, and when I do I find it an exercise in frustration.

So, when someone asks me to make a website usable on mobile, I really have no idea what usably on mobile would actually involve. And the result is I make a single column of content which is 100% of screen width and has all the buttons and text inputs enlarged.

I've tried looking for advice about this on the web, but because mobile is such a hype-driven area, the search engine results for any mobile web design topic are inevitably marketing idiocy.

So, where can I read something by people who've done real usability experiments on touchscreens?

>wrap the text automatically at the width of the screen

This should be the browser's job, and none of the webpage's business. Opera Mobile used to do a great job at this, together with zooming and generally making sure traditional webpages rendered in a usable manner on a small screen. With the spreading of dumbed down mobile sites, overcomplicated layout systems and overall inflexibility due to webdevs being UX control freaks, we apparently decided that was not the way to go and instead settled for whatever inferior experience the individual webdev comes up with for their website.

I'm sure the OP meant allow the browser to wrap the text, not to wrap it yourself.

Yeah, whoever, the whole ecosystem, I do have the "text reflow" plugin for mobile firefox which helps a lot, it requires clicking on every individual paragraph to wrap it through so it could be better.

Firefox + uBlock Origin on Android goes a long way toward mitigating the worst horrors of mobile sites, but sometimes even that's not enough. I'd consider setting up NoScript as well, but that would be a hassle to use on mobile. It certainly is a lifesaver on the desktop, though.

I honestly haven't found NoScript on Firefox mobile too painful to use (https://noscript.net/nsa/latest/).

Maybe I'm just paranoid enough to put up with it though :)

> and support zooming in in a sane way

Or, just don't fiddle with it. One does not have to do anything to support zooming, other than to not obstruct it.

Hackernews has a few CSS rules that optimize the site for mobile. For example the page is full-width on mobile instead of 85% width on desktop.

Also, the layout of the site is just rows which makes it easy to translate to a mobile device.

  Except for verbatim/code blocks (i.e. line starts with two or more spaces) with, which are basically unreadable on mobile once they 
  stretch to multiple lines; I get that the intention is for code blocks, but they seem to be misused for quoting OP somewhat frequently.

It works be so much nicer if these blocks could render differently on mobile; it's surely not that hard for a computer to determine what is coffee and what isn't?

One major change HN would need on mobile would be making the click target for actions (up/down vote, reply, etc) larger.

Currently I need to zoom in every time to click any of them.

No. I'm fine zooming in or trying multiple times, I spend much more time trying to read which becomes harder when more and more of the screen is taken up by things that are not text.

They could make the up/down arrows taller, but not wider. This would prevent fat-fingering the wrong vote, and would not take space from text.

Yes. It's annoying having workarounds for basic site functionality.

There are other ways to do this. The arrows could be put to the right of the [-] icon and wider apart.

Also what's with the blurry arrows for votes?

Blurry arrows? I don't see any? Which ones do you mean? Screenshot?

HN uses images of 16px height for arrows, which are rendered on mobile with ~48-96px height.

Obviously, that ends up blurry. The solution is SVG.

Isn't the solution simply unicode?

I suppose it is easier to control the actual size, padding and so on with SVG. Unicode does have correct glyphs though and I suppose that the exact rendering of the arrows is not much of a priority. However currently they are blurry on any high dpi screen.

A bit off topic, but what happened with double tap to reflow text? It's a feature I miss a lot from old androids.

Reply on news.ycombinator.com