[WIP] Making SMF Responsive

Started by Mick., February 16, 2013, 01:37:25 PM

Previous topic - Next topic

Mick.

Just started to try making Curve theme responsive...  So far it fits for small devices but geez the forum itself is going to be a pian lol


http://www.idesign360.com/dev/smf-r/index.php

Excuse the mess,... its a dev site. lol

Matthew K.

I'm on my iPhone and it doesn't look horrible to be honest. Could be more responsive though.

Mick.

Quote from: Labradoodle-360 on February 16, 2013, 01:38:37 PM
I'm on my iPhone and it doesn't look horrible to be honest. Could be more responsive though.
Ya.  im working on it.... lol

Mick.


Liam.

I tried making Curve responsive myself, but ended up rebuilding most of it from scratch because it was a pain. I still have it somewhere but it was never anywhere near completed.

You may want to look into jQuery Data Tables, since it looks like the way Curve uses tables is the killer. They're pretty easy to get responsive, this template has a pretty good example. One thing I could recommend with how you have it currently, is to get rid of the icons on the board index at smaller resolutions, they're not needed for a good experience, more like a nice little perk for users. You could replace them with something else to note if something's been read or not. Similarly, board descriptions don't need to be there, the name of the board should be clear enough.

There seem to be a few little things that are broken/not looking the best on the link you give, but I guess it's a work in progress 'eh? You seem to have completely buggered the "Help" page, just so you know. The way you shrink images with screen size is bad, they'll be too small on some devices to even be able to see, let alone clearly.

Arantor

-sigh- The fact SMF uses tables isn't even remotely the problem.

The problem is that SMF simply has a lot of data to display, e.g. in the message index. What you need to do is hide some of those items in smaller displays when you want to focus on what's important.

Responsive only really makes sense if you're not trying to display *too* much all at once, and the forum UI does not lend itself to doing this because of the vast amount of information going on at once.

Liam.

I know it's not tables themselves that are the problem, but the fact there are so many with so much unnecessary data inside, making them break when they get squished due to the way they're currently using percentages.

Arantor


Liam.

I meant removing cells as opposed to entire tables, pardon me. It seems redundant removing just the data, if for example, you want to remove the board index icons on lower resolutions, the entire <td> covering that may as well be dealt with.

Arantor

We're sort of on the same page. But the problem still isn't the table itself. It's the data in it. Getting rid of the data implies getting rid of the td too ;)

Mick.

Meh. I give up with curve.  lol,.... i have better chances with a custom theme with its own files to strip most of its crap.

Liam.

I thought you meant removing the data within the <td>, leaving the cell there taking up space, but blank. If you meant removing that too, then yes we're on the same page.

Don't give up on it Mick, you've already come so far! Although, if you do try to start with another theme, why not start from scratch? That'd be far easier to get it how you want.

Mick.


Liam.

Personally I'd recommend Zurb Foundation over Twitter's Bootstrap, it's far more flexible, easier to use, and you can use SASS.

Mick.


Mick.

Here's a mockup of SMF 3.0 boardindex using twitter bootstrap.

http://www.idesign360.com/dev/twitter-bootstrap-8c7f9c6/docs/examples/2.php

Id would take ages making the entire forum responsive.  Lots of templates there. Boo.

Liam.

It may take a while (unless multiple people work on it at the same time ;) ), but it'd definitely be worth it in the long run.

Mick.


Mick.

Got more template mockups done..    Unread Topics, forum, search, help and profile.

http://www.idesign360.com/dev/twitter-bootstrap-8c7f9c6/docs/examples/2.php

Liam.


Advertisement: