16

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

Improve this question
4
  • 3
    Probably, September 25th of 2019 xD
    – Suvitruf - Andrei Apanasik
    Commented Sep 26, 2018 at 8:24
  • 3
    @Suvitruf 6 to 8 weeks is the desired ETA :p
    – gbianchi
    Commented Sep 26, 2018 at 14:52
  • 1
    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
    Commented Sep 26, 2018 at 17:29
  • 1
    Awesome! I think the other three languages still need some work, @KacosPro :D
    – Catija
    Commented Sep 26, 2018 at 21:14

15 Answers 15

Reset to default
16

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

Improve this answer
5
  • 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
    Commented Sep 26, 2018 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 - Andrei Apanasik
    Commented Sep 26, 2018 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
    Commented Sep 27, 2018 at 18:55
  • meta.stackexchange.com/q/300894/339911 was fixed before for profile settings page.
    – αλεχολυτ
    Commented Oct 1, 2018 at 19:18
  • @Catija, completed? ^_^
    – Suvitruf - Andrei Apanasik
    Commented Jan 31, 2019 at 5:22
15

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

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

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

Improve this answer
1
  • 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
    Commented Sep 26, 2018 at 20:28
10

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 строк из-за длинных кнопок.

Improve this answer
10
  • 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
    Commented Sep 26, 2018 at 20:53
  • Ah, it looks like "all" is in a tab instead of being a separate link.
    – Catija
    Commented Sep 26, 2018 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 - Andrei Apanasik
    Commented Sep 26, 2018 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
    Commented Sep 26, 2018 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 - Andrei Apanasik
    Commented Sep 26, 2018 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
    Commented Sep 26, 2018 at 21:16
  • @Catija ok, I'm going to create the post on our local meta about the translation.
    – Suvitruf - Andrei Apanasik
    Commented Sep 26, 2018 at 21:17
  • @Catija ru.meta.stackoverflow.com/q/7986/15479
    – Suvitruf - Andrei Apanasik
    Commented Sep 26, 2018 at 21:25
  • 1
    @Catija, +1 for adding a separate line for description.
    – Qwertiy
    Commented Sep 26, 2018 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
    Commented Sep 27, 2018 at 3:23
7

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

Improve this answer
8
  • 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
    Commented Oct 1, 2018 at 16:45
  • @Catija Win7, Firefox 62.0.2 (64-bit), Google Chrome 69.0.3497.100 (64-bit)
    – Suvitruf - Andrei Apanasik
    Commented Oct 1, 2018 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
    Commented Oct 1, 2018 at 16:53
  • @Catija ja.stackoverflow.com or any other non-english sites.
    – Suvitruf - Andrei Apanasik
    Commented Oct 1, 2018 at 16:57
  • Interesting! I can see it on Japanese. Thanks!
    – Catija
    Commented Oct 1, 2018 at 16:58
  • @Catija already reported on MSE: meta.stackexchange.com/q/290936/339911. And again not related to responsiveness.
    – αλεχολυτ
    Commented Oct 1, 2018 at 18:15
  • @alexolut I haven't seen this behavior before responsive =/
    – Suvitruf - Andrei Apanasik
    Commented Oct 1, 2018 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
    Commented Oct 1, 2018 at 19:33
6

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

Improve this answer
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: Странное выравнивание элементов в списке всех вопросов

Improve this answer
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

Improve this answer
10
  • 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.sstatic.net/Vnkjn.png
    – Catija
    Commented Oct 1, 2018 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.
    – αλεχολυτ
    Commented Oct 2, 2018 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.
    – αλεχολυτ
    Commented Oct 2, 2018 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
    Commented Oct 2, 2018 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.
    – αλεχολυτ
    Commented Oct 2, 2018 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.sstatic.net/k2qrB.png That screen width is about 300 px, which is smaller than most phones, from what I understand.
    – Catija
    Commented Oct 2, 2018 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.
    – αλεχολυτ
    Commented Oct 2, 2018 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
    Commented Oct 3, 2018 at 5:49
  • i.sstatic.net/5oX40.png
    – Pavel Mayorov
    Commented Oct 3, 2018 at 5:51
  • @PavelMayorov worth noting that my phone screen width is 1440px :)
    – αλεχολυτ
    Commented Oct 3, 2018 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

Improve this answer
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

Improve this answer
1
  • This is for mobile web only. Not related to responsiveness.
    – αλεχολυτ
    Commented Oct 1, 2018 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

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

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

Repro: iPhone 5S, Safari.

Improve this answer
4
  • 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
    Commented Oct 1, 2018 at 21:04
  • @Catija em, mobile view on mobile phone.
    – Suvitruf - Andrei Apanasik
    Commented Oct 2, 2018 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
    Commented Oct 2, 2018 at 2:38
  • @Catija hm, got it. Thanks )
    – Suvitruf - Andrei Apanasik
    Commented Oct 2, 2018 at 8:03
0

Cancel and Next buttons in bounty window have different alignment.

enter image description here

Repro: iPhone 5S, Safari.

Improve this answer
0

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

visited on meta

Improve this answer
0

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

enter image description here

Improve this answer
4
  • 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.sstatic.net/i7cTb.png
    – Catija
    Commented Oct 1, 2018 at 21:03
  • @Catija Win7, Firefox 62.0.2 (64-bit). It happens if I chose tracking next privilege. Check it now.
    – Suvitruf - Andrei Apanasik
    Commented Oct 1, 2018 at 21:36
  • OK. I see it. Thanks.
    – Catija
    Commented Oct 1, 2018 at 21:56
  • This is actually network wide, I think. I can reproduce it here on MSE. meta.stackexchange.com/users/33708/xmm0
    – Catija
    Commented Oct 2, 2018 at 2:26

You must log in to answer this question.

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