ooni.org
ooni.org copied to clipboard
Redesign navigation bar
This PR started out as a fix for #1148, but I ended up redesigning the site's navigation bar a bit.
What has changed on the desktop?
- All the content in the navigation bar now fits in a container
- The "Install OONI Probe" button is now smaller.
- Made menu items more compact, now there is room for new items
- Reused the SVG logo from the footer
Desktop before
Desktop after
What has changed on the mobile?
- Hiding menu items under the hamburger menu
- Changed the design of the menu items and made them larger
Mobile before
Mobile after
By the way, do you have any information about the browsers your users use?
If IE11 share is less than percent or does not exist, I can use SVG sprites for logos and menu icons.
Thanks for putting this together, it looks great!
Some small nitpicks I would suggest addressing prior to merge:
- On desktop I would suggest bumping up a little bit the horizontal padding of
.nav-menu-item a
frompadding: 6px 4px 0;
topadding: 6px 8px 0;
- We should make it clear that the OONI logo is a clickable element either by making it less opaque on pages other than the homepage (like it was before) or adjusting the opacity on hover
Once these two are done I would say we can deploy it.
Thanks again for working on this!
By the way, do you have any information about the browsers your users use? If IE11 share is less than percent or does not exist, I can use SVG sprites for logos and menu icons.
I pulled out some stats from matomo based on traffic from users that opted into it in 2022: https://gist.github.com/hellais/4dfd33dd503e3225670398d85b0f77c0
Bottom line is that we have ~1% of IE users.
Ideally we would have some sort of fallback for these cases so it's still usable, but I would say we don't care too much about the site looking exactly the way it does for users of modern browsers.
I've added tweaks you requested. It definitely looks better that way!
I'll postpone the introduction of SVG sprites for now, although they will reduce the number of requests, they have caching and fallback issues. Still need to think about it.