1. Mentally redefine Gmail tabs

First and foremost, I hate that the tabs in Gmail have predetermined labels for “Primary,” “Social,” “Promotions,” “Updates,” and “Forums.”

Annoying Gmail tabs.

All 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 care about social emails, promotions, updates, or forums during the majority of my day.

I suppose the “Priority Inbox” organization style and layout could be more aligned with work-centric emails. I also 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.

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.

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.

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 from Developer Services for business.

2. Switch from bundled messages → Gmail filters & tabs

Using 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 Tab

, For 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 , Archive

, , For messages that I just need stored and organized:

Tag, Skip the Inbox, Mark as Read, Archive

3. Hack the tab labels

Unless 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 tabs.

My fix

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 Hangouts

If 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 maybe it’s just another way to keep a user logged in longer?

Sign in to Hangouts. The boldest call to action on the entire screen.

My fix

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 ads

Ads look like emails and there is no way to get rid of them. Evil. The tabbed layout can only be turned on with 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 would 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.

My fix

Hid the ads block with CSS.

/*--- #5.Get rid of ads

(updated Nov 5, 2019 - Google updated & ads are showing again.)

---*/



.aDP .ae4.aDM + .ae4.aDM .Cp{

display: none;

}

6. Even more line-height for emails

The 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” in Gmail is still extremely tight and claustrophobic compared to Inbox’s display density. This is a personal preference, though it 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-height.

Super generous line-height.

My fix

Increased email line-height with CSS.

/*--- #6. Even MORE line-height for Emails ---*/

.Cp tr{

padding-top: 18px;

padding-bottom: 18px;

}

7. Minimal sidebar

Tags 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.

My fix

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 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 enough.

Settings: Turned off in Settings all sidebar quick links (Sent, Drafts, Snoozed, Categories, etc., things 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 counts

Notification dots and counts are unnecessary for anything other than the main Inbox tabs. This might be a personal preference; 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 read, then the whole sidebar is red dots. Notification dots are a dark UX pattern and exist solely to keep you in the app clicking and clicking and clicking…

Get rid of sidebar icons, notification dots, unread counts, and red highlight for Inbox.

My fix

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 color

There 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.

My fix

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 open

When 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 visible. Google Inbox pushed the messages list to the right instead of covering it. I miss that.

My fix

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 graphic

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, the Gmail mobile app added a nice graphic for empty tabs. Maybe they will fix this in the Gmail web version soon.

In the meantime… I’m going to put my own happy graphic.

Cleared Gmail tab → delightful unicorn.

My fix

Overrode the depressing message and replaced with CSS and a unicorn-y 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 sidebar

It seems like 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.

My fix

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;

}

I removed a couple other things because it was simple to do, though they don’t bother me too much, like the Gmail logo and the footer information (especially visible when a tab is cleared).