How to change Gmail's new look

The new Gmail interface.

Gmail's got a new look. Rather than allowing us to keep the old look as an optional theme, it's been forced upon us. I can't complain though, since I get email entirely for free.

Instead, I thought I'd explain some of the reasons I don't like the new look, and do something about it.

You can get into all the detail below but the headline is that I've written a chunk of CSS you can use to fix some of the changes. All you need is a browser plugin to change CSS on a given page (I'm using Custom Style Script) and just copy and paste my code into it. The CSS is here as a GIST.

Disclaimer: I've knocked this together in a few hours while suffering from a fairly heavy cold, so it may not be as robust as it should be. Use at your own risk.

Reasons why I don't like the new interface

Without wanting to get into a drawn out debate about change for the sake of change, here are some specifics.

  • Button styles are inconsistent (interestingly at least some buttons are not button elements or links, they're just divs. I've yet to try the interface using a screen reader but hopefully they have some mechanism to make it accessible).
  • The new 'compose' button is ugly. Okay, that one's entirely subjective, but I don't like it, so I'm changing it back.
  • The new auto response feature isn't something I want. Also, I'm probably being paranoid here, but it feels like the first step towards a future where none of us truly communicate, our devices just send automated responses between each other. But I guess this is already a feature of a load of other messaging clients.
  • There's a lot of box shadows in use, particularly when hovering. Personally, I don't like that. I also don't like the little shortcut icons for archiving etc. when hovering over an email.

Things this changes

  • Button styles at the top of a conversation are now consistent with buttons at the bottom.
  • Compose button now looks more like old compose button.
  • Removes auto response buttons ("Awesome, thanks for the update!" - yuck).
  • Turns off box shadow when hovering emails.
  • Removes shortcut icons when hovering emails.
  • Restores brackets around numbers showing number of emails in a conversation.
  • Removes box shadow from reply element and generally cleans it up.
What this does.

I've noticed that Gmail is using some kind of CSS class name processor. Reloading the page retains the same class names, but I can't guarantee that any future changes to Gmail won't recompile these class names and this whole thing will stop working. But I'll try to keep it up to date.

If anyone has any other suggestions for how to improve this, please let me know. Or just copy and modify the gist as you please.

Worrying trends

Digging into Gmail's CSS I'm finding some interesting things. There's the afore-mentioned button problem, but there are other things that are worrying. To be fair to Gmail's developers, they're building a world class email platform, so I'm sure there are reasons why they've done some of these things, but I don't know them, so I'm left to wonder.

  • Hover styles aren't applied anywhere that I can find using the normal :hover pseudo selector. JavaScript is used to apply additional classes. That seems unnecessary.
  • The inbox link in the left menu when highlighted is red text on a pink background. This passes WCAG contrast requirements but only for large text, which I think it probably qualifies as. Still, it seems unnecessarily close to failing.
  • The main inbox list uses tables for layout. That's generally bad practice, but I can see perhaps why it's been done here.
  • If I shrink my browser window down to the size of a mobile device, the layout doesn't change. Presumably most people are using the Gmail app on their phone, but I'm still surprised it doesn't appear to even attempt to change the layout.
  • Is anyone else seeing really blurry avatar thumbnails? It's fine on hover in the popup box, but otherwise noticeably bad.

Related

This article is tagged with