Inbox is dying.
Gmail UX sucks.
So I fixed it for my own sanity.
Kelli BorgoniaBlockedUnblockFollowFollowingMar 27Before & After CSS Hacks“Oh my God.
If I cannot change this interface, I’m going to go insane,” was all I could think when I opened up Gmail for the first time in years and faced the transition from Inbox to Gmail earlier this month.
Any other die-hard Inbox fans feel the same?Late last year when Google announced that Inbox would be killed, I was devastated.
I procrastinated and avoided the switch back to Gmail, savoring every last moment with Inbox.
Every few weeks I logged in to Gmail, clicked around, immediately felt overwhelmed, then promptly closed my browser.
Then February came along and Inbox started to threaten about it’s doom and gloom with a big, bold alert message.
Inbox is dyingSo I blocked off a few downtime hours each week to deal with it.
For the most mileage possible, this takes work.
You could apply my CSS Stylesheet for the same UI skin, though the real fix involves implementing your own set of filters and tags that make sense for you.
It’s a combination of:Using the tools in Gmail that do work, such as Filters, Settings, and Tab Structure.
Personal restraint in using tags and colors minimally.
Not everything needs to be screaming so loud with a tag or signifier of importance.
This Inbox-inspired CSS Stylesheet that I created to bring back some of the simplicity from Inbox.
It can be applied with the Google Chrome Extension User CSS, or any similar extension.
If you want to add in the CSS in the order I explain it, first install the User CSS Extension into Chrome, then copy and paste the CSS snippets throughout this post into your extension window with Gmail open.
Warning: The CSS shown here only works with this particular build of Gmail.
When Gmail updates/recompiles their code, all of the CSS here will likely break.
Still, I really think it’s worth it for the days/weeks that this will actually be working.
Example of User CSS Chrome ExtensionNow let’s take a look at why I went through all the trouble…—Goodbye, InboxYou can that Inbox was designed with the user in mind.
Emails were grouped to stay out of your way.
There are no ads.
You get a nice sunny sun and bright blue sky when you achieve the peace-of-mind of having zeroed your inbox…Inbox: ZeroedHello, GmailGmail is not designed for the user.
It is designed to maximize the time number of clicks spent in Gmail.
Emails are sorted into distracting tabs to keep you in the app and grab your attention the moment you think you can escape.
Hangouts are constantly present in your sidebar to remind you to get more distracted.
You get ads.
Gmail: Zeroed…But not really, because of ads.
Intentional dark UX to keep you browsing useless emails and clicking on ads.
I am sure that the designers on the Gmail team would love to solve some of the problems, but it’s business—and it just isn’t going to be possible.
But what if we could fix Gmail?When Gmail ever recompiles the app, my CSS will probably break.
In the meantime—whether it is a day, a week, or a month—I am planning to enjoy my hacked Gmail as long as possible.
Here’s how I approached the overhaul…#1.
Mentally Re-Define Gmail “Tabs”First and foremost, I hate that the tabs in Gmail have pre-determined labels for “Primary,” “Social,” “Promotions,” “Updates,” and “Forums.
”Annoying Gmail TabsAll these tabs except the “Primary” tab specifically encourage activities that keep you browsing Gmail with social and time-wasting activities.
My email is primarily for work, so I don’t ever care about social emails, promotions, updates, or forums during the majority of my day.
I suppose the “Priority Inbox” organization style could work more aligned with work-centric emails, though from a layout perspective, and I liked the tabs and I (stubbornly) wanted to see if I could keep that structure, yet make the tabs work the way I wanted them to.
So… I mentally redefined my tabs:Primary → “Important”: Important client emails, emails from real people.
Promotions → “Fun and Events”: Events and Promotions I follow, plus a very few streams of social media messages that I actually care about.
Updates → “Work & Receipts”: Calendar Invites, Event Notifications, Receipts.
Routine work messages, Basecamp Updates for teams that I am part of.
Forums → “Github”: Project Management Notifications for teams I lead, Github Updates for teams I manage, alerts form Developer Services for business.
#2.
Switch from Bundled Messages → Gmail Filters & TabsUsing filters to the fullest extent possible solved maybe 60% of my frustrations with Gmail.
Since bundled messages don’t seem to have transferred over from Inbox (yet?), I set up filters to work sort of like bundled messages.
Primarily:For messages that I want alerts for: Tag, Categorize to a TabFor messages that I don’t want alerts for, though care about a little: Tag, Categorize to a Tab, Mark as Read.
For messages that I don’t want to see unless I feel like browsing for something specific: Tag, Skip the Inbox, ArchiveFor messages that I just need stored and organized: Tag, Skip the Inbox, Mark as Read, Archive#3.
Hack the Tab LabelsUnless you hack the browser with CSS, you are stuck with “Primary,” “Social,” “Promotions,” “Updates,” and “Forums.
” Using CSS, I changed the icons and tab labels.
Hacked Gmail TabsFixed with: Hid the original names of the tabs and replaced them with custom labels and icons using CSS.
This does not change the labels throughout the Gmail app, so anywhere else other than the tabs, they will use the original tab names.
/*— #3.
Hack the Tab Labels —*//* Hide Ugly Tab Labels */.
aAy.
aIf-aLe .
aKx .
aKz,.
aAy.
aJi-aLe .
aKx .
aKz,.
aAy.
aH2-aLe .
aKx .
aKz,.
aAy.
aHE-aLe .
aKx .
aKz{ display: none;}/* New Tab Label Font */.
aAy.
aIf-aLe .
aKx:after,.
aAy.
aJi-aLe .
aKx:after,.
aAy.
aH2-aLe .
aKx:after,.
aAy.
aHE-aLe .
aKx:after{ display:block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-font-smoothing: antialiased; font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif; font-size: .
875rem; color: #5f6368; font-weight: 500; letter-spacing: 0; line-height: 16px; order: 0;}/* Tab: Active Font Color */.
aAy.
aIf-aLe.
J-KU-KO .
aKx:after,.
aAy.
aJi-aLe.
J-KU-KO .
aKx:after,.
aAy.
aH2-aLe.
J-KU-KO .
aKx:after,.
aAy.
aHE-aLe.
J-KU-KO .
aKx:after{ color: #3eb1ad;}/* Tab: Active Underline Color */.
aAy.
aIf-aLe.
J-KU-KO:before,.
aAy.
aJi-aLe.
J-KU-KO:before,.
aAy.
aH2-aLe.
J-KU-KO:before,.
aAy.
aHE-aLe.
J-KU-KO:before{ background-color: #3eb1ad;}/* Tab: Hides "New" Count */.
aKx>.
aDG{ display: none;}.
aJi-aLe .
aDG, .
aAy.
J-KU-JW.
aAy.
aJi-aLe .
aKo, .
aAy.
J-KU-KO.
aAy.
aJi-aLe .
aKo{ display: none; }/* Tab: Important */.
aAy.
aIf-aLe .
aKx:after{ content: "Important"; }/* Tab: Important Icon */.
aAy.
aIf-aLe .
aKp.
aIf-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553030473/media/email_t4wvmi.
svg'); background-size:18px;}/* Tab: Important Icon Active */.
aAy.
aIf-aLe.
J-KU-KO .
aKp.
aIf-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553032741/media/email-teal_ip8ci6.
svg'); background-size:18px;}/* Tab: Fun & Events */.
aAy.
aJi-aLe .
aKx:after{ content: "Fun & Events";}/* Tab: Fun & Events Icon */.
aAy.
aJi-aLe .
aKp.
aJi-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553031289/media/music_maycua.
svg'); background-size:18px;}/* Tab: Fun & Events Icon Active */.
aAy.
aJi-aLe.
J-KU-KO .
aKp.
aJi-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553032741/media/music-teal_lho3c2.
svg'); background-size:18px;}/* Tab: Work & Receipts */.
aAy.
aH2-aLe .
aKx:after{ content: "Work & Receipts";}/* Tab: Work & Receipts Icon */.
aAy.
aH2-aLe .
aKp.
aH2-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553033425/media/suitcase_yrfiac.
svg'); background-size:22px;}/* Tab: Work & Receipts Icon Active */.
aAy.
aH2-aLe.
J-KU-KO .
aKp.
aH2-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553033425/media/suitcase-teal_lf8pmp.
svg'); background-size:22px;}/* Tab: Github */.
aAy.
aHE-aLe .
aKx:after{ content: "Github";}/* Tab: Github Icon */.
aAy.
aHE-aLe .
aKp.
aHE-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553033424/media/github_efugnj.
svg'); background-size:20px;}/* Tab: Github Icon Active */.
aAy.
aHE-aLe.
J-KU-KO .
aKp.
aHE-aLf{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553033424/media/github-teal_mk16yp.
svg'); background-size:20px;}#4.
Get rid of HangoutsIf you aren’t logged in to Hangouts, the “Sign in to Hangouts” button is the largest, boldest, call to action on the entire screen.
This is probably a remnant of old Gmail UI that just never changed.
Or…just another way to keep a user logged in longer, right?Sign in to Hangouts.
The boldest call to action on the entire screen.
Fixed with: Hid the Hangouts block with CSS.
/*— #4.
Get rid of Hangouts —*//* Hides Line & Shadow */.
aeO{ display: none;}.
aji::after{ display:none;}/* Hides Hangouts */.
akc.
aZ6{ display: none; height: auto;}#5.
Get rid of AdsAds look like emails and there is no way to get rid of them.
Evil.
The tabbed layout can only be turned on with ads.
There is no way to turn off ads.
Ads are styled to look almost identical to your unread messages, so it is highly likely that you will accidentally click on them.
For me, the ads showed up in the “Social” tab.
Thinking it will remove the ads, I turned off the Social tab, though the ads just moved to the Promotions tab instead.
I didn’t want to test Gmail further.
Ads will probably move on another tab if I turn off the Promotions tab.
Evil Ads that look like emails.
Fixed with: Hid the Ads block with CSS.
/*— #5.
Get rid of Ads —*/.
BltHke.
nH.
oy8Mbf.
aE3 .
aKB{ display: none;}#6.
Even MORE line-height for EmailsThe line-height of emails is too tight.
If you are an Inbox user, you probably immediately noticed that even changing the “Display Density” to “comfortable” is still extremely tight and claustrophobic compared to Inbox’s display density.
Personal preference, though this was really high up on my list of oh my god, if I cannot change this, I’m going to go insane.
“Comfortable” Gmail Line-HeightSuper Generous Line-HeightFixed with: Increased email line-height with CSS.
/*— #6.
Even MORE line-height for Emails —*/.
Cp tr{ padding-top: 18px; padding-bottom: 18px;}#7.
Minimal SidebarTags in the sidebar look messy.
I’m a fan of minimalism, so I specifically don’t use color for tags because I only need them for organizing and storing old messages.
Tags look really horrible in the Gmail sidebar, since all the tag icons repeat for no reason.
It looks worse when you enable all the sidebar items for Sent, Drafted, Snoozed, etc.
And even worse when the sidebar is minimized.
Fixed with:User Restraint: I don’t use color for any tags, to keep things clean and minimal.
I don’t tag anything unnecessarily.
I only tag things so that they can be easily sorted/grouped/filtered later.
I also do have Gmail’s “Important” tag system working in the background, though I don’t need to see those tags…the evidence of important things just showing up in this tab is evidence enough.
Settings: Turned off in Settings all sidebar quick links (Sent, Drafts, Snoozed, Categories, etc…things which I hardly use and if I ever do need to access, I would do a smart search).
CSS Fix: Hid all icons with CSS.
Swapped out the highlight background color to a light grey.
/*— #7.
Minimal Sidebar —*//* Change Inbox icon to Envelope Icon */.
aHS-bnt .
qj { background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553030473/media/email_t4wvmi.
svg'); background-size: 18px;}.
nZ>.
aHS-bnt .
qj, .
aHS-bnt .
qj::before{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/v1553030473/media/email_t4wvmi.
svg'); background-size: 18px;}/* Set Grey Sidebar Highlight */.
byl .
TO.
nZ>.
aHS-bnt .
n0, .
nZ>.
aHS-bnt .
bsU{ color: #333333;}.
wT>.
n3 .
byl:first-child .
aim:first-child .
nZ { background-color: #e8eaed;}/* Hide Sidebar Label Icons */.
zw .
TK .
qj.
qr{ display: none;}/* Add space between sidebar labels */.
aim, .
ain { padding-top: 2px; padding-bottom: 2px; padding-left: 0;}/* Simplify "More" */.
n6 span.
ait { display: none;}/* Adjust Compose Button Margin */.
aeN .
z0>.
L3{ margin-left: 8px;}#8.
Get rid of Notification Dots and Unread CountsNotification dots and counts are unnecessary for anything other than the main Inbox tabs.
This might be a personal preference, though I don’t ever care about the unread count of tag groups except for my important mail.
When the sidebar is minimized, you get notification dots.
If you are like me and archive a lot of mail without bothering to mark as red, then the whole sidebar is red dots.
Notification dots are dark UX and just exist to keep you in the app clicking and clicking and clicking…Get rid of sidebar icons, Notification Dots, Unread Counts, and Red Highlight for InboxFixed with: Except for the inbox, hid all notification dots and counts in the sidebar and tabs with CSS.
/*— #8.
Get rid of Notification Dots and Unread Counts —*/.
zw .
TK .
aio.
aip .
bsU{ display: none;}#9.
Omit ColorThere is too much color everywhere.
Tabs are colorful for no reason, besides being “Google-y.
” I know what tab I am viewing because I clicked on it…I don’t need more color cues than that.
Red is also overused and makes me confused because it typically signifies a “stop” action.
Using color only for the Compose button and selected tab color.
Fixed with: Overrode all the color highlights and using only grey, or a nice teal blue for all active states in the entire application, using CSS.
#10.
Keep the sidebar openWhen you hover over the collapsed sidebar, the sidebar opens and covers my email list instead of pushing it right.
This is just a personal preference, though since this is an email app, I like my email being visible.
Google Inbox “pushed” the messages list to the right instead of covering it.
I miss that.
Fixed with: Simply click the hamburger menu to keep the sidebar open at all times instead of activating the open state on hover.
This ability to “click” the hamburger menu to keep it open took me a few days to figure out… so I felt it was worth explicitly mentioning.
#11.
Bring back the delightful cleared inbox graphicThe ‘cleared tab’ message in Gmail is depressing.
It was rare that my inbox was actually empty in Inbox, though when it was, it was such a happy graphic!.In Gmail, you get a super depressing “Tab is empty.
” message.
Cleared Gmail Tab → Depressing message + Ads.
Recently, in the Gmail mobile app they have a nice graphic for empty tabs.
Maybe they will fix this in Gmail web version soon.
In the meantime… I’m going to put my own happy graphic.
Cleared Gmail Tab → Delightful UnicornFixed with: Overrode the depressing message and replaced with CSS and a unicorny graphic.
( @airshipcms on Instagram).
/*— #11.
Bring back the delightful cleared inbox graphic —*/.
DVI7hd .
aRu{ background-image: url('https://res.
cloudinary.
com/airship/image/upload/f_auto/v1553218540/media/airship-unicorny_gpgyga.
png'); background-size: 240px auto; background-repeat: no-repeat; background-position: center center; height: 200px; margin-top: 40px;}.
DVI7hd .
aRu .
aRv{ display: none;}.
DVI7hd .
aRu .
aRv + p{ display: none;}.
DVI7hd .
aRu .
aRv + p + p{ display: none;}#12.
Use “Product Sans” in the sidebarWhat about using “Product Sans” in the sidebar?.What a missed opportunity that Google’s custom font “Product Sans,” is not used in the sidebar.
Doing so would beautifully differentiate navigational elements (sidebar and tabs) from the email content.
Fixed with: Changed the sidebar font to “Product Sans” with CSS.
/*— #12.
Use "Product Sans" in the sidebar —*//* Set Sidebar Label Font */.
TO .
nU>.
n0, .
TO.
NQ .
nU>.
n0, .
TO.
nZ .
nU>.
n0, .
ah9>.
CJ, .
n3>.
CL>.
CK{ font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif; font-weight: 500; font-size: .
85rem; color: #333;}Other things I removed because it was simple, though they don’t bother me too much: Gmail logo.
Footer information (especially visible when an Tab is cleared).
/* Hide Gmail Logo */.
gb_ja:not(.
gb_ka) .
gb_Ic .
gb_Vb { display: none;}/* Hides Gmail Footer */.
l2.
pfiaof { display: none;}So let’s see the final result.
Gmail before and after…Gmail Before CSS HacksGmail After CSS HacksFinally.
I can breathe!.I feel happy looking at a spacious inbox that gentle, unthreatening, and rewards me with a happy unicorn when I have no new incoming fires to put out.
Want my Inbox-Inspired CSS Theme?.I posted it to a Public Gist in GitHub.
I will probably periodically tweak it from time to time.
Follow AirshipCMS, UX, and Developer-related doodles and infographics here and on Instagram: @airshipcms.
Looking for Software Design or Development, Information Architecture, or UX Design?.Email kelli@airshipcms.
io.
—Other NotesHere are some other things that I didn’t bother to change / couldn’t change (well… you could probably install more Chrome Extensions that can actually change the DOM and insert js into the browser…)No visual difference between a ‘Category’ and a ‘Tag’ in the label list.
This is especially confusing because I have a tag called ‘Promotions’ and the Category called ‘Promotions’.
By clicking around, it seems that the items at the very bottom of the list are the Categories, though there is no other indication for this.
This could be improved with a simple list divider…I could fix this though I’m not going to…If I were to start again, the order of the tabs would be “Important,” “Github,” “Work & Receipts,” and then “Fun & Events.
” Though… I don’t really want to redo everything to change that right now.
And if you are actually reading my emails, I’ve intentionally hidden anything that is actually important so you don’t see my work stuff.
:).