Improve mobile UI experience of BridgeDB's HTTPS Distributor
Many people, including Nathan of The Guardian Project, have complained that the UI of https://bridges.torproject.org has problems on mobile devices. Here are some screen shots from a device with a 320x480px screen:
Specifically, some improvements I can see which should be made are:
-
Fix the font sizes. Some are randomly so HUGE that their text takes up like half a page.
-
We need less text on mobile devices. Particularly, things like buttons which have icons probably should not have text.
-
The background image is doing wonky things. We probably should just get rid of it on small devices, to make the design cleaner and improve readability.
-
The CAPTCHA image is too big to see without swiping to scroll to the right.
-
The QRCode image is too big to fit on the screen.
-
The "Select All" and "QRCode" buttons look like they are merged together.
-
The footer text is a dangerous pile of links; hard to navigate with a touch screen without potentially accidentally clicking one when you didn't mean to.
-
The header at the top of the screen (called a "navbar" in Bootstrap lingo) which has a "BridgeDB" and "The Tor Project" buttons is all wonky.