New site design v4: report any problems here

Question

Hopefully you've noticed the new look! You can see a full rundown of what's changed over here but the short version is that Pokebase now works better on mobile, as does the site navigation. For the most part everything else is the same, just with a slightly improved look.

Let me know in this thread if you find any problems with the new design (by posting an answer). And feel free to post your thoughts! Hope everyone likes it.

Comments

I'm one of the only people who actually really likes these changes lol.

---

Has the Wall post limit been shortened? Because it sure seems like it was. I only posted a few things and now I can't respond to anymore people this hour. What gives?

---

Why can't I comment on Fizz's answer? I really wanted to say, "nnnnnnnnnnnnnnnnnnnnnnniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiccccccccccccccccccccccceeeeeeeeeeeeeeeeee cccccccccccccccccooooooooooooooommmmmmmmmmmmeeeeeeeeeeeeeeeeeeennnnnnnnnnnnnnntttttttttttttttsssssssssssss yyyyyyyyyyyooooooooooouuuuuuuuuuuu gggggggggggooooooooooottttttttttt hhhhhhhhhhheeeeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrreeeeeeeeeeeeeeeeeeee"

---

@sumwun I gave one answer in the other thread about the stat bars, it’s difficult to distinguish quite a lot of shades. Mainly, just as a personal preference I like having a fixed set of colours (which are also used in other places across the site).

---

Pm I think you broke something. Text wasn't stretching on desktop earlier but is now

Answer 1

Late to the party it seems, but I've collated a set of screenshots that should help fix some early errors. In no particular order:

1. Though it seems fine the majority of the time, I saw able to replicate the error EdDaBoss reported here using an old 6th gen iPod (the 2015 release). The search box stretches the page into the grey background. Eventually coerced Imgur to upload a screenshot.

2. This might be personal preference, but I really don't like the change to the layout of account pages. Desktop size browsers would load them like this prior to the update, which looked great. Now, it feels like I'm loading pages scaled for mobile on my monitor. Looks kinda gross.

3. The top margin on dividers (seemingly the <hr> tag) is 8px higher than the bottom margin. This causes them to look slightly uneven, as illustrated here. Taken from here.

4. On some (but not all) pages of the main site, the sub-navigation menus leave a gap beneath the main bar, as seen here. This seems to happen everywhere except the home page, and PokeBase.

5. The red message that says 'This post is waiting for your approval' has no margins and awkwardly sticks to the top of posts. Screenshot.

6. New answers now appear really closely after each other, as seen here. Might get used to it, but it looks claustrophobic and I much prefer the old spacing.

7. The action buttons in the corners of answers are missing their old margins, which looks especially obvious when they're selected. Really ugly.

8. Avatar sizes didn't get upscaled like everything else, which makes them look very small. I suggest bringing them up.

9. The space between PokeBase's main navigation bar and the 'Ask a Question' button has disappeared. This might be intentional, and I may get used to it, but I don't like it much. The distinction is good.

10. The spacing around the voting arrows (especially to their left and right) is wider than it was before, and looks a bit too much now.

11. Mobile optimisations are a bit odd on question pages, particularly the vote buttons which don't wrap bodies of text nicely.

12. Clicking away from the sub-navigation menus on mobile does not cause them to disappear. Makes it annoying when you misclick the main bar.

13. The loading spinner that appears in PokeBase has no spacing to its left, which causes it to stick the button adjacent. This doesn’t look fabulous either.

14. Long lines of unbroken text cause pages to stretch. This has always happened on user walls, but now happens everywhere. So they lack a max-width and scrolling property:

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

I'll continue to update this as I get used to the new design.

By the way, while we're on the subject: have you considered a major update to PokeBase's CSS as well? I feel the pastel colours don't fit the modern theming elsewhere on the site, and the UI has fallen a bit behind modern standards (e.g. becoming less text heavy, cleaner buttons, sticky nav bars, not scrolling as far to reach content on mobile etc.). I think an update here would complete the look.

Comments

Users' listings aren't in order by pointage…

EDIT: found out its not in order down-to-up, but it IS in order right-to-left.

---

1: I cannot find what the problem is with this. Does it happen on every page (with the same device)? Can you tell me what your iOS version and browser version is please?
2: A lot of people have said the same, so I'll look at fixing this.
3: Fixed.
4: Yep saw that yesterday and fixed it.
5: Fixed.
6: Noticed that before I got here :) now fixed
7: Presumably you're talking about the edit/flag/hide buttons? Tough one to fix, because adding a top margin makes them mis-aligned in certain circumstances (like when there's no avatar). Will try and find a solution.
8: Can you be more specific? Which pages have incorrect sizes?
9: Yes this was intentional, the extra spacing looked weird at certain screen sizes. I made the Ask button a different colour to be more distinct.
10: The width of that 'block' is the same as each of the blocks on the question list (X votes and X answers). That was the case on the old design too, it's just that all the blocks are slightly wider. You'll probably get used to it :)
11: Yeah I couldn't figure out a good way to do this, adding them to the left makes the question/answer content too narrow. Could maybe do it horizontal like this: ▲ 2 votes ▼  but it looks a bit strange IMO.
12: You can click the same menu item again (e.g. 'mechanics') to hide the menu. On mobile the sub-menus take up most of the screen so there is not much else to click on. But I guess it would be useful.
13: Now fixed.

> have you considered a major update to PokeBase's CSS as well?

Um... this was it. We're using some of the same colours as the main site, which also uses pastel colours in several places. The buttons are the same too.

@Jason Yes it's left-to-right now, that's really the only way to make it work on mobile (otherwise they're out of order on mobile).

---

1: Sorry my description was poor. The error only occurs on this device (of those I tried), and does not on the others I tried (which are all newer, and instead show the search bar beneath the rest of the buttons). This is despite the fact it’s running the same iOS version as a newer device I tried (10.0.1). The issue occurs both in Safari and Chrome (latest version). As far as I can tell, this problem relates specifically to the device: perhaps screen width? Both this device and Ed’s 5c are 640px.
2: Please.
8: All posts except questions posted on Meta have small avatar sizes. I think they are the same sizes as before, but this looks smaller since everything else got bigger. The one on this answer is an example — it’s tiny.
11: You think? StackOverflow does them to the left side and I think it looks good. It’s tight, but it’s neat and it works. I also prefer the alternative you mentioned over what’s there now.
12: Didn’t think of that haha.

And regarding the CSS... I agree with everything you mentioned, but for some reason I still feel like there’s a disconnect. It’s particularly the top bars, I think... they’re really blocky and quite unlike stuff you’d see elsewhere on this site, and on other forum/social software. Particularly on mobile: it makes you scroll a bunch every time you load a page, and the left-justified navigation buttons are odd to me. I feel like it could be simpler. Just a couple solid, narrow nav bars at the top, in the same vein as the main site header.
Getting really far into nitpicking territory now, so I’ll stop. Thanks for all the updates :)

---

OK thanks, I've increased the size of the avatars (no idea why they were randomly larger on Meta and not other places) and updated the action buttons so they all line up and have good spacing in all circumstances (I hope!)

As for the voting, it will probably work if I make the arrows smaller. Will look into it.

---

Awesome! Thanks for bearing with me haha. All looks nice now.
Let me know if there’s anything I can help with on the page overflow on mobile. I did some more checking, and it seems the formatting buttons on the text editors, as well as ads, cause the same overflow if the screen width is too low.
EDIT: another one! Answers don’t have a max width and could overflow at any point. I added an example to my answer. The same thing happens to the editor (where you write the answer) if you type a line of characters that is too long.

---

Nnnnnnnnnnnnnnnnnnnnnnniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiccccccccccccccccccccccceeeeeeeeeeeeeeeeeecccccccccccccccccooooooooooooooommmmmmmmmmmmeeeeeeeeeeeeeeeeeeennnnnnnnnnnnnnntttttttttttttttsssssssssssssyyyyyyyyyyyooooooooooouuuuuuuuuuuugggggggggggooooooooooottttttttttthhhhhhhhhhheeeeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrreeeeeeeeeeeeeeeeeeee.

---

The overflow has been fixed now.

I’m not sure about ads - the ones I’ve seen do not stretch the page in any way. If you get an ad that messes up the page please post a screenshot.

---

Can't seem to replicate what I got before with the ad. I'll keep you posted, but it doesn't seem an issue on the devices I use regularly.

Answer 2

I’ve noticed while on mobile, switching the orientation of the screen sometimes makes the ads do weird things like these. It doesn’t always happen, and I’ve never seen anything like it without rotating my device, but when it does happen, even rotating back to how it was before doesn’t fix it.

Comments

Yeah, I got something similar to this when I tested. I couldn’t replicate it again, but I guess we got it now.
Though mine wasn’t nearly as drastic as that shot — a much skinnier ad that clipped the right side of the page, but didn’t lap over anything.

Answer 3

I got another one.

It seems that if you're using a device that does not scale screen resolution to 100%, it will cause random 1px scrollbars to appear on the right side of posts. I noticed this using a high DPI display, which scales Windows to 125% by default. Zooming in (or out) using a browser on any other device causes a similar problem.

This is an example of the problem. It also appears on questions (thread for reference). The strange thing is that on all displays, the issue only happens sometimes. Not all posts get a scrollbar when adjusting the scale. I'm not sure if there's a distinct factor in those posts causing that to occur.

I also get it on every iOS device I can access, which suggests the issue is fairly widespread.

Comments

Been getting this a lot, assumed it was on purpose e.e

---

Yeah, I noticed this, too.

---

I've only got it on computers, not my tablet.