Testing New HTML Buttons in the Modern Theme February 20, 2015 1:39 PM   Subscribe

Since we launched the modern theme, we've heard many times that the HTML bold, italic, and link buttons below comment forms don't seem to fit the new design. We're testing out some new buttons in this thread.

The goal was to get buttons that are a bigger target both on the desktop and on small screens. We wanted them to look good on high resolution monitors and phones. We also didn't want their bigger size to be a distraction so they only appear when you're writing a comment.

The new buttons are only available in this MetaTalk thread. We'd like to get your help shoring them up before we push them out across the sites. Please report any problems you run into here, along with your browser and OS versions.

Here's what the buttons should look like on desktop and mobile in case they aren't showing up for you.
posted by pb to Feature Requests at 1:39 PM (56 comments total) 1 user marked this as a favorite

I should mention that the biggest change is that the buttons are above the comment form at desktop widths. We felt like they fit more naturally above so Live Preview could be directly below the commenting area.
posted by pb (staff) at 1:45 PM on February 20, 2015


I had no problem with the old buttons in the new theme, but I like the way these appear above the textbox. The only thing I'd change is the font for the bold and italic buttons; Maybe it's just me, but my first impression was that it looks too round, almost Comic Sans-ish.
posted by Strange Interlude at 1:52 PM on February 20, 2015 [3 favorites]


In Chrome for Windows, Version 40.0.2214.115 m, the buttons are still in the bottom right corner of the comment window. Not a big deal in my opinion, but FYI.
posted by Brandon Blatcher at 1:53 PM on February 20, 2015


Brandon, are you in the modern theme?
posted by pb (staff) at 1:54 PM on February 20, 2015


Ah, no.
posted by Brandon Blatcher at 1:59 PM on February 20, 2015


So, old buttons still appear when I hit preview, and they fall below the comment box. Supposed to be like that?
posted by rtha at 2:25 PM on February 20, 2015


Supposed to be like that?

Yep, no new buttons in the preview yet. We'll add those when they go out everywhere.
posted by pb (staff) at 2:26 PM on February 20, 2015


They look Great In mobile.

On preview: is small tag disabled!!? Or is it my preview. Let's find out.
posted by rtha at 2:28 PM on February 20, 2015


Oh, small works. Never mind!
posted by rtha at 2:29 PM on February 20, 2015


I'm neutral on the buttons' design, aesthetically speaking, but I really like that they're bigger on mobile. Yay!
posted by Metroid Baby at 2:36 PM on February 20, 2015


I really like that they're bigger on mobile

Yeah, the human interface guidelines that Apple publishes says touch targets should be about 32px square, which is actually kind of big (double the size of a favicon), and in the past the mobile buttons we had were less than half that height, so tougher to tap with a finger.
posted by mathowie (staff) at 2:56 PM on February 20, 2015


Ohhhh, another thumbs up for mobile!
posted by lizjohn at 3:00 PM on February 20, 2015 [1 favorite]


Looks good.

Am I the only one who types out the tags?
posted by Justinian at 3:21 PM on February 20, 2015 [2 favorites]


They're so big! I like them, works great over here on Android/Chrome!
posted by phunniemee at 3:34 PM on February 20, 2015


I have been known to type a tag or two from time to time.

Preview doesn't show my link, but it works on post.

Also, the HTML help and Show Preview texts are teeeeeny

And I LOVE BIG BUTTONS
posted by Jesse the K at 3:38 PM on February 20, 2015 [1 favorite]


If you wail on the buttons you end up selecting the Posting as: text.
posted by jeffamaphone at 3:42 PM on February 20, 2015


On Chrome on my work PC and they look kind of blurry, I love the size but is there any way to sharpen the icons up?
posted by arcticseal at 4:10 PM on February 20, 2015


Ooh, pretty in mobile (iOS Safari). Makes the desktop ones look very Web -2.0.
posted by arcticseal at 4:12 PM on February 20, 2015


Oh god. So great. Please press go across all platforms.

Both the size and the aesthetics are great. The old mobile ones were t'urble.
posted by chasles at 4:20 PM on February 20, 2015


I have to scroll to the side for the blink tag button.
posted by Invisible Green Time-Lapse Peloton at 4:40 PM on February 20, 2015


They look great for me! Also, it's been bothering me that the slash button and the italic button looked so similar, so I'm glad to see that the new buttons rectify that.

Huzzah!
posted by ocherdraco at 4:49 PM on February 20, 2015


Not sure why they're showing up blurry for you, arcticseal. They've been sharp in all my tests. Can you let me know which version of Windows you're running? I'll see if I can duplicate it.
posted by pb (staff) at 5:18 PM on February 20, 2015


Nice!
posted by chococat at 5:55 PM on February 20, 2015


I'll just continue to <b>type my tags by hand</b>
posted by double block and bleed at 6:19 PM on February 20, 2015


bloop bleep owl cam

They seem nice & work okay for me.
posted by Going To Maine at 6:29 PM on February 20, 2015


Thumbs up here (chrome, android).
posted by Cash4Lead at 6:32 PM on February 20, 2015


Tags I can use on iPad - oh this is cool.
posted by b33j at 6:57 PM on February 20, 2015


B I link ponies
posted by Melismata at 7:02 PM on February 20, 2015


Pb, this is a work installation of W7, so might be messed with. That said, they look lovely on Android!
posted by arcticseal at 8:39 PM on February 20, 2015


They look a little blurry for me too. Chrome on Windows 7. Not superblurry, but I instinctively moved my head closer to the screen to look at them.
posted by Kattullus at 12:10 AM on February 21, 2015


testing
testing
1,2,3
is this thing on?

Looks good (iphone 5) and doesn't jump around when you try to hit a button.
Now please bring "Skip"
(to bottom of page) to whatever version of modern is called by my iPad. Scrolling through 500 comments is a drag.
posted by spitbull at 4:57 AM on February 21, 2015


Android / Chrome / spot on.
Especially in contrast with the old buttons when they appear in the preview!
posted by emilyw at 5:08 AM on February 21, 2015


I kind of wish the background behind the buttons was somehow different. It looks good in your screenshots with light mode on, but I run in dark mode. It's making weird contrast issues with the edges of the buttons against the gray background.

I'm not sure if I'm making any sense.
posted by royalsong at 5:43 AM on February 21, 2015


I like it, I have dull fingers so this is nice. Then again, I am nobody so what do I know?
posted by Literaryhero at 6:00 AM on February 21, 2015


This is a very nice tweak.
I am only seeing 3 buttons.
It is good to have them at the top, good choice.
There is an earlier comment about the font of the B and the I. I agree. The Link letters look perfect though.

Last thought: the buttons are hidden unless I'm in the typing mode, then they pop up with the keyboard. This makes it feel like they are part of the operating system and seems very weird.
I'm on an iPad 2 with iOS6
posted by SLC Mom at 6:14 AM on February 21, 2015


I find the new buttons much easier to use on my iPhone (5S, Safari, iOS 8.1.3). Thank you!
posted by Songdog at 6:19 AM on February 21, 2015


Thank you, thank you, thank you for choosing not to "improve" the old theme at the same time.
posted by flabdablet at 8:22 AM on February 21, 2015


Looking good in OS X Opera!
posted by clavicle at 9:00 AM on February 21, 2015


It looks good in your screenshots with light mode on, but I run in dark mode. It's making weird contrast issues with the edges of the buttons against the gray background.

I agree. I also use dark mode, and it doesn't look as good as when I use light mode. But, functionally, it's way better than the old buttons. Thanks!
posted by bluefly at 9:12 AM on February 21, 2015


Any chance we could get the buttons, when nothing is selected, to insert the tags with a space inbetween instead of right next to each other? My phone insists on selecting one character instead of just setting the cursor inbetween when I try to use these buttons.
posted by Mitheral at 10:40 AM on February 21, 2015


I do not like how the buttons hide when i don't have the cursor in the text box. I like to know what my options are, I don't want to have to click around to make what i want to happen magically appear. What possible functionality could be gained by having the buttons hidden from view?

Additionally, i frequently have link URL copied to clipboard, highlight the link text, and click the "link" button, only to misclick. Under the new system, this would hide the buttons, forcing me to take the additional step of re-highlighting the link text again. Very tedious.

In conclusion, please do not make the options auto-hide.

Otherwise: I like them.
posted by rebent at 11:14 AM on February 21, 2015 [2 favorites]


Oh hey, I was one of the folks who commented to y'all (and my continued thanks to pb for being a speedy and responsive dude). I just tested this thread on mobile and it looks great and answers my original concern neatly. Thank you!
posted by librarylis at 11:23 AM on February 21, 2015


testing
123 testing

count me as a fan

123testlink.com
posted by Michele in California at 12:56 PM on February 21, 2015


So it looks like you're supporting control-I for italic and control-B for bold. How about control-K for URL as well? (as used in lots of apple/google/microsoft/etc apps).
posted by effbot at 3:10 PM on February 21, 2015


Oh, control-U does that. Guess underline isn't used much, so I guess I can live with the inconsistency...
posted by effbot at 3:14 PM on February 21, 2015


As long as we're playing with HTML tag options, how about buttons for small, sup & sub? I'd ask for img but that might get me banhammered :)
posted by pjern at 8:47 PM on February 21, 2015


Do we need the word "Link" on the button, or are we at a point where the chain icon is pretty well understood?
posted by Sweetie Darling at 7:16 AM on February 22, 2015


I use dark mode and agree that more contrast between the buttons and there background would be nice. (I'd also prefer that buttons stay visible above the comment box instead of vanishing and appearing.)
posted by Margalo Epps at 8:50 AM on February 22, 2015


What does this button do?

Edit: dang, gets edited out. How can we have frank and honest discussions without a marquee tag?
posted by Joe in Australia at 4:05 PM on February 22, 2015


These are great on mobile, I heartily approve.
posted by Happy Dave at 2:44 AM on February 23, 2015


Does anyone else have challenges scrolling to the top of their long comments in Mobile? I'm not sure if this is relevant to what you're working on. I'm using Chrome on Android.
posted by odinsdream at 5:26 AM on February 23, 2015


Scrolling in a textarea is janky on just about every mobile platform. It's not related to the HTML buttons, no. It's just one of those annoyances on a small screen. If you feel a long comment brewing, you might use a note-taking app to compose it and then cut and paste.

Thanks everyone for the testing and feedback so far!
posted by pb (staff) at 8:15 AM on February 23, 2015 [1 favorite]


I'm now ruined in every other thread because I just think "where are the good buttons?"
posted by knapah at 2:52 PM on February 23, 2015 [2 favorites]


Approved. Please distribute to all platforms, including the MeFi app ASAP.

works fine for me on WinXP/Chrome and iOS8/Chrome, Safari (iPhone 5s + iPad 3). Thought I should try it on IE while I was at it and it doesn't work at all. Then realised my desktop has IE8 and that would explain it.
posted by dg at 1:25 AM on February 24, 2015


Buttons are go.
posted by pb (staff) at 4:08 PM on February 24, 2015 [2 favorites]


This sums up my feelings.
posted by pseudonymph at 5:29 PM on February 24, 2015 [1 favorite]


« Older Too Much False Rape?   |   Splinters of Memory Keep Poking Me Newer »

You are not logged in, either login or create an account to post comments