I've been away for a couple of days, so I just noticed the text shadow on the preview/post buttons. I gotta say: They look ballin'! Keep the tasteful modernization of MetaFilter going! posted by ignignokt to MetaFilter-Related at 10:00 AM (98 comments total)

I have yet to meet a person with Truck Nutz that isn't a douchebag. It's my one constant in life. It's more reliable than magnetic North.posted by cjorgensen at 10:07 AM on September 26, 2011 [3 favorites]

Speaking of narwhals, I recently dumped Firefox, and thus all my greasemonkey scripts. Can somebody gimme some quick schooling on scripts for Chrome?posted by slogger at 10:09 AM on September 26, 2011

It's easier in Chrome - you don't even need greasemonkey. They install like any other Chrome extension. Firefox scripts occasionally break in Chrome and need to be tweaked, though.posted by lesli212 at 10:24 AM on September 26, 2011

The subtle glow around my narwhal pleases me.

It might seem ok at the moment, but you should really see a doctor about that.posted by kiltedtaco at 10:37 AM on September 26, 2011 [1 favorite]

I like them. But by and large I have to commend metafilter on, as is said, staying tastefully modern. I hate the yahoo method of throwing shit everywhere, and on my pitiful old machine sites that go crazy with widgets and crap that has to load and recycling images and flash boxes just slow my computer to a halt. So thank you. Thank you for keeping things usable, but stylish.posted by cashman at 10:39 AM on September 26, 2011 [1 favorite]

And my compliments on the professional white background!posted by Bunny Ultramod at 11:09 AM on September 26, 2011

I will say that, in a career filled with many, marketing their own branded line of Truck Nutz was the strangest move I've ever seen the band Coldplay make. Still, I guess they made more sense than the window stickers of Chris Martin peeing on a Chevy logo, which totally bombed.posted by jbickers at 11:35 AM on September 26, 2011

I don't like the new buttons, but I'm clearly in the minority. The blue looks better than either the grey or the green, which both look pretty assy to my eyes. The little cut-outs for the letters make them less legible and give them a weird white edge that makes the lighting look fucked up.posted by klangklangston at 11:40 AM on September 26, 2011 [3 favorites]

I agree that the new buttons are very tasteful and modern. Great job updating them while exercising restraint at the same time; it'd be easy to go overboard.posted by The Winsome Parker Lewis at 11:44 AM on September 26, 2011

The text shadow has been the biggest complaint and I just toned it down slightly. We're still tuning things.posted by pb(staff) at 11:49 AM on September 26, 2011

I'm not interested in narwhals, but I wonder if there is perhaps a pony style available for MetaFilter?posted by Wolfdog at 12:32 PM on September 26, 2011

Are these effects something you need a new, fancy, modern (that is, non-IE) browser to see? Because I can't see anything different.posted by Curious Artificer at 12:42 PM on September 26, 2011

Yesh, nice buttons but I miss the unicorn and narwhale, which I guess I lost when I "upgraded" Firefox to 6.0.2. Any chance the jessamyn greasemonkey scripts will catch up or did I miss something in the upgrade?posted by Lynsey at 12:49 PM on September 26, 2011

Curious Artificer, in IE the buttons are slightly bigger, the corners are slightly rounder, and there's no more bevel around the edges. Otherwise, yeah, if you're viewing in a newer version of Chrome or Firefox you'll see a slight change when you put your mouse pointer over a button. The color and border get a bit darker, that's it. So you're not missing too much.posted by pb(staff) at 12:56 PM on September 26, 2011

I'd love to see cursor:pointer on the mouseover css... that would seal the deal for me :)posted by tjenks at 1:15 PM on September 26, 2011

I resisted the urge, upon noticing the new buttons, to post a MeTa flame-out to the effect of:

Everyone here knows I can't handle CHANGE.
WHAT.
TEH.
FSCK.
pb?!

But then I decided stunt posts aren't really all that great.posted by kaibutsu at 1:18 PM on September 26, 2011

Also, I've mainly heard things referred to as 'baller,' rather than 'ballin'.' Is this a regional difference?posted by kaibutsu at 1:20 PM on September 26, 2011

The color and border get a bit darker, that's it.

I don't really get the point of so subtle a change.posted by smackfu at 1:32 PM on September 26, 2011

I don't really get the point of so subtle a change.

It's just a little feedback to let you know where you're at. Granted, it's not hard to look and see where your pointer is, but this is just a nice extra. If you don't see it, no big deal. If you do, hey, you're on the right button.posted by pb(staff) at 1:35 PM on September 26, 2011

Also, I've mainly heard things referred to as 'baller,' rather than 'ballin'.' Is this a regional difference?

I've heard of a person referred to a baller (a shot caller, 20-in blades on the Impala*, a caller gettin' laid tonight) and things/events/activities as ballin' (or straight ballin')

*20" blades seems pretty small in 2011.posted by birdherder at 2:59 PM on September 26, 2011

klangklangston: "I don't like the new buttons, but I'm clearly in the minority. The blue looks better than either the grey or the green, which both look pretty assy to my eyes. The little cut-outs for the letters make them less legible and give them a weird white edge that makes the lighting look fucked up."

I'm glad I'm not the only one. To me, they look unfinished somehow.posted by dg at 3:18 PM on September 26, 2011 [2 favorites]

And now, here's the question that makes pb cringe *or* gives him a chance to be a show-off: are the new buttons properly accessible?posted by davejay at 3:40 PM on September 26, 2011

The are as accessible as any standard submit button. I'm not sure there's anything to do on our end to make buttons more accessible. If there is we can take a look at it.posted by pb(staff) at 3:45 PM on September 26, 2011

Thanks PB, the new buttons look great!

Although I meant a picture of Jessamyn's glowing narwhal, lol. My narwhal button doesn't look any different. Maybe the text on it is different and I just can't tell.posted by IndigoRain at 4:10 PM on September 26, 2011

I use the white background on Firefox, and noticed a couple of weeks ago that the in-site YouTube video player now matches the white. (I don't know how to explain this better... it used to be blue, green or gray, depending on where I was on the site.) And was impressed that such a minor detail was on pb's "to-do" list. So yes, thanks for all the work you do on the site.posted by misozaki at 4:14 PM on September 26, 2011

The narwhal just get a slight grey glow around the button, nothing too fancy.posted by jessamyn(staff) at 4:20 PM on September 26, 2011

Thanks misozaki, you can also thank rudster who made the request here a while back.posted by pb(staff) at 4:27 PM on September 26, 2011

I like them. I like buttons that show me when I am hovering over or clicking on them -- but that *don't* look like raised physical buttons.

The Internet 2.0! 3D buttons are just so dumb and dated. Even actual electronic devices don't have those big rounded buttons anymore.posted by pH Indicating Socks at 5:01 PM on September 26, 2011

Oh, hey, I hadn't seen that thread. Thanks, rudster, I'm glad I wasn't the only one that wanted this. One of those things that didn't really bug me enough to make a request, but enough to appreciate when it was implemented.posted by misozaki at 5:19 PM on September 26, 2011

The subtle glow around my narwhal pleases me.

I like to imagine Jessamyn sitting in a high backed chair and stroking a cat while saying this. And then laughing maniacally. And then having a henchmen killed because the narwhal doesnt glow brightly enough.posted by lrobertjones at 5:29 PM on September 26, 2011 [1 favorite]

The narwhals something something midnightposted by Ad hominem at 6:25 PM on September 26, 2011

If the narwhal glows too brightly it's no longer subtle.posted by cjorgensen at 6:26 PM on September 26, 2011

Hmm, nope, no glow around my narwhal. And we've been completely ignoring our unicorns in this thread too!

MetaFilter: It's like they're alive or something.posted by arcticseal at 11:23 PM on September 26, 2011

dg: "klangklangston: "I don't like the new buttons, but I'm clearly in the minority. The blue looks better than either the grey or the green, which both look pretty assy to my eyes. The little cut-outs for the letters make them less legible and give them a weird white edge that makes the lighting look fucked up."

I'm glad I'm not the only one. To me, they look unfinished somehow."

If you used the infinitely superior unicorn and narwhal buttons you wouldn't have this problem.posted by deborah at 1:07 PM on September 27, 2011

They don't render particularly well for me, but not particularly badly either. I would prefer time were spent on functionality, like a proper editor instead of mixed markup and text.posted by anigbrowl at 1:23 PM on September 27, 2011

I would prefer time were spent on functionality, like a proper editor instead of mixed markup and text.

What sort of things are you looking for? It's not like pb working on styling the buttons is keeping him away from doing things like this. Making the editor work differently isn't even on our To Do list in any real way. So, if this is something you want, maybe you could talk about what you'd like?posted by jessamyn(staff) at 1:25 PM on September 27, 2011

Functionality-wise, I hate having to type out [blockquote]something[/blockquote][small]something else[/small] and so on. Also, if you've got a lot of links in a post, the [a href='www.someincrediblylongURL.com/more/more/more']messy appearance[/a] makes copyediting [a href='www.someotherwebsite.net/bork/bork/bork']errors[/a] almost inevitable. It's nice that one can type in markup and all, but then why are there buttons for bold, italic, and linking under the text box to begin with? Why not put buttons for all the other things too? Go WYSIWYG or go plain text, but a half-arsed markup editor in 2011 is like digital steampunk. However, I'd forgive all this if there were an Edit Box to rectify the inevitable copyediting mistakes.

And what's the point of changing the post/preview buttons, but leaving the formatting controls as is? Now there's two conflicting visual grammars on screen. On mobile, there's a different set of buttons arrayed along the bottom of the text editor; and it's unclear what the size of the text editor has to do with the layout of the screen. For anything longer than a line or two the first thing I do is expand the size of a the text editor so that I don't have to type into something the size of a postage stamp.

It's a bit of a mess, to be honest. Sorry to be so negative, but there it is.posted by anigbrowl at 2:19 PM on September 27, 2011

Above, I typed [s]Edit Box[/s] and got (naturally) Edit Box. So I changed the first [s] to [strong] and that changed the previewed appearance to Edit Box although I had not changed the closing tag from [/s] to [/strong]. So I just hit the Post button, and saw my mistake. Which, of course, I can't edit now.

I think retooling the text editor is more important than how 3d or flat the Post and Preview buttons are. YMMV.posted by anigbrowl at 2:24 PM on September 27, 2011

>I think retooling the text editor is more important than how 3d or flat the Post and Preview buttons are.

It would be awesome to have more buttons than BI and link available. Subscript, superscript, blockquote, underline, et cetera all would be great enhancements. It's kind of odd sometimes how things become set in stone.posted by Horselover Phattie at 2:28 PM on September 27, 2011

Personally, I don't want to see a bunch of text formatting. Every once in a blue moon, a blockquote or strike might be appropriate, but it's rare enough that it seems like time spent working on the text box could be better spent elsewhere.

I think the preview window does a reasonably good job of making it possible to edit mistakes before hitting the post button. Not that I wouldn't be delighted to see a short edit window available. After all, we all fuck up sometimes (me more than most).posted by wierdo at 2:35 PM on September 27, 2011

I understand your frustration, anigbrowl. MetaFilter was coded in a time when HTML was the primary mode of formatting text and it's not the most user-friendly option. It is so ingrained in site culture that it won't change without some cataclysmic event. And even then I'm not so sure.

...why are there buttons for bold, italic, and linking under the text box to begin with?

We know HTML isn't easy to use and we offer some shortcuts. We feel like an array of buttons for every potential HTML tag is too much noise when you only really need two or three tags.

On mobile, there's a different set of buttons arrayed along the bottom of the text editor...

The several buttons for mobile devices were added after much complaining about the difficulty of typing HTML when the > and < are two taps away from onscreen keyboards. So we added those for mobile devices.

The idea behind the mobile site is that it's different on purpose to address the challenges of the smaller space. We want to be consistant where we can, and break in a few places that make sense. The extra buttons for editing make sense in a mobile context, but not when the keys required for HTML are at your fingertips.

...and it's unclear what the size of the text editor has to do with the layout of the screen...

The size is related to the size of the textarea when you're zoomed in and typing. The textarea looks small when you aren't zoomed in, but if the box were bigger you wouldn't see the whole thing as you're typing which would require panning and zooming around. If the size is off for a particular device we can take a look—it's a bit of a juggling act. There are dozens and dozens of devices all with their own quirks. We optimize for the iPhone because that's our biggest mobile client.

When things get going in MetaTalk it might seem like changes like these buttons are taking up valuable resources. This was a fairly small change in the scheme of things, but even small changes are debated quite a bit here. We are very conservative because the community here is very conservative. The editing window, adding more buttons, and many of the changes you've suggested are not slam dunks for the whole community.posted by pb(staff) at 2:39 PM on September 27, 2011

Well, I understand all this. Btu the iterative-design-by-committee approach tends to yield a mess over time. I've seen this at several small software companies, as well. See, I can understand why you might not want a button for every possible tag, but when why have those tags available-but-hidden in the first place? That just leads to an inner-outer circle divide of veterans vs. newbies. Consistency goes a long way in UI design.

If not ruffling feathers for people who are used to doing things in a particular way - which I can understand - then offer a 'classic' option in the user profile.

We optimize for the iPhone because that's our biggest mobile client.

It's always seemed vastly simpler to just use percentage units instead of optimizing for particular devices. I suggest you borrow an Android tablet for comparison. It looks better if you set the user agent string to resemble that of a desktop browser.posted by anigbrowl at 2:56 PM on September 27, 2011

...but when why have those tags available-but-hidden in the first place?

I'm not sure what you mean. We're not hiding anything that I know of. We don't offer <, >, and / buttons in the standard site because those keys are readily available when you're at a keyboard. That's the only difference between standard and mobile.posted by pb(staff) at 3:05 PM on September 27, 2011

Or are you talking about tags like blockquote and the like, tags that work but dont have buttons? That's also a deliberate decision on our part to keep the formatting of stuff pretty well down to basic stuff and focus on the stuff being said, not the formatting. We know this won't be some people's preference, but retraining people to some other sort of text input is a non-trivial task and we'd only do it if there was some huge clamoring for it which there really isn't.posted by jessamyn(staff) at 3:33 PM on September 27, 2011 [1 favorite]

...but you also allow HTML tags for strikeout, small text, subscript, superscript,

listing

blockquoting

or putting things in the center

bullets

pew

pew

Not to mentionnestedoutlinesand thingssuch asthiswhichdon'treallyseem necessary.

If the objective is a site free of HTML cutter, why allow those tags? If the (judicious) use of markup is a good thing, then why so coy about the variety of available tags, which are not even itemized in the FAQ? Why are the BIlink buttons on the bottom right on the normal (inline) comment box, but on the bottom left when in preview? Why is the live preview under the text box, but the Preview preview over the text box? Why why why why posted by anigbrowl at 3:47 PM on September 27, 2011

retraining people to some other sort of text input is a non-trivial task

It's 2011. Everyone knows how use a toolbar, the same way everyone knows how to use the existing 3-button toolbar of [ BIlink ]. I suppose to a certain extent I should Get My Own Blog, but this justification just makes no sense to me.

There's a large number of tags available. There's also a toolbar, which a lot of people use in preference to typing out the markup. If a bunch of new markup buttons appeared on the toolbar, it would perfectly obvious how to use them. Alternatively, if all but the basic markup tags were to be disallowed, that would not be any great loss because most people don't make heavy use of markup anyway. What I don't understand is making it partially user-friendly and partially obscure.posted by anigbrowl at 3:57 PM on September 27, 2011

We're not going to add buttons for other HTML tags and we're also not going to disallow those tags we don't have buttons for. We provide some help for the most commonly needed tags. We also don't limit things by shutting down some other formatting options.

I don't think that's deliberately misleading in any way. Adding a list of supported tags to the FAQ would be fine, I think.posted by pb(staff) at 4:02 PM on September 27, 2011 [1 favorite]

Why why why why

It's sort of what we arrived at after we started doing the comment parsing, I'm sure pb will remember specifics. And again, it's a sort of progressive disclosure. The obvious tags are obvious, and right there on the comment box. The next set of tags that people might want to use are in the FAQ. Then there's a set of rarely used tags that people use so occasionally that they didn't seem worth mentioning. I guess we can include a complete list of tags in the FAQ... on preview: I just added them.

Everyone knows how use a toolbar, the same way everyone knows how to use the existing 3-button toolbar

With respect, no they don't. I understand that this topic is frustrating you, but you seem to have a you-centered view of how the internet works and how MetaFilter works that isn't really generalizable to the larger population here. We keep it simple on purpose.posted by jessamyn(staff) at 4:04 PM on September 27, 2011 [1 favorite]

pb: "On mobile, there's a different set of buttons arrayed along the bottom of the text editor...

The several buttons for mobile devices were added after much complaining about the difficulty of typing HTML when the > and < are two taps away from onscreen keyboards. So we added those for mobile devices.

Is this a good place to mention that those buttons are somewhat borked (for me, anyway)? Every time I tap on one of the formatting buttons on my iPad or iPhone, the on-screen keyboard disappears as if the buttons have stolen focus (not sure if that's technically correct) and I have to tap in the text area to get the keyboard back. Effectively, I still have to tap twice to use any of those buttons anyway (as opposed to three times to use > or <), the same number of taps as I would need to use / on the keyboard. I have the 'English (UK)' keyboard selected and it doesn't happen if I use the 'English' keyboard' but then auto-correct tries to force me to spell things incorrectly. My iPhone acts slightly differently, in that tapping one of the toolbar buttons also zooms the screen in on a place that isn't the text area but is a couple of comments above it.

Safari on both, iPad is OS4.3.4, iPhone is OS4.0.1. Doesn't occur on the iPad with either Atomic Lite or iLunascape browsers, although in both cases the keyboard starts to slide away, then reappears as if focus has been momentarily taken away from the keyboard.

No biggie, but it seems odd.

FWIW, I don't see any reason to add more buttons to the toolbar - those who want to use more formatting options can do so and anyone who doesn't know how can easily find out if they are sufficiently motivated. I understand the usability perspective of adding more buttons, but I just don't see the need, if only because I think it would lead to poor formatting as people who don't understand the importance of the order of tags add them and then change their text around the tags and screw things up.posted by dg at 4:09 PM on September 27, 2011

I think we have differing notions of what constitutes 'simple.' Having multiple inconsistent layouts/visual styles confuses me. On the plus side, I'm glad to hear the FAQ has been updated.

On preview, I have similar problems with the buttons on Android devices. Highlighting text and clicking a formatting button moves the insertion point back to the top of the text box and I have to remember to put it at the end before resuming typing.posted by anigbrowl at 4:14 PM on September 27, 2011

...the keyboard starts to slide away, then reappears as if focus has been momentarily taken away from the keyboard.

That's because focus has to be taken away from the textarea to push the button. The buttons on the page are not a part of the on screen keyboard. Our code is supposed to the send the focus right back to where you were, though.

I'm able to duplicate the problem on the iPad and in an Android emulator, but not on the iPhone. I'll take a look.posted by pb(staff) at 4:23 PM on September 27, 2011

If the objective is a site free of HTML cutter, why allow those tags?

Because people, when left to only use them when aware of how or willing to make the effort to learn, don't use them overly casually and so keep the site from being cluttered. This is the same reason we don't have a quote-and-reply function baked in, and in a general sense why we charge $5 for folks to sign up.

The goal is neither to encourage blockquoting nor to forbid it. It's fine in moderation. Leaving the the tags available for use while not evangelizing them or making them one-click simple accomplishes that goal pretty well, and in the mean time we have the b and i and link buttons available as the most basic things available for those disinclined to learn the tags or to solve their editing wants with a third party solution.

Enumerating the available tags in the FAQ is a decent idea, and it looks like Jess has done so.posted by cortex(staff) at 4:35 PM on September 27, 2011

I do know how to use a toolbar but I don't like cluttered toolbars with a ton of symbols I don't understand (see: Wikipedia). I generally shut them off when I can. I prefer to hand-code my HTML. I learned to code HTML from scratch in Notepad and it just feels natural to me. I have never once used the toolbar in question here on Mefi.posted by IndigoRain at 6:13 PM on September 27, 2011

Sorry, not a big fan of the new buttons--they just don't seem to....go...with the site. They're almost too new and modern and they don't seem to match the basic layout. That's just my 2 cents (Canadian), though.posted by 1000monkeys at 7:32 PM on September 27, 2011

And they kind of hurt my eyes for some reason. Like they stand out too much or something, I can't even describe it.posted by 1000monkeys at 7:37 PM on September 27, 2011

As long as HTML markup is available, there's no need for a bunch more GUI crap.

I think (or, at least, I hope) that the only reason people came up with the stupid italics convention for quoting is that <blockquote> never worked right. It's really the correct way to quote text. There's no good reason for an initial <blockquote> in a comment to cause a blank line to be inserted before the quoted text. Also, it would be nice if the Live Preview provided a faithful rendition of the formatted text.

If people would preview and proofread their damn comments, there'd be no need for an "edit window". Also, while you're previewing, test your links.

I haven't been able to track down this iPad bug and I have a sinking feeling it's a problem with focus at the WebKit level. (The underlying software that powers Mobile Safari and the Android browser.)

In the meantime I've found a workaround on the iPad that works for me. If you zoom in on the texatarea slightly the buttons should work and maintain focus. I have no idea why, but in my casual testing here that works. It's one of those things that probably won't work consistently but it might be worth trying until I can track this down.posted by pb(staff) at 9:57 PM on September 27, 2011

Oh, since we're reporting bugs, flagging seems broken on Android Honeycomb. The menu comes up but it doesn't seem to save the flag. The mobile style sheet also doesn't display in the correct aspect ratio, leaving some empty screen real estate. That's not a big deal since the full version displays properly, but the mobile site does have that handy "skip to menu" link.posted by Horselover Phattie at 10:20 PM on September 27, 2011

That might become more troublesome than it's worth given all the various builds and devices, but I appreciate the effort!posted by Horselover Phattie at 10:43 PM on September 27, 2011

Also especially since some Android builds lock the browser user agent setting and others allow you to set it as all kinds of OSes.posted by Horselover Phattie at 10:45 PM on September 27, 2011

Huh, yeah, nothing offhand that IDs it as a tablet. We'll probably have to do some more fundamental changes to the android stylesheet to make the mobile version work. Sorry about that, it won't be a quick fix.posted by pb(staff) at 10:45 PM on September 27, 2011

That zoom-in workaround does the trick, pb. Except that zooming in means that you can't see both the buttons and the top of the text area at the same time ...

The fact that other browsers don't display this on the iPad perhaps confirms your sinking feeling, unfortunately.

Not sure if this helps, but I've just realised that the disappearing keyboard toggles with the buttons - if you press a button with the keyboard displayed, it vanishes and, if you press a button with the keyboard hidden, it appears.posted by dg at 10:47 PM on September 27, 2011

Except that zooming in means that you can't see both the buttons and the top of the text area at the same time

Try a little less zoom. You should be able to manually zoom with your fingers to get everything in view. Not ideal, I know.posted by pb(staff) at 10:53 PM on September 27, 2011

ok, found the iPad problem. It should be working now. It's working in an Android emulator too.

(If any other developers out there have problems with form buttons and focus in WebKit browsers, try disabling the default mousedown event which seems to steal focus. click alone won't do it.)posted by pb(staff) at 11:35 PM on September 27, 2011

Yeah, it's possible to zoom by the exact amount required to have both visible and not have the keyboard disappear, but it's easier just to use the keyboard on the vanishngly rare occasions when I need characters that aren't on the main keyboard panel.

Thanks for giving my tiny problem so much thought, though!posted by dg at 11:43 PM on September 27, 2011

One could be forgiven for thinking that I would have used the 'x new comments' widget given that it was staring me in the face - thanks for fixing this!posted by dg at 11:45 PM on September 27, 2011

We just pushed out a new stylesheet for Androids that should allow the site to scale up to tablet size.posted by pb(staff) at 3:03 PM on September 28, 2011

pb: indeed it does! Flagging still doesn't work on Android Honeycomb (though it works fine on 2.x).posted by Horselover Phattie at 3:05 PM on September 28, 2011

ok, just pushed out an update that should fix flagging for Android tablets. I was testing with the Android 3.2 emulator and it's working there now. Give it a shot and let me know if you're still seeing problems.posted by pb(staff) at 4:50 PM on September 28, 2011

Tags

Share

About MetaTalk

MetaTalk is the first spin-off subsite of MetaFilter and is designed as a space to talk about MetaFilter itself. MetaTalk is the place to discuss features, bugs, and issues of policy with the rest of the membership.