7

We rolled out the new site theme for Unix & Linux. It is now live.

What new theme?

If you're like, "What the heck are you talking about?", then you should read the Meta Stack Exchange post entitled Rollout of new network site themes (and maybe the posts it links to for the full background).

Your help needed

You are one of the first sites to get a new, unified theme. I previously posted the designs for theme in meta. The feedback given to that post was considered prior to rolling out the theme. Please help us look for issues/bugs and post the details (including images where needed) as an answer below.

If you have concerns or issues regarding the left nav then this Meta Stack Exchange post is the right place for feedback. If you have issues with any functionality that is unrelated to the new theme, then please post a new question.

3
  • 2
    I seem to find the All Questions page h3 headers (each question's link and title) to be less readable. Did it change size or boldness? I suppose it was always a serif font, but I find the sans-serif titles on the equivalent askubuntu page to be much easier to read. Perhaps it is just some setting I have in my browser or an extension that I need to review (I'm using "Dark Reader" to help with contrast).
    – meuh
    Commented Aug 9, 2018 at 17:20
  • 1
    Not to get too meta on Meta, but how do you envision giving feedback to the community's Answer-feedback? A comment on each with "yes", "no", or "maybe"? A summary of the same in the Question? I, for one, am unclear on which elements of the theme are customizable per-site (specifically, ours). There's badge icons, up & down voting arrows, tags, error pages, top bar and image, font sizes, hyperlink styles, and probably others I'm missing. Thank you!
    – Jeff Schaller Mod
    Commented Aug 14, 2018 at 11:10
  • @JeffSchaller I'll edit each answer with a status tag and sometimes add comment to give you an indication of how we are responding.
    – Joe Friend
    Commented Aug 14, 2018 at 15:44

13 Answers 13

24

You've put a lot of feedback in one answer. I'll go through and add comments in this manner to try to respond to each one.

The good

Finally a layout that works with window widths that aren't ridiculously large! Thank you! That alone makes the new theme an improvement, despite its flaws.

The bad

We are working on optimizing the break points. Most view ports have the same or larger line lengths for the main content area. Some are smaller. There is no perfect way around this, but we are looking at ways to make it better. This is complicated by the fact that changes here could significantly impact ad revenue on sites with paid ads.

As for the left nav, we are sticking with it and are focused on using this space more effectively. We are adding features there and will be looking at other improvements such as making it easier to hide/show without going to prefs.

Unfortunately there's a threshold effect. At a width of 816 pixels, the content is laid out in a reasonable manner.

width=816

But widen the window to 817 pixels, and suddenly there's this huge right-hand column which shrinks the content to a ridiculously small area!

width=817

The width of the useful content (the post text) has gone from 88% of the window width to 46%! How does this make any sense? The content should have priority over fluff.

This is with the left bar disabled (https://unix.stackexchange.com/users/preferences → “Hide left navigation”). That left bar contains a few mildly useful links, but these links don't need to be visible all the time, just on the page. Most of the left bar is wasted blank space, so the left bar does not make sense as part of the layout. The left bar should be replaced by a top row of links that scroll away. I'm aware that you're planning to put more links to question links there, but all that stuff still doesn't belong on the page permanently.

It sounds like this is an old bug. If it hasn't been made dramatically worse with the new theme, then it really should be brought up independently. → Difference between "foo" and “foo”, 'foo' and ‘foo’ — and -- as well

A design bug in the old layout was that some punctuation characters are mangled in question titles. Look at this title:

mangled dashes

The meaning of a long dash? Ah, no, it's --, correctly spelled in the title, but mangled in the title, which means that it's mangled in search engine results too. Or look at this one:

mangled quotes

Well, it won't work if you use and : only ASCII characters such as " have a special effect. Oh, wait, once again that's just because Stack Exchange mangled the title, so it looks wrong on the site and in search engine results. This bug already existed in the old design, and your response was

We looked at the quotes on the last several hundred posts. While a few would be more correct without fancy quotes, the vast majority are correct and would be negatively impacted by such a change. Given that, we want to stick with the net-positive of replacing the quotes globally.

Yeah, no, that doesn't make sense. Saying that replacing the quotes is “net-positive” doesn't make it so. It's a cosmetic improvement that can be done manually, versus mangling that affects the meaning and can't be bypassed. Can you please stop mangling punctuation in titles?

We are happy to consider alternate ideas for the site header image. I encourage you to start a separate thread to generate ideas/options and we can work with you to make it happen. Or we can remove it completely. → What should our site's header graphic be?

The site image is really bad. Fortunately it's so faint to be almost invisible, but for those who can see it, it gives an awful image of the site. Here it is with a bit more contrast:

bg-header.darker

At first, when I couldn't really see it due to the poor contrast, I thought it looked like some circuit wiring diagram. Did I stray onto Electronics SE? Upon closer inspection, it contains some vaguely Unixy-things (a couple of punctuation characters that are meaningful in Unix shells), assembled in a way that screams “overly complicated”. The image doesn't need to assemble pieces in a way to make sense, but “overly complicated”? At best that's a designer who didn't do the research, at worst it's pretty offensive. ”Oh, Unix & Linux? Go there if you want to see some needlessly complex, incomprehensible stuff!“ That's a profound lack of respect of our community.

The ugly

We made it very clear from the beginning that we intended to remove this. It wasn't done out of lack of respect at all. It was done in an effort to unify the presentation of several important UX elements across the Q&A sites. After further review we have decided this is an area that we will keep standardized.

Speaking of lack of respect of our community, one of the few unique design elements of Unix.SE was the appearance of tags and some other links with a leading slash, leading to the habit of writing /foo to mean the tag foo. This is gone. Seeing as several sites had a somewhat distinctive appearance for tags ({foo}, /foo, 'foo, etc.), you could have kept that one column in the database. Removing that screams “it didn't exist on SO so we don't care”.

3
  • 5
    All well said points. 110% agree on all of them.
    – slm Mod
    Commented Aug 11, 2018 at 20:47
  • 3
    I do agree with the image 200%...blacklisted the image with adblocking.... Commented Aug 11, 2018 at 22:54
  • Thank you SO MUCH for taking the time to write this up so well. You nailed it. Especially the contempt ingrained in that site image. ...no, especially everything.
    – Wildcard
    Commented Aug 16, 2018 at 20:17
15

The left-hand bar adds noise to the page, which distracts from the main content. Yes, there's noise on the right side, but it gets a lot harder to ignore when there's noise on both sides.

The links there aren't even important enough to be shown constantly, so instead of being visible all the time, they could as well be at the top of the page with the site name (which does hide when you scroll down...). Or let's just say that I've never seen it as a problem to scroll to the top of the page if I wanted to get to unanswered questions, which is rarely (but not never).

Even if I would think a left-hand link bar would be useful, this one isn't: It doesn't give me links that are relevant to me, e.g. links to my favourite tags, or something I'm able to modify for myself. Instead, it just takes space for five static links, all of which would fit quite nicely to the top of the page, next to the main title. There's a bunch of empty space there right now.

And to top it all, the navbar isn't even immediately hideable, which it should be, given how useless it is.

3
  • 1
    I think that if you read meta.stackexchange.com/questions/312781/… you'll see we are currently building something to address at least part of your requests
    – Joe Friend
    Commented Aug 9, 2018 at 21:36
  • 6
    +1. I hate it. Terrible. The actual body of the questions/answers (which I'm most interested in) is now squeezed into a small column, about 1/3 the width of the page. Not broken = don't fix?
    – Time4Tea
    Commented Aug 10, 2018 at 13:14
  • 2
    It's not immediately hideable, which is kind of annoying, but I only had to check the box once and now I never have to see the silly thing again, on any SE site, forever. Obviously it would be better if I didn't have to go find the checkbox, but it's a lot less painful than it could've been.
    – Kevin
    Commented Aug 10, 2018 at 21:20
12

I've always found it extremely difficult to see hyperlinks that are not underlined (I don't have good eyesight or colour vision in general). With the new theme, I'm finding it even harder to spot links in running text and elsewhere.

The screenshots below comes from the current main site and from the current Meta site. I can only distinguish the links in the text on the main site if I know there's a link there, or accidentally move my mouse across it. The links on the Meta site, on the other hand, are really good and visible.

Another positive comment is that the site looks really nice on mobile devices (at least on my Android phone in Chrome).

Screenshot from main site Screenshot from Meta

7
  • 4
    The contrast ratio between regular text and link text is 2.16:1, which is down from the previous design's 2.67:1. The previous contrast ratio didn't meet accessibility guidelines either, which suggest a minimum of 3:1, but unfortunately the new design moved to a lower contrast ratio instead of a higher one. Although contrast requirements have been mentioned in meta feedback many times, SE's designers continue to focus on aesthetics and don't appear to consider accessibility at all when choosing colors.
    – user20460
    Commented Aug 13, 2018 at 18:06
  • 2
    I'll post a bug and have the designers take a look.
    – Joe Friend
    Commented Aug 15, 2018 at 23:48
  • 2
    In the meantime: Is there anything to do to highlight the fact that this is a link to Google(for example)?. Oh... it looks better here in meta than the main page!?
    – Seamus
    Commented Aug 15, 2018 at 23:55
  • @Seamus See this other Meta question that may be helpful: unix.meta.stackexchange.com/questions/4938/…
    – Kusalananda Mod
    Commented Aug 16, 2018 at 5:52
  • 1
    The way theming works at the moment, we'd have to choose a much different color, so I've actually underlined links consistently throughout our new unified themes. For themes with primary colors that don't have a ton of contrast with the body text, this'll help a ton, and this has been a common request over the years. It's been addressed and should go live in the next build. Commented Aug 16, 2018 at 22:04
  • @AaronShekey I just noticed this change and went looking for a comment about it. Thanks everyone for getting this fixed!
    – sourcejedi
    Commented Aug 18, 2018 at 10:00
  • 1
    @AaronShekey it seems to hide underscores though, which can make things look a bit odd. E.g. What can f_bsize be used for? (Is it similar to st_blksize?)
    – sourcejedi
    Commented Aug 18, 2018 at 20:34
10

I'm not an HTML expert, I'm just a site user, and I use a regular workstation/desktop, not a phone. And from my perspective, the major visible change for me is a negative one. There is much more whitespace in the left column. The right column seems to be about the same as it was. And this change in the left column is squashing the text between the left and right columns into a smaller space, which impairs readability.

I can post an image if required, but I think the issue is quite obvious. Please comment if clarification is necessary.

1
  • Images are helpful. Understanding the width of your browser window is the next best thing.
    – Joe Friend
    Commented Aug 15, 2018 at 23:46
8

Is the background image customizable? It doesn’t imply anything U&L to me as-is; could it?

Specifically, this image in the site header.

5
  • 3
    I blacklisted it with adblocking. Commented Aug 10, 2018 at 9:20
  • 4
    When I noticed the image (at least it's faint enough not to be distracting), I thought I'd somehow wandered to Electrical Engineering. It looks like the person who drew it pictures Unix as “that overly complicated thing that I despise”, which I find pretty offensive. Commented Aug 11, 2018 at 15:33
  • 1
    @Gilles same here, I thought it was a EE circuit.
    – slm Mod
    Commented Aug 11, 2018 at 20:49
  • Happy to remove it or to consider alternatives that would work well in the given space.
    – Joe Friend
    Commented Aug 15, 2018 at 23:45
  • Discussion opened here: unix.meta.stackexchange.com/q/4945/117549
    – Jeff Schaller Mod
    Commented Aug 16, 2018 at 22:06
7

Is it intentional to have three “hamburger” menus? The left one opens to Home/Questions/Tags/Users/Unanswered, the middle opens to a Stack Exchange advertisement, and the one on the right is the usual, useful one. Why 3?

enter image description here

7

I agree with the others, the sidebar on the left is just a waste of space, I don't want to devote that much of my screen to those links, either hide them, or put them back on top.

The links are impossible to see now, agree with others on that too. The color on the up/down voting is really hard to see as well on the main page.

Over all I'm not liking this new theme at all and would rather having something that approximates what it was previously vs. this.

Scale of 1 to 10, I'm giving it a 2.

UPDATE #1

Even with the left nav bar links option enabled this is still unacceptable the amount of wasted space on either side, IMHO.

ss1

UPDATE #2

@joeFriend I know I'm not crazy 8-). Here's screenshots of the webapps SE site:

ss2

And the same browser window, different tab of U&L.

ss3

I see a difference, no?

I see it, but it doesn't make sense. There is something going on in that webapps screenshot. See how the site branding bar with the webapps logo extends too far down and intersects with the question title? That shouldn't look like that. If I go to the same page I see this:

webapps question page

12
  • 1
    There's a preference to hide the left bar: unix.stackexchange.com/users/preferences → “Hide left navigation”. It's not discoverable, but at least it's there. Commented Aug 11, 2018 at 15:30
  • @gilles Yup I found it, still it's wasting a lot of space IMO even with that enabled.
    – slm Mod
    Commented Aug 11, 2018 at 15:31
  • Max width of the page (with the left nav unpinned) is unchanged from before. So, that white space you point out in Update #1 has always been there.
    – Joe Friend
    Commented Aug 15, 2018 at 23:51
  • @JoeFriend it wasn't I'm positive.
    – slm Mod
    Commented Aug 16, 2018 at 0:51
  • Please take a look at these three screenshots. While they aren't the U&L site, they show the difference between the old stock theme, the new stock theme with left nav pinned, and the new stock theme with the left nav hidden.
    – Joe Friend
    Commented Aug 16, 2018 at 5:40
  • I'm confident that the results would have been nearly identical for U&L. But if you still have doubts check out U&L old theme via the Wayback Machine
    – Joe Friend
    Commented Aug 16, 2018 at 5:40
  • @JoeFriend when I go into looking at questions is it the same gutters there to? On my systems I see much less.
    – slm Mod
    Commented Aug 16, 2018 at 11:05
  • The gutters on the sides are a factor of the max width of the content area + fixed width of the right side bar and left nav (if showing). The max width of the content area hasn't changed for any page with the new design.
    – Joe Friend
    Commented Aug 16, 2018 at 14:19
  • 1
    One of the problems in introducing significant UX changes to any product is that the change makes people see things anew. The result is you see "changes" where there were none due to all the real changes that were made. It's frustrating for everyone because it makes it hard to get down to the core issues people have with the change. This is a super common experience.
    – Joe Friend
    Commented Aug 16, 2018 at 14:21
  • @JoeFriend - see my updates, I've added SS of what I'm seeing.
    – slm Mod
    Commented Aug 16, 2018 at 16:21
  • @slm There is something going on in that webapps screenshot. See how the site branding bar with the webapps logo extends too far down and intersects with the question title? That shouldn't look like that. If I go to the same page I see this.
    – Joe Friend
    Commented Aug 16, 2018 at 17:25
  • @JoeFriend - I can't access that link. Just edit it into my A'er, or send an imgur link instead of cl.ly.
    – slm Mod
    Commented Aug 16, 2018 at 18:00
6

I see we kept the badge icons; are those going to remain unique to U&L? How much work would it take to update them, as per Icons of the badge counts ?

Are a question's tags standardized, making Pandya's suggestion to keep the slashes in them (at Rollout of new network site themes) impossible?

I'll also pull forward: Is it possible to have the <kbd> for the comma enlarged?, not knowing what work it would entail or what widespread effect it would have.

"/ask question" in the site header should be changed to "/ ask question" should now be status-declined or similar?

Are error pages defined a per-site basis?

4
  • Our initial focus is converting existing themes into the new format. Then we will be working with sites using the stock theme to provide them some level of themeing. After those are done we can consider these type of requests. Sorry for the bad news.
    – Joe Friend
    Commented Aug 15, 2018 at 23:43
  • 1
    Is there a place that describes our site’s customizable elements?
    – Jeff Schaller Mod
    Commented Aug 15, 2018 at 23:48
  • Not really. Our initial post on the plans for themes had a list of takeaways. meta.stackexchange.com/questions/307862/…
    – Joe Friend
    Commented Aug 16, 2018 at 0:19
  • I'm thinking that list of takeaways is a typo for list of taken-aways. :(
    – tchrist
    Commented Sep 1, 2018 at 16:11
6

I am, in short, not a fan of the links on the left-hand side having moved to where they are. Not only does it squeeze the actual meat of the page -- the questions and answers -- into a narrower column, it also causes a lot of wasted negative space below the five links. The same applies to a lesser degree to the more-useful right column.

4

In my opinion, that Unix&Unix bar should be on the bottom, or not be at all there. The small graphic on it is useless and distracts.

The top two bar wastes valuable real estate pixels when in a machine with "limited" pixels as my 3 year old corporate notebook, for instance.

I would prefer The to be part of the top black bar, on place of the Stack Exchange logo, and for the black bar to be smaller. I also find it unfortunate it does scroll up, and it is permanently there.

The navigation fonts are also too big in the area of questions for asking a new question or navigating through the type of questions.

I just used ublock origin and edited out the Unix&Linux bar from the page.

I also find it an odd choice the Home page defaulting to top questions instead of new questions. I would also probably edit out the left bar with ublock origin if it were not for that.

TLDR Overall the design could be simpler. Too much screen space wasted.

3
  • The defaults for the questions that show on the home page are unchanged from the previous design.
    – Joe Friend
    Commented Aug 9, 2018 at 21:32
  • @JoeFriend Some thing change then, because I used to open by default in the new questions, maybe because of browser names cache then. But I get your point. Commented Aug 9, 2018 at 21:33
  • 1
    @JoeFriend, it still shows new questions, but the top bar says "Top Questions" in giant bold letters.
    – Wildcard
    Commented Aug 10, 2018 at 23:24
3

The old mobile (Safari, here) review page had room for all of the review queues. Now there’s two:

enter image description here

Could we make better use of the whitespace?

Could we drop the icon sizes down?

Could we sort the list by number-of-items, descending?

2

The final X in the site logo is a different height to the other letters:

Image of the site logo

Larger image of the logo with guides added

The point of the N is aligned but the main serif isn't. It should probably be the other way, the point of the N going slightly below the baseline.

8
  • Linking in: unix.meta.stackexchange.com/q/4977/117549
    – Jeff Schaller Mod
    Commented Sep 1, 2018 at 16:01
  • Yes, even the new logo is using the wrong glyphs: those aren't small caps, but should be.
    – tchrist
    Commented Sep 1, 2018 at 16:12
  • 1
    This has been fixed. Also the small caps @tchrist :)
    – Catija
    Commented Oct 3, 2018 at 23:22
  • @Catija Thanks for letting me know. The letters in the logo are now all in the same line, but believe it or not they are still not using real small caps. You can tell because the wide parts of stroke widths differ on the full caps from that of the fake ones, like the L’s is wider than the that of the I. Illustration of real vs fake small caps in the Unix & Linux logo. See how that works? The small caps at a given size have identical stroke widths with the rest of the glyphs, just different proportions from the full caps. Once seen, never unseen. :)
    – tchrist
    Commented Oct 4, 2018 at 13:05
  • @tchrist I see them when they're side by side but ... I wouldn't notice otherwise... Regardless, this has been updated again to a heavier weighting and I think it's well and truly fixed now.
    – Catija
    Commented Oct 4, 2018 at 19:24
  • @Catija You shouldn’t need to adjust the font weight on the small caps unless you’re merely faking them. I don’t know how your tool chain works, but I was assuming(?) you were using actual desktop publishing software like Adobe InDesign or Microsoft Publisher to do fancy site logos, layout, and typography work, not mere HTML and CSS browser tricks. You need to get at the smcp feature and the font has to really have them. If you’re stuck in a silly web browser :) this works in Chrome on a Mac: <span style="font-family: Adobe Caslon Pro; font-variant: small-caps;">Unix &amp; Linux</span>.
    – tchrist
    Commented Oct 8, 2018 at 1:23
  • @Catija Except that you don’t want to also small-cap the intervening ampersand, so make two separate spans if you’re trying to do this design work in a browser. But you really should be using desktop publishing software for this. For example, at the display size you need for the logo, the tracking is "gappy" when switching style between the full-cap U and small-cap ɴ, so you might want to tighten the kerning between those two. But ask somebody else cuz I’ve been staring at it too long. :) Once it’s right/real, all broad strokes will be at the same thickness in both; ditto thin strokes, serifs.
    – tchrist
    Commented Oct 8, 2018 at 1:29
  • @Catija It looks “good enough” now, mind you. I’m just trying to explain how things should be done font-wise. It’s possible these days to get at some of these things from a web browser, but site logos will look better if hand set by a skilled typesetter using proper tools actually designed for that purpose, not by using quick browser hacks and emulations of things like synthesized small caps or synthesized font weight.
    – tchrist
    Commented Oct 8, 2018 at 3:38
-1

Thank you very much from saving us from the previous long-standing flickering problem, particularly on the links of the user pages.

Moving this menu list to the left, I see it is clearly an improvement.

On the long-term, I would suggest to take steps into a fluid design direction (or, at least to adapt to the currently wider desktops).

Maybe a little thing: I think, an underline below the hovered links (particularly on the user pages) would look much better. My eye simply flashes if I hover a blue link and I don't get the underline.

On the long-term: I suggest to make steps to the direction of a fluid, or at least partially fluid design. You can make it without losing performance.

3
  • 1
    Never had any flickering problem in two years, in OS/X, Windows, Mac, Linux, iPhone and Android. (no, the downvote is not mine) Commented Aug 10, 2018 at 9:22
  • @RuiFRibeiro I had and I asked also a meta question here, I tracked even the css problem and I've shown it. The question was deleted on unclear and too broad reasons. Now that it disappeared with the new design, it is impossible for me to show it. I used mainly linux+firefox, and the flickering problem still persisted.
    – peterh
    Commented Aug 10, 2018 at 9:46
  • 1
    At the moment using linux+firefox... I am not putting your question in doubt, too many driver issues and hw interactions. I am just saying I never saw it myself. Commented Aug 10, 2018 at 9:48

You must log in to answer this question.

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