Topic: Responsive Design for Forums

[Sunburned Goose]

I searched for the word "Responsive" and found two hits. Only one of them had an example website they suggested for Responsive Design for forums, http://smf-media.com/. I looked at this site and it's just a mobile theme that sits along side a distinct desktop theme. This isn't responsive.

I use a similar pattern on my own forum, two themes, side by side, with one intended for desktop clients and the other for mobile users.  You can see an example of our forum at http://forum.tiedtheleader.com.  I've just upgraded to SMF 2.0.2 from SMF 1.1.11 this last weekend so we are still rebuilding our desktop theme at the moment, but the mobile theme is doing okay.

My intention is to have a single theme that can work for both desktop and mobile clients.  I'm just fishing to see if anyone else has seen or done any work in this area with regard to forums and their unique concerns. 
Thanks,
Goose.

[Hj Ahmad Rasyid Hj Ismail]

I have never seen one yet too... But you can always build one and share with all of us here

[Herman's Mixen]

Go to our themes site and search for phone you will get 3 hits.
Make from that your desicion

[Sunburned Goose]

Go to our themes site and search for phone you will get 3 hits.
Make from that your desicion

Those are still standalone mobile themes. 

At the moment, I don't have plans on making a redistributable theme but I'll be working with Github, so the code will be available. 

[Hj Ahmad Rasyid Hj Ismail]

Exactly.

Thank you for sharing your code though not in here. Do keep us all posted on your code later.

[Sunburned Goose]

The GitHub project, https://github.com/SunburnedGoose/MidWorld_Gunna.

I'm planning on building a light/dark themed responsive website that will scale from handheld mobile, through tables, up to desktop screens.  This will not be a white labeled theme, as it will be themed for the MidWorld forum. 

Feel free to take and do as you wish with whatever is published to this project.
Goose.

[Sunburned Goose]

I've started working with SVG icons to support retina displays.  I did a very informal poll of the users on our forum and they found that the SVG was usually better than a 2x PNG on a retina display. 

SVG support is inconsistent, to non-existent on some browsers so I'm building a PNG backup for those that lack SVG. 

Here's what I've got so far.   

http://gamma.tiedtheleader.com/?theme=43

[Antechinus]

The problem with trying to do it all with one lot of markup, is that for mobile you end up sending a lot of content that will never be displayed. If you serve a separate mobile interface, it can be stripped down to the content a mobile will actually use effectively.

[Sunburned Goose]

It's a good point to make, and bandwidth constraints are something that we should always keep in mind.  Responsive design doesn't necessarily mean that the page will be the smallest it can be, but it will provide single content experiences that will render appropriate experiences across many viewports.  Those who practice this design pattern are very aware about the bandwidth that images such as avatars, signatures, and the payloads within the body of posts and messages carry.  How do we make those bandwidth appropriate?

To your point, I would say that javascript, css, and HTML will be compressed on its way to the client and remain reasonable.  The difference between the default SMF theme and my mobile theme is around 50k of HTML for an average forum thread of 15 post.  It doesn't seem that significant.  Where we can save the client the most is by avoiding loading sigs and avatars, and next, by reformatting the images in the body of the page.  I don't have an answer for the content within a post as we don't own it (unless it is an attached image).

[Antechinus]

Sure, agree with all of that. Thing is that not loading certain stuff is easier in some ways if you just use a separate lot of templates and css. Keeps things cleaner. The team did look at trying to cover all bases with one lot of templates and media queries, but decided it was better to serve a separate mobile theme for 2.1. The idea is to auto select it via media queries, with the option of manual override just in case somebody does want the full site on mobile (for whatever reason).

The exceptions were going to be areas like admin, which you normally wouldn't want to use on mobile. Most of that can be made surprisingly usable without much additional css, and it doesn't have to be perfect, so using media queries on top of the standard theme seemed to make sense there.

[Sunburned Goose]

IE8 is giving me a hard time with it's lack of support for Media Queries.  I've decided that the theme should be split into two parts, one which is responsive, and another that is static for all the platforms that cannot support the responsive techniques.  This would be browsers <= IE8, FF4.  It gives good coverage for users and this can be done with just changing which index file I load for the template.

[mrintech]

This looks great:



Awesome work. Thanks for sharing

[panafff]

Hello mrintech, I am really courious about this project, do you have some updates? I just downloaded the zip file from github and I would like to know if do you have some preset styles for it that I can use and modify and avoid creating one from zero. Let me know please, thank you and keep the good work.

[kingston250]

This one is so good. I like this design. If you need logo for school then download from here.

[aquagrrl]

I've got a responsive theme I created for my site http://seahorsetalk.fusedjaw.com.  I started with the curve theme but I had to rip out a lot of the html to do what I wanted to do. I also removed a lot of code I don't plan on using, like quick moderation. So it's not going to be something that is portable to a releasable theme without a lot of work.  Plus I broke the dates,  so the calendar doesn't work.  I don't need one now,  but I probably will fix it at some point. But it's more important to me to have the main parts of the site mobile friendly than it is to have everything working perfectly.  (And eventually I'll get it all finished.)

I have to note that the curve theme had a lot of unnecessary html,  and the CSS is really bloated for what it does.  I started the html cleanup with my theme,  but haven't done much with the CSS.  I suspect though that it can be halved.  OOCSS could probably trim it even more,  but I'm not sold on the concept of OOCSS so don't use it.

Oh,  and it's not finished by any stretch, even though it's a working forum.  I haven't touched the private message area,  and profiles and account settings need some work. Since it's a personal project,  I just work on bits of it as I have the time. But I did it because after making my main site responsive and having a bump in traffic. The iPhone is now my largest audience,  followed by the iPad.  Chrome on the desktop comes in third. It's quite pressing to get sites mobile friendly if you want to reach a broad audience.  Apps like tap talk are really not a great solution.

I do hope to go back and finish it, including putting back the stuff I removed and optimizing the theme as a stand alone theme,  but until I do,  if there is anyone that wants it,  I can share all the files and a changelog.

[Antechinus]

Looks nice.

I agree about the markup and css in the 2.0.x default. Quite a bit of it was down to having to support roundy corners n stuff in cruddy old browsers like IE6. The decision had been made to use the curvy theme, and the decision had been made to support IE6 and IE7 (remember this was over five years ago, originally) so markup and css had to be built around that. That doesn't account for all the bloat, but does account for a bit (particularly in markup).

Funnily enough I'm doing a responsive theme for the site I run at the moment. I've rewritten around two dozen templates but it's going rather well. Works from 240px wide up to whatever. Profile is about the only area not finished. I'm not going to worry about admin.

Like you, I have no qualms about ripping out crap I don't want and throwing it away. Trashing default crud you don't want is one of the great joys of theming, IMO.

ETA: Oh and while I think of it, I actually changed my mind over my earlier posts in this thread. I am using the one theme for everything, but I'm not relying on media queries for most of the work. IMO, media queries are best for fairly small-resolution dependent tweaks.

What I've done is have the one set of templates and a custom $context['browser']['is_mobile'] in Sources. That allows me to switch large chunks of markup and php with minimal checking, to get something that works well on phone or desktop. Mobile will get one css sheet of its own (to minimise code and http requests). Desktop/tablet gets a different main stylesheet, with subsidary sheets (only tiny) to deal with the various layout options I've made for desktop.

Mobile layout is auto-loaded, without resetting the layout options in profile, so members can log in from their phones or desktop without having to change their layout settings.

Seems to work.

[aquagrrl]

I agree hiding sucks, but serving up different templates has it's own issues. The biggest is "how do you account for all devices?" Responsive becomes the only way to go.  And you really shouldn't be hiding much on mobile anyway-  one flawed thinking isbthat people on mobile won't want to do the same complex tasks as a desktop user. Simply untrue. Studies of user behavior show time and time again that mobile users expect the same features say the desktop version, and use them if offered.

[Antechinus]

Oh I'm not stripping the site down. I'm using the conditionals to re-arrange content. Sometimes it's better to not try and do that with CSS, even if it is possible. The CSS gets too convoluted, so swapping markup via PHP conditionals makes more sense.

[AMWebby]

I've got a responsive theme I created for my site http://seahorsetalk.fusedjaw.com. 

I like the look of what you've done. I'd love a copy of the files and would gladly share any work I do on them with you.

Can you tell me which portal plug-in you're using?

[aquagrrl]

No portal. The main site is WordPress,  the forums are SMF that I styled to look the same. Having on bad experience
with bridging software,  I vowed "never again!" and keep the two sites separate.

[aquagrrl]

Meant to add . . . I'll strip out the site specific look (logo, bg) and upload to github sometime this week.

[AMWebby]

OK. I wasn't talking about a bridge but a portal mod for SMF like TinyPortal. I'd still be interested in your templates to see how they would work with such a plug in. Let me know once its on github (and the address!)

[andrew55]

aquagrrl - would also to see the files. Please let us know once its on github.

[aquagrrl]

Sorry for the delay, I'm still trying to figure out how to make it so it can be easy to access since I did end up modifying more than just the theme files, and it's reliant on mods. I need to take a closer look at how mods are handled before I can figure out what exactly needs to go on github. But I haven't forgotten, just delayed a bit.

[Antechinus]

My 2c: just post it up as is and tell people which modes you have installed. If they want to adapt it to something else, that's their problem.

Note to staff: IMHO this is more Gfx & Templates, or perhaps Coding Discussion, than Chit Chat.

[ugly]

I've been working on one.  I only really made it for a small community so I really don't know how well it works yet (the server is having problems right now so I couldn't upload it to let others test it).  And, I also don't actually have a mobile phone, so I could only really test with Opera's mobile emulator.  I've played around with it on a localhost and it seems to work.

It mostly uses @media queries and does hide things for narrower views.  That really seems to be the only workable solution right now without some kind of massive overhaul.  And I wanted to keep messing around with the PHP to a minimum.  It also eventually breaks down when it gets too narrow (around 300px wide).

Seems to work in all modern browsers (but I haven't been able to test thoroughly so there's bound to be some quirks).  Starts to look worse (well, worse than it already does) in IE9 and IE8 since I use some CSS gradients and other unsupported effects.  It uses respond.js to get IE8 to work with the media queries.

I don't know if it's good enough to release or for any widespread use.  I just made it hoping it would be good enough for the limited usage of the small community I post with.  But since it doesn't look like there is much in the way of responsive theme options I thought I'd put it out there.

[aquagrrl]

I finally tried my theme out on a default install, and I was pleasantly surprised that it worked fairly well. I'm going to remove the branding and move the name of the forum back to the left corner, then post on github. Still might take me a few days to get that far though.

[aquagrrl]

Okay, if anyone is interested, I have the theme up on github. https://github.com/tamiweiss/responsif
I had to make some changes to work across a default SMF install. You can see it in action at http://responsif.terminus13.com

I want to reiterate, it's not finished, hence the reason it's on github. I will work on it as I have time, but as this thread has shown, it takes me some time to get around to working on things.

[Antechinus]

S'ok. I'd be inclined to drop some of the crud on board and message index on small screens. Trying to keep it too much default SMF just makes for a jumbled and illegible mess IMHO. I prefer to strip it right down and keep it in a couple of clean lines. Much less scrolling required, and far easier to read.

[forumrowerowe]

I modify Flagrant theme to be semi responsive, result: forumrowerowe.bydgoszcz.pl