15

I am excited to announce that international sites have gotten the new responsive design Wednesday, September 26th.

Last week, all beta and undesigned sites got the new theme:

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.

...

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.

As part of the Stack Exchange network, international sites will soon get the new theme as well with the only difference: we will not have testing period, so the theme will be available for everyone.

If you find any bugs and want to report them, please be sure that the bugs are posted as answers to this question. If you have general concerns, please leave feedback on the existing MSE post

Please feel free to post your international community feedback here!

The initiative on international metas

  • 3
    Probably, September 25th of 2019 xD – Suvitruf Sep 26 '18 at 8:24
  • 3
    @Suvitruf 6 to 8 weeks is the desired ETA :p – gbianchi Sep 26 '18 at 14:52
  • As a note, I'm pretty sure there's some content on the edit profile preferences page that will need to be localized, as it's currently in English. For example: ja.stackoverflow.com/users/preferences – Catija Sep 26 '18 at 17:29
  • Awesome! I think the other three languages still need some work, @KacosPro :D – Catija Sep 26 '18 at 21:14

15 Answers 15

15

- We're working on finding the best solution for this. By our own design standards, this shouldn't be title case even on English sites. It might take a bit to figure out but it's on our list to fix. ~Catija

Starting Each Word With Capital Letter Is Incorrect in Russian Language.

enter image description here

For us it looks very unusual and unfamiliar. We use capital letter only for 1st word:

enter image description here

It's all 'cause of this css rule:

text-transform: capitalize !important;

Can we do something with it?

  • 6
    This also applies for spanish languaje, it looks like it comes from this class .tt-capitalize on the div that contains the buttons – user384394 Sep 26 '18 at 22:11
  • 1
    @KacosPro only in this case. Same problem appears on the profile settings page. And there they use #side-menu ul ul li > a {text-transform: capitalize; }. – Suvitruf Sep 26 '18 at 22:20
  • 3
    It must be noted that a lot of style guides prohibit usage of title case even in English. See Microsoft Style Guide, Wikipedia's titling rules etc. – Athari Sep 27 '18 at 18:55
  • meta.stackexchange.com/q/300894/339911 was fixed before for profile settings page. – αλεχολυτ Oct 1 '18 at 19:18
  • @Catija, completed? ^_^ – Suvitruf Jan 31 at 5:22
14

On the review list in SOes, the word publicaciones overflows its container, it doesn't happen on the other international SO sites

Text overflowing its container

I've tested it on:

  • Firefox Quantum 62.0.2
  • Google Chrome 69.0.3497.100
  • Safari 12.0 (13606.2.11)

All in macOS High Sierra 10.13.6

  • Are you sure that the problem appeared with the new design? – Suvitruf Sep 26 '18 at 17:36
  • Yes, I visit that page a lot, it's the first time I see that behavior :) – user384394 Sep 26 '18 at 17:41
  • 2
    @Suvitruf you can compare on web archive. – αλεχολυτ Oct 1 '18 at 18:56
10

Employee note: When Custom Question Lists come to the network they will fix this everywhere in all browser widths by putting any overflowing sort options into a drop down menu:

Preview of how custom question lists will hide overflowing tabs

This has the benefit of looking much better than any stop-gap solution we could implement in the interim and won't necessitate shortening any of your tab lengths. ~Catija


Block is overlapped by the button: https://ru.stackoverflow.com/questions/tagged/javascript

enter image description here

  • Eeesh! That's not right! Fortunately (?) it's only an issue in tags that have bountied questions, so it is intermittent if the page is full-width. Sadly, when the page width is narrowed, the problem comes back, even without the featured tab. :( – Catija Sep 26 '18 at 20:28
9

Not sure, if it is a , but because of the long buttons the text occupies 5 lines https://ru.stackoverflow.com/unanswered/tagged?tab=mytags:

enter image description here

Looks ugly. But if we could move the text above the panel with buttons it will look much better:

enter image description here

Discussion on SOru: Текст описания выборки занимает 5 строк из-за длинных кнопок.

  • 2
    I wonder if there's a shorter way to phrase that? The English text is "N questions with no upvoted or accepted answers". Also, I'm not sure why that has five tabs and the English version has only four. stackoverflow.com/unanswered/tagged?tab=mytags Which one is extra, can you tell me? – Catija Sep 26 '18 at 20:53
  • Ah, it looks like "all" is in a tab instead of being a separate link. – Catija Sep 26 '18 at 20:55
  • @Catija probably, we can rephrase the left button text like "по моим меткам" (the whole info text will be 4 lines), or even "мои метки" (the whole info text will be 3 lines). But maybe this phrase is used elsewhere, so, I'm not sure about it... – Suvitruf Sep 26 '18 at 20:59
  • Have y'all used your meta site to discuss that sort of thing in the past? This might be a good thing to talk about. We want that text to be very clear from a UX position. It seems like we use "метки" in the left nav for "tags", so if "по моим меткам" means "my tags" (or even "моим меткам"), that might be worth considering as an alternate. I'm not the best judge, though. – Catija Sep 26 '18 at 21:06
  • @Catija yeh, usually we discuss things like this on our meta. But I thought, that it's common issue for the other localized sites too, so we could fix it on the design level. – Suvitruf Sep 26 '18 at 21:11
  • The design solution is to wrap the tabs, which makes them taller. It'd be great if we can find a compromise, particularly since one of the words in that tab is so long, even wrapping isn't going to help that much. It'd have to be on three lines! – Catija Sep 26 '18 at 21:16
  • @Catija ok, I'm going to create the post on our local meta about the translation. – Suvitruf Sep 26 '18 at 21:17
  • @Catija ru.meta.stackoverflow.com/q/7986/15479 – Suvitruf Sep 26 '18 at 21:25
  • 1
    @Catija, +1 for adding a separate line for description. – Qwertiy Sep 26 '18 at 21:50
  • 1
    @Qwertiy We may have to do that anyway but if there's any chance of shortening the content of the tabs, that will be helpful also. If all five of the tabs have to stay as-is, let me know, but it sounded like shortening the text on at least one of them was an option, so I wanted to check on that. Also, the tabs would still be right aligned, not left aligned the way they are in the mock up. – Catija Sep 27 '18 at 3:23
6

The tops of the letters from the line below stick out on the tag page. It happens at least on SOru and SOes.

On SOru:

enter image description here

SOes:

enter image description here

SOja:

enter image description here

  • Can you give any more information about what system you're seeing this error in - or if you're still seeing it? I don't see it in Chrome 69 for Mac. – Catija Oct 1 '18 at 16:45
  • @Catija Win7, Firefox 62.0.2 (64-bit), Google Chrome 69.0.3497.100 (64-bit) – Suvitruf Oct 1 '18 at 16:48
  • Thanks. Curious, do you see this on tag pages generally (other than these two sites)? I kinda wonder if it's not a matter of it being language-related, but system-related. I want to be sure that if it's everywhere, we're fixing it everywhere, not just on these two sites. :D – Catija Oct 1 '18 at 16:53
  • @Catija ja.stackoverflow.com or any other non-english sites. – Suvitruf Oct 1 '18 at 16:57
  • Interesting! I can see it on Japanese. Thanks! – Catija Oct 1 '18 at 16:58
  • @Catija already reported on MSE: meta.stackexchange.com/q/290936/339911. And again not related to responsiveness. – αλεχολυτ Oct 1 '18 at 18:15
  • @alexolut I haven't seen this behavior before responsive =/ – Suvitruf Oct 1 '18 at 18:17
  • Thanks for the link @alexolut I'll add it to the bug report so that we can be sure to respond to them both. – Catija Oct 1 '18 at 19:33
5

On Stack Overflow Meta en español the text for people reached (personas alcanzadas) in the profile tab goes out of the page container

Image showing how the text overflows its container

It doesn't happen on the other international meta sites

I've tested it on:

  • Firefox Quantum 62.0.3
  • Google Chrome 69.0.3497.100
  • Safari 12.0 (14606.1.36.1.9)

All in macOS Mojave 10.14

3

Ugly formatting on the question tab in profile page in particular in Stack Overflow in Russian:

enter image description here

Linked report on ruSO: Странное выравнивание элементов в списке всех вопросов

2

Responsiveness doesn't work well with non-English translations which are long enough. E.g. with answer sorting tabs: active, oldest, votes. Встреча участников сообщества в Евросоюзе

Screenshot is from Chrome browser on Android phone LG G5:

enter image description here

  • That doesn't look like it's rendering properly. For me (on an iPhone) the three sort options are in a drop down menu, so you only see the active one at any time, not the others. We haven't optimized for mobile yet, but we'll look at this when we do. This is what it looks like for me in mobile Safari: i.stack.imgur.com/Vnkjn.png – Catija Oct 1 '18 at 20:50
  • @Catija your screenshot is for mobile web version. But the problem is in responsive version of full site. I can achieve same appearance as I reported on my iPad with split mode: see this. – αλεχολυτ Oct 2 '18 at 4:24
  • @Catija as far as I understand the responsiveness will replace (exclude) mobile version of site at all, cause responsive means “work fine on any screen width”, even for mobile devices like phones. – αλεχολυτ Oct 2 '18 at 4:27
  • Whoops, you're right. :/ Sorry... All three tabs fit on my iPhone screen, so it might help to know what your width is or which phone you're using. Right now, we haven't optimized for mobile yet, though, so it's quite likely this is a problem in other places, too. Responsive means "work fine on most screen widths". There's a minimum we'll pick eventually based on standards. Someone was talking about a 100px width the other day... pretty sure we're not going to optimize for that. – Catija Oct 2 '18 at 4:30
  • @Catija you don’t need to use mobile device at all to test, just reduce the browser’s window width on your desktop computer. – αλεχολυτ Oct 2 '18 at 4:47
  • Even doing that, I can't reproduce this. Maybe because Chrome/Mac doesn't allow a small enough minimum window size but when I make the window as small as it gets, all three tabs still fit: i.stack.imgur.com/k2qrB.png That screen width is about 300 px, which is smaller than most phones, from what I understand. – Catija Oct 2 '18 at 4:51
  • @Catija Seems that physical screen (view area) width should be taken into account too. BTW in your recent screenshot the horizontal line is placed incorrectly, i.e. it shouldn't cross tab buttons. – αλεχολυτ Oct 2 '18 at 4:59
  • @Catija This bug can be reproduced on desktop chrome using "Toggle device toolbar" button on devtools. Max width for bug is 358px – Pavel Mayorov Oct 3 '18 at 5:49
  • @PavelMayorov worth noting that my phone screen width is 1440px :) – αλεχολυτ Oct 3 '18 at 6:02
2

"Edit list" and "View network profile" links look merged in community section of the profile page on Stack Overflow in Russian:

merged links

2

Ugly buttons alignment on the Profile Settings page (Edit Email Settings). Also, Off button overlaps 3 hrs button.

enter image description here

Repro: iPhone 5S, Safari

  • This is for mobile web only. Not related to responsiveness. – αλεχολυτ Oct 1 '18 at 19:05
0

The text doesn't fit the container on Profile page in Badges block.

enter image description here

Repro: iPhone 5S, Safari

  • 1
    Only for mobile web. And seems I posted something somewhere long times ago in the far far galaxy... – αλεχολυτ Oct 1 '18 at 19:07
0

No confirmation dialog when you click "wiki post" check box in mobile version.

Repro: iPhone 5S, Safari.

  • Mobile version meaning mobile web (the mobile view) or full site view on a mobile phone? We haven't touched the mobile web view, only the full site view, which will eventually replace the mobile view but isn't optimized yet. – Catija Oct 1 '18 at 21:04
  • @Catija em, mobile view on mobile phone. – Suvitruf Oct 2 '18 at 2:34
  • So, the mobile view isn't part of responsive design, so this hasn't changed and doesn't relate to this announcement post. When the responsive design is finished, the mobile view will probably go away entirely. – Catija Oct 2 '18 at 2:38
  • @Catija hm, got it. Thanks ) – Suvitruf Oct 2 '18 at 8:03
0

Cancel and Next buttons in bounty window have different alignment.

enter image description here

Repro: iPhone 5S, Safari.

0

Similar to another report here, but for "visited days" option on Stack Overflow In Russian Meta:

visited on meta

0

Bad badge rarity icon (point) vertical alignment on the profile page.

enter image description here

  • Where are you seeing this? That's not what it looks like for me, so I need more info so that I can reproduce it - system, browser, etc. This is what I see: i.stack.imgur.com/i7cTb.png – Catija Oct 1 '18 at 21:03
  • @Catija Win7, Firefox 62.0.2 (64-bit). It happens if I chose tracking next privilege. Check it now. – Suvitruf Oct 1 '18 at 21:36
  • OK. I see it. Thanks. – Catija Oct 1 '18 at 21:56
  • This is actually network wide, I think. I can reproduce it here on MSE. meta.stackexchange.com/users/33708/xmm0 – Catija Oct 2 '18 at 2:26

You must log in to answer this question.

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