Responsive design released for all Beta & Undesigned sites

Question

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.

Answer 1

status-completedbug

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:

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.

Answer 2

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

Earlier:

Now:

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

Answer 3

status-planned - 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:

• question 1

• question 2

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

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:

---

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?

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.

Answer 4

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.

Answer 5

status-completed - 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:

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

---

Firefox 62 on Linux. Same in Chromium

Answer 6

status-completed - 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:

Note the blue background box and the icons.

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

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

Answer 7

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.

Answer 8

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

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.

Answer 9

status-completed - 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?

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.

Answer 10

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.

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

Disabled Responsiveness:

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

Answer 11

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

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.

Answer 12

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

Answer 13

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

See:

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

Answer 14

bug mod-tools

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

---

Answer 15

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)?

Answer 16

Can we get better contrast for visited links?

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

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

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

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:

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.)

Answer 17

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

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

(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.

^{(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.

Answer 18

bug

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

The links and everything for currently active events are a little... 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.

Answer 19

status-completed

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?

Answer 20

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:

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:

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

Answer 21

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:

status-bydesign? If yes, what does the size mean?

Answer 22

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

---

Aviation SE: (Source) = good contrast.

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

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

---

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.

Answer 23

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:

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:

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:

Or on GD:

or a be­ta site:

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:

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:

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.

Answer 24

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.

Answer 25

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:

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.

Answer 26

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

Disclaimer: the example answer is one of my own

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:

• https://codegolf.stackexchange.com/questions/36374/redraw-an-image-with-just-one-closed-curve/37092#37092
• https://codegolf.stackexchange.com/a/37092/20283

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.