Small improvements for mobile use and responsive design

I noticed a few small possible improvements for the torproject.org website which could possible enhance the UX for mobile users. This issue has a very low prio.

Some of these issues are applicable to a different repo (e.g tpo/web/community) but to keep it clear I will post everything in this issue. If this issue is acknowledged, I'd create brief issues on the relevant repositories referencing this issue.

Tested on iPhone 14 Pro (Safari) and Firefox Responsive mode.

1. Improve alignment of header buttons.

I think the header can be slightly refactored to vertically center the elements more and integrate the currently floating menu-button better.

View image

2. Show hamburger menu-icon consistently across all pages.

Some pages like support.torproject.org correctly show the hamburger menu-icon in the menu-button. While it is missing on the pages not on a subdomain but directly on the SLD torproject.org.

View image

3. Long titles and text in the hero-section are not consistently centered + should have a padding.

When the page has a long title like "Join the Tor Community" the text is not centered like the other pages. And some padding should be applied so the paragraph in the hero does not touch the edges of the screen to improve readability.

View image

4. Improve alignment of language-dropdown and download-button in menu.

In my opinion the alignment and placing of these two elements can be improved.

I'd switch the order of these two elements. I'd put the language-dropdown below the download-button. I'd also align the currently selected language to the left to be consistent with the alignment of the other navigation items and the download button. Finally I'd add some spacing between the button and the dropdown.

View image

5. Adapt position of expand-button on the FAQ-page on support.

Currently the expand button on the support page is floating on the right side of the page while this page overall is aligned to the left. And this expand button being directly below the arrow to expand the topics-list does not improve the UX.

I think a small change in spacing and alignment can make a difference.

View image

View image (possible improvement)

6. Expanding specific questions on the support page breaks the design.

Some answers contain big images. These currently are not responsive causing an overflow which breaks the design. I'd add a max-width: 100% or something to these images to not make it overflow.

Note that mobile browsers do have features for the user to zoom-in on images so they still can be viewed in detail.

View image

7. Improve navigation container on the about page for mobile use.

Currently this navigation to go to the different pages in about is not optimized for mobile. The elements are not neatly aligned and this navigation captures a big part of the screen when scrolling which affects the readability and UX.

I think this can be improved.

View image

8. Consistency of alignment and spacing in footer.

The element "Trademark, copyright notices..." in the footer looks inconsistent with the other content in the footer.

View image