Let's chat about the redesign (again)

[Alex Zaworski]

Disclaimer: totally incoherent ramblings below. You have been warned.

What’re y’alls thoughts? I really prefer having a centered container of some sort. I use a 27″ screen at work, it takes about 8 minutes for my eyes to get from the css-tricks logo to the search bar.

I think the gradated shadow deal going on with the ‘current page’ highlight in the menu is really neat lookin’, don’t think I’ve seen something like that before. There seems to be a subtle gradient theme in general which I’m pretty okay with. That said, the whole current-page-always-first-in-menu thing reaaally throws me off.

The ultra-tracked-out-kinda-thin-airy headers in some places (eg “tips” in the sidebar) don’t do it for me, would like to see a different solution.

I like the really-god-damn-huge articles on the front page, but I think the gutter spacing should be tightened up a bit pretty much everywhere.

New comments setup is cleaner, I think.

To date, my favorite iteration is almost certainly the mid-2015-ish redesign (https://web.archive.org/web/20150616124336/https://css-tricks.com/). That said, I think the iteration we had just before this one was really close to being really good, I think I would have liked to see that one pushed a bit further before it was dropped.

… Oh and the tablet-ish size menu is cool as hell.

[Shikkediel]

I’m just taking it for what it is with each redesign. Eventually I’ll get used to it. And at that point, another update is probably due. Lol. The font size on a 1280 screen seems a bit large for my taste although at the current state of my visual capabilities it’s probably not such a bad thing.

[Paulie_D]

The font size on a 1280 screen seems a bit large for my taste although at the current state of my visual capabilities it’s probably not such a bad thing.

Indeed…I have to zoom out to 90% from the usual zoom in of 110%….that’s a pretty big change.

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

On tablet it’s a little more user friendly.

[Shikkediel]

To add… if it were up to me, I’d put the “Choose Forum” and tips at the top of the page. Not many seem to really read the latter in any case and the space to the right of the screen would be better spent on forum posts, especially with the larger font. Just a few cents there.

[Beverleyh]

I haven’t visited via desktop yet but I have on small tablet and mobile. Most of my casual browsing (when I’m watching TV and the breaks come on) is on iPhone and the font-size seems a little large there too. I see orange mosaic down either side, a white gutter and then padding inside of the pale peach post blocks – teamed with the avatars, it has the effect of squishing text into a long thin column. 4 or 5 words on a line.

Is there any way that the avatars could be floated instead so that the text wraps around them? That would help make mobile reading more comfortable.

I like everything else though. Can’t wait to see the full effect on desktop.

BTW – the textarea is now much better on mobile. In previous incarnations its width has exceeded the screen width which has made it difficult to review comments before submitting. Now I can easily see all text on the screen without needing to scroll left to right to see words falling at the end of lines :)

[Alex Zaworski]

I sort of dig the larger fonts but I can see how they might be considered a bit cumbersome (especially if they’re causing line length issues on mobile— I wouldn’t know).

I think for avatars it might make most sense to just have them to the left of the title and then break the entire post underneath (at least on mobile). The massive gutter is a bit goofy, now that I think about it.

Also, though this isn’t related at all to this specific design iteration, I don’t understand why videos are stickied at the bottom of the home page. I miss them like 90% of the time :(

[Chris Coyier]

Feel free to keep up the thoughts. I’m reading this of course. Definitely some good ideas in here.

[Alex Zaworski]

Appreciate the response @chriscoyier — already liking the h4 styling a lot more. I also noticed the little gradient headers on code blocks and it’s suuuper nice lookin’ (I was going to suggest doing a quick tutorial on it, but that basically already exists here, if anyone’s curious— and there’s even a snippet with a SASS mixin).

Is the Lodge to remain open indefinitely or are you just trying some stuff out? I didn’t notice any posts about it.

edit: aaaaand there’s the Lodge post. Class act, super appreciated. A lot of people had a lot of nice things to say over on this Reddit thread too, which was posted a couple days ago. Not to beat a dead horse but I think it’s really great what you do for the dev community.

[ishwerdas]

Bug report! hoot! hoot!

The guide have issues

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There’s a padding problem and the accordion-ish thingy doesn’t expand or collapse properly.

[Koopa]

Few thoughts on the new design:

1. Center the content for displays wider than 1900px
2. Don’t swap around the order of the children in the main-nav depending on what page you are
3. The new pixelated svg background seems to be quite a performance hit for high DPI displays. CPU Usage is sitting around 30% in Chrome and 40% in Safari, which is quite a lot

Keep up the good work!

[Alex Zaworski]

I know I already said it but I really agree with @koopa on the nav, it’s a weird pattern.

How were you measuring CPU usage? Chrome’s task manager or something else? I wasn’t able to cause a significant decrease in CPU usage disabling the background.

[favitalegur]

In the comment section – the reply to a comment box goes outside the comment box that it’s replied to. (if that makes sense) Feels weird to me. Don’t remember if it used to be the same in the previous version. Maybe it’s just the transparency of the reply comment, that rubs against me.

And also in a post – element “figure” and class “drag-wrap” have left and right margins set to -12.5%, which makes them ignore their containers padding. Doesn’t look good to me. Also “figure” has a top and bottom padding and box-shadow, which makes it look a bit weird to me.

To check out these things you can look at the last post: https://css-tricks.com/creating-svg-icon-system-react/

[Alex Zaworski]

Comments hanging out of their parent by a bit is definitely intentional, it’s been like that for a while if I’m not mistaken (I’m a fan, for what it’s worth).

I agree that the 0 padding on a smaller screen is goofy on figures. I also don’t think I like the box shadow + full width white background deal, just doesn’t do anything for me. Maybe a darker background would help? Not sure.

This isn’t specific to this redesign but I’ve never particularly cared for the way hidden comments are styled. I’d prefer a smaller shadow that’s darker than the background of the element rather than a giant one that’s the same color.

[Kyle Bradley]

Loving the new feel on mobile!
For me best mobile layout yet!!!

1 improvement would be to make comments 100% width instead of the big left padding(whatever’s there)

[Max Fenton]

Love it. Love. It.

[Author]

Posts