[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:
   Resolution:            |   Keywords:  bridgedb-https, bridgedb-ui, ui
Actual Points:            |  Parent ID:
       Points:            |
--------------------------+---------------------------------------------
Description changed by isis:

Old description:

> 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.

New description:

 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(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/16649/Screen%20Shot%202015-07-05%20at%2021.45.28.png)]]

 [[Image(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/16649/Screen%20Shot%202015-07-05%20at%2021.45.59.png)]]

 [[Image(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/16649/Screen%20Shot%202015-07-05%20at%2021.46.11.png)]]

 [[Image(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/16649/Screen%20Shot%202015-07-05%20at%2021.46.30.png)]]

 [[Image(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/16649/Screen%20Shot%202015-07-05%20at%2021.47.25.png)]]

 [[Image(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/16649/Screen%20Shot%202015-07-05%20at%2021.47.43.png)]]

 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#comment:1>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online