The Holiday Countdown Deals over at JapanesePod101 are extended until Dec 27th. Check out the remaining offers here (incl. 47% off Basic/Premium, 55% off 24-Month Premium, and the once-a-year Lifetime Premium access).

The mobile / responsive update is a lot of work! Last week I've been racking my brain setting up webpack 2, VueJS 2 and other things in the website's build process. This is pretty exciting for me as I can start making better UI across the site, with less code than I used to write. I'm also getting up to speed with modern Javascript (ES2015) and learning quite a lot recently. One of the things that I'm looking forward is using more CSS3 transitions and animations to create a more appealing interface, especially on mobile.

All in all this update is about much more than mobile. I'm completely upgrading the front end part of the website, and being able to use modern Javascript and Vue components will benefit both desktop and mobile!

Some challenges I needed to solve are using VueJS inside a non-SPA application. It's easy enough to use the provided "scaffolding" templates when you create a new site, but how do you make this work in a non-SPA (single page application) website that also has a lot of older Javascript dependencies?

Turns out the compiled VueJS library plus a few components is currently sitting at ~90kb (30kb gzipped), while the completely outdated old YUI 2 library is a whopping 177kb (50kb gzipped). While both sit under 100kb gzipped for now... it gives an idea of how much code there is in the old YUI 2 framework that had to deal with old browsers as well as a bunch of things that are now native in the browser.

So another challenge for me over the months will be to gradually remove old code, so I can get rid of the unnecessary dependencies and reduce the total page load cost. For some time after the mobile / responsive update, the pages will include both new and old Javascript. The website page load is not heavy to begin with so it will be ok, but it does add one extra bundle on every page (VueJS).

Right now the mobile site is pretty usable I think, based on feedback I've received so far. It doesn't look very nice though, in particular the top navigation I used. I still need to fix some obvious broken layouts, and I think I will be using a "sliding" navigation pane (sliding in from the left side), which is also animated.. and makes for an overall nicer experience.

So all in all the main challenge and decision making going forward is to find a good compromise between desktop and mobile. For example, do I want to use nice checkboxes like these ; which can be a little larger and usable on touch ; or do I want to use a specially adapted on / off toggle like this? Both are Vue JS components which I can now use on the website!

What's interesting here is while the "Switch" component is definitely better for mobile users it also responds to mouse clicks on desktop. But... it doesn't feel consistent with the desktop environment and the way checkbox tend to look. With the direction I'm going, I need to pick some kind of a compromise because I am not building a mobile native app. So for example in this case, I may end up going for the "Switch" because that feels great on mobile. The key here I think is to be consistent throughout the website, even if it's not consistent with the desktp or even the mobile device UI (eg. Android and iOS).

PS: I am looking for a solution to effectively gather feedback once I make the mobile site a "public beta". For this I need the lowest "barrier to entry" for people to be able to tell me what works, what doesn't. Please send me suggestions for services I could use if you know any! Some of things I considered are : forum threads (not ideal since it's kinda off topic), creating an empty repo on github and using their "issues" system which is great.. but quite bad to gather feedback straight from mobile. Maybe I should just put a built in "feedback" button somewhere... but I would rather people can comment on one another's issues which is a big limitation of receiving individual feedback via emails.