-
10 November 2016Working on mobile / responsive navigation
So what's happening in Koohii land?
Last week I have basically "sliced" the homepage redesign concept which I described earlier into a functional web page. The new home page is responsive and mobile friendly. Hopefully it will do a better job of conveying what the website is about.
What is more pressing though, is that according to official Google statements, more than 50 percent of search queries globally now come from mobile devices. I've seen reports also that Google may start penalizing desktop websites in mobile searches. So while I understand it's not a very exciting change or addition to the site, it's a pretty much necessary one.
What may be more exciting for mobile users, is that I am now in the process of replacing the main navigation with a responsive one across the site.So in "phase 1" I will update the website with the new homepage, and a responsive navigation. From there on, mobile users should be able to navigate the entire website without pinching and zooming.
In "phase 2" then I will look at using the responsive layout on all the pages. There is no way for me to fit everything into a small screen so I won't even try. I don't think it makes sense to try and fit the tables found throughout the site into a small screen. My goal here is to allow navigation of the site on a small screen device, so users can get to the parts that work reasonably well like the flashcard reviews. I will look at a way to fit the Study pages as a single column. Perhaps moving the search field in a static bar at the top.
After careful consideration I've finally decided to go with Bootstrap 's navigation bar (here is a live example). The jQuery dependency of Bootstrap is annoying, because the website has a lot of Javascript based on YUI 2. But ... such are the pains of maintaining a website over a long span of time.
I can"t think of any other solution right now. I've found a lot of "responsive navigation" examples, but all of them have their quirks. I don't have a smart phone to test myself (iPad doesn't count) so unless the navigation comes with a framework that has a long development behind it like Bootstrap or Foundation, say, I have no idea if it's going to work reliably for all Kanji Koohii users.
On the plus side, according to Google Analytics less than 3% of visitors are using Internet Explorer. So I'm going to use jQuery 3 which ditches support for the old Internet Explorer versions. All in all jQuery + Bootstrap should add up to 100 kb to all the pages which isn't that bad.
Going forward I can start using the Bootstrap components like the menus and modals, and progressively remove old bits and pieces I wrote over the years.
I also looked at the fancy Javascript frameworks like Angular, React and Vue. At this point refactoring old Javascript with one of those frameworks makes no sense. Vue.js does look interesting for new functionality. So perhaps I will use jQuery and Vue going forward.
By Month
- Oct 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)