I've started work on making the website responsive and more usable on mobile devices.

A quick glance at Google Analytics shows that a significant 24 % of visits are from "mobile", and another 8% from "tablet". I guess a "tablet" could be considered a small desktop PC and usually most websites will fit into a tablet display without a "mobile" view. As for the "mobile" devices, the top 50% of those are shared between the iPhone (31%) and iPad (17%). The other 50% are spread thin between hundreds of different devices and models such as Samsung Galaxy, Google Nexus, Kindle; Motorola, Huawei, etc.

As far as I can tell, the website works fine on tablets. When I redesigned the main navigation in early 2015, I purposely made it to work with touch. That way the drop down menus can be used on a tablet where there is no "mouse over" functionality.

Much of the work consists of allowing the content to "collapse" into a single column. The Study page is a good example. I suppose a good design would be for a search box to appear at the top, followed by the user's editing area, and then the shared stories.

As a single developer, I don't want to manage two entirely different websites. I can't afford to keep in sync a "mobile" optimized website, and a desktop website. So what I am trying to do, is a responsive website, that will be more comfortable to use on mobile devices (typically portrait view on a handheld phone). That means from the server point of view, there is only one page. The stylesheet is used to fit the same page content to different displays. In order to achieve that, I need to find a good compromise between both.

One tricky problem to solve are the tables. What should I do with them? We can't fit all the information from the Flashcard List in portrait view on a phone. Should I just hide some of the less important columns? Do mobile phone users expect that the mobile site will feature a "stripped down" version of the information? I really don't know. What if a visitor has never visited the site other than on their mobile device? Do they know that the tables would show more information when seen on a desktop browser or tablet (large display)?

Fortunately the Flashcard Review page is already optimized for mobile devices!

Some pages such as "Custom Review" are already responsive. The content can simply collapse into a single column. It's easy and fast to scroll on touch devices so that works out well.

Other pages like "Manage" featuring a sidebar navigation currently also collapse the sidebar. However the whole sidebar navigation shows at the top. I suppose here the main improvement would be to add a button that expands /collapse the navigation, while opening the most common sub page by default. This way the main content is not pushed too far down, and is seen when the page loads.

Do you have any suggestions for the mobile version of the site? Let me know!