Make SketchBots mobile friendly

[PaulKinlan]

TODO we can split these out if needs be:

• [ ] Define the viewport
• [x] Define the breakpoints for the media queries
• [x] Check it all works with Touch (you can emulate this on a desktop in Chrome DevTools)
• [x] Create the UI for the appropriate break points.

Currently the Sketchbot looks like this on a desktop:

However, on a mobile screen it is all cut-off

I am not quite sure how it should appear on mobile yet, so comments should include screen shots.

[michaelsanford]

This narrow three-column interface seems already well-suited to a small portrait viewport: break the above three columns into self-contained, (nearly) full-viewport panels.

Given this, the next decision is navigation. I see two options:

• A variant of the Android Swipe View pattern should work well here (essentially scrolling to fixed breakpoints — mobile-friendly libraries exist, rolling from scratch shouldn't be difficult).
• Automatically advance through/replace views as the sketch progresses through queued to being drawn to completed. This would only really be appropriate for users queueing one sketch at a time, though, which may be undesirable. This pattern would probably work better as an SPA.

[PaulKinlan]

Looks really nice!

One thing I am worried about is that a user would lose track of where the images have gone in a tabbed view... I suppose it could be indicated with a visual flash or status number update.

What about a vertical accordion stack? Or a slide out menu tray with the sections in (then it might be quite close to your diagrams then)

[PaulKinlan]

I meant to add that the reason why auto advance might not work is that there could be a queue of images being taken and being processed at the same time...

[PaulKinlan]

Http://weight.awrotwist.com has a nice slide out menu (I goes out too far IMO for this project but highlights the idea)

[michaelsanford]

@PaulKinlan Indeed, not being able to queue multiple pictures was a caveat of auto-advancing. Just throwing it out there…

Aerotwist's slide-out is kind of nice. So, you envision something like this (smaller, menu selection closes tray)?

[PaulKinlan]

This looks brilliant. Let's do this layout. (Sorry for the delay in replying currently on vacation this week)

[michaelsanford]

Thanks @PaulKinlan. You can assign that to me (if you're using that workflow) and I'll get right on it.

Don't worry about response times: I'm not on vacation but thus have the same problem ;)

[michaelsanford]

Finally getting this moving.

After some experimentation, I decided to go with the following maximal width breakpoints:

> 960

Existing, since that's the existing fixed width of the desktop interface before horizontal scrolling (with existing margins). This also captures most tablets in landscape orientation, which will scroll vertically (which should be fine).

801px — 960px

Captures reduced window/device dimensions while still presenting a pleasant desktop version (largely through slightly reduced margins, widths).

800px

Nexus 7 (for example) is 800px wide in portrait mode. I figure on that and smaller we want the above mobile interface.

I'll post some screenshots when I get the last bit done. I don't mind waiting for that point for comments, unless someone sees a big problem already). Ref: My fork feature branch.

[PaulKinlan]

When setting width=device-width I am not sure nexus7 (2012) comes out as 800px.

[PaulKinlan]

But otherwise things genearlly seem reasonable. Look forward to seeing what is done. :)

[michaelsanford]

@PaulKinlan You might be right, I haven't done too much testing yet (just going by the spec, and using it as a rough estimate for what we might look for in terms of interface transitions).

I'll post some screenshots when I have some more to show.

[PaulKinlan]

@michaelsanford awesome, looking forward to seeing them.

[michaelsanford]

Here's a simulated Nexus 4 (tested in Canary 31.0.1622.0). I have to work out a few small quirks, lint and performance profile, but here's something to look at, at least.

I wonder that the horizontal pipes are not obviously a menu disclosure trigger (particularly in this orientation). the trigger hides when in desktop mode. What do we think about increasing the button size ( New From…, View… )?

Bring out 'yer comments!

Worth reminding: currently, Safari iOS and Chrome vanilla don't support WebGL (which causes Three.js to fail to create a context in which to do anything). So, this app is likely (currently) limited to Opera Mini, FireFox, and Chrome Android via flags.

[PaulKinlan]

Awesome work.

re:three. I believe this was only ever used for the background image, to make it curve.

re:screenshots. These are look great! I would change the menu icon to be the burger menu icon people are using nowadays, and have it positioned further up on the top left. We will probably have to sort out the logo and get it moved..... I would be open to making the logo the "toggle", but I am not sure how discoverable that is.

The "new from *" buttons, we should make them full width and bump up the font size. I would also make each of the white photo holders full width too.

[michaelsanford]

Thanks for the feedback @PaulKinlan ; I'll integrate it!

I'll also have a look at mitigating Three.js's killing Safari iOS, if it's not really necessary.

[michaelsanford]

Design

Bigger buttons everywhere, here are a few more views. Again, an emulated Nexus 4.

Webcam (Portrait)

Webcam (Landscape)

Using a file

In progress

Completed

Better menu trigger?

@PaulKinlan How about we use the mobile menu trigger Maps Android is now using (maintain brand-consistent UI)? Something like this:

[PaulKinlan]

This is looking awesome.

[PaulKinlan]

@michaelsanford the thing I just merged, was I supposed to merge it? I am looking at the code and I don't see anything mobile :)

[michaelsanford]

@PaulKinlan I just checked out the merge and it looks like you did get everything relevant from my leafpile (with bbab7cf and 59ad9a4):

1. ChromeWebLab/Sketchbots/sw/ui/view/RobotsView.css Mods start here
2. ChromeWebLab/Sketchbots/sw/ui/controller/RobotsMainController.js Mods start here
3. ChromeWebLab/Sketchbots/sw/ui/view/RobotsViewStrings.js Added navigation header
4. ChromeWebLab/Sketchbots/sw/ui/controller/RobotsTopicQueuesController.js Added some properties

I just cloned Google's master and it seems to be working for me:

I'd note that the width breakpoint for the stuff pictured above is 615px, so most tablets in landscape (many in portrait, too) will get the desktop-looking one with narrower margins. Easily improved, I was just eager to push something upstream so you can finally play with it.

[PaulKinlan]

I might have made a schoolboy error and not updated my local copy....

[PaulKinlan]

/me hangs head in shame.

@michaelsanford thanks for all this work by the way! I am going to start promoting it more!!

I will start making separate issues for things that I find now and you (if you want), me, or anyone in the community can pick them up.

For instance, I can't see a viewport meta element - we need this.

[michaelsanford]

@PaulKinlan It was a lot of fun and I'm definitely still interested in continuing my involvement.

Woops, I did neglect the viewport! I'll add it.

As a side-note, one of my primary volunteer projects is running a robotics competition for high-school students. I'm pushing to deploy one of these at the competition this year, just for fun.