Responsive Design for Forums

Started by Sunburned Goose, September 25, 2012, 11:35:54 PM

Previous topic - Next topic

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 ;)
Met vriendelijke groet, The Burglar!

 House Mixes | Mixcloud | Any Intelligent fool can make things bigger, more complex, and more violent.
It takes a touch of genius - and a lot of courage - to move in the opposite direction. - Albert Einstein

Former Godfather of our dutch community ;)

Sunburned Goose

Quote from: The Burglar! on September 26, 2012, 06:48:57 AM
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

#13
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

#15
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. :D

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

Quote from: aquagrrl on February 23, 2013, 03:14:58 AM
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.

Advertisement: