New Site Design Live! -- Update: Response to feedback

Question

Update May 26, 2016

Thanks for all your feedback. Please continue to provide further feedback if you have it. Based on the comments I've received so far, here are the updates that you should see updated this afternoon:

1. Header -- The navigation size has been reduced as well as the logo. (Request)
2. Answered Color -- The answered and accepted answer status in the question list has been updated to a more desaturated green. (1, 2)
3. Header Styles -- These have been updated so that the post preview looks like the actual post. (Request)
4. Icon Misalignment for "Meta User" -- This has been corrected. (Request)
5. Footer -- The gradient has been removed and a Mode Line styling has been added. (Request)
6. Tags -- These now have a light background behind them to push them off from the page.
7. Badges -- The colors have been brightened.
8. Meta Logo -- The logo will be updated to (emacs 'meta) (Request)
9. Meta Red -- This will be updated to a more desaturated red color. (Request: 2, 3)

...

Concerning Badges

Beyond brightening the badge colors, I didn't change these. Opinions gravitated quickly around an idea where the icon would be ditched in place of wrapping the badge total within parentheses (e.g. (#) (##) (###)). While I think the idea fits this community theme rather well, I am not able to do this without creating a lot of custom CSS. All Stack Exchange network sites follow the same [icon] [#] format.

Here is what we can do:

• (**Current Choice**) Brighten colors within current icon
• Revert the badge icons to the default • style (like on Stack Overflow or Meta Stack Exchange).
• Use a different icon/symbol to represent badges.

If you (the community) wish the badge icons to be changed, please let me know how you like it updated and I will make the necessary adjustments.

Please vote in comments here.

...

Concerning Tags

Again, opinions here were a bit varied. Some liked the quote. Others didn't. All seemed to agree that a background should be added. Before I change the tag styles I'd like to get a better idea of what you want. Here the options:

• (**Current Choice**) Add a background color and leave it as is
• Remove the quote and go with a standard tag style
• Replace the quote with a colon (for a :keyword style) (Request)

Please vote in comments here.

...

Those are all the updates I have. Thanks again for your feedback!

---

Original Post: May 24, 2016

Congratulations! As you can see, the new site design is live.

Along with the site design, the newsletter and chat room will also adopt the new site theme. Reputation levels have been adjusted too.

If find any design/styling bugs, please start a new post and tag it with design and bug.

Thanks and congrats on the new site theme!

Answer 1

Nice!

The quoted tags without a distinctive background are different from what other Stack Exchange sites, but they aren't bad. I'm fine with them.

I do have one nitpick which is the Meta logo. It looks Lisp-like, but unfortunately when seen as Lisp it doesn't make sense. (emacs (meta)) is “emacs of meta”, it's the wrong way round: “meta of emacs” should be (meta (emacs)). Another possibility that makes sense would be (emacs 'meta) (emacs with the “meta” option). (emacs 'meta) has my preference because “,site-name meta” — er, I mean “<site name> meta” — is the way it's shown on almost every other meta.

Answer 2

Update: Thanks for the upvotes but this won't work for technical reasons.

See this comment from a Stack Exchange employee.

---

The empty parens on the badges display are a bit jarring.

How about this? Note that the numbers are the same color as the parens (gold, silver, bronze).

This suggestion comes from @Kaushul Modi in https://emacs.meta.stackexchange.com/a/411/870.

Answer 3

I like the makeover! Thanks!

Things I like

• (emacs) and the blue/white theme
• Tags with single quotes as prefix: 'some-tag
• I in fact like the red meta. Also I fail to see the pink background that Drew referred too. IMO the meta site looks fine.

Things that don't blend in that well

• The () GOLD# () SILVER# () BRONZE# do not seem to blend in well. How about (GOLD#) (SILVER#) (BRONZE#) -- e.g. (1) (4) (12) -- where the numbers have the same color as the parentheses (gold/silver/bronze)?
• The answered questions' vote count area has a solid green background. I realize the answered questions need to stand out. But may be experiment with a transparent green background instead of the solid green?

Overall I would say that this is a great job!

Answer 4

Well here's a version of the badge counts using the (#) format. As I presume the real CSS with its background sprites is generated from SASS or LESS or some such, I'm not using the parentheses image at all for this version (as the necessary background positions would be prone to change). This version is all just coloured text.

/* Badges */
.badge1, .badge2, .badge3 {
    display: none !important;
}
.badge .badge1, .badge .badge2, .badge .badge3 {
    display: inline-block !important;
}
.topbar .topbar-links .topbar-flair .badge1 + .badgecount,
.badge1 + .badgecount {
    color: rgb(200, 180, 0) !important;
}
.topbar .topbar-links .topbar-flair .badge2 + .badgecount,
.badge2 + .badgecount {
    color: rgb(142, 142, 142) !important;
}
.topbar .topbar-links .topbar-flair .badge3 + .badgecount,
.badge3 + .badgecount {
    color: rgb(205, 127, 50) !important;
}
.badge1 + .badgecount:before,
.badge2 + .badgecount:before,
.badge3 + .badgecount:before {
    content: ' (';
}
.badge1 + .badgecount:after,
.badge2 + .badgecount:after,
.badge3 + .badgecount:after {
    content: ')';
}

or, with my actual top bar:

edit1: Having done this, I'm also wondering whether a (# # #) version would look even more apropriate (with either just the numbers coloured, or with each paren having the same colour as the adjacent number -- which would be fiddlier, but maybe worth it if it enhances the visibility of the colours).

Just mocking that up in gimp:

Answer 5

Here's a suggestion for adding M-x into the design.

(The idea, of course, being that each of the main tabs is like a named command.)

It's only on hover, and faded as well, in order that it doesn't seem like a clickable button.

/* M-x */
#hmenus:hover:before {
    content: "M-x";
    font-family: monospace;
    font-size: x-large;
    font-weight: bold;
    margin-right: 1em;
    color: #ccc;
}

Answer 6

Badges Poll

Please vote in the below comments

• (**Current Choice**) Brighten colors within current icon
• Revert the badge icons to the default • style (like on Stack Overflow or Meta Stack Exchange).
• Use a different icon/symbol to represent badges.

I cannot vote on my own comment, but I would vote for the () style. It's unique and I already got used to it.

Answer 7

I have nothing against the () badge logo myself, but there seems to be quite a lot of dislike against it.

We all want to work in an allusion to keyboard bindings somewhere. So how about making the badges look like S- for bronze, C- for silver, M- for gold? The colors already reveal the badge colors so the letter association isn't critical, but the order shift-control-meta follows the “less magic” to “more magic” order of modifiers (shift doesn't make things more magic, the most basic commands use control, and M-x and M-: which prompt for a command to run use meta).

Proof-of-concept with my crappy drawing skills:

Answer 8

I think the bottom menu could be given a little bit of Mode Line styling, to nice effect.

Just a monospace U:--- on the left hand side, and a trailing --- on the right hand side (faded, so as not to appear like something clickable).

I realise that coding sequence won't be the norm for everyone; but I picked the GUI format over the terminal format (as the user is most likely using a graphical web browser), and this site uses html5 (which is utf-8 by default), and so the U makes sense in that context. I wondered whether to use the 'read-only' or 'modified' syntax, but writeable & unmodified seemed the most appropriate for a Q&A web site -- and also looks a little nicer IMO. (I do realise the right-hand hyphens are now a terminal-only thing, but I wanted the balance.)

Something like this...?

(screenshot is with the gradients removed, as per my earlier answer.)

/* Mode Line */
.top-footer-links:before {
    content: "U:---";
    float: left;
    color: #abf;
    font-family: monospace;
}
.top-footer-links:after {
    content: "---";
    float: right;
    color: #abf;
    font-family: monospace;
}

A larger font size for these is maybe even better. I think font-size: 18px; is quite good -- but perhaps fade the colour slightly more at the larger size. #93b1ea (a quick tweak of the actual background) seems quite reasonable to me.

Bonus points: Add Javascript to convert the : into (Unix), (Mac), or (DOS) depending on the user agent :)

Double bonus points: If one of those AJAX "a new answer has been posted", or "a question has been updated" notices comes through, change the mode line to U:**- :)

Answer 9

I really like the design! The the only "problem" I found (it's really minor, OCD-level) is that "Meta user" is squished against "(e)" on the profile page:

It looks a little cleaner on StackOverflow:

---

Aside from quoted tags and monospaced fonts, my favourite aspect of the new design is the use of parentheses for badges. It's a neat idea that sets our site apart from other sites in the StackExchange network.

Answer 10

Yays

• Badges, although perhaps make them a little brighter if the idea is kept
• Monospaced things there and there

Nays

• Gradients
• Choice for colors (both Meta and standard sites). It's a little too blue and not enough purple; and as for Meta, red doesn't fit (too warny)
• The buttons are probably too big (eg. "Questions", "Tags")
• Some tags are hard to see and this makes it harder to read through the page tags (/tags). Though they are fine as is under posts.
• The preview when editing an answer doesn't reflect the changes of styles

Also, what is the reasoning behind the parentheses around "meta" in the title?

Answer 11

I really like the quoted tags. I think that works very well.

In general, I do quite like the new design, but there are a bunch of things I find jarring:

I agree with some of the others that the bronze/silver/gold badge counts don't look good with the number following both parentheses, but moving the numbers inside the parentheses would make it all better.

High contrast on non-critical regions is almost always a mistake. Anything which pulls your attention away from the content is bad, basically. Right now I'm seeing a sidebar box with a bright blue+gradient outline, for instance, which is pretty awful. If you could make these things blend in rather than stand out, that would be much appreciated.

(Toning down the green boxes would be great too. I know that this was a recent StackOverflow change, and I don't know whether we've just inherited that, or if this one is a choice. Or maybe it was like this before, and it just seems new in context?)

I'm definitely not a fan of the colour gradients. Maybe that's inspired by the new Emacs logo? (which I dislike for the same reason -- the previous logo was much nicer... it wasn't flat colour, but it was aesthetically pleasing). I would personally ditch the gradients in all cases. The one in the site logo is probably the most acceptable to my mind. The title underline doesn't look good (almost ignorable, mind, until you notice it...). The footer looks really bad. Nothing in Emacs renders like that. The GUI versions get a few bevel effects here and there, but basically it's flat colours everywhere for pretty obvious reasons. I think the Emacs logo makes a very poor basis for any kind of visual design for emacs.stackexchange.com, so it's unfortunate if that's what's happened here.

(I also don't think the general shade of blue that's used for some of the important UI components is the best match either, tbh, but I think it's mostly those gradients which are really bugging me.)

I think that's it for criticism. Fix the badges. Ditch the gradients. Tone down the contrast. :)

edit1: Ditch the background image. Although it's very low contrast (I didn't notice it at first), I'm filing this under the same category as the contrast issue -- it's simply distracting (now that I see it), for no benefit. Flat colour, please.

edit2: A user stylesheet (for Firefox + Stylish) to deal with the backgrounds and gradients:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("emacs.stackexchange.com")
             , domain("meta.emacs.stackexchange.com")
{
  /* Eliminate unwanted background images and gradients */
  body,
  #footer .footerwrap #footer-menu .top-footer-links,
  #newsletter-ad {
    background-image: none !important;
  }
  #question-header {
    border-image: none !important;
    border-color: #ccc !important;
  }
}

Answer 12

Tags Poll

• (**Current Choice**) Add a background color and leave it as is
• Remove the quote and go with a standard tag style
• Replace the quote with a colon (for a :keyword style) (Request)

I cannot vote on my own comments, but I would vote for the :keyword style, with an enhancement that the : part be in a little desaturated color. So for example, if :org-mode is displayed, : would be gray in color and org-mode would be darker. That way, the actual tag will stand out. And also the whole thing will have a subtle background color.

Answer 13

Great job, well done! I'm not a real fan of gradients, but the site looks beautiful.

Answer 14

Thanks. It looks good overall, with many neat ideas, which show a lot of care was taken, I really appreciate it. Among those ideas I only noticed 2 which don't work well for me:

• The use of () instead of a bullet for badge counts. The idea is cute, but it makes the thing hard to read. If we can have (#N1) (#N2) instead, it might work better.
• The use of monospace for the top menu ("Questions Tags Users ..."). It reminds me of the ugly menus we had back in Emacs-19. That same monospace works well for "active oldest votes" and tag names, OTOH.

BTW, how 'bout renaming (emacs (meta)) to something like M-emacs? Or otherwise integrate M-x somewhere.

Answer 15

Thanks are in order for everyone's efforts, of course.

But if feedback is still welcome, here is mine, FWIW:

• I would like to lose the RED on Meta. All of it. It is especially annoying when used for a large block of text. But it is also annoying in general. There is really no EMERGENCY!!! to alert people to.

• Also annoying (to me):

  • The big bright green boxes around accepted answers.
  • The pink background on Meta.
  • The grayed-pink background for the non-meta part of the site.
  • The pink background for code on the non-meta part.

• I don't think that () works well for showing numbers of badges. Cute should be weighed against readable and meaningful.

• Likewise wrt quoting tag names, although this is minor. Less cute would be better here too.

The new look is a bit like a wrinkled, jaded, 90-year old Hello Kitty.

Just one opinion (sorry). I will get used to it, of course.

---

Let me add that the use of blue on non-meta looks fine. And the logo is nice. It is mainly all the red text on meta that I will have to get used to. (Fortunately, I visit meta a lot less often.)

---

UPDATE After Updated Look & Feel

Looks much better. Thanks. No more bright green accepted-answer box, less-bright red on meta (though I'd prefer it darker still), background on all tags, etc. Big improvement, IMO.

One thing I like less, however: the lighter blue text than before (?). Not great on a white background. Please consider more light/dark contrast. But I see that there are other SE sites with a similar link color, including StackOverflow. Not a big deal, I guess.

Answer 16

What about the Badges tab on the Profile page?

If the (#) (#) (#) or (# # #) suggestions are accepted (and it looks like they will be, woot!) then these should be altered to match, right?

Should they become (Badge Name) or 'Badge Name? I might have answered my own question with that space character in there... :)

Answer 17

Love the new colors and the background, but I think the quotes in tags is kinda tacky. In Lisp, the quote is not a part of the value, it's just syntax; and tags show values.

There are :keywords, however, and they do evaluate to symbols whose names begin with colons. I think tags would look better with colons.

Answer 18

Good job and congratulations. Hope this is a start of more new things for emacs.

Suggestions for future improvements:

• gradient colors, get rid
• make site more compact and readable
• too much white space
• inconsistent fonts/colors for keywords
• get rid of blank parens (); instead use them to enclose numbers (9) or (text)
• if you need more prefix characters, use # or :
• avoid using quote and back-quote characters ' and `
• overall design is a bit old-style, no spark, nothing exciting

Answer 19

Is the logo also up for discussion? I think instead of (e) it should be M-x. This would be more recognizable to people, and it makes emacs.SE look more like emacs.SE, not lisp.SE.

I'm also not a fan of the color and gradient, but as I'm not a designer, I have nothing better to offer.