-
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.
By Month
- Nov 2024 (1)
- Sep 2024 (1)
- Jun 2024 (2)
- May 2024 (4)
- Apr 2024 (3)
- Mar 2024 (1)
- Feb 2024 (1)
- Dec 2023 (1)
- Nov 2023 (2)
- Oct 2023 (2)
- Apr 2023 (2)
- Mar 2023 (2)
- Feb 2023 (1)
- Jan 2023 (2)
- Dec 2022 (1)
- Nov 2022 (2)
- Oct 2022 (3)
- Sep 2022 (1)
- May 2022 (4)
- Apr 2022 (1)
- Feb 2022 (2)
- Jan 2022 (2)
- Dec 2021 (4)
- Nov 2021 (2)
- Oct 2021 (2)
- Sep 2021 (2)
- Aug 2021 (1)
- Apr 2021 (2)
- Feb 2021 (3)
- Jan 2021 (3)
- Dec 2020 (1)
- Nov 2020 (1)
- May 2020 (1)
- Apr 2020 (1)
- Jan 2020 (1)
- Oct 2019 (1)
- Sep 2019 (1)
- Aug 2019 (4)
- Jul 2019 (3)
- Jun 2019 (1)
- May 2019 (1)
- Mar 2019 (2)
- Jan 2019 (1)
- Nov 2018 (3)
- Oct 2018 (8)
- Sep 2018 (4)
- Aug 2018 (3)
- Jul 2018 (1)
- Jun 2018 (4)
- May 2018 (1)
- Apr 2018 (1)
- Mar 2018 (1)
- Jan 2018 (1)
- Dec 2017 (6)
- Nov 2017 (4)
- Oct 2017 (4)
- Sep 2017 (5)
- Aug 2017 (5)
- Jun 2017 (3)
- May 2017 (2)
- Apr 2017 (3)
- Mar 2017 (7)
- Feb 2017 (10)
- Jan 2017 (11)
- Dec 2016 (6)
- Nov 2016 (5)
- Oct 2016 (6)
- Sep 2016 (7)
- Aug 2016 (3)
- May 2016 (1)
- Mar 2016 (2)
- Jan 2016 (1)
- Dec 2015 (3)
- Nov 2015 (1)
- Oct 2015 (1)
- Sep 2015 (7)
- Jul 2015 (2)
- Jun 2015 (1)
- May 2015 (5)
- Apr 2015 (4)
- Mar 2015 (5)
- Feb 2015 (4)
- Jan 2015 (5)
- Dec 2014 (4)
- Nov 2014 (3)
- Oct 2014 (2)
- Jun 2014 (1)
- Apr 2014 (2)
- Mar 2014 (4)
- Feb 2014 (3)
- Jan 2014 (4)
- Dec 2013 (2)
- Oct 2013 (1)
- Sep 2013 (1)
- Jun 2013 (4)
- May 2013 (1)
- Mar 2013 (1)
- Jan 2013 (2)
- Oct 2012 (2)
- Aug 2012 (1)
- Jul 2012 (2)
- Jun 2012 (2)
- May 2012 (1)
- Mar 2012 (2)
- May 2011 (1)
- Apr 2011 (4)
- Mar 2011 (3)
- Feb 2011 (2)
- Jan 2011 (2)
- Dec 2010 (8)
- Nov 2010 (8)
- Oct 2010 (3)
- Sep 2010 (3)
- Aug 2010 (1)
- Jul 2010 (2)
- Jun 2010 (5)
- May 2010 (1)
- Apr 2010 (3)
- Mar 2010 (4)
- Feb 2010 (2)
- Jan 2010 (1)
- Dec 2009 (5)
- Nov 2009 (5)
- Oct 2009 (1)
- Aug 2009 (1)
- May 2009 (5)
- Apr 2009 (2)
- Mar 2009 (1)
- Feb 2009 (2)
- Jan 2009 (2)
- Nov 2008 (1)
- Oct 2008 (1)
- Sep 2008 (1)
- May 2008 (2)
- Apr 2008 (1)
- Feb 2008 (6)
- Jan 2008 (5)
- Dec 2007 (6)
- Oct 2007 (1)
- Sep 2007 (2)
- Aug 2007 (3)
- Jun 2007 (1)
- May 2007 (5)
- Apr 2007 (1)
- Mar 2007 (2)
- Feb 2007 (1)
- Jan 2007 (4)
- Dec 2006 (3)
- Aug 2006 (1)
- Jun 2006 (3)
- Apr 2006 (6)
- Mar 2006 (8)
- Feb 2006 (1)
- Jan 2006 (4)
- Nov 2005 (1)
- Oct 2005 (4)
- Sep 2005 (1)
- Aug 2005 (11)