Table Based Design and Responsiveness

[Darth Apple]

I've been working for the past couple of years to make the theme for my website responsive. It's been a massive undertaking that has required basically a page-by-page teardown of the templates and a restructuring of them. I've found that most pages can be made responsive just by adjusting the width and wrap settings, collapsing certain columns of the tables, and so forth. Other pages are not even possible to make responsive with table based designs (without, of course, the use of some CSS table tricks, but these bring their own problems). In any case, it's nowhere near complete. 

I've always believed it's the user experience that counts (regardless of whether you use divs or tables). Ideally, a DIV based approach is certainly the way to go, but doing so would require a ground-up rewrite of MyBB's templates, so I've been taking a page-by-page approach and have been attempting to do what's best for each individual page.

For the more experienced developers out there, what has been your approach when handling responsive designs? Is it an absolute must to use a DIV based design over a table based design? Mostly looking for pointers from designers that have done this before.

[[ExiTuS]]

I've been working for the past couple of years to make the theme for my website responsive. It's been a massive undertaking that has required basically a page-by-page teardown of the templates and a restructuring of them. I've found that most pages can be made responsive just by adjusting the width and wrap settings, collapsing certain columns of the tables, and so forth. Other pages are not even possible to make responsive with table based designs (without, of course, the use of some CSS table tricks, but these bring their own problems). In any case, it's nowhere near complete.

You're totally right with such an insight.

I've always believed it's the user experience that counts (regardless of whether you use divs or tables). Ideally, a DIV based approach is certainly the way to go, but doing so would require a ground-up rewrite of MyBB's templates, so I've been taking a page-by-page approach and have been attempting to do what's best for each individual page.

I completely share your opinion and doing. It is a hard work to find the best design for a templates and makes it nesseccary to fully redesign several pages with restructuring content to get rid of tables.
There are still developers who definitely fail trying to make themes responsive with tables.

For the more experienced developers out there, what has been your approach when handling responsive designs? Is it an absolute must to use a DIV based design over a table based design? Mostly looking for pointers from designers that have done this before.

Using <table>s can never make a design to be fully responsive. Never!
So it is a must to replace tables by another kind of elements. <div> is the best choice and best practice.
In general I personally recommend the easiest and lowest CSS level to use instead of CSS3+ with new and special attributes. Consider using floating elements with the correct usage of border box model.
Code should be as easy and clean as possible for performance and loading purpose as well as code diagnostics and investigations. It is kind of magic to make MyBB 1.8* fully responsive with one single theme by using simple code and CSS - but it is possible!
It took me half a year to create a 100% (100!) responsie and innovative template set for my forums. It was worth each minute spending to coin.
For inspirations, see my signature!

I am happy to meet you as another strict and ambitious designer and developer
Cheers!

[ExiTuS]

[Darth Apple]

Thank you for the pointers. I love your theme by the way. It looks very unique and is very well done on mobile. (Tried it on an iPhone 8. Worked perfectly).

I've been "cheating" on some of the pages by having two versions of certain columns, divs, etc. One gets displayed and the other one gets hidden, depending on the width of the viewing device. It has worked well for some pages and has prevented me from having to do a complete teardown of the tables, but on other pages (pretty much anything with a two column layout), I've been having to tear it out and redo it. The profile would seeminly be one of the simpler ones to do, but it's one of the pages that is pretty much completely impossible to do with tables.

And yet there are other pages that require absolutely zero modifications whatsoever (the help page, for example), and the forum display/threadlist pages just require collapsing some columns into single columns instead. The user CP/PM/newthread pages have been much more challenging.

Honestly, it would be a godsend if some sort of responsive "skeleton theme" existed for theme developers to base their themes on. If a redistributable, modifiable theme existed with a responsive base, I have a feeling we'd see a lot more responsive themes for MyBB. Of course, most of these themes are open source so there's technically nothing preventing someone from doing it with an existing theme, but it would be frowned upon.

[Johnny S]

I've trimmed entire table and converted all tables to div tags (using display:flex; ) and it looks like mybb default theme https://imgur.com/8JLGFB6 . It's responsive without hiding stuff - https://imgur.com/a/ju89Oo9 .