Improve layout for mobile

[nwinter]

It's probably too early to think about how to make it at all fun / playable / performant on mobile devices (since who wants to type code on mobile?), though any steps in that direction will be good. But we should at least be able to pluck some low-hanging fruit for making the rest of the site a bit responsive so that it doesn't look stupid or break when you pull it up on an phone to see what it is.

So if someone's on top of the latest responsive real-time media query peer-to-peer streaming CSS4 accessible standards-based user-focused design principles and wants to take a crack at improving our layout for mobile, be our guest--we haven't even started, so it's only up from here!

[TomSteinbrecher]

I think I'll take up modifying some of the pages to look at least not broken on mobile, but is there any prescribed approach to the mobile solution at the moment, or should I just go add the mobile functionality the way I believe would be best implemented, and then changes can come from there.

[sderickson]

The most likely solution given what we already have would be to use Bootstrap's fluid grid system. But go ahead and do what you think would be best!

[TomSteinbrecher]

Ok, yeah that was basically the plan. My personal website is built on a modified bootstrap grid, so using that for the mobile here will be fine. So far planning everything out in my head it should be relatively straight forward to get most of it look at the very least not broken on mobile.

[nwinter]

@chloester pointed out that there already are media-query-based grid styles included in our Bootstrap setup, but that they were part of what's broken about the layout as is. (This may be a clue; I'm no media query maestro.)

[TomSteinbrecher]

The way bootstrap grid works is under a certain size it breaks down, or at least all of the implementations I've used. But, to put it short, basically the gird is usually for screens greater than a certain size.

Look at the levels page to see that behavior of the grid just stopping working. But one of the biggest problems is that elements can actually end up being larger than the grid says they should, which can totally mess things up.

But yeah, once again it basically just is adding media quires to fix certain behaviors. Like for the homepage it will mean just adding a media query to define all of the mobile behavior.

[mcfarljw]

I think making the move to Bootstrap 3 (#89) should be prioritized before writing too many media queries. The further the dig into 2.3.2 might make digging out more difficult.

[TomSteinbrecher]

I'm just going to make a quick, and temporary solution on the main pages that are likely to be visited on mobile. Upgrading to Bootstrap 3 will be a more comprehensive update, so this is the type of thing that can be used as a bandage, until the migration to Bootstrap 3 is complete.

[sderickson]

Example page to fix for mobile: #131

[TomSteinbrecher]

Okay, you know what. I've changed my mind, I think I'm going to do as mcfarljw recommended and help do some work towards migrating to Bootstrap 3. I don't think it would make digging out any harder as he mentions because it would be a simple matter of just removing the mobile fixes, and then fixing them the right way. But it would mean having to do all of the mobile fixes twice.

[bdickason]

@TomSteinbrecher do you guys have a branch put together for this? I'd be happy to help.

[TomSteinbrecher]

Wish we did, although if you want to start working on this yourself go for it. I'm a full time student so I don't have tons of time work on stuff, and recently I've been wrangling with my Ubuntu install more than coding because of some weird bug maxing out CPU usage. Although I should have that fixed tomorrow, but yeah totally go for it if you want to. Although as you said it might be a good idea to set up a branch strictly for this.

[gsaines]

A user commented today that they tried the site on their iPad and they either didn't see our warning, or ignored it, tried the game, got booted back to the homepage, and contacted us. So yeah, would be great to make it more clear that we're not supporting mobile.

[schmatz]

I'm tackling this now, let me know if there are any progress/changes I should know about

[gsaines]

https://app.asana.com/0/15388757953815/20686183437394

[nwinter]

I call it good enough with my recent work to make the homepage look a'ight on small screens.