Previous Entry Share Next Entry
Time to be Responsive
jducoeur wrote in querki_project
We've talked a bit about the need for Querki to support "mobile", broadly defined. That's going to be a long and winding project: I'm pretty convinced that doing it right will require building custom Android and iOS apps that know how to interact with the hardware, and which work well in offline mode.

But more immediately, I realized a couple of days ago that I'd painted myself into a corner. The Poker database is now running in Querki, which is great -- it's far cleaner and easier to use than it used to be. But of course, I mostly need to consult that database and add to it when I'm at the table -- and that means that I don't have a desktop computer handy.

So okay -- now I had a pressing use case for Mobile. Great! Fortunately, in the modern software world that turns out to be even easier than I expected for the first cut.

Querki has been built, from the beginning, on top of Twitter Bootstrap. At first, I only thought of that as a way to get things started, and I've been moving towards using jQuery UI as the primary interface tool set recently. But I still have Bootstrap in place, using them side-by-side, and I realized quickly that one of Bootstrap's selling points is Responsive Design.

I can't say that I'm an expert in the Responsive model yet, but the high concept is that you should build your website so that it gracefully "reflows" and adjusts as you move towards larger and smaller screens. Ideally, you should build mobile-first, with the design focus on the phone screen -- I don't know that I'm quite prepared for that yet, but we may yet get there.

Anyway, I turned on Bootstrap Responsive yesterday, and rolled it out this morning. It's by no means perfect yet, but it seems to work reasonably well: you can now use the Poker Space (and the rest of Querki) at least adequately on a smartphone. I encourage you to check it out and give opinions. The menus clearly still need work (and the editing interface, which you can't see yet, is still meh), but it seems basically usable now.

Much of that just happened, *poof*, when I turned on Bootstrap Responsive, but I've also made one significant conceptual enhancement: the tentative decision is that Querki will *officially* support Bootstrap.

The advantage here is that Bootstrap dovetails magnificently with Querki -- it mainly works by adding CSS class annotations to things, and Querki makes that easy to do with the {{classname:...}} construct. For purposes of Responsive Design, this means that, for instance, you can now just wrap a bit of Querki text in {{hidden-phone:...}} to hide it on a small screen, or {{visible-phone:...}} to display it only on a small screen. The Poker Space now uses that on the front page, so that the big blort of text on the main page shows up as it did if you have a big screen, but turns into a link to that text on the small one.

My theory here is that Querki should do what it can automatically -- but that it can only go so far. Querki's success is going to depend on providing Space authors with the ability to tailor the experience as necessary for the screen size. And yesterday's decision was that, instead of trying to reinvent wheels here, let's go with what seems to be the growing consensus: Querki should support Responsive Design in your Space, and moreover *encourage* it by providing access to Bootstrap's relatively easy-to-use tools.

I've updated the How It Works page to discuss that. I've also added a new "Add a Variant" button directly on the Poker main page (having realized that, on a phone, I will really want that); How It Works shows how to do that. Both sections are near the bottom of the page, marked "New:".

The longer-term technical question that I am now going to have to wrestle with is one of the great browser-technology problems of our age: Bootstrap vs. jQuery UI. I'm currently using both, but that is known to be a bad idea -- they are famously incompatible in a few of their details. I've been working around that so far, but it's delicate stuff. My theory heretofore had been that jQuery UI would be the long-term winner, and that I would phase out Bootstrap, but I'm starting to lean the other way. I am mainly using jQuery UI as a gadget library, and the truth is that it only has a few gadgets I care about, and only one (Sortable) that is missing from Bootstrap. And given that Bootstrap seems to be far superior in some other ways -- especially in that its Responsive approach is *much* better-suited to Querki -- my decision may be made...

  • 1
Oh! I thought you'd adopted Bootstrap partly because of responsive design! The reflows are beautiful. One of the reasons I'm looking forward to our Moodle update this summer is Bootstrap themes that I can turn on for mobile devices. Moodle is a block-heavy layout, and having those reflow for any screen size will save a lot of headaches.

No, actually, I picked up Bootstrap simply because it gives *such* a headstart at the beginning. I know I'm not much good at visual design, so having a consistent, reasonably out-of-the-box option that looked decent was almost a no-brainer for getting started.

It's only now that I'm starting to re-evaluate my assumptions. I *do* think that jQuery UI is in many ways more powerful and flexible. But Bootstrap is so clean and elegant, and it may be good enough for my purposes, at least if I supplement it with other gadgets as necessary. (Indeed, one option might be to step back, and instead of using all of jQuery UI as I've been doing, instead just picking and choosing the few elements that I care about.)

The main headache, really, is likely to be retheming. jQuery UI has this lovely thing called ThemeRoller, which does a quick point-and-click color scheme; Querki is currently based on that. Bootstrap requires a much more laborious process of figuring out color numbers and trying things out.

(Although, now that I say that -- surely *somebody* has dealt with this. Ha! Yes, somebody has build a Bootstrap Themeroller. Excellent -- that should make my life a bit easier...)

(Deleted comment)
Actually, Kate has both an iPad and iPhone (and I have Android phone and tablets), so we're reasonably set. (And ratios shouldn't be relevant yet: these are still just web pages, so they adapt to the screen size -- they just do it better now.) But thanks...

  • 1

Log in

No account? Create an account