Advertisement:

Author Topic: [WIP] Making SMF Responsive  (Read 47712 times)

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
[WIP] Making SMF Responsive
« on: February 16, 2013, 01:37:25 PM »
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
« Last Edit: February 20, 2013, 11:12:41 AM by Mick. »

Offline Matthew K.

  • SMF Super Hero
  • *******
  • Posts: 12,430
  • Gender: Male
    • matthew.kerle on Facebook
    • @matthew_kerle on Twitter
Re: Making Curve responsive may become a pain
« Reply #1 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.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Making Curve responsive may become a pain
« Reply #2 on: February 16, 2013, 01:45:26 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

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Making Curve responsive may become a pain
« Reply #3 on: February 16, 2013, 01:46:09 PM »
Jujst need to add more breaking points..

Offline Liam.

  • SMF Hero
  • ******
  • Posts: 2,240
  • Gender: Male
Re: Making Curve responsive may become a pain
« Reply #4 on: February 16, 2013, 03:07:20 PM »
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.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,411
    • StoryBB/StoryBB on GitHub
Re: Making Curve responsive may become a pain
« Reply #5 on: February 16, 2013, 03:09:42 PM »
-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.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline Liam.

  • SMF Hero
  • ******
  • Posts: 2,240
  • Gender: Male
Re: Making Curve responsive may become a pain
« Reply #6 on: February 16, 2013, 03:35:53 PM »
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.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,411
    • StoryBB/StoryBB on GitHub
Re: Making Curve responsive may become a pain
« Reply #7 on: February 16, 2013, 03:36:12 PM »
Yup. So remove the data, not the table.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline Liam.

  • SMF Hero
  • ******
  • Posts: 2,240
  • Gender: Male
Re: Making Curve responsive may become a pain
« Reply #8 on: February 16, 2013, 03:39:08 PM »
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.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,411
    • StoryBB/StoryBB on GitHub
Re: Making Curve responsive may become a pain
« Reply #9 on: February 16, 2013, 03:40:08 PM »
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 ;)
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Making Curve responsive may become a pain
« Reply #10 on: February 16, 2013, 08:59:31 PM »
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.

Offline Liam.

  • SMF Hero
  • ******
  • Posts: 2,240
  • Gender: Male
Re: Making Curve responsive may become a pain
« Reply #11 on: February 16, 2013, 09:11:26 PM »
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.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Making Curve responsive may become a pain
« Reply #12 on: February 16, 2013, 10:13:20 PM »
Yup,.... im trying twitter bootstrap  on a custom theme ;)

http://twitter.github.com/bootstrap/

Offline Liam.

  • SMF Hero
  • ******
  • Posts: 2,240
  • Gender: Male
Re: Making Curve responsive may become a pain
« Reply #13 on: February 16, 2013, 10:29:14 PM »
Personally I'd recommend Zurb Foundation over Twitter's Bootstrap, it's far more flexible, easier to use, and you can use SASS.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Making Curve responsive may become a pain
« Reply #14 on: February 16, 2013, 10:54:52 PM »
I'll check it out

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Making Curve responsive may become a pain
« Reply #15 on: February 17, 2013, 08:02:15 PM »
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.

Offline Liam.

  • SMF Hero
  • ******
  • Posts: 2,240
  • Gender: Male
Re: Making Curve responsive may become a pain
« Reply #16 on: February 17, 2013, 08:48:54 PM »
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.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Making Curve responsive may become a pain
« Reply #17 on: February 17, 2013, 09:11:03 PM »
It sure looks nice tho'

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,994
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #18 on: February 18, 2013, 12:52:02 PM »
Got more template mockups done..    Unread Topics, forum, search, help and profile.

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

Offline Liam.

  • SMF Hero
  • ******
  • Posts: 2,240
  • Gender: Male
Re: [WIP] Making SMF Responsive
« Reply #19 on: February 18, 2013, 04:47:09 PM »
If only they weren't mockups :'(