This is now out for all of the sites

We've had the new default unified theme up on Programming Puzzles & Code Golf for a month and a half now and the response there has been really positive. We got a lot of great feedback from the PPCG community and worked out a lot of trouble spots.

If you've been following the progress on my Tracking Post, you'll know that one of the staff will usually post a discussion on each meta site as the theme rolls out. With so many sites using this theme, we decided it'd be easier to post one announcement here on MSE and feature it so that the entire network can see it and respond in one place, as a bug on one site will probably be affecting all of them.

We don't expect there to be any bugs in this theme (famous last words, apparently), since it's been used for a while on PPCG but if you do see anything amiss, please use this post to point it out so that we can dig into it. Some of your concerns may already be mentioned on the PPCG announcement post I linked at the beginning of this one, so please check there to see if they've been reported yet.

If you have general concerns about left navigation or responsive design, please use the existing MSE post.

Some things to be aware of:

  • Left Navigation is active on most pages (but can be collapsed into a menu by visiting your site preferences - instructions here).
  • Responsive layout is active, which lets the site adjust as browser widths change - no side scrolling (some pages haven't been updated, yet, though). For now, if you prefer the scrolling, you can disable this by clicking the "disable responsiveness" link in the footer.
  • Link underlining is active. In an effort to make links more visible, they are now being underlined.

While this change is definitely something many users have strong feelings about, I'm really excited about this step in particular because it means that some very long-standing communities will be a lot closer to getting custom themes. We have about ten sites that are no longer in beta but haven't gotten a custom design yet, and once this changeover is complete, we'll move forward in designing those sites - and maybe others.

The layout unification is also allowing us to more easily improve existing features like tag watching and develop new features that have long been requested like custom question lists, which is currently in testing. We'd love to get more features out to you all and that's easier when we spend more time working on the new features and less time squashing bugs they cause because we have 60+ very different site layouts.

This is addressed in a Meta Stack Exchange post if you want more detail.


I'll be doing my best to keep an eye out for - and respond to - questions asking about this change on the child metas for all of the beta sites as we transition to the responsive design but feel free to link users here as well.

  • 13
    I've complained about a bug which causes clicked vote buttons to appear with the wrong color on Internet Explorer 11 both here and over on the Travel site, but neither one has received any sort of response. Are there any plans to fix this? – Sonic the Inclusive Hedgehog Sep 20 at 5:15
  • 67
    "positive"... :P – user202729 Sep 20 at 5:42
  • 23
    @SonictheInclusiveHedgehog glad to know people are using IE in 21st century – Optimus Prime Sep 20 at 5:52
  • 33
    @OptimusPrime Some companies force their employees to use it. – Filnor Sep 20 at 6:58
  • 13
    @OptimusPrime Also I occasionally use a Windows RT device, on which no other browser can be installed. – Sonic the Inclusive Hedgehog Sep 20 at 7:11
  • 10
    Does Worldbuilding.SE count as "Designed" site? It has a unique background image, customised vote buttons, etc.. After all there was a decent amount of worldbuilders wanting to keep the uniquely designed parts (like Slartibotfast and Pandora in the Save the Robot! campaign) – ArtificialSoul Sep 20 at 9:24
  • 80
    "We don't expect there to be any bugs in this theme" - Eeeek! Brave words. – Turnip Sep 20 at 9:25
  • 3
    What's about localized Stack Overflow sites? Fore example, Stack Overflow in Russian. Are you going to rollout it tomorrow for us too? 'cause I remember one thread ~3 weeks ago from SE staff where they told that "they will rollout it in 1 week". But, 3 weeks already passed... – Suvitruf Sep 20 at 9:45
  • 44
    …some very long-standing communities will be a lot closer to getting custom themes... the only customised elements are the banner, the font (to a limited extent), the main site's shade of colour and... stop. Bah...humbug. – Mari-Lou A Sep 20 at 13:00
  • 10
    @Mari-LouA I can speak for at least one perpetual-beta site (probably many more) in saying: a custom logo, banner, and color scheme would be a big advance for us! We haven't been "beta" for quite some time, but we can't meet 10QPD either so we languish in the beta treatment. It's demoralizing, and this gives us a path out of that (assuming what SE has said about downplaying beta remains accurate, which I think it does). – Monica Cellio Sep 20 at 14:59
  • 12
    "positive" – Pavel Sep 20 at 16:00
  • 1
    I didn't think links were that much unvisible to turn underline on. Huh, looks like only using custom stylesheets is the way to go to keep old design in place – Mr Zak Sep 20 at 18:04
  • 4
    @Catija - In TylerH's edit he added the Tag [Bug] to the answer. He acknowledged that there is a problem and that the solution is understood in comments beneath the first link in my prior comment above. Also, there is plenty of room without changing the width of the searchbar, see this image showing what I see now compared with the way it was a few months ago. – Rob Sep 21 at 3:13
  • 10
    "it means that some very long-standing communities will be a lot closer to getting custom themes." How does giving a ton of sites the same exact theme make them any closer to getting a custom theme? Is it because the communities will be frantically trying to change the theme once it appears on their site? As a member of Worldbuilding, I feel that this change hurts the site, not makes it better. Shouldn't sites moving out of beta get to decide on a new look other than the default? I can't tell whether this is about fair treatment of sites (Cadillac analogy), or letting them change after beta. – John Locke Sep 22 at 22:27
  • 10
    How about you remove that useless column on the left as well? at least give an option to hide it. It's occupying too much precious real estate on a laptop screen. – mpm Sep 23 at 13:48

26 Answers 26

Looks like the CSS for this disappeared somewhere. We're going to dig through things and reinstate it or something similar. :D ~ Catija

Formatting in the "beta stats" block is cramped and hard to scan:

screenshot

This didn't come up on PP&CG because they're no longer a beta site and thus don't have this block of stats.

  • 14
    Eeesh. That's not pretty. I've noted a similar problem... somewhere. I'll get someone to poke at this, hopefully soon. – Catija Sep 20 at 16:25
  • 4
    @Catija you're probably thinking of Ask Patents, see my question on the respective Meta. – Glorfindel Sep 20 at 16:37
  • 1
    @Glorfindel I wasn't aware of that one but I'll be sure to include it in my bug report! – Catija Sep 20 at 19:27
  • 2
    You'll see this at genealogy.stackexchange.com too – PolyGeo Sep 20 at 21:13
  • 14
    So a theme intended for beta sites was never tested on a beta site all along? The way this appears makes it seem like the stats widget was simply never taken into account when developing the theme. – BoltClock's a Unicorn Sep 23 at 3:58
  • @Catija This now has a question of its own, too: Missing whitespace in beta site statistics box (mainly because searching for bug reports in answers is a pain, so my searching didn't uncover this... I probably should have known to check Monica's profile here first.) – a CVn Sep 24 at 18:25
  • 1
    @MichaelKjörling No worries! Thanks! It's being tracked internally, too, so hopefully we'll get it fixed either way. Having the link will help keep them updated. – Catija Sep 24 at 18:28
  • This looks much better for me now. – a CVn Oct 5 at 8:56

In addition to the issue of spacing already pointed out in this answer, the label Beta now sounds more loudly!

Earlier:

enter image description here

Now:

enter image description here

See the font size of "Beta" - Earlier the difference between font size of "Site-Name" and "Beta" was more that means it was clearly sounding that "Hinduism" is the site name and "beta" is small label. Now, the similar font size is sounding that "Beta" is something like equally important to "Hinduism"!!

Robert Cartaino ♦, one of the director of community development (and who specially keep watch on staging/development process of proposals on Area51) has been a proponent of removing beta label for long time as he said here.

Also recent moderator election on couple of beta has deemed successful. So, the difference between old well running beta sites and graduated sites are getting lesser.

Considering these things into account, emphasizing "Beta" by (capitalizing 'B' and) increasing the font size (i.e giving equal important of beta label to that of site name) doesn't look a good idea to me. So, I suggest to mitigate the effect of beta label

- We're going to review these colors and see if we can make it more obvious when you're on main and meta. One difference I see is that links on beta metas used to be orange and now they're blue (this can be fixed) ... another is that titles on questions on main used to be blue and they're now black everywhere (this won't be changed back). We'll see what other small changes (sidebar color, perhaps?) we can make to help. ~Catija

The color on beta site are very similar to the color on meta site when viewing a question. I don't know if it's done on purpose but it's kind of confusing and I thought that was worth mentioning.

Here if you want to see the differences:

(the first one is on the regular site and the second one on meta).

photoshop image of an IPS question and an IPS meta answer

This was a photoshop image of an IPS question and an IPS meta answer. We can see that the links are blue on IPS and black on IPS Meta but, there isn't much difference otherwise.

Here a two real screenshot from IPS and IPS meta if you want a more complete view:

IPS


IPS Meta

We can see that the colors are very alike.


As Monica Cellio pointed out, there is also the problem of the vote cast colors that are very similar. So, could we have some more differentiation for cast votes between the two?

screenshots of castvote

Can you tell the difference easily?

The differences between main and meta are now very subtle. The text (including question titles) is the same color, the header color is grayish-blue versus gray of the same approximate saturation level, and the site names differ by one letter ("meta" vs "beta"). It turns out that I use secondary cues like these vote colors, not just the primary cue of the actual post content.

  • 31
    Especially when there's only a one-character difference (beta vs meta), other clear markers would be helpful. – Monica Cellio Sep 20 at 17:28
  • 2
    Please add some screenshot images to this post to show the problem more clearly. It's really bad: I keep thinking I'm on Literature Meta instead of Literature because of the greyish colour of the site name in the header. – Rand al'Thor Sep 28 at 7:14
  • Related, and in an answer because once I got into screen shots and stuff, it got too long for a comment. If you want to incorporate what I wrote into your answer so it's all in one place, feel free and let me know so I can delete the separate post. – Monica Cellio Sep 30 at 18:15
  • 1
    @MonicaCellio Thanks, I edited my answer to incorporate yours into it. Since it's kind of the same problem, it made more sense that way. – Noon Sep 30 at 18:27
  • 1
    That's why I suggested you incorporate it. :-) Best to keep it all together, but it was a large-enough change that I wasn't going to just edit it in without your consent. – Monica Cellio Sep 30 at 18:46

In the future, when you make major changes, please announce the date a few days in advance, not a few hours in advance. Also, please either post an announcement on individual sites, or coordinate with all the sites' moderators to post an announcement that's tailored to each site. Regular visitors appreciate being told about major changes before they happen rather than wake up one day and not being able to find their cheese.

Also, please prepare some standard wording to explain what's going on for the average user who doesn't know or care about the rest of the network. The existing meta threads address concerns that these users don't have, and carry historical baggage that is not relevant. What I posted on French Meta could work on any of the language sites, after translation of course.

- Thanks for pointing this out! This was actually a larger presentation bug and fixing it fixed some other header issues for smaller screen sizes. ~Catija

I don't know if this is intentional, but there is very little spacing between the site name and "beta" or "meta" tags, which looks rather odd especially on sites that consist of multiple words:

enter image description here enter image description here

It's kind of a half-space, and looks rather odd.


Firefox 62 on Linux. Same in Chromium

  • 3
    That's odd... but what's also odd is that the font sizes between main and meta logos are different... :/ Oh, wait, they aren't, it seems to be something related to the image upload... well, they are the same size when I look at them directly. – Catija Sep 20 at 17:57
  • 26
    Mandatory XKCD – scohe001 Sep 20 at 18:07
  • 2
    That's probably because my zoom level is slightly different for both domains @Catija – Martin Tournoij Sep 20 at 18:14
  • 3
    This seems intentional, the main header link has display: flex. – curiousdannii Sep 20 at 23:50
  • 10
    I think the big problem with this is how similar they look. At a glance, you could get the two confused very easily. – John Locke Sep 22 at 22:31
  • I think this is status-completed @Catija – Pandya Oct 6 at 6:19

- Whoops! I'm guessing the CSS for this got lost along with the Site Stats box. We'll find the images and get them back where they go. ~Catija

On a beta site that hasn't yet gotten this change (Writing), I see this in the right column:

screenshot

Note the blue background box and the icons.

Here's what I see on a beta site with the new design:

screenshot

Not only are the icons missing, but the section just kind of floats there, unlike the yellow block above it.

  • 9
    And Writing got the design while I was assembling this answer. Just-in-time screenshot! :-) – Monica Cellio Sep 20 at 16:31
  • 1
    Icons seem to still be missing, at least on Writing. – a CVn Sep 24 at 18:39
  • Images seem to be back now. – a CVn Oct 5 at 8:57

This post and many others talk about the new web pages being "responsive" to the browser. My current experience is exactly the opposite - the old web pages adapted to my browser width appropriately, the new pages do NOT adapt to my browser window width.

I'm going to speak specifically about the review queues on electronics.stackexchange.com .

Before the changes were made, the entire window fit on my browser and did not require horizontal scrolling. Now, I have to scroll all the way over to the right to see the action buttons that I need to press when dealing with the question reviews.

I'm running Windows 10 with Google Chrome browser. My browser occupies the entire right half of my monitor which is 1920 x 1200 pixels. That would put the browser window width at about 960 pixels (give or take a bit).

These recent changes make it much harder for me to deal with the review queues.

  • 3
    I am sorry about this! It's something we're definitely aware of. As noted in the question, some of the pages aren't updated to responsive design quite yet. This includes both the review queue pages and the user profile pages. We're working on them and they will be responsive soon. I'll see if I can get some information on when. – Catija Sep 20 at 18:11
  • 9
    You're lucky you can get to those buttons. On my phone the whole review thing is unworkable because the left and right side of the page is cut off. I can't see half the text and can't get to the buttons. :( – Cris Luengo Sep 21 at 15:13
  • This has been reported on Meta Stack Overflow as well. – TylerH Sep 21 at 15:56
  • Oh, also, a silly suggestion but if worse comes to worse, @CrisLuengo this might be somewhat "fixed" by turning your phone to landscape mode, at least to reach the buttons. You shouldn't need to, obviously, but it will probably make those buttons available until we can fix the problem. – Catija Sep 21 at 19:27

I don't know if it's a bug, or a by design, but I have a problem:

enter image description here

Plenty of unused white space, less than half the screen used for the content I want to see (questions).

This is, as you can see, with the left navbar hamburgered. I wouldn't have minded the left navbar, I would have even found it useful, if it made use of some of the white space. Instead, it steals space from the questions (area marked in red), reducing them to about 1/3 of my screen.

The left border of the questions is not aligned with the hamburger or even with the StackExchange logo, the right border of the right bar (the tags and stuff) is not allignedwith the rightmost buttons at the top. On both sides there's way more white space than it seems there should be. (Of course, I would prefer not to have any white space at all.)

My screen is a 28'', resolution 2560X1440. I'm using Mozilla Firefox browser, latest version. Windows 10.

  • 8
    The space is going to be there either way, the main difference between the old and new design is that the new design will hide the background from view and replace it with plain whitespace. You can switch to mobile to get rid of it. See the save the robot campaign on worldbuilding – John Locke Sep 22 at 22:38
  • 3
    The white space has been there always. Even on sites that don't have the new layout, there is white space. If you have the left navigation collapsed (which you do), there is more white space than if you have it open. We set a max width to the sites and that is by design. The alignment of the top bar is assuming the page width including the left navigation. If you turn it on, you'll see that it's aligned correctly. Whether it should be narrower with the left nav off, I can check on. – Catija Sep 23 at 4:45
  • 5
    @Catija: Yes there used to be whitespace but not that much. Setting a max-width "by design" is just plain ugly when 2/3 of the page is whitespace and all of the content is crammed in the center. IMHO this is bad design. – Daniele Torino Sep 25 at 15:55
  • @DanieleTorino You can see the white space by going to any of the sites that don't have the responsive design currently, for example Movies & TV. With the left nav, there's less white space, without the left nav, it's exactly the same. – Catija Sep 25 at 15:58
  • @Catija: Look at this screenshot from Wikipedia (the resolution is bad, but you get the idea) and now look at this screenshot I just took. Do you see that there is about twice as much whitespace as before? – Daniele Torino Sep 25 at 16:08
  • @DanieleTorino That's because your window is wider than the window was when that screenshot from Wikipedia was taken. You can see that in my screenshot here: i.stack.imgur.com/svuMB.png When the content is made the same size, you can see that your browser window is what's causing the extra white space, not a change to our layout. – Catija Sep 25 at 16:14
  • 1
    @DanieleTorino FWIW, the content size has been like this. This is an answer that was posted before the responsive design initiation, and shows the same 660~667px post width (otherwise, the images on the second line wrap to the next line), when using left nav or not, before or after the redesign. – and myself Sep 26 at 2:34
  • 4
    Maybe it's just the Mandela Effect, but I could swear the site looked different last week. But I stand to my opinion, I believe that less whitespace would be a nicer design. – Daniele Torino Sep 26 at 9:05

this "responsive" design breaks viewing on iPads (iPad2, ios 9 [the latest supported on that device], Safari, obviously). the middle column is much too wide and you have to scroll horizontally.

Responsiveness enabled

disabling it returns you to a nicely formatted view again, paradoxically.

Disabled Responsiveness:

enter image description here

The En/Disable Responsiveness option is working per site, not global.

  • I'm going to need more information to look into this - what browser, version, iOS version, etc... what page/s were you looking at? Can you add a screenshot of what you're talking about? "Disabling" what? You can disable the left navigation and/or the responsive design... are you certain that you hadn't already disabled it in the past? This setting is global to the network, not per site. – Catija Sep 20 at 21:20
  • @Catija added info. – ths Sep 20 at 21:37
  • So, the disabled responsiveness seems to be working as designed - you can zoom in and it will side scroll. What isn't working is the responsive design which should rescale for your browser window and not have side scrolling. What version of mobile Safari? – Catija Oct 9 at 17:11
  • the one that comes with ios 9.3.5. i'd be interested to know if users of more modern ipads experience the same issue. – ths Oct 9 at 23:18
  • 1
    I have an iPad Air 2 running iOS 12 and I don't have this issue. I also have an iPhone running iOS 10 and I don't have the problem, so it may be that you're one version too far behind. – Catija Oct 9 at 23:25
  • @ths Unfortunately, this iOS is too old. We're can't reproduce in versions 11 or 12 and we only support current version -1. – Juan M Oct 22 at 15:24

- This is mostly fixed. We've got the icons back and the box is updated. We have a small issue with needing some padding but it should be fixed soon. Thanks for pointing it out! ~Catija

Can we format the "Help us grow!" links to make it more obvious they're different links?

enter image description here

When I first saw this, I was confused why I'd want to email Facebook, Twitter and Google+ about the site until I moused over and found them to be different links. Granted it's been that kind of week over here for me, but it can't hurt to make it more clear. Maybe something like:

Email | Facebook | Twitter | Google+


EDIT: From this post, it looks like these are actually supposed to be icons. That being said, it looks like the icons are still missing and the links continue to appear as smushed text for now.

  • 3
    These are supposed to be icons, and looks like it was fixed quickly – Robotnik Sep 21 at 2:16
  • @Robotnik I realized they were supposed to be icons when Monica posted that answer 9 seconds after mine :) But it looks like it's still an issue. If you're not on mobile you can see it on the right side of this page. – scohe001 Sep 21 at 2:19
  • 1
    We were typing at the same time, clearly. It's all good. :-) – Monica Cellio Sep 21 at 15:49
  • @scohe001 since the problem in your image in the answer has been fixed, it might be worth posting the problem in your comment as a separate answer, so it doesn't get lost. – trichoplax Sep 23 at 11:08
  • Icons seem to still be missing, at least on Writing. – a CVn Sep 24 at 18:39
  • 2
    @Robotnik I think there is some confusion here. The social media links were not fixed. Monica's screenshot shows how it looked before the new theme. She was just lucky enough to take a screenshot before the new theme went live. – Kodos Johnson Sep 24 at 18:41
  • @MichaelKjörling edited my edit to try to make it clear that this is still broken. – scohe001 Sep 24 at 18:42
  • @Monica no, clearly you saw his answer, and found a better explanation in those 9 seconds :) – Cullub Sep 25 at 18:48
  • @Cullub I realize you're joking, but: no, in that case I'd propose an edit, not snipe a new user. – Monica Cellio Sep 25 at 20:47

The "newest" button/tab is missing on top:

enter image description here

I need to go all the way to the bottom, click "complete list of questions", and then I can see the newest questions.

I find this a very useful tab to quickly vet/edit new questions.

edit: The "tags" button is also at the bottom of the page; I use this to check newly created tags and merge them with existing ones.

  • Do you have the left navigation hidden? If not, you can click "Questions" to get to this page which has "newest" on it. "Tags" is also on the left nav. It has basically everything that used to be under the top banner. – scohe001 Sep 20 at 18:11
  • 7
    Even if you do have left navigation hidden, you can access those links in the top bar left side hamburger that is the left navigation, collapsed into a menu. :) – Catija Sep 20 at 18:12
  • 3
    @Catija whaaaaat?! That's news to me. This was the only reason I kept from hiding left nav. Thanks for the tip! – scohe001 Sep 20 at 18:13
  • 3
    Oh, I had completely forgotten about the left navigation @Catija >_< (I hid it as soon as it was introduced on SO, and I tend to just browse my favourite tags there). Still, the hamburger menu is a lot more work than just clicking the tab on top. – Martin Tournoij Sep 20 at 18:16
  • Two clicks instead of one, yeah... but, if you sticky the top bar, you don't have to scroll to get back up to the top, so you save yourself some scrolling. :D The sticky top bar and left nav are two things I really like. I know that not everyone does but I always hated all of the scrolling I had to do to get back to the banner. – Catija Sep 20 at 18:52
  • 1
    Even with the left nav I find it confusing to be honest @Catija; I know there's a separate Q for the left nav, but I don't see why there needs to be a distinction between "home" and "questions"? Seems to me these are mostly the same with trivial differences (and thus confusing)? – Martin Tournoij Sep 20 at 20:06
  • 4
    Actually, I use Home pretty much exclusively and Questions only when I specifically need to see the newest questions, particularly ones that score lower than -3 (or -7 on meta). "Home" is all recently active posts - whether it's been edited, asked, answered, etc... "Questions" is the newest questions list. It doesn't update when posts get edited or answered, it only shows the newest questions. If I want to see "active" I have to click twice, "Questions" and then "active". Instead, I click once "Home" (or the site logo). They're certainly different in my book. – Catija Sep 20 at 20:11
  • I think this was not provided in old theme also. – Pandya Oct 11 at 12:00

The answer count, and "answers" label, is ever so slightly offset relative to the others, for unanswered questions only.

See:

enter image description here

There's a one-pixel offset, plainly visible even without zooming in, which is not present for any of the others.

  • 2
    It looks like this happens because the answers box has a 1 pixel border around it and the votes box and views box don't. This can be easily fixed by applying a 1 pixel transparent border to the votes and views boxes. – Kodos Johnson Oct 7 at 4:55
  • 2
    The border actually induces a small (2 pixel) horizontal shift as well: i.stack.imgur.com/vVJHw.png. I guess Kodos Johnson's suggestion would fix this as well – fhdrsdg Oct 9 at 12:24
  • Hmmmm... Thanks! This seems to be happening pretty much everywhere. Hopefully we can fix it once! – Catija Oct 9 at 21:07

Bug: The new badge notification overlaps with the top labels:

enter image description here

  • This isn't actually related to beta sites. It's a general bug everywhere. :) We're working on it. – Catija Oct 2 at 12:02

The "moderator vacation" section on the admin dashboard is misaligned and a touch too long:

enter image description here


enter image description here

  • I'm pretty sure that check box used to be under the field, not next to it. – Catija Sep 25 at 21:10
  • The "on all sites I moderate" is failing to wrap at all for me, on Chome on Ubuntu: i.stack.imgur.com/f5Sxm.png. On Chrome on Android, the "moderate" wraps. – Mithrandir Oct 9 at 22:07

A suggestion:

On some sites, some of the distinctive look has been lost. I frequent both DBA.SE and SFF.SE, and have a hard time differentiate which site I'm on, unless I'm at the actual top of the page, or read the default text in the search field.

Many sites have an icon (seen, for instance, in the "Hot Network Questions" list. I, at least, am used to glancing at those icons to get an idea of which site the question is for.

Is there any chance that icon could be included somewhere in the top black navigation bar, to help provide a quick visual cue as to the site you're on?

I recognize it might be redundant when you're at the top of the page (on some sites at least, the icon is a part of the site header)? Perhaps if it was to the left of the user info (another element that provides some clues as to the site's identity)?

  • 1
    +1 I was hoping that the top bar and site-specific header could be merged somehow. And the site's logo replace StackExchange logo. I'm not a designer though so I don't know exactly how that could be accomplished. – Kodos Johnson Oct 4 at 2:38

Can we get better contrast for visited links?

Here is what unvisited links look like. The blue stands out from the black.

unvisited, blue

Here is the same post after visiting the link. I realize that links are also underlined, but we're missing some useful signal here:

visited, very similar to black body text

For comparison, on meta visited and unvisited links are clearly different from both each other and the surrounding text:

orange and brown

And on this meta site, we use two different blues that are easy to see; the difference between visited and unvisited is more subtle than on per-site metas, but in both cases it's clearly not the same as the body color:

screenshot from this question

See this answer for more screenshots, which also show the hover color (also hard to see).

I realize that links are also underlined, but if we're using color at all (which I agree we should), I'd prefer that we use three colors (text, unvisited, visited) that are clearly different from each other. If we used the Meta.SE colors on unthemed sites that would be an improvement. (Different improvements are of course possible too.)

  • 2
    @uhoh thanks for posting that, particularly making the animations to show the hover color. I've added a link to it, so please don't delete it -- it's a useful addition. – Monica Cellio Oct 14 at 0:58
  • okay sounds good, thanks! – uhoh Oct 14 at 1:05

The stark green an­swer box is low­er than the oth­ers even when zoomed:

zoom of bad in­verse video ef­fect

You don’t no­tice quite so much when ver­ti­cal, and un­zoomed:

vertical version

(Mi­crosoft users should zoom out to on­ly 67% to see what we Mac users are see­ing here in terms of ac­tu­al screen re­al es­tate.)

How­ev­er, what you do no­tice is how very bold and blur­ry the text in the an­swer box is at the de­fault zoom, and po­ten­tial­ly even hard to read if you did­n’t al­ready know what the text you’re read­ing was sup­posed to be say­ing.


Fat and fuzzy “light-on-dark” text buttons

I have a much more de­tailed write-up of the light-on-dark prob­lem in this an­swer, where it was con­firmed by Jon Eric­son.

As I’ve point­ed out else­where, that’s be­cause you can’t do light-on-dark text on a we­bkit brows­er on a Mac with­out it look­ing bad un­less you tweak the CSS from the de­faults. You should be able to use some­thing like -webkit-font-smoothing: antialiased to make such text less nasty. You’ll ap­par­ent­ly al­so need -moz-osx-font-smoothing: grayscale. Sub­pix­els with col­or are kill­ing you.

So is the teensi­ness. That fat white-on-green “an­swers” on­ly mea­sures 12 mil­lime­ters un­der Chrome on a Mac, so less than a half an inch. It’s pret­ty hard to read, so when the sub­pix­el-alias­ing mode of the ren­der­er blurs the for­mer­ly crisp white edges in­to its sur­round­ing col­or, it’s a mess.

This on­ly hap­pens with light on dark text on a Mac un­der a web­kit brow­ser, but it makes ev­ery site that us­es the new de­sign a whole lot worse wher­ev­er you use light on dark text. Which is in a dread­ful lot of places.

Who­ev­er is cod­ing up these de­signs needs to take a good hard look at them on non-Mi­cro­soft sys­tems. You’ll be real­ly sur­prised. horrible mac botch

(Mac on left all blurry and bold, Windows on right)

I can’t imagine the designers were ever aware of what they’ve done here with this sort of text, because it’s so obvious once you actually look at it using any webkit browser on a Mac that I’m certain they’d have done something about it if they’d known.

Can't check on the other sites, but, at least, on SOru on mod tools page https://ru.stackoverflow.com/tools used different font size:

enter image description here

? If yes, what does the size mean?

  • 2
    Smaller font size indicates an answer, larger font size indicates a question. It's been like this for a while on most of (I thought all of) the network... is it possible that you hadn't noticed it prior to today? – Catija Sep 26 at 15:17
  • @Catija probably. But right now it's hard for me to tell, is it a new thing or not. I mean, in general, it's hard to test this things without specific tools =/ Any ways to open site with old style for tests? – Suvitruf Sep 26 at 15:18
  • Not if it's pushed live immediately. The font size difference is intentional, though. We do this in a few different places. – Catija Sep 26 at 15:31
  • @Catija ok. If I found the bug on SOru (but, probably, it also appears on the other localized non-english sites), should I post it here? – Suvitruf Sep 26 at 15:32
  • @Catija: Wow, do you realize that what looks obvious to you, an insider, just looks like a mistake to others? Why not use, I don't know, Q and A to make those distinctions? We're supposed to "be nice" to the new users, but I suppose that doesn't extend to making the sight open and clear in its communication? – Robusto Nov 18 at 23:27

On the /admin/community-events page, things are a little... broken.

The links and everything for currently active events are a little... smushed:

smushed

Second, when creating a new event, if I try to type anything in the "Don't start event promotion" text field, nothing shows up, and I can't set anything, leading to it claiming to have started promotion 17 and a half years before Stack Overflow existed.

  • This is not specific to unthemed sites, I've just discovered. I added a bug report on the main page for the new design, linking here as well. (I was able to get both before & after screenshots.) – Monica Cellio Oct 11 at 3:28

I was just looking at Ask Patents.SE and wanted to take a look at the site stats to see how close to leaving beta the site was. I scrolled down to the stats and clicked the link to Area 51 and... the link was broken.

The link took me to https://area51.stackexchange.com/proposals/lookup/patents.stackexchange.com and gave me a 404 error.

I don't know if this is a problem with the new design, beta in general, or with that site's Area 51 page, but I'll post it here just so everyone can see it.

I also have no idea if this bug is local to that site, or if it's on other beta sites, I'm going to take a look at some of the other beta sites and update here when I figure out.

Update:

The bug appears to be endemic to Ask Patents, the links on other sites work fine. I tried to find the site by searching in Area 51, but it doesn't show up. Maybe Patents is leaving beta, so the Area 51 page was deleted, but the site stats page box shows up?

  • We don't delete Area 51 pages after sites leave beta - I'm not sure that AP ever had one. That said, this has been addressed by removing this box from that site. – Catija Oct 9 at 3:48

It’s great to finally be able to use the full site on a cell phone!

I’m not sure you have your containers set up correctly for portrait mode, though. Landscape on this post looks basically ok:

landscape demo mode

But look at how in portrait mode there a huge amount of blank space where the question title isn’t allowed to flow into beneath the “Ask Question” part:

portrait mode demo

In case it’s relevant, this is on Android, specifically on a Samsung Galaxy S7 model.

  • It has been monetioned before that they are not officially supporting the responsive design for mobile devices yet. Which is why you explicitly have to click the full site link at the bottom (otherwise you will still get the mobile theme). I think they are going to work on the shortcomings of the responsive site for mobiles. – Kodos Johnson Oct 22 at 19:12
  • Ugh, that sans serif Hebrew. – curiousdannii Oct 24 at 23:30
  • @curiousdannii Thanks, I’m glad somebody noticed; I sure did. For a good(?) time, and relevance to the Christianity SE site, see my new bug report on Ransom-note problems with IPA and Greek under new font stacks. – tchrist Oct 25 at 3:45

New foot­er text is very hard to read

The new foot­er text shared by all new-de­sign sites is very hard to read, es­pe­cial­ly here on MSE. Here, click on this and then you try to read the copy­right text at the bot­tom right:

MSE copy­right foot­er

There are three dis­tinct prob­lems with this text.

  1. At just 11 points, it is far too small to read in Ari­al on mod­ern wide dis­plays. See this bug.
  2. There isn’t enough con­trast be­tween the text col­or and the back­ground col­or.
  3. The light-on-dark text is be­ing ren­dered in­cor­rect­ly un­der Chrome and Fire­fox on a Mac, a mal­adap­tive ef­fect made even worse when bold is spec­i­fied.

That third point I ad­dress defini­tive­ly in this an­swer, where it has been con­firmed by Jon Eric­son as a bug.

The sec­ond point is eas­i­ly proven by any num­ber of tools to de­ter­mine ac­cept­able con­trast on a web page.

All three of those MSE points like­wise af­fect Stack Over­flow it­self:

stack over­flow foot­er

Even when try­ing to read it on a site that is­n’t do­ing light-on-dark, like ELU, it’s still re­al­ly hard to read some­thing this small with such poor con­trast be­tween the fore­ground and back­ground col­ors used here:

ELU foot­er

Or on GD:

GD footer

or a be­ta site:

por­tu­guese lan­guage foot­er page

Even once you fix the con­trast prob­lem and the Mac-spe­cif­ic ren­der­ing prob­lem, you are stuck with text that’s too small to read. Ari­al was nev­er de­signed for such tiny sizes as you are us­ing here. Here are a bunch of sans-serif faces all set at 11 points:

11-point com­par­i­son of var­i­ous type­faces

The prob­lem is that Ari­al is much less read­able at tiny sizes than some­thing like Ver­dana is. Heck, even Com­ic Sans does a bet­ter job at this! The font met­rics are not de­signed for such small text, and you aren’t do­ing it any fa­vors with your con­trast games ei­ther. The let­ter­spac­ing needs to spread out on the tiny text so it can breathe! Other type­faces know to do this au­to­mat­i­cal­ly, but not Ari­al: one size does not fit all.

I strong­ly rec­om­mend switch­ing to Open Sans or De­ja­Vu Sans or Ver­dana. Lu­ci­da Sans Uni­code has the added fea­ture that its nat­u­ral line spac­ing is more gen­er­ous to al­low for com­bin­ing char­ac­ters.

Speak­ing of which...

ʗãɲ͡ɳõᵵ réǡð țäɡŝ ẘıťɦ ðî­ɒ¢ɾíƫ­ìçš øñ lån­ᵹuḁᵹǝ ʂἵẗϵς

Another place where you use this ti­ny 11-point Ari­al is for tags, and that makes it next to im­pos­si­ble to read text with di­a­crit­i­cal mark­ings on it. Watch:

di­a­crit­ic sam­ple at 11 points

Those are all set at 11 points again, just like we do for tags on lan­guage sites. Which of those can you clear­ly read the var­i­ous di­a­crit­i­cal mark­ings on? Here again Ari­al comes out pret­ty much worst-of-show, with its blur­ry lit­tle scrib­bles in­stead of clear di­a­crit­i­cal mark­ings. Just look at how much clear­er an­cient Ver­dana is at this point size! Can you for sure tell which mark is which on the Ari­al line there? I sure can’t. Tags are meant to be read. These you are not able to, not for sure.

This would all be fixed by us­ing some­thing oth­er than Ari­al, but I still think that at 11 points it’s much too small even if you do switch to some­thing whose tags can be read when set so small — un­like Ari­al.

See attached photo. Solved. 😁

I would like it even better if the left column was removed.

It's a waste of space. Please move the 5 items there to a small horizontal menu at the top.

And any featured meta post notifications should be on that same line. As it is now, people are not going to see them unless they scroll all the way down.

Chrome on a 9.7" Android tablet.

enter image description here

  • 5
    This is general to the left nav and not really something we can talk about on this post - it's by design and we don't have any plans to get rid of the left navigation. Please see the discussion on this post. You can disable the sidebar following the instructions in the question but you won't get the links back in the banner. – Catija Sep 20 at 17:55
  • 4
    @Catija I think you have not thought your answer through - for example - how can you disable it without logging in? – Steven Penny Sep 20 at 19:38
  • 4
    @StevenPenny I'm not sure I understand what you're getting at. You can't disable the left nav if you're not logged in. This is by design. We feel that these links are important to be accessible, so they are visible by default, rather than hidden behind a hamburger - unless you're viewing on a small mobile device, when it's in a hamburger by default. This answer has nothing to do with users who aren't logged in, though. – Catija Sep 20 at 19:42
  • @Catija Thanks! The fix on the linked page (sorry I overlooked that) seems to be just perfect for tablets! :-) BTW, I've never seen so many downvotes. Maybe they didn't do that? – Mike Waters Sep 20 at 19:50
  • 1
    Glad to hear it! :) The font size change you mentioned in the comments on the question will probably be fixed when we actually optimize the layout for mobile, which it isn't right now. Does your device let you choose font size in the browser? I know some browsers do. – Catija Sep 20 at 19:52
  • Yes, but it's not site-specific. No worries. I'll go away now. ;-) – Mike Waters Sep 20 at 19:57
  • Added screenshot, FYI. I can delete this if you wish, @Catija. – Mike Waters Sep 20 at 23:21
  • 1
    It's still good to have if others have similar problems. :) – Catija Sep 20 at 23:22

Beta and Meta looks very similar. They only differ by a single letter and a subtle change in colour. Stealing the screenshots from Martin Tournoijs answer:

enter image description here
enter image description here

I know, I have learned to read in school so I should be able to tell the difference between a Beta and a Meta. But still. I've found myself thinking, "why is this on Meta?", realising that it isn't. I'm not a graphic designer and I don't immediately have a solution to propose, but I would welcome a design where the distinction in the banner is more than a single letter and a quite subtle colour change.

  • The title logo is set with the wrong tracking for that display size: just look at the huge gaps. When you set text at display sizes, you need to either use a font that’s designed for this — which I promise you, Arial is not — or else you have to manually adjust the letter-spacing in the CSS. Or better yet, actually use something like Adobe InDesign or Microsoft Publisher for doing actual design work, not a silly web browser. :/ – tchrist Oct 25 at 3:44

edit: I've just noticed that this other answer also here addresses related color issue.


Aviation SE: (Source) = good contrast.

good mouseover highlighting contrast

versus previous Beta implementation = bad contrast. (was already noted 1, 2)

bad mouseover highlighting contrast

versus NEW Beta implementation = even worse contrast! (but has nice underlines)

EVEN WORSE mouseover highlighting contrast


note: for those with GIFs disabled in your browser, the above images are all GIFs, but you hardly notice the change in the 2nd and 3rd because the two colors are nearly identical.

  • I don't know how to get a reliable eyedropper measure of the RGB values for the old and new beta font color shifts, otherwise I'd include it as well. – uhoh Oct 13 at 6:59

Direct link to an answer misaligns the top of the answer second time

Disclaimer: the example answer is one of my own

misaligned answer

The top of the answer is cut off, but not when first accessed. I have a slow connection so by the time the page has finished loading the content size has changed and the viewport is not showing the answer linked to. I have to manually click into the address bar and press enter after page load has finished in order to get the page to scroll to the linked answer (not part of this problem - just a step to reproduce the misalignment).

On a fast connection that displays the correctly aligned answer immediately, the same problem can be triggered by scrolling away, and then clicking into the address bar and pressing enter.

The alignment now appears to be to the top of the page, behind the top bar, so the first line of the answer is obscured, whereas on first page load the alignment is correctly to the bottom of the top bar, so nothing is obscured.

Both long and short answer links appear to give correct behaviour at first, then misalign on pressing enter in the address bar:

My operating system is Fedora, and I can only reproduce this in Firefox. Chromium appears to do a page reload on pressing enter in the address bar, rather than just scrolling to position specified by the internal link #37092, so the problem is never seen (at the expense of redundant page loads).

I asked in chat and others are seeing this on Firefox for Windows and other Linux distibutions too.

You must log in to answer this question.

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