Yep. And honestly, once you get five or six pages (the index, forum display, thread display, new reply/new thread, and profile) pages done, users will be spending about 95% of their time on a responsive page. That's what I did. Google even considers it a responsive theme even though it's a work in progress. And technically I have a long way to go, but it works well enough to have at least something in place for now.
😛
The user CP is the most tricky one. I ended up hiding the entire navigation on the left on mobile, and doing a jquery link to pop it out on toggle. I had to do the same thing with the avatar because it was in a table. This works for post icons on the new reply/new thread pages as well (was a perfect solution), and the rest was just a matter of going into the templates for new reply/new thread and hiding the columns on the left (unecessary) on mobile. This was one of the places where I had a different version of the labels for mobile. The alternative labels were directly above the input fields and not inside the left column.
I ended up using a few custom CSS classes to do about 90% of this:
1. Create a media query for anything smaller than about 800 px or so. This media query is where various CSS edits (such as making the wrapper 100% of the page width) should go. You can leave some padding and various other things in at this point, but the most important thing is making sure that the wrapper is 100% of the page width, and that any custom menus for mobile get used here. Add these classes below:
.disappear_on_tablet {
display: none;
}
.appear_on_tablet {
display: block;
}
Create a media query for anything smaller than ~500px or so. Create additional phone-specific CSS here (such as removing additional padding). At this point, there should be no padding in the wrapper so that everything is 100% of the screen's width.
.disappear_on_phone {
display: none;
}
.appear_on_phone {
display: block;
}
The rest is just a matter of manually going through the templates and adding these classes where necessary. On the index page, for example, going into the forum bits and removing the stats columns is the first place to start. Then go into the last post and make edits/make an alternative version that only displays on mobile and is as compact as possible. And then it's just a matter of messing with it until it doesn't stretch off the page on mobile.
Show thread is a little tricky. You'll want to use the regular (not the classic) postbit for this one, and manipulate it until it all fits on screen on the mobile version. The only other thing that needs to be done once the postbit is complete is to get the quick reply taken care of. This can be done just by collapsing the left column (or using a jquery toggle link), and that will make it fit on page.
It's easier than I just made it sound. This, again, definitely isn't the "right" approach (any professional designer would roll in their grave at my post), but it makes it an easy job (to at least get some responsiveness) and doesn't require heavily refactoring the theme as you mentioned.
🙂
Hope this helps,
-Darth
