Big text for small screens

November 14, 2011 6:56 AM

Does the mobile stylesheet need the <small> tag?

The <small> formatting tag is great for making asides, and I use it as much as anyone, but it's moderately unreadable without zooming on a mobile device, particularly when

<small><small><small>
it's done more than once.
</small></small></small>

Text on a phone is already pretty small, and doesn't need to be any smaller.

How do people feel about redefining <small> to be regular size (and possibly have some other form of emphasis) just for mobile devices?

Side note: In the current HTML5 working draft, <small> means "fine print", not specifically "small text".

posted by zamboni to Feature Requests at 6:56 AM (68 comments total)

In general, I hate "helpful" things like this that break expected behavior. I thought there was a way for users to define their own stylesheet ("user.css"?) but I don't see it now. Did that disapparate or am I malremembering?
posted by DU at 7:00 AM on November 14, 2011 [2 favorites]

It's not really bothered me, but then I'm not seeing that many instances of the tag being used.
posted by arcticseal at 7:00 AM on November 14, 2011

but it's moderately unreadable without zooming

Well, I guess that's why there's zooming, then.

Sent from my iPad.

posted by Horace Rumpole at 7:01 AM on November 14, 2011 [9 favorites]

All mobile phones that you'd be reading the site on that use the mobile stylesheet have zoom. Does anybody actually read webpages without zooming on them? Because that's what you're supposed to do. There's no reason for this site to do special things to take away text formatting because of a nonstandard use case.
posted by Threeway Handshake at 7:17 AM on November 14, 2011

As long as we're on the subject, nested small tags don't work in IE7. Also, if someone can give me the stock forecasts for 2007, that would be awesome.
posted by griphus at 7:18 AM on November 14, 2011 [1 favorite]

I read MetaFilter without zooming. I suspect I am not alone in that. There is no need to zoom. The site is perfectly readable at the standard size (bravo pb!).

But I cannot read 'small' text so I echo zamboni's frustration. It seems to me the use of that tag is growing, especially on AskMe.

However, I also agree with DU that UI that breaks expected, established behaviour is annoying.

I think this is a problem in need of a human, user solution rather than a technological one. Stop using 'small' if you want your comments to be read by the greatest number of people. More and more people are consuming content on smaller and smaller devices. Consider your audience when you post.

My personal solution: I ignore 'small' text. I am not going to zoom in to read 5 words out of a thousand posted. So post away with your witty asides, mea culpas and mini-rants in small text but know there is a growing population of users out here ignoring you.
posted by pixlboi at 7:43 AM on November 14, 2011 [2 favorites]

Party at pixlboi's. Bring booze and fireworks.
posted by Deathalicious at 7:55 AM on November 14, 2011 [3 favorites]

There's no reason for this site to do special things to take away text formatting because of a nonstandard use case.

img, big, font are all removed by MeFi due to "nonstandard use cases".
posted by zamboni at 7:57 AM on November 14, 2011

So read away with your glossy phones, trendy tablets and twitter streams with character restrictions but know there is a small population of users out here creating content you are skipping.
posted by DU at 7:57 AM on November 14, 2011

Yeah, we can take a look at this. Have you tried increasing the body font size in your site preferences? My font size is set to 11 for the site, and I've found that small text is still readable on the iPhone at that size.

The default site font size is 10, and I feel like we're already at the edge of readability there. So the problem is, yeah, anything smaller than that is hard to read. So how do we both show that the text has been specified smaller when the body text is already on the small side? Maybe we can adjust percentages a bit and come up with something, but my first guess is there won't be enough difference. I think adjusting the font size on the client through the site preference is probably a better bet for people who hate zooming.
posted by pb (staff) at 7:58 AM on November 14, 2011 [1 favorite]

I use small text a lot. I also have metafilter permanently control-plus'd on my home computer so it's easier to read. Having to zoom in on my phone is really a non-issue for me.

Please don't change my small tag. I heart it so!
posted by phunniemee at 7:59 AM on November 14, 2011

SMALL TEXT IS NEAR-IMPOSSIBLE TO READ ON MY IPHONE.

*ahem*
posted by slogger at 8:03 AM on November 14, 2011

I use the small tag all the time.

Sent from my space blimp

posted by shakespeherian at 8:03 AM on November 14, 2011 [4 favorites]

Can I have a <petty> tag for my comments?
posted by Abiezer at 8:05 AM on November 14, 2011 [4 favorites]

I thought nested smalls were collapsed into one on Metafilter? Let's see:
Three nested <small>s
Two nested <small>s
One <small>

On preview at least they all look the same...
posted by kmz at 8:05 AM on November 14, 2011

Oh wait, it looks like that's just how Opera renders nested <small>s, it's not Metafilter's doing.
posted by kmz at 8:10 AM on November 14, 2011

Have you tried increasing the body font size in your site preferences? My font size is set to 11 for the site, and I've found that small text is still readable on the iPhone at that size.

As other people have snarkily suggested, it's not really that big a deal. Scrolling more to avoid occasionally re-sizing isn't a great trade off.

So how do we both show that the text has been specified smaller when the body text is already on the small side? Maybe we can adjust percentages a bit and come up with something, but my first guess is there won't be enough difference.

If I was MeFi God Emperor, I'd probably disregard the size change, and take a stab at keeping the parenthetical nature of the small tag by changing them to parentheses, or an <em> blockquote.
posted by zamboni at 8:10 AM on November 14, 2011

No, we're not going to completely change the behavior of the small tag by inserting text or using different font styling or margins. The small tag indicates one thing: this text should be smaller than the other text around it. If we stray from that we're getting into very odd territory, I think.

We have technical solutions to make the text more readable (zooming and font size), so I'm afraid if those won't work this will have to be one of the limitations of small screens that we live with.
posted by pb (staff) at 8:15 AM on November 14, 2011

That, or collapse nested <small>s to a single one.
posted by zamboni at 8:16 AM on November 14, 2011

DU listens to MetaFilter on a rotary phone, read to him by a nasal-voiced, chain-smoking exchange operator named Phyllis.
posted by griphus at 8:16 AM on November 14, 2011 [1 favorite]

I also have a secretarial pool, all female and in short skirts, typing my comments for me.

*throws back another whiskey*
posted by DU at 8:19 AM on November 14, 2011

I agree that nested smalls will always be stunty. There's no reason for them other than a joke. But I don't think we need to take away the ability to make that joke for the sake of readability without effort on some devices.
posted by pb (staff) at 8:20 AM on November 14, 2011 [2 favorites]

Fair enough.
posted by zamboni at 8:22 AM on November 14, 2011

~part of the mystery~
posted by silby at 8:28 AM on November 14, 2011

Just as a counter-point, I read the site on my phone quite a lot and have no problem with small text. The stock browser on my phone handles it remarkably well. A bit of zooming for nested small tags maybe, but those only seem to be used for rare jokes and typographical effects.

So, er... yay for the status quo?
posted by metaBugs at 8:28 AM on November 14, 2011

Hey, pb, while you're out here, once again solving the world's problems, how come the little "staff" tag doesn't show up in Recent Activity? Was that an intentional choice? (Or was this discussed before and I just missed it?)
posted by phunniemee at 8:32 AM on November 14, 2011

Hasn't the "small" tag been deprecated?
posted by Chocolate Pickle at 8:33 AM on November 14, 2011

Was that an intentional choice?

Yep, the staff icons only show up in MetaTalk. We're assuming that people who regularly use Recent Activity are more aware of who works here.
posted by pb (staff) at 8:36 AM on November 14, 2011

Hasn't the "small" tag been deprecated?

Nope, it's part of HTML5.
posted by pb (staff) at 8:37 AM on November 14, 2011

Just wanted to say how impressed I'm that Mefi - as the only site that I personally know about - is readable without zoom on my Nokia C5 with a tiny 1.5" screen. Even the nav menu works. Bravo pb!
posted by Foci for Analysis at 8:38 AM on November 14, 2011

Hasn't the "small" tag been deprecated?

Nope, it's part of HTML5.

It's currently a semantic element, instead of purely a presentational one. <big> has been removed, though.
posted by zamboni at 10:16 AM on November 14, 2011

Huh. Why did they keep small and not big? What in the name of Berners-Lee were they thinking?
posted by zomg at 10:43 AM on November 14, 2011

HTML5 is a shift towards semantic tags- emphasising what tags mean about text, not how they make text look.

<small> now indicates that text is fine print, which is usually formatted as small text. <big> can be replaced by meaningful tags like headers - <h1>, <h2>, et.c.
posted by zamboni at 10:59 AM on November 14, 2011

I didn't know you could do this!

Regardless of what comes from your pony request, thanks for making this post and teaching me something new!
posted by royalsong at 11:12 AM on November 14, 2011

You're welcome. Use your new powers wisely!
posted by zamboni at 11:18 AM on November 14, 2011

This is the problem with the mobile site worth speaking up about? Am I the only one who sees the corner logo thingy take up 2/3 of the screen on an Android phone?
posted by rhizome at 12:04 PM on November 14, 2011

Whoa, rhizome, the corner logo weirdness seems to be the least of your problems. Something horrible has happened, and your soothing forest green background has been replaced with something jarringly professional. Ugh.
posted by phunniemee at 12:19 PM on November 14, 2011 [1 favorite]

Also you have a shit ton of notifications.
posted by shakespeherian at 12:21 PM on November 14, 2011

Nesting small is problematic on my preferred platforms, so I put a sub tag inside a small tag. It works well enough for me.

_masterbaba
posted by infinitewindow at 12:40 PM on November 14, 2011

Yep, confirmed that rhizome. Thanks for the heads up. It should look better now.
posted by pb (staff) at 1:19 PM on November 14, 2011

AAAAGH what did you do to metafilter, pb?!?!
posted by not_on_display at 2:00 PM on November 14, 2011

What do you mean?
posted by pb (staff) at 2:20 PM on November 14, 2011

Can I have a <petty> tag for my comments?

Growing up, I had an aunt I didn't see that much, and everyone in the family called her "aunt Petty". I always assumed that was a nickname based on Patty, but suddenly (on reading this comment) I suspect there may have been other reasons for the name...
posted by davejay at 3:30 PM on November 14, 2011

Sorry pb, it was a dumb jokey comment implying that all my small tags were somehow replaced with blinky tags, which didn't actually happen, so I will sit down now in the box of shame, and await my flagellation with stoicism.
posted by not_on_display at 3:41 PM on November 14, 2011 [1 favorite]

AAAAGH what did you do to metafilter, not_on_dispay?!?!
posted by davejay at 3:43 PM on November 14, 2011

heh, no problem not_on_display. No shame box required.
posted by pb (staff) at 3:48 PM on November 14, 2011

Can I still get the flagellation?
posted by not_on_display at 3:50 PM on November 14, 2011 [2 favorites]

"Flagellation with Stoicism" is my favorite redtube video, but then I've always dug a woman in uniform.
posted by cjorgensen at 4:18 PM on November 14, 2011 [1 favorite]

Huh. Why did they keep small and not big? What in the name of Berners-Lee were they thinking?

Less shouting. Small text promotes indoor voices.
posted by maryr at 4:42 PM on November 14, 2011 [1 favorite]

I will sit down now in the box of shame, and await my flagellation with stoicism.

WHAT DID I TELL YOU ABOUT VISITING ME AT WORK??!?
posted by jessamyn (staff) at 5:16 PM on November 14, 2011 [5 favorites]

Cortex's balls. LOL.
posted by babbyʼ); Drop table users; -- at 6:22 PM on November 14, 2011

I do a lot of my metafiltering on my phone and i think the tag is helpful for context.

Plus it helps me practice my pinch and zoom.
posted by addelburgh at 7:06 PM on November 14, 2011

I don't know if this will help on a mobile platform or not, but the eleven-nested-deep-small-tag on this page has inspired me to make a Greasemonkey script, Embiggen the Smallest Metafilter, which makes Metafilter small text normal size when you mouse over it.
posted by Flunkie at 8:22 PM on November 14, 2011 [1 favorite]

I appreciate having a format that properly expresses my shame.
posted by louche mustachio at 9:14 PM on November 14, 2011

OH GREAT. A Greasemonkey script. Now everyone will know I'm not wearing pants. THANKS A LOT.
posted by louche mustachio at 9:17 PM on November 14, 2011

"pinch to zoom" and "not wearing pants" make an odd combo. Just sayin'.
posted by subbes at 1:04 AM on November 15, 2011

I wouldn't hate having nested smalls collapse to a single small on the mobile site, but I like the occasional use of small or even small three times over.
posted by BrotherCaine at 3:58 AM on November 15, 2011

I set the body text size to 12 in my preferences. Looks good on desktop and mobile phone. You may want to give it a day or so to get used to it on desktop though.

Because of the increase in desktop DPI, I actually think the metafilter default text sizes are too small.
posted by seanyboy at 6:02 AM on November 15, 2011

but I like the occasional use of small or even small three times over.

That's what she said. :'(
posted by Devils Rancher at 9:19 AM on November 15, 2011

Occasional use would be great, but entire paragraphs makes me want to skip over the comment. It's a shame, because interesting comments (like this one) shouldn't be so damn hard to read on either the regular or mobile site.
posted by gladly at 11:38 AM on November 15, 2011

> I agree that nested smalls will always be stunty. There's no reason for them other than a joke. But I don't think we need to take away the ability to make that joke for the sake of readability without effort on some devices.

I agree that the default <small> display is too small on iOS.

Having small { font-size:0.9em; } in the css allows the small tag to be visibly small without being exaggeratedly small. Nesting would still work, but the shrinking would happen at a more gradual rate..
posted by ardgedee at 1:29 PM on November 15, 2011

We're testing a variant of that on the admin side, ardgedee. It looks promising, but it also makes it less obvious that the text is small.
posted by pb (staff) at 1:50 PM on November 15, 2011

zomg: "Huh. Why did they keep small and not big? What in the name of Berners-Lee were they thinking?"

The next iteration will resolve that with the introduction of the unsmall tag.

The small text can be hard to read on a phone, sure, but it's one of a very narrow set of tools we have to format text here and it would be shame to take it away from everyone for the sake of a (admittedly significant) minority of users. It's kind of the point, as I understand it, of the small tag that the small text is a side-comment that you don't really need to read anyway. There are other functions on the site that aren't available using the mobile stylesheet - mobile devices can't be expected to perform in the same way as 'full-size' machines.
posted by dg at 2:08 PM on November 15, 2011

...it would be shame to take it away from everyone for the sake of a (admittedly significant) minority of users.

There is no chance we will alter how the small tag behaves on the standard site. That's not even on the table.

There is some chance that we will adjust the size of small text on the mobile version of the site. And by adjust I mean that text marked with <small> will still be smaller than the comment text, but bigger than the default percentage smaller the device wants small text to be. So we won't be taking anything away at any point.
posted by pb (staff) at 2:23 PM on November 15, 2011

> We're testing a variant of that on the admin side, ardgedee. It looks promising, but it also makes it less obvious that the text is small.

.comments small {font-size:0.8em;}
.comments small small {font-size:0.9em;}

The initial small tag will reduce text 80%, subsequent nested small tags will increment less drastically.
posted by ardgedee at 2:41 PM on November 15, 2011

Yeah. At some point I think the nested small problem isn't so much a problem. People want their nested small text to be inscrutable on purpose and that's the result they get by doing that. If you have to zoom way in, or if it's 4+ nested smalls and even that won't do it, that's fine. That's part of the joke.
posted by pb (staff) at 2:49 PM on November 15, 2011

You could modify something other than the size to provide the illusion of getting smaller without actually getting smaller. Something like .comments small {font-size:0.9em;opacity:0.98} That's probably too hacky and not so cool in reality.
posted by ardgedee at 3:00 PM on November 15, 2011

Side note: In the current HTML5 working draft, <small> means "fine print", not specifically "small text".

Side side note: Ian Hickson is an idiot for trying to repurpose <small> like this
posted by dw at 9:20 PM on November 15, 2011