• 2 December 2016Working on mobile / responsive navigation (part 2)

    Work is advancing on the responsive update. All the pages are being worked over; I'm using Bootstrap to refresh even the basic things like the sign in form... which end up much more usable on a small screen.

    The navigation is working. I spent a lot of time thinking about what kind of navigation to use but eventually I've settled on making my own. A relatively simple dropdown. One on the left for the main navigation, and one on the right, for the account options, with the Koohii logo center (working as the "home" button).

    There are some pretty cool "slideout" navs out there... but who knows how it behaves when I have more interface on screen like the flashcards? And if something doesn't do what I need it to do, updating the code will be a headache.

    The main difficulty though was to figure out how to support both desktop and mobile. If you look at some big websites out there, you'll notice often times their site is not actually very responsive. The reason for that is that they have mobile apps already. For example, Facebook, Twitter. On Kanji Koohii, I decided to go for the best compromise, and the website is actually going to be fully responsive. The pages actually serve two navigations but since they are just basic HTML, it barely has any impact on the total download of the page. This is great, because it means I can customize everything for mobile. If a label like "Spaced Repetition" is too long, I can just name it "SRS" and be done with it. With a lot of solutions out there, I am stuck with a very rigid way of switching between large and small screens.

    Desktop users will benefit too! I'm thinking about how to improve the layout of the Study pages.. It would perhaps make sense on Koohii, to have a search field available at ALL times directly from the navigation. So both desktop and mobile users could click a "search" icon , and enter a kanji or keyword to go to the corresponding Study page.

    There is some more work to do with the layout of the Manage and Account pages. Here you have a side navigation that represents "sub navigation". For example from Manage you can then go into "Add", "Remove", etc. The way I plan to handle this for mobile is that the sidebar goes on top, and collapses into a expandable menu. It's pretty neat as it is a reusable component implementation wise, and it behaves one way or another depending on the viewport size.

    I can't wait also to update the site with the redesigned homepage. This is really needed to signal to new visitors that the website is usable on mobile.

    I genuinely hope I can finish this in December. I's hard to evaluate because there are so many small things. But it's looking good so far!

    PS: Oh I almost forgot the most important for mobile users. I will try to get the "mobile webapp capable" feature working, so that once you add a shortcut to homescreen, the browser disappears.. and it will feel much more like an app.