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