Let's chat about the redesign (again)

[Shikkediel]

The main post pages (non forum) do look very nice. If the forum posts were of a similar layout to the comments there on medium desktop screens that would certainly do it for me, especially when it comes to the width. Similar hightlighting for when someone marks as “good answer” could possibly improve readability for transient readers that come googling by on the forum.

:-)

[camartinez1229]

I’m enjoying the new design, but unfortunately, I had to override the background on the body, because otherwise, scrolling performance is atrocious, and my browser consumes 100% of one of my CPU cores. I’m using the current version of Pale Moon, 26.1.1, on Windows 7 with a 1920×1080 resolution. It could be that Pale Moon’s SVG/CSS3 gradient support isn’t as good as other browsers? I tried in Firefox 46 Beta, Opera 36 Developer, and IE11, and they all gave me no issue–buttery smooth scrolling and no wild CPU usage.

[tomnoble92]

I like the design of the hover on the menu. Nice colours and textures.

[Chris Coyier]

@alexzaworski

The ultra-tracked-out-kinda-thin-airy headers in some places (eg “tips” in the sidebar) don’t do it for me

Changed those. The didn’t do it for me either. Trying this. Not sure it will stick either.

@Paulie_D

That’s nice but the font-face is pretty ugly to me.

It didn’t change. Noted on the dislike though. I like it. Not totally in love with it, but it’s small and fast and has a lot of variety of weights and stuff. I think it does the job well.

The size is quite a bit bigger, yes, most comments on last design was that it was too small. The very largest body text gets is 20px which I feel like is big but not overly huge.

@Shikkediel

I’d put the “Choose Forum” and tips at the top of the page.

I’d love to get rid of the sidebar, but I just haven’t been able to bring myself to do it because just “widening everything up” isn’t useful. It makes line length to long, or if you limit that, then there just is nothing over there and doesn’t feel like a good use of space. Putting everything in a vertical column doesn’t seem like a good answer. For now, I think the sidebar does a good job.

@Beverleyh

it has the effect of squishing text into a long thin column. 4 or 5 words on a line.

I made some adjustments to the forums on the smallest-screen size where you don’t get that left gutter under the avatar anymore, because I move the avatar to the upper right. I think that uses the space a bit more when more line length is needed.

@ishwerdas

The guide have issues

Fixed that straight away. It was related to the # links for headers. Since most posts don’t have ID’s in headers all the way through, I’m programatically adding them, and there are a lot of trick edge cases!

@Koopa

Center the content for displays wider than 1900px

Sorry, I like it that it’s not centered. Most people agree with you, for what it’s worth. I like it that it’s off center. Maybe that will be this design’s annoying grain of sand that is my way of saying: not all designs have to be the same. You are being annoyed be a preconception of how you think things should be.

The reason the nav items come to the front is so they aren’t hidden behind the Menu thing when active. Not perfect, perhaps, but if nothing else it’s a cool reminder on how you can reorder things with flexbox easily.

@camartinez1229

scrolling performance is atrocious, and my browser consumes 100% of one of my CPU cores.

You’re the second person to say that. I haven’t experienced it either, but I also really have only tested cross-browser on my MacBook Pro, which is of course entirely unfair. I’ve never even heard of Pale Moon.

This is one of those tricky situations where I’d like to do something but I’m not sure what. I don’t love the idea of just removing it when I like the background and it doesn’t cause any problems for most people. If I could do @media (memory: low) { } that would be nice. I’d rather not browser sniff.

[ishwerdas]

Yeah, cool. I teach high school students about CSS, and I haven’t recommended textbooks. It’s just your guides and almanac. So for what it’s worth thanks a lot. :)

[bearhead]

@chriscoyier
I think people tend not to like the off-center content on wider screen widths, because it is centered on smaller widths which makes it look like a mistake when they view it on a different device, or re-size their window. Also, the nav is centered, which adds to the oddness…

I don’t think it has anything to do with preconceptions… there just doesn’t seem to be a reason why the content should be off-center (other than you like it that way, which is your prerogative as the owner).

[Alex Zaworski]

Thanks for the responses @chriscoyier! (let’s test that new-fangled mark as good answer button eh?)

Pulling the active nav out to the front so it remains visible on smaller screens makes a lot of sense. Still not convinced it’s the best way to do things (I think the nav moving around might be more confusing that not having a current location indicator at all times), but I totally get it now.

@bearhead I think you’re sort of on to something with the centered nav making things feel goofier. It’s also possible that if the logo were aligned with the left edge of the content things would feel better (though then the nav has less room on smaller screens). Tough to say. I think the logo moving over to the right + floating the nav to the left could look sweet. Something like this:

[stevemcd]

For me, the body font doesn’t seem to render nicely. Some letters appear heavier than others. It’s like it’s stuck between sizes.

Zooming to 90% or 110% is a lot crisper both ways.

Using Chrome on Windows

[camartinez1229]

Thanks for the reply, Chris. Pale Moon is a fork of Firefox I’ve been giving a try lately, because I got fed up with Firefox as my regular daily browser. It seems to be built on top of Firefox 24 era code, if I’m not mistaken (as far as addon compatibility goes). However, it has Firefox 38 as part of its user-agent string. I’ll see if I can track down the current Firefox 38 ESR version and see how that fares.

I love the background on all the other browsers I have. It just lags heavily on Pale Moon. But I wouldn’t expect you to cater to a lesser-known niche browser. I know I take my risks by using such a browser. It’s just that this is the first site I’ve ever experienced such lagging problems on with it.

EDIT: Okay, I just tested the site in Firefox 38 ESR, and the scrolling performance is smooth. So then I tracked down an old copy of Firefox 24 ESR, and the site lagged heavily like it does in Pale Moon… Hmm… I’m starting to wonder if Pale Moon deserves the Firefox 38 string in its Firefox compatibility user agent string, then, if it doesn’t seem to have the CSS3/SVG support that later Firefox versions have.

[Shikkediel]

I’d love to get rid of the sidebar, but I just haven’t been able to bring myself to do it because just “widening everything up” isn’t useful.

Sounds logical. Something similar to what you’ve done for smaller sizes (looks really good) would be an even better solution in my idea – it’ll keep the sidebar but also make the text a bit wider, removing the left “gutter” along with it…

[Alex Zaworski]

Could always put some ads in the sidebar :-)

[Koopa]

@chriscoyier
You are right the CPU usage seems to be fine on the MacBook itself.
The problem is due to my 4k external monitor, browsers don’t seem to like the large amount of rectangles that need to be rendered at once on a page refresh.

[Alex Zaworski]

Hey @chriscoyier the main nav needs to swap over to the mobile layout a little sooner, it’s wrapping the menu button with the rest of the items (ridiculously clever how that works, by the way).

Then again it’s a tiny range of screen sizes that it breaks, probably not worth looking in to if it involves site-wide breakpoint changes… I only found it on accident while trying to figure out how the heck the nav menu worked.

[Beverleyh]

I just noticed the avatars moved to the top-right corner on mobile (iPhone 5s). All miniaturised and curvy-cornered themselves now to make way for text. Very nice. Comments are much easier to read with the longer line lengths. Thanks Chris :D

[Author]

Posts