Effective titles and more
Tags: ux, beginners, html, javascript
Published: 2020-11-07 07:31:45

---
title: Effective titles and more
published: true
tags: UX, beginners, HTML, javascript
canonical_url: https://tomekdev.com/posts/effective-titles-and-more
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/43cf2wlxqppy1tsb0rjo.png
---

_This post was originally published on https://tomekdev.com/posts/effective-titles-and-more. What you see as a GIF here is interactive there._ ✌️

----

This is not an SEO guide on how to write effective titles or (maybe I should say) how to create clickbait.  
No. We are going to talk about the technicals. If you want my writing advice on that I'd say a cliché:

- title should be short and descriptive

Did mine do a good job? I don't know, but if you are here reading this, maybe it did.

## Site name

I believe you should put the site name into the page's title because that's going to land as a name of a bookmark if someone happens to add your page to bookmarks (do people still do that?):

[![Bookmark added with a clear indication of a site](https://tomekdev.com/static/566e3234699a72be22b41c2fc28dc94e/91e7e/add-to-bookmark.png "Bookmark added with a clear indication of a site")](/static/566e3234699a72be22b41c2fc28dc94e/91e7e/add-to-bookmark.png)<figcaption>Bookmark added with a clear indication of a site</figcaption>

And will help in fast identification. I see that useful also in the History tool of your browser of choice:

[![The site name is prominent on a History list](https://tomekdev.com/static/ff93a31b8d3c7877cb44caa1a6baad7b/d9199/history-list.png "The site name is prominent on a History list")](/static/ff93a31b8d3c7877cb44caa1a6baad7b/5dded/history-list.png)<figcaption>The site name is prominent on a History list</figcaption>

Now, should you put the site name before or after the title for the content of the page?  
Well, I believe **after** is the way to go. Again, easy identification comes into play. If everything starts with "Tomek Dev" then you have to omit it to understand what's this page about. Take a look at this:

- Tomek Dev - Effective titles
- Tomek Dev - If there is an input, there should be a form
- Tomek Dev - Content Curation is going to be a job and how Content Marketing killed the web
- Tomek Dev - Dynamic partiallyActive Link in Gatsby

Doesn't look that bad when I have it on a list, right? Right. But consider the real estate of a browser's toolbar:

[![Tabs are packed. Redundant information doesn't help here](https://tomekdev.com/static/ea32f3e18777995abed8310e9fe81169/d9199/tabs-before.png "Tabs are packed. Redundant information doesn't help here")](/static/ea32f3e18777995abed8310e9fe81169/5d6a0/tabs-before.png)<figcaption>Tabs are packed. Redundant information doesn't help here</figcaption>

There is no lot of place but it can be even less if you use a lot of tabs. Having a title of your content first and the site name second will help in identification. The content title is more important for a user:

[![Tabs are still packed but more valuable information gets first](https://tomekdev.com/static/032ba4d20661b8499822410ee2e3b5e4/d9199/tabs-after.png "Tabs are still packed but more valuable information gets first")](/static/032ba4d20661b8499822410ee2e3b5e4/5d6a0/tabs-after.png)<figcaption>Tabs are still packed but more valuable information gets first</figcaption>

### What separator to use

I'm using a pipe - `|` because my dad is a plumber and I spend a lot of my life in the terminal. What else could I use? 😉  
Jokes aside, that could be a branding thing. Go crazy if that's your thing:

[![Here ♣ separates content title and the site name](https://tomekdev.com/static/d91c24d55bd34a87e80670460a70aafa/d9199/tabs-crazy.png "Here ♣ separates content title and the site name")](/static/d91c24d55bd34a87e80670460a70aafa/5d6a0/tabs-crazy.png)<figcaption>Here ♣ separates content title and the site name</figcaption>

[![Legal advice page with § as a separator? Why not](https://tomekdev.com/static/6a3e3421252ed05c271cb19f2a3e5a69/d9199/tabs-crazy-2.png "Legal advice page with § as a separator? Why not")](/static/6a3e3421252ed05c271cb19f2a3e5a69/0bdcb/tabs-crazy-2.png)<figcaption>Legal advice page with § as a separator? Why not</figcaption>

After all, the worst you can do is to have a single title for your entire application. **Don't do that**.  
Even if your app is just a tool, think for a while if you don't have some logical modules there. Because know what? 👇

## Title can be changed dynamically

That's good news (not only) for Single Page Applications. Use it to **bring users' attention** to something. Consider Facebook for example:

[![🤔 Something happened, right?](https://tomekdev.com/static/820c15f5fd745cc2185b558d9e89a878/d9199/tabs-facebook.png "🤔 Something happened, right?")](/static/820c15f5fd745cc2185b558d9e89a878/5d6a0/tabs-facebook.png)<figcaption>🤔 Something happened, right?</figcaption>

They encourage you to read the message you've just received. All you have to do to change the title of a page is setting it this way:

```javascript
document.title = 'A new title! | Tomek Dev';
```

Here is a small GIF presenting how it works:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t2gv3b92qw5rrbwgo4fy.gif)

Of course, if a user is already on our page we should not distract them with a flashing title. Maybe change it only if the tab is not active?

Consider this example, you work on a Video Editing application and people export their movie. The file has to be prepared and it takes time. You can show the progress on the title if they go to a different tab and announce a success. It could look like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/njb3xz3udhr37785vkyv.gif)

First things first. How to detect the change of tab's visibility? (I've just used the right keywords there).

```javascript
document.addEventListener('visibilitychange', function () {
  console.log(document.hidden);
});
```

`document.hidden` will tell you what's the status and you can modify the behavior accordingly to your needs. When it comes to the example above it was done this way:

```javascript
const originalTitle = document.title;
let isTabHidden = false;
let percentage = 0;

function changeTitle(title) {
  if (isTabHidden) {
    document.title = title;
  } else {
    document.title = originalTitle;
  }
}

const interval = setInterval(() => {
  percentage += 1;

  if (percentage < 100) {
    changeTitle(`${percentage}% Preparing video | Tomek Dev`);
  } else {
    changeTitle('⚬ Your file is ready! | Tomek Dev');
    clearInterval(interval);
  }
}, 100);

document.addEventListener('visibilitychange', function () {
  isTabHidden = document.hidden;
});
```

It's obviously a trick to show how it could work. In this place, you'd put your code that updates the percentage value. That can come from a backend endpoint that is preparing the video. No matter if that's a WebSocket or regular XHR request.

----

_Note_

Did you notice how progress slows down when I go to a different tab? It's because I'm faking the export progress via _setInterval_. The tab is in the background so Chrome executes the timing function (_setTimeout_/_setInterval_) once per second at maximum.

----

Eagle-eyed folks may notice that `visibilitychange` listener is not needed in that example. We can use `document.hidden` directly in our `changeTitle` function. I added it here only to show that such a listener exists ;) It might be useful in some implementations.

And do you know who (probably) uses that event? **Github**. Open two tabs, leave an unsaved comment in a PR, and go to another tab. You should see this:

![github-draft-comment](https://dev-to-uploads.s3.amazonaws.com/i/5mymrie6koedq3l71hhl.png)
 

## Dynamic === fun

Let me give you a few more examples of how you can make your title cool.

These days, you should see a speaker icon 🔊 if the audio is played in a tab. But it wasn't always like that. You can animate an audio playing in various ways:

- Let's show a listener

![listener](https://dev-to-uploads.s3.amazonaws.com/i/22zwdb046nediqf6h64y.gif) 

- Or a dancer

![dancer](https://dev-to-uploads.s3.amazonaws.com/i/lacxjrws3n794dxz37dv.gif)
 
- Equalizer?

![equalizer](https://dev-to-uploads.s3.amazonaws.com/i/1gmyw5ipcb6oz78wbvoy.gif)
 
- Song title floating

![Yeah, I left some work there. Thanks for reminding me!](https://dev-to-uploads.s3.amazonaws.com/i/gbr36xxiexemjjnfcqr2.gif)

### But be careful

Of course, like with every superpower, there is one thing you need to remember. **Don't overuse it.** Effects like this could be a very nice addition to your page. It can extend the experience and make it better. But it can also be annoying. Like a close button running away from your cursor.

## Summary

Maybe we've just scratched the surface of what we can do with `<title>` but here are some takeaways for you:

- Use a short descriptive title.
- Put your site name after the title describing the page's content.
- Add a separator between the title's parts. You can go crazy.
- Use the title's dynamic nature to extend the user experience.
- Bring users' attention to a tab if something important happened.
- Don't overuse dynamic techniques to avoid annoying users.

The real estate of the browser's top bar is yours now.