Using CSS and Other Tools for Digital Wellbeing

Prelude: Web vs Mobile

One of the major differences between web and mobile is that mobile platforms are more restrictive. There are all kinds of things you can do in a web browser (inspecting elements, modifying the content on the page, using extensions) that are difficult if not impossible to do in a mobile app. For this reason I try to consume content on my computer instead of my phone as much as I can. Not only do I have more fine-grained control on a web client, but it also feels less cramped with the extra screen real estate.

Hiding Inboxes

The infinite scrolling feed is the arch-nemesis of focused and intentional internet usage. It’s such a problem that popular Chrome extensions exist specifically for hiding news feeds on an app like Facebook.

div[aria-label="Conversations"] {
display: none;
}

Removing Distracting Elements in Publications

Another big source of distraction is all the widgets that clutter the page in online newspapers: recommended articles, like and share buttons, sticky headers or footers. Some newspapers are better than others with this, but you can use custom CSS to eliminate all the distracting elements:

.grid-layout__aside,
.persistent-aside,
.persistent-bottom,
.persistent-top,
.headline-block__headline{
display: none;
}

More Focused Email

Gmail is my primary email client, and I follow a good number of email listservs. I want to be able to read through a newsletter without all the other distracting buttons and elements on the page. This can be done with the following CSS¹:

.AO {
position: absolute;
top: 0px;
left: 0px;
width: 80vw;
height: 90vh;
padding: 5vh 10vw;
}
.aiw, .aeN, .aeH, .aKh, .aeG {
display: none;
}
div[aria-label="Side panel"] {
display: none;
}

Bonus: Take Advantage of Settings!

This has nothing to do with CSS, but lots of apps have settings you can use to nudge yourself into more mindful usage. As an example, you can actually turn off autoplay on Netflix by going to profile settings → autoplay controls. If you find that a particular app is really distracting for you, see if they have settings that can help.

Conclusions

The key with all of these changes is not to disengage from social media or the internet altogether, but to set clear intentions, and then to establish systems that make it as easy as possible to follow those intentions.

Footnotes

  1. A friend noted that a browser extension exists that does this and more!
  2. To see all keyboard shortcuts in Gmail, just type: ⇧ + ? (shift and question mark).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store