14
$\begingroup$

Our pretty new design has gotten bad feedback regarding centered question titles from several users.

Paweł already said he's going to change them back to the more standard left alignment, but I think the middle-ground version is worth looking at. Plus, I think the feedback should be collected in proper form, and not just as a bunch of comments mixed with other feedback.

Therefore I have mocked three versions; please vote on which you prefer, and add other variants I have missed. Thanks!

The vote was open until February 5th, 23:59 GMT (plus the time it took me to wake up and think of checking here). We've notified Paweł of the result.


Vote count (Feb 6th, 12:25 GMT):

  • Left-aligned, breaking before sidebar: +18/-2
  • Left-aligned: +12/-0
  • Centered over text: +3/-6
  • Bouncing marquee: +2/-6
  • Centered: +1/-10
$\endgroup$
6
  • $\begingroup$ Does the impression change with longer titles, in particular such that overflow? $\endgroup$
    – Raphael Mod
    Feb 2 '16 at 12:05
  • $\begingroup$ Longest titles on the site: cs.stackexchange.com/questions/35190/… and cs.stackexchange.com/questions/42852/… $\endgroup$ Feb 2 '16 at 12:17
  • 1
    $\begingroup$ @Gilles Thanks, added pictures. Wow, long titles are crappy with either solution. $\endgroup$
    – Raphael Mod
    Feb 2 '16 at 12:31
  • $\begingroup$ @Paweł Looks like we have a clear winner. $\endgroup$
    – Raphael Mod
    Feb 6 '16 at 13:27
  • 1
    $\begingroup$ Yeap, this should be live on Monday. $\endgroup$
    – Paweł
    Feb 7 '16 at 14:50
  • 1
    $\begingroup$ @Paweł Much better, thank you! $\endgroup$
    – Raphael Mod
    Feb 9 '16 at 12:03
18
$\begingroup$

Left-aligned, breaking before the sidebar

Even with left-alignment, we may not want titled to flow over the sidebar:

enter image description here

Reproduce by combinging text-align : left; with padding : 8px 320px 11px 20px; on div#question-header.

$\endgroup$
3
  • $\begingroup$ I think the whitespace left for long titles is wasted. Long titles are bad in every of the variants, but using the space above the sidebar can help save vertical space at least. $\endgroup$
    – Raphael Mod
    Feb 2 '16 at 13:44
  • $\begingroup$ Most long titles barely overflow into the area above the sidebar, which is why I don't like the fact that just one word would break to the next line in that case if this design is implemented. $\endgroup$
    – intcreator
    Feb 4 '16 at 7:36
  • $\begingroup$ @brandaemon I guess that's true for any breaking point. We'd have to look at the distribution of title lengths to see if such events are more or less likely with longer or shorter title areas. $\endgroup$
    – Raphael Mod
    Feb 4 '16 at 7:39
13
$\begingroup$

Left-aligned

The network standard (the distance from the left border may have to be tweaked):

enter image description here

enter image description here

Reproduce with changing div#question-header to text-align : left;.

$\endgroup$
2
  • 1
    $\begingroup$ Title over the sidebar looks weird. Well, long titles are bad in every of the variants, but using the space above the sidebar can help save vertical space at least (compare with the alternative). $\endgroup$
    – Raphael Mod
    Feb 2 '16 at 13:44
  • $\begingroup$ This is the format that Stack Overflow uses, although that doesn't necessarily mean it's the best. $\endgroup$
    – intcreator
    Feb 4 '16 at 7:19
-2
$\begingroup$

Centered over the text

A quick mock (adding 300px to the right padding to account for the sidebar):

enter image description here

enter image description here

Reproduce with changing div#question-header to padding : 8px 320px 11px 20px;; note how the right padding gains 300px, exactly the width of the sidebar.

$\endgroup$
3
  • $\begingroup$ This is far less weird than the "center over everything" variant, but there is lots of wasted space with long titles. $\endgroup$
    – Raphael Mod
    Feb 2 '16 at 13:45
  • $\begingroup$ For titles that are short, this looks really good in my unpopular opinion. But long.. gross.. $\endgroup$
    – Insane
    Feb 4 '16 at 8:07
  • 1
    $\begingroup$ @Insane That's my impression, too. $\endgroup$
    – Raphael Mod
    Feb 4 '16 at 9:28
-5
$\begingroup$

In a marquee, bouncing between left and right

This seems like a reasonable compromise between center, left and right alignment.

enter image description here

$\endgroup$
6
  • 6
    $\begingroup$ <shudder> <whimper> <croak> $\endgroup$ Feb 3 '16 at 20:10
  • $\begingroup$ I do hope this was intended as satire. $\endgroup$
    – Raphael Mod
    Feb 3 '16 at 22:53
  • 2
    $\begingroup$ I pissed myself laughing at this. $\endgroup$
    – Insane
    Feb 4 '16 at 8:06
  • 1
    $\begingroup$ @Insane Were you around when the internet actually looked like that? I mainly got scared. o.o $\endgroup$
    – Raphael Mod
    Feb 4 '16 at 11:24
  • $\begingroup$ @Raphael I was around, but not old enough to be viewing the pages! $\endgroup$
    – Insane
    Feb 4 '16 at 11:27
  • 3
    $\begingroup$ There is one thing missing - it does not blink :-/ $\endgroup$
    – Evil
    Feb 4 '16 at 18:21
-9
$\begingroup$

Centered

The current version:

enter image description here

enter image description here

Reproduce: leave div#question-header with text-align : center;.

$\endgroup$
1
  • 2
    $\begingroup$ This one I like the least. $\endgroup$
    – Raphael Mod
    Feb 2 '16 at 13:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .