Just for silly kicks, let’s keep on with the page title polls, this time with perhaps the most trivial of all choices. The poll is embedded on the site in the sidebar. Let everyone know what your favorite page title separator is. The en-dash? The vertical pipe? THE DOUBLE COLON‽
New Poll: What’s Your Favorite Page Title Separator?
Chris Coyier
on
(Updated on )
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
dot (.) or slash (/)
What about `»` and `«` ?
They’re purty.
I totally agree! They are without a doubt my favourite.
Yes! I was looking for them as well. Guess I’ll have to vote for my second favorite – the pipe!
Sorry ya’ll, can’t add ’em now and ruin the uber-high integrity of this poll!
I personally think they are horrible… ” | ” Is the best hands down…
That is not opinion, that is fact lol
At the current I tend to like a simple “-“. Short, Sweet, to the Point.
I Agree with You. user and SEO all loves “-” that’s all.
No need to add anything else.
prize?
I’m in total agreement here – this is what I use in all of my sites.
I want to be the person my mother always wanted me to be, so I vote for the vertical pipe, or the double colon because these are more difficult to be found inside the article title and so they will propably cause less confusion.
where is my prize?
em… scrap the double colon! I vote only for the vertical pipe! (sorry mum..)
I tend to change it pretty much every website. It depends on how I feel that day I suppose. Ha. But lately I’ve been feeling the simple and classy “›” (›)
I use that very often, too. It makes you read on:
This:
Sitename › Category › Title
… can be dangerous. Due to the limited number of characters in a tab-title, you might only be showing the user the sitename and part of the category in the tab-title text most of the time. Be sure to either keep it short on characters or reverse the order, so that the most important thing (the title of the current page) ís visible.
It depends on the design of course but I think ~ is very pretty.
Pipeline ‘|’ is the way to go!
The vertical pipeline |
I agree | works for me
mine too
I agree… gotta be the pipe!
Me 3 ;-)
Same here.
I agree for “|”, I had read its essentials on some seo website as it helps better in seo too.
It`s so small
space, pipe, space: “Article | PageTitle”.
This is what Drupal, my greatest inspiration, does by default, and this is what I’ve adopted as my own CMS’ default separator as well.
Yep, here too.
I switched to the bullet for a short time, but back to the pipe.
It just looks so clean.
Simply yet effective :)
Yes!! Or just simple “-“
I find myself using the vertical pipe “|” more often than anything else. However, I’ve always liked the look of a simple hyphen “-” best.
The vertical pipeline seems to be the best choise for me. :)
The vertical pipe …
The Pipe ” | ” is my favorite..:)
It’s !
The “|” It works better.
I kinda like the interpunct / middot: ·
agreed, it’s all about the middot, aka the new hotness!
Tired set. We need more choices…
Most cases the vertical pipeline |
Sometimes •
Just to clarify why I voted for Vertical bar, the | character: while offering the most visual differentiation of respective parts, it’s a few pixels thinner than dash (the another one most used delimiter).
• or »
but mostly •
Agreed.
I would say: ♥ (only when it’s appropriate -°)
em dash
Always the pipe, it’s clean and separates the title nicely
What purpose does this poll serve?
|
I voted for the bullet (•) although lately I find myself using ✿ quite a lot too.
Hi!
I voted for “::” but what I really love is the “.:.” separator. With some fonts, it appears like a three points star.
Double slash:
What about fleuron? ❦ or ❧
Whatever the clients requires
I’ve always liked the vertical bar, mostly for the reason it separates really well and doesn’t take up too much space. Many years ago I always likes to use greater than symbols to create breadcrumbs in the title bar until it became bad practice to put the site name first (though I suppose it would still work from right to left pretty well too).
The pipe is just a toy to play ASCII for people drawing the Cisco logo.
I usually make a short name for the title: three words max. Separators are for long titles, the ones shortened when seen in tabs. The ones terribly cut by users when they have too many of them in their bookmarks bar.
But we do have customers who NEEEED looooong titles. In this case, I vote for the “>” as a hierarchical symbol. Or the long “—” because …it is long.
(sorry if my english is weird…)
(cheers from Paris, France)
Title :: Sitename
Mine is vertical pipe ” | “. . .
What about…
_
Article ♥ Sitename
Looks a little funny to me :P
The bullet point always seemed most logical to me but I often just put dashes in there since it’s quicker and really doesn’t matter, to be honest :)
For me it’s vertical pipe ‘|’ :]
I like using | or :: It looks good in almost every template
My favorite is the em dash :D
Totally totally love it!
Vertical pipe is my favorite for most sites.
It always depends on the paticular website design and what works at the time. I never limit myself to one style.
Each can look good and each have their own pro’s and con’s.
Although now I’m looking at them I think these two look the best!
I tend to mix it up usually with the pipe, double colon or dash
Spaces are my favorite for my sites.
I use | but looking at the list I think I might start using the : :
Man it has been a long time since I’ve seen an interrobang in the wild! Nice touch.
Most of the time I use en-dash or em-dash or pipe, sometimes I throw in the double colon.
“»” or “|”
The bullet [ • ] is preferred, but I’ll fallback to the pipe if a client doesn’t care for the bullet.
I always just default to the minus sign (-) simply because that’s what most browsers tend to — or used to — use for their names within the title bar. So the result looks consistent on those browsers, like this: “Site/Article/Page Title(s) – Windows Internet Explorer” (on IE8) or “Site/Article/Page Title(s) – Opera” (on Opera 11).
And actually, I just now realized that the recent versions of Firefox and Chrome no longer append the browser name to the title bar, which could be enough of a reason for me to drop this approach…
I am missing this seperator in the vote:
»
The pipe looks good and does the job.
I ususally use a / , but in some cases that looks too technical. Then the vertical Pipeline | is better.
Go pipe!!!
I just realized people have awful tastes! How comes the use that gigantic | bar? looks a bit Nazi to me, also, did i mention is awful?
I’d go for the small bullet too:
Page title usually longer than site name · Website name
I’ve been using, pipe (|), · (·) and • (•).
If I had to choose a favourite then I’d go with •.
I’d have to say the pipe |, though I should probably try messing with using dots and dashes once in a while on projects, for variety.
I mostly use ” | ” and sometimes ” – ” !
Pipeline or a double-dash (- -) for me.
Addicted to –
Here are some other possibilities. Can’t say I’ve used any of them but the poll got me thinking about it.
Article►Site
Article ▪ Site
Article ▫ Site
Article ◦ Site
Article ¦ Site
Article ‖ Site
I kind of like the small black square and the small white square and bullet.
Careful with the triangle, it can look awful in some fonts. This is what it looks like on my Mac.
With regards to the poll, I generally use | but lately I’ve become quite enamoured with · and •
Oh, the triangle would definitely be one to be careful with. Actually, I think most of those would be somewhat dangerous, since support for them may be spotty in many fonts. And as the designer you have no control over the font.
Mostly the vertical pipe “|” .
using the one nearest mouse and my hand
That really should be a multi-choice poll, my favourite is the vertical pipe, but I also like a bullet or fancier things like heart glyph.
| (vertical pipe) to separate the site name from a page name. Then a – (dash) to separate a blog entry from the page name.
| vertical pipe 100%
it’s either a dash or a vertical pipe: – |
I like:
*
»
•
›
/
::
>
¦
The pipe. It’s better for SEO. Now if you’re talking about in the post itself, I like pretty things so I usually do an image.
The pipe ( | ) is my go to choice. But I also love the double slash ( // )
It’s funny how Chris described this as being so ‘trivial’, yet this post has amassed over 80 comments and counting — much higher than most posts on CSS-Tricks.
blah > bleh > bluh
for breadcrumbs, and the reverse for the page title:
bluh < bleh < blah
Yeah I agree with the 658 voters (so far)! I prefer the pipe!
I will go with Pipe :) . Its look good that’s why majority webmaster use pipe in Title.
I prefere -.
Vertical pipe “|” #cool
Regars
Ive seen a lot of sites of late using custom images to produce their separators i am trying to implement some custom ones myself but am struggling i must admit
Is that even possible?
I like to use ☣ or §, but most clients don’t agree.
And no one’s mentioned Mozilla Hacks‘s separator: ✩. Poor
✩.Yee-haw! My vote made the pipe the preferred separator of precisely half of the poll answerers, 952/1904. Wonder if it’ll be so well balanced at the time when the poll is closed.
(Oh, and for CSS-Tricks.com, the asterisk should be used as the separator—clearly appropriate.*)
* I deserve a star for this comment, don’t I?
Big fan of the vertical pipeline ( | ) and the forward slash ( / )
I prefer vertical pipe.
Everyone should show their | pipes.
we like · (‘&’middot;)
The middot “•” is a pipe seen from above!
EXCELLENT CHOICE!
Most of the time I have used (-)… But will surely try using two dots ( :: ) in upcoming development….
I prefer using the Kirby separator
or maybe Angry crab
I prefer « or » depending on how the page title has been constructed.
Because an arrow unmistakeably indicates how items are related to one another, and which is more important / upper level.
Colons indicate a relationship, but make items on the left look more important than those on the right.
Pipes and middle dot make items look equal in importance.
I think you all are over thinking your site designs. Normal earthlings don’t really care what separator you use…
My fav is The vertical pipe |
| prefer vertical pipe. |
Definitely the Vertical Pipe |
Now that you mention it, Chris:
Welcome Sarcasm.com ‽ No, I really mean it ‽ We want to hear your feedback ‽
Spare a thought for the accessibility of these separators. Many of them sound horrible in a screen reader: http://www.standards-schmandards.com/2004/title-text-separators/
“Vertical bar” any one (|)? or maybe a nice “double right angle bracket” (»)?
Im still processing this, but I think the problem with most of these choices is that they’re being used as visual rather than semantic separators. Last time I checked most languages had perfectly good prepositions. Try: (article title) by (author) on (site), or variations on that theme.
Do we even need page titles to give us a full breakdown of their place on the site? Surely that’s the job of a good URL structure and in-page navigation? Shouldn’t a title just focus on describing the content unique to that page?
Now if you’ll excuse me, i think i might have to revist a couple of page templates I know about :)
PS. Could anyone espousing the SEO benefits of the pipe (|) point me in the direction of a credible reference validating that position? Everything I see says it’s mostly harmless.
Same as Jachin,
Could anyone tell me why Pipe ( | ) would be better for SEO?
Some SEO cool Guru’s here?
I often use the ( » ) when working with Georgia as font.
In most cases, I use
\(^____^)/Users love it!!!
I would say “|” is the most clean, or “::”
I personally choose the vertical pipeline | too because I thinks it’s the cleanest and a dash can be confusing if you have a dash in your page name. The » is a good second choice for me.
Personally I choose – and | too in my website.
I use – for my Homepage i.e. domain.com _or just domain – Your Website Description
I use | for archive, page, and post i.e. Separator | domain.com _or just domain) – Your Website Description