ooni.org icon indicating copy to clipboard operation
ooni.org copied to clipboard

Redesign navigation bar

Open akronb opened this issue 2 years ago • 4 comments

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 ooni org_about_ Desktop after localhost_1313_about_

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

akronb avatar Aug 27 '22 18:08 akronb

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.

akronb avatar Aug 27 '22 18:08 akronb

Thanks for putting this together, it looks great!

Some small nitpicks I would suggest addressing prior to merge:

  1. On desktop I would suggest bumping up a little bit the horizontal padding of .nav-menu-item a from padding: 6px 4px 0; to padding: 6px 8px 0;
  2. 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!

hellais avatar Aug 31 '22 08:08 hellais

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.

hellais avatar Aug 31 '22 09:08 hellais

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.

akronb avatar Sep 01 '22 06:09 akronb