External links

My goal for this website is to make it as accessible as possible. Even though my content isn't really for people outside of tech, I still want to include them in the off chance they might be interested.

One of the most popular conventions that websites have with external links is adding target="_blank" to it so that browsers will open the link in a new tab. I think the main reason why people use this is that they don't want users to leave their website. Opening external links in a new tab mean that your website will still stay open as a tab. And users need to intentionally close off your website tab if they don't want to continue browsing your site.

I've always held down the Cmd key while clicking a link to open it as a new tab in the background, so it doesn't affect my browsing experience.

Indicator

My problem with implementing target="_blank" is that there's no indication as to whether the link to open in a new tab or not.

If you have Status Bar turned on in macOS Safari, it will tell you if a link will open in a new tab as opposed to Chrome and Firefox, which will only show the URL.

Status bar showing that https://twitter.com/pwign will be opened in a new tab
Safari status bar

But the status bar isn't switched on by default in Safari, and it only works in macOS.

Some websites add an icon that indicates that a link is an external one, but when placed in a body of text, it's disruptive and takes away the focus from the content, which I do not want. Also, the icon design isn't very popular, which might confuse people who are new to the website.

Two external links with an arrow icon on their right
Icon designs for external links

A viable option I'm considering is to add a tooltip upon hovering that indicate the link as an external one, and as a bonus, show the domain of where they will be redirected to.

Something like this:

A hovered external link with a tooltip saying External link -> pwign.com

But it doesn't solve the problem that people don't know the link will be opened in another tab; it's only telling them that the link is going to move them off-site.

Back button

Another concern I have is when you open a link in a new tab. It's not easy to get back to the origin tab. The back button is greyed out. The only web browser that seems to address this is Safari. When you open a page as a new tab there, the back button will bring you back to the origin tab.

Safari has a back button for new tabs.

But again, it means that this feature is only limited to platforms where there's Safari—so not the best option.

Perhaps I'll find a better solution to all of these in the future, but for now, I'm keeping target="_blank" on my website for the sake of being consistent with the rest of the web.

Update: Just an update from April 21, 2021 that I have decided to add a tiny circle thing next to external links.