New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve layout for mobile #21

Closed
nwinter opened this Issue Jan 1, 2014 · 15 comments

Comments

Projects
None yet
7 participants
@nwinter
Contributor

nwinter commented Jan 1, 2014

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!

bad_mobile

@TomSteinbrecher

This comment has been minimized.

Show comment
Hide comment
@TomSteinbrecher

TomSteinbrecher Jan 7, 2014

Contributor

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.

Contributor

TomSteinbrecher commented Jan 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@sderickson

sderickson Jan 7, 2014

Contributor

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!

Contributor

sderickson commented Jan 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@TomSteinbrecher

TomSteinbrecher Jan 7, 2014

Contributor

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.

Contributor

TomSteinbrecher commented Jan 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@nwinter

nwinter Jan 7, 2014

Contributor

@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.)

Contributor

nwinter commented Jan 7, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@TomSteinbrecher

TomSteinbrecher Jan 7, 2014

Contributor

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.

Contributor

TomSteinbrecher commented Jan 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mcfarljw

mcfarljw Jan 7, 2014

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.

mcfarljw commented Jan 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@TomSteinbrecher

TomSteinbrecher Jan 7, 2014

Contributor

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.

Contributor

TomSteinbrecher commented Jan 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@sderickson

sderickson Jan 9, 2014

Contributor

Example page to fix for mobile: #131

Contributor

sderickson commented Jan 9, 2014

Example page to fix for mobile: #131

@TomSteinbrecher

This comment has been minimized.

Show comment
Hide comment
@TomSteinbrecher

TomSteinbrecher Jan 11, 2014

Contributor

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.

Contributor

TomSteinbrecher commented Jan 11, 2014

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

This comment has been minimized.

Show comment
Hide comment
@bdickason

bdickason Jan 11, 2014

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

bdickason commented Jan 11, 2014

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

@TomSteinbrecher

This comment has been minimized.

Show comment
Hide comment
@TomSteinbrecher

TomSteinbrecher Jan 14, 2014

Contributor

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.

Contributor

TomSteinbrecher commented Jan 14, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gsaines

gsaines Feb 20, 2014

Contributor

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.

Contributor

gsaines commented Feb 20, 2014

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

This comment has been minimized.

Show comment
Hide comment
@schmatz

schmatz Apr 3, 2014

Contributor

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

Contributor

schmatz commented Apr 3, 2014

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

@gsaines

This comment has been minimized.

Show comment
Hide comment
@nwinter

This comment has been minimized.

Show comment
Hide comment
@nwinter

nwinter Dec 9, 2014

Contributor

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

Contributor

nwinter commented Dec 9, 2014

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

@nwinter nwinter closed this Dec 9, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment