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
    Commented Feb 2, 2016 at 12:05
  • $\begingroup$ Longest titles on the site: cs.stackexchange.com/questions/35190/… and cs.stackexchange.com/questions/42852/… $\endgroup$
    – Gilles 'SO- stop being evil'
    Commented Feb 2, 2016 at 12:17
  • 1
    $\begingroup$ @Gilles Thanks, added pictures. Wow, long titles are crappy with either solution. $\endgroup$
    – Raphael
    Commented Feb 2, 2016 at 12:31
  • $\begingroup$ @Paweł Looks like we have a clear winner. $\endgroup$
    – Raphael
    Commented Feb 6, 2016 at 13:27
  • 1
    $\begingroup$ Yeap, this should be live on Monday. $\endgroup$
    – Paweł
    Commented Feb 7, 2016 at 14:50
  • 1
    $\begingroup$ @Paweł Much better, thank you! $\endgroup$
    – Raphael
    Commented Feb 9, 2016 at 12:03

5 Answers 5

Reset to default
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
    Commented Feb 2, 2016 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
    Commented Feb 4, 2016 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
    Commented Feb 4, 2016 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
    Commented Feb 2, 2016 at 13:44
  • $\begingroup$ This is the format that Stack Overflow uses, although that doesn't necessarily mean it's the best. $\endgroup$
    – intcreator
    Commented Feb 4, 2016 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
    Commented Feb 2, 2016 at 13:45
  • $\begingroup$ For titles that are short, this looks really good in my unpopular opinion. But long.. gross.. $\endgroup$
    – Insane
    Commented Feb 4, 2016 at 8:07
  • 1
    $\begingroup$ @Insane That's my impression, too. $\endgroup$
    – Raphael
    Commented Feb 4, 2016 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$
    – Gilles 'SO- stop being evil'
    Commented Feb 3, 2016 at 20:10
  • $\begingroup$ I do hope this was intended as satire. $\endgroup$
    – Raphael
    Commented Feb 3, 2016 at 22:53
  • 2
    $\begingroup$ I pissed myself laughing at this. $\endgroup$
    – Insane
    Commented Feb 4, 2016 at 8:06
  • 1
    $\begingroup$ @Insane Were you around when the internet actually looked like that? I mainly got scared. o.o $\endgroup$
    – Raphael
    Commented Feb 4, 2016 at 11:24
  • $\begingroup$ @Raphael I was around, but not old enough to be viewing the pages! $\endgroup$
    – Insane
    Commented Feb 4, 2016 at 11:27
  • 3
    $\begingroup$ There is one thing missing - it does not blink :-/ $\endgroup$
    – Evil
    Commented Feb 4, 2016 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
    Commented Feb 2, 2016 at 13:45

You must log in to answer this question.

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