DEV Community

Cover image for new header, who dis
Paweł Ludwiczak for The DEV Team

Posted on

new header, who dis

TL;DR You may have started noticing more updates in the UI recently. And we have just updated the header!
We've been working pretty hard on building new awesome features and improvements. Some of them are meant to be invisible yet super helpful: feed improvements or upgrading some of our infra. But we've also made some changes that affected visuals.

Frontend Codebase

Like in many projects, the front-end part of a codebase is... well... not ideal. We have tons of CSS files, lots of spaghetti code, duplicated styles, and much, much, more...

It's a classic scenario: the feature or view needs to be built. The Dev or Designer decides to write super short and simple front-end code to ship a feature fast. And 2000 lines of code later you just can't go back :)

Taking a more holistic approach is actually what we've been trying to do. We've started building our own Design System. It includes not only design guidelines, but also front-end documentation of how to use the styles and components.

Overall, this is our approach (I will write more about our Design System in the future):

  • We now have real components and views built in SCSS (well, just a few of them, but that's a good start!).
  • We also have utility-first classes (TailwindCSS - does that ring a bell?) ready to be used anywhere in the markup.
  • At the same time 95% of our code is legacy code, not following any rules or guidelines. We will be slowly updating that alongside releasing new style.

Which is a good segue to...

New header

Header

One of the very first elements that we've decided to update is our header. You may notice it looks slightly different than couple days ago (if not, hit the hard refresh... If still nothing, I could have broken something and we had to roll it back :D). It's just a refresh, not complete redesign or anything. But we hope you'll like it! There's much more coming and this header update is just a teaser.

Discussion (29)

Collapse
andy profile image
Andy Zhao (he/him)

Woo!! One hard refresh away to a cleaner design ✨

Collapse
ziizium profile image
Habdul Hazeez

I was working on an article when I saw the notification for a new post, then I clicked it and it seemed to be that the header just disappeared until I took a second look and realized it was still there. Then I taught for another second that maybe the CSS files did not download completely

I realized this was not an error after I read the section in the article that the header has indeed been redesigned then I took a second look and it was only then it did occur to me that the header was fine after all.

When I realized this I said to myself that the interface is becoming whitish and certain elements are almost indistinguishable from each other unlike before when I could easily tell stuff apart. When it comes to the new header redesign, the only thing that stops it from blending with the rest of the page is the border at the bottom.

At this point, there was only one thing I was thinking of — contrast. I launched aXe Firefox accessibility extension and analyzed the page, the result showed 98 known issues of which 52 were contrast related issues.

Dev.to user interface accessibility report in aXe accessibility checker

I taught the tool was exaggerating the figures and I launched the Accessibility panel in Firefox and checked for all issues the results are almost the same.

Dev.to user interface accessibility report in Firefox Accessibility panel

Just to confirm the result I took the interface for a spin in WAVE using the Firefox extension, it reported the results in the image below, 52 were Contrast Errors.

Dev.to user interface accessibility report in web accessibility evaluation tool

You mentioned in the article:

It's just a refresh, not complete redesign or anything

and also:

At the same time, 95% of our code is legacy code, not following any rules or guidelines. We will be slowly updating that alongside releasing new style.

I believe this will change but for the main time, I will be switching to the Pink UI theme because I can easily differentiate between page elements particularly the header and I WAVE'd the page it shows just 2 contrast error. I think am going to be fine with this.

Dev.to user interface accessibility report in aXe accessibility checker

Keep up the good work. Cheers.

Collapse
pp profile image
Paweł Ludwiczak Author

Hey, thanks for this thorough analysis!

You’re 100% right about contrast - it’s fair to say that we have issues...

But most of them are actually legacy and the header itself didn’t really change much in these numbers. In fact, part of this update was about improving contrast in many places - so I’m actually glad you didn’t do this analysis couple weeks ago... :)

We can’t fix everything right away so it will take some time. But we do have plans for improvements and updates to other elements and parts of the DEV as well... But you know - one step at a time.

Contrast is definitely on top of our priority list!

Once again, I really appreciate you doing this contrast analysis - it’s awesome!

Collapse
ziizium profile image
Habdul Hazeez

We can’t fix everything right away so it will take some time. But we do have plans for improvements and updates to other elements and parts of the DEV as well... But you know - one step at a time.

Rome was not built in a day.

Once again, I really appreciate you doing this contrast analysis - it’s awesome!

Thank you and you are welcome.

Collapse
coolshaurya profile image
Shaurya

Love the new design. The new colorscheme has certainly improved things a lot.

Any plan to update the dark theme colorscheme to better match the light theme?

Collapse
pp profile image
Paweł Ludwiczak Author

Absolutely yes, its on our todo list👍

Collapse
richardeschloss profile image
Richard Schloss

Yeah, the UI has been looking more polished! But also the UX has been improved too, things just feel snappy.

My favorite part about the website is that it's fast to scroll through people's replies (have you ever tried clicking on nested replies on medium? that's my biggest frustration on that website...every nested reply is a new page redirect, it's near impossible to follow conversations there)

Collapse
daviddalbusco profile image
David Dal Busco

Overall I really like the new toolbar design, feels clean and the icons are really neat.

The only things which I'm not yet a big fan yet, but of course that's personal, is the color "red" for the notifications. The first times I received some I was like "what? there is an emergency?". To me "red = error, problem, emergency". But the good point is that I notice the notifications all the time now and also not everybody see the colors the same way, so I gonna become used to it of course 😉.

Again great job!

Collapse
pp profile image
Paweł Ludwiczak Author

Yea, to be honest I'm not 100% sold on red for notifications :) We're still evaluating whether or not it makes sense...

As you said - it does its job pretty well since it supposed to steal user's attention :) But on the other hand it's not emergency, which red color usually indicates. We'll see how it performs and come back to this a bit later to evaluate the decision.

Collapse
shofol profile image
Anower Jahan Shofol

Yes, that also came in my mind very first. Commented in another thread. Blue was better for me :/

Collapse
1e4_ profile image
Ian

Much cleaner, love it!

Collapse
thomasbnt profile image
Thomas Bnt • Edited on

Very nice ! Good job!

Edit : OOoh alerts so cool!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

It's much cleaner, great work!!

Collapse
glennmen profile image
Glenn Carremans

Very nice! Utility-first classes sound very interesting and I am curious how it will work in markup, I am a fan of Tailwind.

Collapse
loujaybee profile image
Lou (🚀 Open Up The Cloud ☁️)

The contact area for opening the header is reallly small. You've got a few pixels to scroll through, and it collapses if you hover over the bell icon. Is there any way to make the contact area bigger so you have more space for the cursor to reach it? I'm finding myself having to try multiple times to open it 😞

Image of Header

Collapse
pp profile image
Paweł Ludwiczak Author

Yea, I'll take a look if we can improve it a little. In the meantime you can also click on the avatar which should make the dropdown visible too until you click somewhere else. It's not a fix of course but maybe it will help you a lttle.

Collapse
loujaybee profile image
Lou (🚀 Open Up The Cloud ☁️) • Edited on

Thanks for the quick response Pawel! Ahhhh! I literally didn't even think to click it.

That's useful — just thought I'd give you a heads up and some feedback from a user perspective. Really good job though, it looks slick and good luck with the refactoring!

Collapse
loujaybee profile image
Lou (🚀 Open Up The Cloud ☁️) • Edited on

Another option would be to debounce the scroll off event to give you a second's grace.

  • If scroll off header
  • Wait 1s
  • Still Off header? —> Close Header
  • Not Off header? —> Leave Open
Collapse
dance2die profile image
Sung M. Kim

Looks nice & sleek :)

Love the simplicity.

Collapse
ryansmith profile image
Ryan Smith

Looks great, nice work team. 👍

Collapse
saqibameen profile image
Saqib Ameen

It looks much cleaner! Idk, if that's just me, the messages icon looks more like an emoji.

Collapse
wrldwzrd89 profile image
Eric Ahnell

Great work team! For some reason I am unable to visit the site in Safari, it just infinitely hangs. Cookie issue, perhaps, new with Apple’s updates?

Collapse
ben profile image
Ben Halpern

Uh oh, can you file an issue?

Collapse
wrldwzrd89 profile image
Eric Ahnell

Done. Thanks.

Collapse
clara profile image
Clara

I knew this button looked different! :)

Collapse
cmmata profile image
Carles Mata

I like it! Small change, but much better

Collapse
highcenburg profile image
Vicente G. Reyes

I saw that design system coming😁

Collapse
iamdejean profile image
Jean Japheth Ezekiel

Clean design!

Collapse
pflash profile image
Precious adeyinka

I don't see the changes yet, but I think it is visually appealing to the sight! Well done...