DEV Community

Ben Halpern
Ben Halpern

Posted on

Changelog: Site-wide design changes and a few other goodies

Whenever a website changes its design, there's bound to be mixed feelings. But we hope that these changes have improved some aspects of the site's usability.

Besides what is clearly visible, some other things of note:

You now get a color generated on your profile if you don't pick a scheme. Plain gray was boring but if you like plain gray, go for it 😄. This change hasn't fully rolled out to everyone but it should shortly.

Also if you press the key / when you are not focused on an input, you'll jump right to the search bar. As the knowledge base grows, the search will become more and more useful and this shortcut should make it easier. At some point we'll also roll out settings so you can customize your bindings if you don't like the default. We anticipate that as we add more shortcuts like this some folks might like that option.

You'll see that the home page now includes #explainlikeimfive under #discuss on the right sidebar. We'll continue to experiment with where content goes to be raised at the most appropriate time for consumption and discussion.

We have some kinks to work out now that the design is live, and everything is subject to change if you have any suggestions. This is day one of a design direction that brings some more personality and usability to the site, but it may not be fully baked yet.

Thanks so much to Ara Ko for freelancing with our team to create this redesign with us. She's looking for more work, so if you like what we did here, email yo@dev.to and we can put you in touch.

Anyway, thanks for being a great community.

Top comments (24)

Collapse
 
ben profile image
Ben Halpern

This was also an opportunity to refactor the CSS and eliminate some duplication. Since we inline the critical path CSS for performance, every bite counts.

The logged in DEV home now delivers in 13.1kb with no render-blocking resources. For internal nav, the page fetches only 5.3kb because we don't need to refetch the layout and some resources.

Also experimenting with some H2 server push. 🙂

Collapse
 
imthedeveloper profile image
ImTheDeveloper

My data plan would like to thank you

Collapse
 
ben profile image
Ben Halpern

We also pre-fetch some resources under the hood which adds a few more KB as you browse the site, but it's all way less than most other sites, and in the future we'll even allow some customization in your settings for how we go about fetching assets/content.

Collapse
 
alephnaught2tog profile image
Max Cerrina

I am always SO impressed by the responsiveness of the site--and the people working on it :D--and seriously appreciate how much content there is while not choking the connection or swarming in a million video ads that pop up randomly or hover.

Collapse
 
ben profile image
Ben Halpern

It's almost as if the founder of this site thinks the web doesn't have to suck. 😄

Thread Thread
 
alephnaught2tog profile image
Max Cerrina

Pfffffffffft, what a ridiculous idea! That's as whacky as implying that actual human build this stuff and not magic tube-forging robot pipelines.

Collapse
 
hjfitz profile image
Harry

TPD is hosted on Heroku, right? How does H2 fare on it?

Collapse
 
ben profile image
Ben Halpern

That's all handled via our CDN Fastly

Collapse
 
alephnaught2tog profile image
Max Cerrina • Edited

I really like the subsections on the side for #discuss and #explainlikeimfive, and especially the tailored buttons for them :)

eta: Is ctrl-f supposed to hop you up to the search bar? I was just trying to find something on the page itself..... :D

Collapse
 
ben profile image
Ben Halpern • Edited

Yeah, ran we just into the issue too. ctrl-f was supposed to be ignored. But upon further research it seems pretty hard to do that in a bug-free way. So switched to just the / key and modified the above post. I was looking for an excuse to only use one of the keys anyway and this provided it.

Collapse
 
codemouse92 profile image
Jason C. McDonald

Thanks for fixing this! Someone was complaining to me today that the site was key-jacking the ctrl+f.

Collapse
 
alephnaught2tog profile image
Max Cerrina

Makes total sense to me!

Collapse
 
maestromac profile image
Mac Siri

This new look is 🔥

Collapse
 
maximeplante profile image
Maxime Plante • Edited

The changes are really awesome! I do have a suggestion. The "Welcome" box on the top-right could be a link to a short text presenting the purpose dev.to for newcomers.

Collapse
 
ben profile image
Ben Halpern

Good call. Right now it's just kind of sitting there.

Collapse
 
itsjzt profile image
Saurabh Sharma

a shortcut for jumping right into the search bar, pretty cool 😎

Collapse
 
ben profile image
Ben Halpern

Collapse
 
hybrid_alex profile image
Alex Carpenter

Nice work Ben! It's great to see a network like this putting so much focus on performance in this day and age. We appreciate it. Has there been any work towards making dev.to accessible? Noticing the outline has been removed which can be problematic for keyboard users.

Keep up the great work!

Collapse
 
johncarroll profile image
John Carroll

So personally, my vision isn't the absolute best and I find the new background to have very poor contrast with the main elements on a page--making it harder to navigate than most sites. I just pulled open the inspector and changed the background to something darker (a lime green color) and found I preferred it. You mentioned giving people the ability to create custom shortcuts via a setting, it'd be nice to be able to change the background color via a setting. On sites that support it, I choose a dark theme as I find it easier to read.

Collapse
 
ben profile image
Ben Halpern

Thanks a lot for the feedback.

Collapse
 
mogery profile image
Gergő Móricz

PLEASE remap the search hot key to something universal across keyboard layouts. We don’t have the slash key on Hungarian keyboards.

Collapse
 
cskotyan profile image
chandrahasa k

Great job Ben, web site looks sleek and nice..

Collapse
 
belhassen07 profile image
Belhassen Chelbi

I was just writing a post about the dev.to new design lol

Collapse
 
ghost profile image
Ghost

Well done!