Support NeoGAF

[Imbarkus]

Web design and css is not my day job, more of a side hobby. That said I've been working iteratively on my site for a while now, and have worked myself into a corner when trying to make the site mobile friendly.

Overall I've had pretty good luck taking a two-column dynamic layout I tracked down a few years back and adapting it to mobile. I achieved the dynamic sizing for web with some nested divs that by necessity have a greater width than the window and need to have overflow hidden, though.

On mobile, this only works if I assign overflow-x:hidden; to html,body. If I follow proper procedure and assign it, or the webkit touch scrolling setting, to document.body instead (or any other combination therein), the smooth scrolling is broken. I like the smooth scrolling, so even though it cost me the function of tapping the time bar to move to the top of the page, I went with it. It worked, right?

I accepted this compromise until I started to go further and taking my sidebar menus and try to make them fixed position nav menus for mobile. Even that worked fine until I created a logobar that would pop in upon scrolling away from the top of the page. The same compromise that broke "tap to top" has broken any JQuery scrollTop functions I tried to include, on mobile, using a simple technique I found here.

Now I have the choice, make any change at all to this css and lose smooth scrolling and gain my logobar and tap to top: as seen in test page 1

Of I can leave the css that I have done improperly entirely untouched, because if I shift or change any part, including the height:100% set to html,body, I no longer have the smooth scrolling: seen in test page 2


Below is the unchangeable css (if I want to keep smooth scrolling), for reference:

html,body { 
background-image: url('happygamefamily_bg.png');
background-attachment:fixed;
background-repeat:repeat-y;
background-position:top left; 
    height:100%;
width:98%;
}
@media screen and (max-width:1160px) {
html,body { 
width:99%;
}
}
@media screen and (max-width:840px) {
html,body { 
width:97%;
}
}
@media screen and (max-width:480px) {
html,body { 
overflow-x:hidden;
overflow-x:-moz-hidden-unscrollable;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
width:auto;
}
}

I have also asked this question on Stack Overflow and Experts Exchange, if you are invested in either of those ecosystems and would like the internet points there.

Thanks for any help you can offer!

 

[Imbarkus]

Alternatively, is there another way I can ask this question, or an apparent reason why it got no replies on those services? Thanks.

 

[Imbarkus]

I hope you will forgive the bump

 

[Nictel]

Nvm

 

[xxracerxx]

Have you considered starting fresh and using an existing mobile friendly framework like Bootstrap?

 

[Imbarkus]

Have you considered starting fresh and using an existing mobile friendly framework like Bootstrap?

It kind of goes against my tinkerer nature. I'm fairly proud of my dynamic layout, if you scroll a window width on the test pages you'll see what I'd be giving up.

Then again, might just be forever-broken mad scientist hobby-level if I don't bow to convention.

 

[xxracerxx]

It kind of goes against my tinkerer nature. I'm fairly proud of my dynamic layout, if you scroll a window width on the test pages you'll see what I'd be giving up.

Then again, might just be forever-broken mad scientist hobby-level if I don't bow to convention.

You can still tinker with a framework. Your site right now is just outdated and wonky as all hell.

 

[Imbarkus]

You can still tinker with a framework. Your site right now is just outdated and wonky as all hell.

I was pretty happy with the original two-column dynamic layout with the fixed width sidebar and the variable width body area. I didn't develop it myself, its essentially a css framework I found.

I'd rather try and solve the puzzle than chuck everything and go with some generic thing that's the same everywhere. Thanks anyway.

 

[Imbarkus]

Well I know you didn't think much of the site, but it's hand-coded, hobby-grade stuff. Just coopting someone else's framework would kind of defeat the "solve the puzzle" reason I do a bunch of this stuff.

Anyway, after looking around at a bunch of mobile frameworks other sites are using, it seems very few of them endeavor to keep the fast, smooth, "momentum scrolling" on iOS Safari I was trying to achieve. After thinking about it, this makes sense: why preserve the ability of a user to quickly whiz past all your content if you are working hard to compress and streamline the content into a smaller single column mobile-friendly form?

So I gave up the smooth scrolling, and got back the nice JQuery ScrollTop functions (and native timebar tap to top functionality) that I'd lost. This let me proceed with my custom mobile framework, which I rolled out today:

http://www.happygamefamily.com

So... even though you didn't think much of the site, I'd be curious about the mobile framework and how it functions for you, and if there's any glaring problems, or even if you still think the design is hopelessly backwards and wonky. Thanks for taking the time for the reply before, anyway. Peace.