Responsive theme a must have for 2020?

Darth-Apple

Familiar Face
Jul 27, 2013
70
37
58
25
FP$
990
Honestly, I would think so. About 34% of my website's traffic comes through mobile. Google also penalizes websites that aren't mobile-friendly in the search results. It's not an absolute must, per se, but there are absolutely very compelling reasons to do it. Three years ago, not so much, but now, times are changing.

It's been a work in progress for my community. I've been doing it on a page-by-page basis, starting with the index page, moving to thread pages, profiles, and so forth. It's nowhere near complete, but the main pages are now responsive. MyBB does not make this an easy process at all.

One thing that worked well for me was to have two versions of certain table columns, rows, etc. One gets displayed on tablets and desktops, and the other one gets displayed on phones. Media queries can take care of that part easily. It's definitely cheating, but it worked well for me and allowed me to make various aspects of my theme responsive without completely redoing MyBB's table based structure.

Although we have a long way to go, the main pages were much easier than I expected them to be. It's worth doing, in my opinion. Wish you the best of luck, your forum looks nice! :)
 
Last edited:
  • Like
Reactions: Twisted Sister

Twisted Sister

#Twisted
Aug 23, 2014
562
56
98
23
Scotland
forumauthority.com
FP$
2,221
Honestly, I would think so. About 34% of my website's traffic comes through mobile. Google also penalizes websites that aren't mobile-friendly in the search results. It's not an absolute must, per se, but there are absolutely very compelling reasons to do it. Three years ago, not so much, but now, times are changing.

It's been a work in progress for my community. I've been doing it on a page-by-page basis, starting with the index page, moving to thread pages, profiles, and so forth. It's nowhere near complete, but the main pages are now responsive. MyBB does not make this an easy process at all.

One thing that worked well for me was to have two versions of certain table columns, rows, etc. One gets displayed on tablets and desktops, and the other one gets displayed on phones. Media queries can take care of that part easily. It's definitely cheating, but it worked well for me and allowed me to make various aspects of my theme responsive without completely redoing MyBB's table based structure.

Although we have a long way to go, the main pages were much easier than I expected them to be. It's worth doing, in my opinion. Wish you the best of luck, your forum looks nice! :)

thank you for your comments. I had a similar experience when coding my last theme, I used Media queries here and there. I do appreciate the feedback and I will do my best to get the responsiveness in action as soon as possible
 
  • Like
Reactions: Darth-Apple

Darth-Apple

Familiar Face
Jul 27, 2013
70
37
58
25
FP$
990
Sweet. Yea the only page where I really had to redo the template and remove the tables was on the profiles. Getting responsive menus can be a pain, but there are good tutorials for that. The rest of it isn’t too bad.

The index page can more or less be done just by removing certain columns on mobile devices.The stats ones, for example, aren’t needed. The forum display can be done the same way. You may want to have a different version of the last post that only displays on mobile, and combine it with another column that already exists.

The thread display was relatively easy, but the only one that works well is the regular postbit template. The classic one doesn’t work well. I cheated here and had two versions in the same template again. One displays on mobile, the other displays on desktops.

It’s not too bad on a page by page basis. Takes about an hour for each one, and you could have a (mostly) responsive them pretty quickly. Granted, this isn’t the right way to do it at all. But it at least gets it somewhat mobile friendly without having to heavily recode the theme or templates.
 
  • Like
Reactions: Twisted Sister

Twisted Sister

#Twisted
Aug 23, 2014
562
56
98
23
Scotland
forumauthority.com
FP$
2,221
Sweet. Yea the only page where I really had to redo the template and remove the tables was on the profiles. Getting responsive menus can be a pain, but there are good tutorials for that. The rest of it isn’t too bad.

The index page can more or less be done just by removing certain columns on mobile devices.The stats ones, for example, aren’t needed. The forum display can be done the same way. You may want to have a different version of the last post that only displays on mobile, and combine it with another column that already exists.

The thread display was relatively easy, but the only one that works well is the regular postbit template. The classic one doesn’t work well. I cheated here and had two versions in the same template again. One displays on mobile, the other displays on desktops.

It’s not too bad on a page by page basis. Takes about an hour for each one, and you could have a (mostly) responsive them pretty quickly. Granted, this isn’t the right way to do it at all. But it at least gets it somewhat mobile friendly without having to heavily recode the theme or templates.

I completely agree with what you're saying here and yes it can take some time, however, realistically it can be done within a week, to get a somewhat fully responsive functional site. Maybe you're right in saying it's not the most perfect coding, however, as you said it does the job, and once you've laid the foundation of the responsive theme you could most definitely build upon it as Time Goes By.
 
  • Like
Reactions: Darth-Apple

Darth-Apple

Familiar Face
Jul 27, 2013
70
37
58
25
FP$
990
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. :p

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
 
Last edited:
  • Love
Reactions: Twisted Sister

Twisted Sister

#Twisted
Aug 23, 2014
562
56
98
23
Scotland
forumauthority.com
FP$
2,221
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. :p

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:


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.


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

incredibly informative post and I really do appreciate all the information supplied would you say that 800px and 500px would be the best resolution for tablets and mobiles to work on? To be honest, I have made a responsive theme before which was forum authority's white theme, however, this was around 2 years ago, and I'm alittle out of touch haha.
 

Cam!

This is Water
Administrator
May 11, 2010
18,173
1,840
733
24
Nashville, TN
www.camerontaylor.net
FP$
127,761
Pokemon Master
Like Badge
Cookie Badge
In this day and age, everything has to be responsive. You can't get away with solely designing for desktop/laptop users anymore. Have you looked at the browser/OS stats for your community? Nearly half of the traffic FP receives is from a mobile device, whether it's a cell phone, tablet, etc.
 

Puppuccino

Member Team Leader
Aug 16, 2009
3,738
150
148
FP$
422
I personally wouldn’t have launched without it. Everyone uses a mobile phone now and so pinching to zoom, whilst was once acceptable is just not the norm anymore.
 

ARx182

Paragon
Jan 26, 2014
1,124
54
83
United Kingdom
FP$
580
Most people use their phone to browse the internet. I know from personal experience that I'm less likely/motivated to use non-responsive forums. Make of that what you will.
 

Twisted Sister

#Twisted
Aug 23, 2014
562
56
98
23
Scotland
forumauthority.com
FP$
2,221
I appreciate everyone's suggestions, more or less I've had a consistent theme overhaul every now and then so I just wanted an opinion. A lot of my themes have been mobile-friendly, however, the one I had at the time of posting this thread, did not have that sort of functionality, although now is all better. Not only did I make a mobile theme of the mybb theme I had prior to moving to xenforo but I've also my new theme over on the xenforo is mobile compatible.
 

catgirl

Acquaintance
May 28, 2020
25
6
3
envyforums.net
FP$
139
There are a few things to keep in mind with responsive design.
  1. It's the new standard. Google rewards sites who follow the latest standards and promotes them in search results. When creating a new website whether that's a blog, forum, whatever, it needs to be responsive. Unfortunately most open source forum software does not have a responsive theme by default. You'll have to buy one separately (very few free themes seem to be responsive) or use a solution like IPS or XenForo for your forum both of which are expensive for a personal project. It also seems less professional if your website is not responsive.
  2. More traffic comes from smartphone users than desktop/laptop users. When I want to talk on a forum about something it's frustrating when I have to zoom in on a page while attempting to use it.
  3. In many third world still developing countries it often seems a smartphone is people's only access to the internet and they have unreasonably low data caps (like 50MB a month). Our focus as forum administrators means we need to create responsive designs which use as little bandwidth per page load as possible.
 

sashab0

New Arrival
May 27, 2020
16
4
3
FP$
37
I’d say in 2020 this is a must. A lot of people are on mobile these days, and many don’t even use desktops or laptops anymore.
 

KnownSyntax

Up-and-Coming Sensation
Mar 21, 2016
456
23
28
Arizona, United States
FP$
341
Is it a must for users? Some - those on huge displays or those on tiny displays (mobile devices, tablets, or 4K/6K/8K monitors) really need something that can scale correctly. Otherwise you end up having a display that only fits X number of devices, when there are Y total devices anyone could have or use to access your website.

Plus, Google and other search engines are ranking based on their scoring system (which includes SEO/Responsiveness/Security and other aspects). If it's something new, 100% go for responsive, if it's something old, def. would consider going to responsive in the next year.