[WIP] Making SMF Responsive

[Mick.]

Nice job.

Thank you.

Now the task of a custom theme for me. lol i dont like the one i have now bahaha

[Antechinus]

Tell me about it. That's always a problem.

[Antechinus]

Hey just thought of something: how have you handled the menus?

[Mick.]

Hey just thought of something: how have you handled the menus?

Custom.  At least this particular theme.  My next theme will have the classic horizontal menu with the use of Subs.php and take from there and see how it behaves.  For now on mobile will still use the 'select' drop down style.

[Antechinus]

Cool. I went with a js-based click-to-open menu, just because some of the things I wanted to do with selects wouldn't work on both Android and desktop browsers.

[Mick.]

Cool. I went with a js-based click-to-open menu, just because some of the things I wanted to do with selects wouldn't work on both Android and desktop browsers.

Yes, I too like the js-based for mobile. Specially the twitter bootstrap. Looks much neater imho.

[Antechinus]

TBH I've come to like it (meaning js click menu) for desktop too. Works well on both. I got tired of trying to make hover menus behave properly all the time. It always seemed that there would be some situation where they would annoy me. Having the damned things only open when I deliberately choose to open them solves things nicely.

[Mick.]

TBH I've come to like it (meaning js click menu) for desktop too. Works well on both. I got tired of trying to make hover menus behave properly all the time. It always seemed that there would be some situation where they would annoy me. Having the damned things only open when I deliberately choose to open them solves things nicely.

How about no js?

Code Select Expand


-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;


[Antechinus]

Nah. Still effin annoying sometimes. Also, not supported by IE9 or lower, unless you run extra js just for them. I'm conditioned to think about accessibility for as many people as possible.

Thing is I'm a fussy bastard (just ask anyone). Transitions are good for some stuff. I use a slight delay on menu buttons, so the hover effect doesn't flash at me if I'm just scrolling past the menu. Like this:

Code Select Expand

-webkit-transition: 0.1s ease-in-out 0.05s;
-moz-transition: 0.1s ease-in-out 0.05s;
-o-transition: 0.1s ease-in-out 0.05s;
-ms-transition: 0.1s ease-in-out 0.05s;
transition: 0.1s ease-in-out 0.05s;

That gives top level menu buttons that stay cool if you aren't actually selecting them, but with a smooth and quick hover effect when you really do want to hover over them. Since it's only a nice visual touch, it doesn't matter if some browsers wont support it.

One thing with droppys is mouseout delay. IMO, they should stay put if someone tracks off the menu by mistake. This is a common problem for many people, especially if you have a three level menu (or more). So, if you make the thing stay put when you go off the edge, then it'll also stay put if you trigger it by mistake. That can be really annoying, and stopping it means a delay on opening, which is also a PITA sometimes.

After trying a lot of things to get around those problems, and looking at the amount of code required, and still having the result being annoying sometimes, I said "F@#k it" and went with the clean and simple option.

[Mick.]

I know what you mean. Even here i have to go back to the dropdown cos i got off it too quick.

[Antechinus]

The ones here are just basic CSS2, which works but is a bit of a nuisance.

ETA: But the ones I use have a fallback to pure CSS2, just in case someone has js disabled.

[Mick.]

I went back to my previous theme but too made it responsive.  mUch better lol.  Now this time, instead of using a 'select' dropdown, i use icons 

[Mick.]

Well, I got it pat down. Lets make some smf responsive themes now.

Demo? Resize my forum @ http://idesign360.com

Out themes will have SimplePortal mod support for now. Eventually the others portals will be supported.

[Antechinus]

Where the hell is the forum? I seriously cant find it.

[Mick.]

Where the hell is the forum? I seriously cant find it.

hahaha I don't have a direct link on the menu since I always kept my site to be a blog like website.

Direct link http://idesign360.com/community/index.php?action=forum

[Antechinus]

Well that's gonna be a usability problem then.

[Antechinus]

Message index is buggy below 480 on Firefox. Loses the last post stuff off the side of the screen.

[Mick.]

Well that's gonna be a usability problem then.

No. Thats how i have my forum setup. Not the responsive themes.

[Mick.]

Message index is buggy below 480 on Firefox. Loses the last post stuff off the side of the screen.

Thank you. I knew about this but totally forgot.

[emanuele]

My Opera on my linux doesn't like your forum! LOL



Works fine with any other browser!