HN Explorer

Ask HN: Is non-adjustable mobile font size a real problem?

86 points by meeper16 ↗ HN
I find myself simply passing on sites/articles where I cannot adjust the font size on mobile. Care to take a guess on the percentage of sites that users choose not to read due to non-adjustable mobile font size? I'm getting the sense that a signficant portion of ones userbase is being ignored and alienated with sites that do not have pinch-zoom functionality. If this is the case, then it's fairly low hanging competitive fruit to enable this kind of functionality.

77 comments

[ 4.6 ms ] story [ 133 ms ] thread
byg80
I feel the same way. The problem is that it's just random ones it selects, leaving other fonts tiny and some massive.
meeper16
Yes, all things considered, I'd say providing the ability for consistent font size increases on mobile will correspondingly provide an increase in ones userbase or readership.
lnanek2
Not sure what you are referring to, but that sounds like a symptom of the web developer setting absolute sizes for some fonts (12px) vs. relative ones (medium).
cma
The old default android browser was so much nicer than Chrome in this area; you zoomed in until it was comfortable, then double tapped and the text, not the whole page, would reflow to fit horizontally.
Daneel_
I would say the average designer assumes that users will punch-zoom in to see text in more detail. The only sites that irritate me in this regard are the ones that don't let you pinch-zoom.

Full disclosure: I have great eyesight, so there isn't a font size too small for me on mobile browsers - the limit is what the screen can display. I sympathise with users with imparied vision, but I'd still claim that pinch-zooming is the generally-accepted answer.

Cyph0n
Really now. Open HN in a mobile browser and tell me you don't have to squint to read at the default zoom level.
mullsork
HN is a bad example seeing as the maintainers refuse to put in the small amount of effort it would take to make it work decently on mobile.
joshuapants
I think the way conversations thread would be pretty hard to do comfortably on mobile
pjc50
Reddit manages OK. I wonder what level of petitioning would be required to get the admins to fix HN? Or are all the cool kids using an app which avoids this problem?
prawn
That's no reason not to try. There are always ways to improve.
dev-da0
I agree. I think there are two distinct usability issues to address: content size and font size. That is, how much real estate the virtual viewport occupies in proportion to the display AND the size of font relative to the reader's ability to read comfortably. The trick is sensible adjustments to style attributes to keep layout working properly on the vast majority of devices no matter the zoom level or default font size, within reason.

As a user example, when I load the HN front-page on an iOS device in portrait mode, I'm lazy and switch to rotate to landscape mode to see more without trimming edges and scrolling around. On most sites, I expect to be able to double-tap on a paragraph column to toggle maximize-fit-to-display-width mode and return regular all-content-on-display-width mode.

If some site prevents this, I will not buy their products or use their services, because it's a signal they don't care about usability and will inevitably waste people's time. That's a form of laziness and failure that should not be rewarded. There are usually competitors that want you to switch to their brand (except with govts). Those annoying jQuery Mobile one-sized-fits-all sites deployed by pharmacies, banks, govts and so on.

Cyph0n
Regardless, OP should have thought about the site he's posting on.
meeper16
At least pinch-zoom is functional.
cpncrunch
Functional, but not usable (as you have to scroll a bunch of times to read each line).
Dylan16807
That depends on your browser.
cpncrunch
Yes, I see Chrome has a reasonable default width, whereas the stock android browser is pretty much unusable.
mikeash
I think it's a pretty good example. While site designers should take care to make their stuff look good on small screens, the devices with small screens should also allow users to make adjustments for when the designer didn't do this (or they did, but the user has special requirements). Mobile Safari doesn't even have a text size adjustment, for example. This is madness!
lookbothways
The sad thing is, they fixed this a while ago with a stylesheet that adjusted the page width and text size to fit your display, but reverted it after a bunch of people whined hard.
boyaka
I don't know the reasons why, but on my phone on both Chrome and Firefox the text size is drastically different between comments. I ended up going with the Dolphin browser for HN because it maintains a consistent text size, but I changed the settings on the browser to use the maximum text size. The main negative with this has been certain unzoomable pages having a paragraph less than the width of my phone and only showing a few words per line, causing me to have to scroll constantly as I read. Unless the content is really good, I normally just skip these. As long as they are zoomable, there hasn't been forced white space / margins added to the paragraph (shortening the already too short paragraph width, apparently gleaned from my phone screen size), or the text is reasonably sized (not too big), other pages work just fine though. Also, the Dolphin gesture feature is fun! (I have HN set to a y gesture)

On a side note, some of the best experiences I've personally had browsing on my phone have been through VNC, if I have a good network connection. I realize that a lot of the processing gets offloaded from the phone this way, but I would really just like a more desktop-like experience on my phone. I have always been annoyed by apps that are basically just websites...The browser is often the only app I need. And mobile websites just frustrate me because they often take away features of the desktop version or make me have to use it in a completely different way and make it obnoxiously difficult to switch back (some random link at the bottom, or having to go settings -> request desktop version -> retype the url because it was changed to a mobile one -> reload the page). Browsers have had ways to change the "User Agent", but more and more this feature is either removed or doesn't even work.

Daneel_
I'm using Chrome on an iPhone 6, and I can read it just fine fully zoomed out with the phone at arm's length..

I still think that the industry trend has been towards zooming, rather than in-place size adjustment.

frou_dh
Surely this should be solved in a single place (the browser) rather than asking every site to implement their own plus & minus buttons.

MobileSafari offers text size adjustment when in the article reading mode (via the paragraph icon at the left of the address bar), but that mode is only offered based on some heuristic.

RobotCaleb
I miss the first Android browser's ability to reflow text as you zoomed. I hate zooming in to read, but having to scroll left and right as well as down.
marvy
Why would they take that away? That seems like the most useful feature a browser could offer. Does anyone know what mobile browsers do support reflow? I'd switch to one without hesitation if it did.
eas
Opera, called Text Wrap under settings. Works great.
ricardobeat
Lately the major issue I've seen is font size being too big on landscape orientation, when portrait looks fine. That when the content is not already covered by stupid top/bottom fixed bars that were only designed for portrait mode.
jschwartzi
It's not just you. Everyone's mobile site seems to choose font sizes that are readable from across the room on my 5.5 inch phone. I'll quit reading articles that do this. I'm starting to collect a list of hostnames I won't visit because the text is too big to read comfortably on my phone.
gitpusher
Mine is the exact opposite problem :) text too damn small!
lcswi
Desktop sites started doing that too. See the wired story on Russian maps, I had to scale it down to 66% to not feel like I was 3 centimeters from the screen. I don't get it.
Quanttek
That's why I'm using Firefox's reading mode more and more. It'll get the content 95% of the time right and the typography is just gorgeous
realusername
I also really recommend Firefox's readability mode (with the book icon), it works really really well and I'm using it all the time !
irq-1
Firefox still needs a minimum font size, or font scaling like Chrome has.
mixmastamyk
Min font size has been in since early Netscape... or are you talking about something else?
tajen
It is a problem. And you know the worst? There are "mobile" libraries like Zapto (=jQuery) which enable touch features at the expense of zooming. I didn't check the details, but the sheer idea of blocking zooming on a mobile device is plain stupid.
3pt14159
This frustrates me as well. The problem is that some interactions aren't possible or performant if zooming is allowed.
tgb
Why is that the case?
bpicolo
Many mobile browsers have a ~300ms mobile touch delay unless you disable zooming (because they wait to see if it's a double-tap zoom event). iOS is the biggest issue with this now, as I think Chrome on android better listens to some new directives to not wait
mort96
I think with iOS, even if you disable zooming, you still get that 300ms delay. A better solution would be to instead of listening to only click, listen to both click and doing interesting things with ontouchend. I recall implementing something like that a while ago, where when an element is touched (ontouchstart), I saved the X and Y coords of the touch, and when the user releases their finger (ontouchend), if the finger hasn't moved more than say 32 pixels, I fired the callback to whatever. Of course, you also need to do something to prevent triggering the event twice, but when done correctly, you get both nice quick click events and zooming.
cycomachead
As someone who is visually impaired, I care more about being able to READ the site than I do about nice scrolling.

I mean, I like nice scrolling / etc., please have it, but being about to read the content is a prerequisite.

anabis
I have to do "see PC version" then do pinch zoom.
tim333
I have a problem too. I've reached the reading glasses stage and have problems with small text. I was actively looking for a solution recently, something like the Readability or Clearly extensions which work well in Chrome on the laptop but I failed to find anything like that for the iPhone. I was considering trying to make my own app to do it with the idea of using Phonegap/Javascript to read the html for a site and then process it in a Clearly type manner. I'm not quite sure if that would work? I think cross site ajax requests don't work in most browsers (http://stackoverflow.com/questions/15005500/loading-cross-do...) but I vaguely recall they did work when I tried them from Phonegap on the phone.
TD-Linux
The Firefox for Android app has a reading mode. Hopefully it will arrive with the Firefox for iOS app as well.
rmetzler
Mobile Safari has "reader view" build in for most sites, but it doesn't work on every site. It works on most blogs and news sites though. You can find the button left from the URL.
2muchcoffeeman
Desktop Safari processes the page to try and identify if there is a block of text that might look like prose. If it finds it, you get the button. If it can't, you don't.

I assume mobile Safari does something similar.

cycomachead
Yep, it's an algorithm site authors have no control over. It's definitely useful, but not something to rely on as a dev.
Kerlix
I do most of my iPad web reading through an RSS reader like Mr. Reader because of a similar issue. Mr. Reader lets you choose between 5 built-in (including normal web view) page views as well as allowing unlimited user created/added bookmarklets, javascripts & URL Schemes. An iOS add-on that would flip any Safari page to a customizable Reader/Readability/Clearly view would be nice, though.
applecore
Another problem is when a non-zoomable mobile site makes it impossible to view a list of thirty items at once; instead, you get just a few items in your viewport and you have to scroll incessantly to browse the page.
[deleted]
(comment deleted)
meeper16
Looks like we might see a major shift in functionality, adoption and competition in the wings for the mobile space.
krzyk
Yeah, I really hate github that is doing this to their mobile page. I have to sometimes switch to desktop version to get zoom functionality (and some others, that are missing from mobile version)
arthurcolle
Fork functionality is notably missing from mobile...
JosephRedfern
Honest question: how often are you going to fork and then develop software from a mobile phone?
robterrell
Not the OP, but I often discover interesting github projects when browsing HN on mobile and would like to star the project (basically, a bookmark) or even fork it (if I think I'll want to make code changes and possible send a pr). Has happened a couple of times in the past week.
JosephRedfern
Agreed. Starring seems important and useful - but I can't imagine that many people fork and then develop from a mobile phone... but I'm probably wrong :)
arthurcolle
Well, allow me to retort -

I frequently check HN and GitHub from my phone and try to fork projects for later cloning and hacking, and have to "view desktop mode" to fork, so... yeah, pretty often!

cycomachead
Same as the above, but i have actually pushed code changes from the Github web UI before.

I at least appreciate that github gives this option.

arthurcolle
From mobile? For real? haha.

I've made changes to the README.md file on a few projects from my laptop and imagine that I'd do something similar from mobile, but its surprising to hear you've actually submitted code changes to GitHub from a phone. :)

whoopdedo
There are a lot of accessibility problems in mobile devices. No large fonts. No high contrast mode. And have you ever watched someone with unsteady hands try to touch a button without it being interpreted as a swipe or double-touch?
jy133
How do you think about the OS accessbility zoom features?
cpncrunch
They're pretty terrible, at least on Android. The latest stock android browser doesn't have have a text zoom option, and the text zoom features in chrome or firefox don't really work reliably.
jraines
What sucks is Android used to be good, at least in a lot of cases. I don't know how much this generalizes, but on Hacker News I used to be able to pinch to zoom, then double tap the screen and the site would wrap at the zoomed size. This went away somewhere around Ice Cream Sandwich, not sure exactly.
jakub_g
Note that Chrome on Android has a "force enable zoom" setting in Accessibility panel while Opera for Android (which uses Blink engine, same as Chrome) has reflow-on-zoom support (called "text wrap" in settings).

On Windows Phone there is a system-level setting "ease of access > allow zooming on all web content".

This basically solves the issue for me. I browse almost exclusively using Opera.

jakub_g
For curious souls, Chrome on Android sometimes supports reflow out of the box, depending on vendor. Apparently vendors like to set different flags in browsers to differentiate themselves from each other. HTC is one of those who ships Chrome with reflow on zoom enabled. It is a bit battery draining to recalculate stuff each time a user zooms hence it's not enabled by default.

*(according to research from Peter Paul Koch from his Mobile web handbook)

justinc387
If you create a bookmark with the following URL, it will allow you to override the zoom setting on any site (at least on iOS):

javascript:document.querySelector('meta%5Bname=viewport%5D').setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale=10.0,user-scalable=1');

cycomachead
Dear lord. This is so simple and a great idea, even if it temporarily breaks a few sites! THANKS!
lcswi
I rarely see sites where I cannot zoom in. Many do not let me zoom out though. Instead, they display what feels like 4 words per line.
stephenboyd
From reading the comments here, it's definitely not just you.

But it's not a problem for me on my recent Samsung Galaxy. I actually prefer sites that don't delay to wait for a possible double-click. And accidentally resizing is a hassle because then I have to limit my thumb/finger movements to straight vertical lines, or else I'll end up scrolling horizontally as well.

When I had a smaller phone, I used a Dolphin browser, which reflowed text as well as resized fonts when I double-tapped. I thought that was fine. But if the default pinch/doubletap behavior is to zoom the whole page like Chrome does, I'd rather not deal with it.

lastres0rt
The worst is when some sites resize certain components but not others, making them painfully small.

The most vivid example is Reddit's text resizing but the actual interactive points of the site (like arrows and replying to comments) are tiny as hell. (Of course, it is Reddit, so it's not like anything of value is lost...)

grogers
Font size can definitely be annoying, although it hasn't bitten me very often - usually you can pinch to get a decent enough size. Far more frequently for me is the header bar that stays pinned to the top or bottom of the page while scrolling instead of being at a fixed position. I'm not going to read a long article with only 60% of my already tiny screen.

I've even seen sites that try to mimic the behavior of the address bar where if you scroll down it disappears but if you scroll up it pops back in. I've never once clicked on anything these header bars have to offer except by mistake...

allendoerfer
As many noted, disabling pinch-/doubletap-zoom results in faster click events.

It is hard to implement a scaling function if you designed your page using absolute pixels as units. With relative font-sizes (em,rem,vh,vw,wmax etc) you could just change the (absolute) font-size of the body tag to resize everything else. Scaling would then be easy to do in with a little JavasSript, a plugin or by just honoring the default body font-size the browser set.

The problem is, that using em makes your styles more complex. They are difficult to use, because ems are relative to the parent element for font-size and to the element itself for other attributes. If you define a font-size in em for an element you have to know, where you are going to put this element on the page. Define the font-size for a list, put a list inside a list and you messed up your design. Unfortunately the other relative units are not as well supported, so most websites just use pixels.

Many websites use the Bootstrap framework these days and Bootstrap uses pixels, too. Here is a discussion about the topic in their issue tracker:

https://github.com/twbs/bootstrap/issues/1943

Ultimately their solution is to drop IE8 support and use rem, which is relative to the body font-size, in version 4. I look forward to that. While people could still mess up the scaling by adding their own absolute font-size declarations, Bootstrap websites will then default to being easily scalable.

kstrauser
Sure is. Not for me, but I met a guy the other day who is already nearly blind and getting progressively worse. He uses an iPad to make 1-inch-high fonts so he can make out the character shapes, and said he wants to hang onto reading with his eyes as long as he can before switching to speech.

I can read teensy text (although with my astigmatism not so easily as when I was 20), but my acquaintance can't. He seemed like a cool guy and I'd hate to see him disconnected from the resources I enjoy.