Google’s recently revamped Gmail website has a lot of good things going for it, but the service’s interface could still seriously improve.
Plain and simple, the gmail desktop site is busy and cluttered, especially if you’ve spent some time working with its much more minimalist and aesthetically pleasing inbox cousin. Now that the inbox is about to disappear, what’s a picky email user to do?
Fear not, my friends, for there is still hope. just as you can recreate the best inbox features in gmail, and make the gmail android app a little more pleasant to use, with a little effort, you can strip down gmail’s desktop interface and transform it into a quiet and uncluttered hub for email productivity. .
Pictures are worth at least 997 words in situations like these, so let me start by showing you what my own gmail inbox looks like right now, in the days since I went back to it from the inbox and got ready to make the transition. acceptable:
(click the image to enlarge.)
quite a change from gmail’s default view, huh? As you can see, I’ve removed most of the superfluous text and buttons, leaving only the elements I really need for my day-to-day email management. some of what i removed is just clutter: things like the google app icon and notification counter, usually in the top right corner of gmail, and all the terms and policy nonsense in the footer of the site, while part is legitimately functional material. that I’d rather not have on my screen, like the giant “compose” button that is usually found in the top left area of the site.
Since I almost always use gmail’s keyboard shortcuts for functions like composing new messages, which means I just press the letter “c” every time I want to write a new email instead of messing around with the mouse, the “compose” button was completely redundant for me and achieving little more than creating clutter.
so how can you improve your gmail inbox interface similarly? let’s break it down.
Update (1/4/19): If you really want an inbox-like vibe in gmail, check out this quick tip to bring the real inbox interface to gmail (yes, seriously, not an April Fool’s joke!), and/or see how the actual creator of gmail redesigned the inbox to bring his same minimalist principles to that environment.
Step 1 – Make sure you have gmail keyboard shortcuts enabled and configured as desired
Part of the super minimalist approach I’ve come up with is based on the fact that I use keyboard shortcuts for common gmail commands, as I mentioned a moment ago. If you’re going to remove on-screen buttons for things like composing a new message, you’ll first need to make sure you’re comfortable using the associated keyboard shortcuts. otherwise, you’ll find yourself in a pretty awkward mess (and trust me, “awkward pickle” isn’t a positive description of anything).
first, confirm you have keyboard shortcuts enabled: go to your gmail settings, scroll down the page until you see the “keyboard shortcuts” option (under the “general” tab that initially appears by default), click the button next to “enable keyboard shortcuts” and then scroll down and click the “save changes” button at the bottom of the page.
once gmail reloads, you can see a full list of available keyboard shortcuts by pressing ctrl and ? from anywhere on the site.
if you really want to go crazy, go back to gmail settings, click the “advanced” tab at the top and click the “enable” button next to “custom keyboard shortcuts”. once gmail reloads, go back to settings and look for the new “keyboard shortcuts” tab in the top bar. there, you can set your own custom actions for moving around gmail, including inbox-like commands like “i” to return to your inbox from anywhere or “esc” to close an email and return to your inbox. a list of messages.
step 2: optimize and condense your left side panel
Before we start removing interface elements, we should take a few minutes to clean up some basics. gmail’s new heavy left side panel is a perfect example: in my minimized setup, you’ll notice that the panel itself is condensed, meaning you only see icons for each current section rather than a meaty column that takes up a lot of space .
This change is easy to accomplish: just click on the three-line menu icon in the top left corner of the site. that will lock the panel in a condensed form, something that is a pure win-and-loss move, as the panel still auto-expands and displays its full contents every time you mouse over it.
The next thing you’ll notice about my setup is that the list of icons in that panel is significantly shorter than what gmail gives you by default. here’s another easy tweak to make: hover over that panel, and if you see the word “more” at the bottom, click it so all your tags and categories are exposed.
(if you still have the hangouts/chat module under that area, think about if you really need it there. otherwise go to gmail settings, click “chat” and disable it. if you want to keep it you will have to slide the top line down to access the full list of tags and categories).
Now, think carefully about what tags or categories you regularly click on or need to be able to see from the main inbox view. for me, it came down to a small handful of basics: the inbox itself, my snooze messages, my sent messages, my drafts, my entire mail area, and then the labels for the reminders and saved article features that I created via my sneaky inbox-to-gmail features tricks. (and yes, I realize I could also access any of those things via keyboard shortcuts, but I’ve come to appreciate having some of those on-screen icons in that area. plus, I need to be able to access the full expanded side panel at times, and makes for a more visually balanced look by having at least a handful of icons present in their collapsed form).
for any tag or category that you determine you don’t need to see all the time, click the associated icon, drag it down below the “minus” marker, and release it. gmail should move it down to that area of the panel.
once you’ve done that with all the icons you don’t need in your main view, click the word “minus”, say hocus-pocus for good measure, and bam: gmail will hide the bottom of the panel completely out of sight now what you are left with is a much less distracting and condensed list, and whenever you need to get to something that is hidden, all you have to do is hover over the side panel and click the “more” command to reveal each available tag and category.
step 3: hide the new right side panel
one more side panel to take your mind off: that new narrow panel on the right side of gmail, with links to open widget-like versions of calendar, keep, and tasks. Unless you use it all the time, click the little right arrow in the bottom right corner of the gmail site. that will hide it and further enhance your interface, and whenever you want to access that panel, you can click the left arrow in that very corner to reveal it.
step 4: think about the density of your screen
the latest incarnation of gmail offers a few different options for display density, and the default setting puts a lot of extra information on your screen through the large thumbnails it creates for attachments and other bits of information contained in mail email.
While that model is actually inspired by the inbox, I personally think it’s a cluttered change. Those thumbnails are useful to me on mobile, where the gmail app doesn’t currently offer them for some reason, but on desktop, they’re mostly just distracting.
if you think the same and would like to clean up the look of your inbox by removing those thumbnails, click the gear icon in the top right corner of gmail, select “display density” and try the “comfortable” view . it will keep things nicely spaced out, but it will remove attachment tiles and give your inbox a more uniform look.
step 5: do some magic to modify css
alright, now that we’ve removed those preliminary fixes, we’ll get to the bulk of our effort. Most of the improvements to the gmail interface are made possible by a powerful (and free) chrome extension called stylebot. stylebot gives you a relatively simple way to modify any website’s css, a special language that controls many aspects of a page’s appearance, to hide or move elements as you wish.
Now, it probably goes without saying, but you can really ruin the look of a website if you’re not careful with this tool. but any changes you make are limited to just your browser, and you can clear them and start over at any time with a single click of your friendly neighborhood mouse. therefore, there is no real potential for significant or lasting harm and no significant cause for concern.
The easiest way to use stylebot, once it’s installed in your browser, is to right-click on anything you want to change, like the gmail logo in the top left corner of the site, for example, and then select “stylebot followed by “style element” from the menu that appears. This will open the extension’s control panel, which has a host of options for changing the style of the element you’ve selected.
The most relevant option for our purposes here is the “hide” command, located in the “layout and visibility” section of the extension’s control panel. click that and you will see the element you have selected magically disappear from the page. (ooh! ahh! etc.)
Other relevant options include margins, which allow you to change the location of an element on the page, and height and width, which allow you to reduce the size of an element. Also worth noting are the commands to undo and reset a page and remove all style changes. (Disabling or uninstalling the extension will also immediately remove any changes it has applied.)
the simplest way: I realize this is a lot of work and play, so if you just want to try using the exact configuration I created, I’ve posted my custom stylebot code here. all you have to do is copy the code from that page and import it into the stylebot extension on any computer where you want the modified interface to appear, and it should give you the same interface improvements you see on the screenshots in my inbox . and if you try it and then decide you don’t like it, no problem: just use the stylebot option to reset the gmail page, or disable or uninstall the extension altogether.
[update: it seems that google changes gmail’s styling parameters quite frequently, particularly in the title bar at the top of the screen, and as a result, the fixes I prepared are no longer 100 percent effective . however, they still remove much of the clutter and work as illustrated almost everywhere except inside the top bar.]step 6: apply some finishing touches
Your inbox is starting to look pretty fancy, right? we’ll just make our way through a couple of quick finishing touches, and then you’re all set.
First, for any labels you’ve left visible in your newly summarized left side panel, consider applying custom colors so they (a) look better and (2) are immediately recognizable at a glance. To do this, simply hover your mouse over each tag and click the three-dot menu icon that appears next to it. then hover over “label color” and select the color that seems most appropriate for each.
Lastly, consider applying a relaxing theme that complements your inbox’s new look. click the gear icon in the top right corner of gmail and select (yes, you guessed it) “themes”. I suggest you scroll down until you see the “more images” thumbnail and click on it; doing so will reveal a host of beautiful photos for you to choose from, including the one you see in the screenshots in my own inbox.
The key to making an image work well as an inbox background lies in two easily overlooked tools at the bottom of the main gmail theme selection box (which you’ll see once you select and apply an image). the first, immediately to the left of the “cancel” button, allows you to apply any amount of blur to your image, something that can go a long way toward making a photo blend nicely without being too distracting.
the second, an icon from there, gives you the ability to apply a vignette to your image, which basically darkens it from the corners moving inwards. it can also make a big difference in transforming a normal image into a perfect, inconspicuous inbox background.
by default, gmail will generally style the colors of the various items in your inbox to match the image you select (much like what we see in android, in recent versions). if you’re not happy with the way things look, you can toggle between a light and dark text background via the third icon in the main theme selection box (a gray square with a white “a” inside).
and with that, my dear friend, your gmail inbox should look immaculate. you’re primed and ready for optimal email management. all that’s left now is dealing with those mountains of messages pasted by dad that keep piling up.
Sign up for jr’s weekly newsletter for more practical advice, personal recommendations, and a Plain English perspective on the news that matters.
[android intelligence videos on computerworld]