[tor-bugs] #16649 [BridgeDB]: Improve mobile experience of BridgeDB's HTTPS Distributor

[Tor Bug Tracker & Wiki]

#16649: Improve mobile experience of BridgeDB's HTTPS Distributor
---------------------------------------------+----------------------
 Reporter:  isis                             |          Owner:  isis
     Type:  defect                           |         Status:  new
 Priority:  normal                           |      Milestone:
Component:  BridgeDB                         |        Version:
 Keywords:  bridgedb-https, bridgedb-ui, ui  |  Actual Points:
Parent ID:                                   |         Points:
---------------------------------------------+----------------------
 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:

 [[Image()]]

 [[Image()]]

 [[Image()]]

 [[Image()]]

 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.

--
Ticket URL: <https://trac.torproject.org/projects/tor/ticket/16649>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online