Description
The problem
More and more users are browsing Tatoeba from a mobile device. In April 2016, the percentage of visits from mobile devices started to exceed the percentage of visits from desktops. Considering that mobile visitors are now the majority, it becomes urgent that we rework the UI to be mobile-friendly.
Below some stats from Google Analytics.
April 2013
April 2014
April 2015
April 2016
The solution
We basically have 3 solutions.
- We develop a mobile app for Android/iPhones.
- We develop a mobile version of the website.
- We develop a responsive UI.
The solution we'll be trying is the 3rd one: responsive UI. We will be using Angular Material for this.
Why?
- The first solutions requires that we have an API. We currently don't.
- The second solution means that we will have 2 websites to maintain. In other words, if we introduce a new feature, we have to code it twice. We can't afford it.
- As for Angular Material, it's a subjective choice. I like the Material Design spec and Angular Material feels rather comfortable to work with.
The plan
We want to make the transition as smooth as possible. There will be more or less 3 phases.
Phase 1
Since we'll be following the Material Design spec, we need to prepare users to get used to the new look and feel. During the first phase, we don't touch the general layout of the website. We only change small elements (buttons, icons, fonts, colors, dropdowns, etc). These changes will be introduced progressively, over the course of a month, maybe two.
This will be a good time to start a styleguide.
Phase 2
In this phase we start to tackle bigger elements: the menu, the search bar, the sentences, the comment, the logs... Again, we don't touch the layout of the page. We just want to redesign these elements in a way that makes them easy to migrate to a responsive UI.
Phase 3
In this last phase we finally start changing the layout of each page. For some time, both the old and new layouts will be coexisting, and users will have an option to activate the new layout. The new layout will be disabled by default because as long as we haven't reviewed every page, the navigation from one page to another will feel inconsistent on mobile devices.
Once we have reworked the main pages, the responsive layout will be the default one. Users will still be able to disable it from the settings. And once we're reworked every page, we will remove the option.
Prototype
In order to evaluate the feasibility of this project, I've prototyped something in a separate branch: angular-material. It only serves as a technical reference. In this branch, the only page that has been reworked is the page to add new sentences (accessible from the menu: "Contribute" > "Add sentences").
It was testable on the dev website during Tatoeba day #22 and the following week.
This issue is a parent issue for all the incoming smaller issue that I'll be creating along the way to organize this UI migration. It also serves as an entry point for anyone who'd like to get involved and help out in this migration project.