News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

[WIP] Making SMF Responsive

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

Previous topic - Next topic

Mick.

Since the responsive theme im working on is 'custom', yes, some if not all mods may be applied manually. I dont see SM making a responsive default theme in the near future...but hey, what do i know. Another solution is, forking SM and make the default theme responsive and create mods for it. But quite frankly, i'm not interested in forking or creating mods for it at the moment. Besides, it's a lot of work making SM responsive,..we're talking about a handful of templates, re-do the css, etc. Sure, welcome to the 21st century but man! it's too much. lol

Its not bad looking http://www.idesign360.com/dev/smf-r/index.php and that's just the board index only and at the end, it may not look like that. It may end up with the boards in one line as original.

Trekkie101

It's looking quite nice, even the colour scheme is alright, bootstrappers often have a tendency to use too many strong blue's but this goes back to the start of SMF with the subdued grey, although we had purple too. :P

青山 素子

Quote from: andrew55 on March 17, 2013, 01:13:38 AM
Great selection of mods with SM, but to have to install/update them all manually to be able to use a responsive theme, seems like a nightmare. Shucks!

You can still attempt to install the modification and only manually edit the items that failed install. It's not perfect, but it's still better than fully manual installation.
Motoko-chan
Director, Simple Machines

Note: Unless otherwise stated, my posts are not representative of any official position or opinion of Simple Machines.


Mick.

I have 2 versions...

http://idesign360.com/dev/index.php

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


If we're going with today's trend in responsiveness, this is the one http://idesign360.com/dev/index.php (boardindex has no css atm)

Antechinus

Quote from: Mick. on March 17, 2013, 01:28:31 AMBesides, it's a lot of work making SM responsive,..we're talking about a handful of templates, re-do the css, etc. Sure, welcome to the 21st century but man! it's too much. lol
It is. Get rid of the tables. Seriously. Yes, you can try hiding stuff in them, but honestly it's better to ditch them. Gives you a lot more options.

Mick.

Quote from: Antechinus on March 17, 2013, 04:18:07 PM
Quote from: Mick. on March 17, 2013, 01:28:31 AMBesides, it's a lot of work making SM responsive,..we're talking about a handful of templates, re-do the css, etc. Sure, welcome to the 21st century but man! it's too much. lol
It is. Get rid of the tables. Seriously. Yes, you can try hiding stuff in them, but honestly it's better to ditch them. Gives you a lot more options.
2 templates I don't have to mess with, help and registration agreement bahahaha

Antechinus

I wrote a mobile-friendly theme for the 1.1.x site I run. Had to completely rebuild over 25 templates. Fun and games. :D

BTW: if you want to do 2.0.x admin it's actually not that hard, for most of it. I did it for some of the 2.1 alpha stuff.

Mick.

Looking at it from my iPhone the board index doesn't look bad. What really needs work is the display template.

Antechinus

Lotta scrolling for not much information. :) I ditched topic and post counts. I also just have the member name rather than the link, mainly to keep enough finger space between links.

But yeah, Display is one of the worst. Profile templates are a mess on a phone too.

Mick.

Good idea. I see you removed the board description.

Antechinus

Yup. Not really needed on a phone, IMO. The name is enough for rmost people to get the right idea.

That theme isn't really "responsive" as such. It's sorta half responsive and the rest "adaptable". This is mainly to allow people to select some of their preferred options rather than just being force fed one option. This was good in some ways, because it allowed me to use PHP conditionals instead of just relying on display: none; etc in the CSS. This means less crap actually loaded on mobile and more options for how it's arranged.

The code's not optimised yet. I basically got it to the stage where people weren't grumbling, then took a break (it was a f#$kload of work). I'll optimise it soon when I get a bit more time.

Mick.

#51
Quote from: Antechinus on March 17, 2013, 09:33:20 PM
Yup. Not really needed on a phone, IMO. The name is enough for rmost people to get the right idea.

That theme isn't really "responsive" as such. It's sorta half responsive and the rest "adaptable". This is mainly to allow people to select some of their preferred options rather than just being force fed one option. This was good in some ways, because it allowed me to use PHP conditionals instead of just relying on display: none; etc in the CSS. This means less crap actually loaded on mobile and more options for how it's arranged.

The code's not optimised yet. I basically got it to the stage where people weren't grumbling, then took a break (it was a f#$kload of work). I'll optimise it soon when I get a bit more time.

So thats a mobile theme correct? ...and you took those parts out?

Im going to to use display: none; on media queries. I doubt it makes a difference.

   @media only screen and (max-width: 479px) {

      .posting_icons {
         display: none;
      }
      .lastpost {
         display: none;
      }
}

Antechinus

It's the site default theme, and is coded to handle everything from 240px wide up to whatever. So yes, it's a mobile theme, but also a tablet and desktop theme. Sort of a "One theme to rule them all". :D

Only catch with display: none; and media queries is that you're still loading all that markup and css even if you don't see it. Same with any images called in those elements. They get downloaded regardless. IOW, it'll work, but phones get fed a lot of stuff that's no use to them, so in some ways it's not so good. Phones are getting pretty capable these days though, so it probably wont kill the experience for most people.

ETA: Code for the board description and name works like this:

<div class="info">
<h4><a href="', $board['href'], '" id="b', $board['id'], '"'; /*name="b', $board['id'], '"*/ echo ' title="', $board['posts'], ' ', $txt[21], ' ' .'in '. '', $board['topics'], ' ', $txt[330], '">', $board['name'], '</a></h4>';
if (($settings['theme_layout'] !== 'Mobile'))
{
echo '
<p>', $board['description'], '</p>';

// Show the "Moderators: ". Each has name, href, link, and id. (but we're gonna use link_moderators.)
if (!empty($board['moderators']))
echo '
<p class="smalltext"><i>', count($board['moderators']) == 1 ? $txt[298] : $txt[299], ': ', implode(', ', $board['link_moderators']), '</i></p>';
}
else
{
echo '
<p class="board_description"><span>Latest by ', $board['last_post']['member']['name'], '</span>', $board['last_post']['link'],'</p>';
}

echo '
</div>';

Mick.

What I learned lately, you have to create your own divs and wrap the code to hide things on mobile.

For instance, the message index uses some classes that are also used on the board index in which I don't want to hide both.  All in all, it's a lot of work but at least it's a matter of using display: none and viola.

I've learned a lot using this responsiveness setup so hopefully I can have something usable. The problem I now foresee is mod installation. That's going to be burden to some.

Antechinus

That's "voila". A viola is a large violin. :D

Kindred

Mick,

so, mod installation - where the mod actually edits template firles directly, is going to be an issue...
However, as more mods start using the hooks, you're going to encounter another issue
-- Although those mods will install cleanly (because there are no direct code edits) those mods have their own templates, css and javascript which may not be "repsonsive"
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Mick.

Quote from: Kindred on March 18, 2013, 09:34:20 AM
Mick,

so, mod installation - where the mod actually edits template firles directly, is going to be an issue...
However, as more mods start using the hooks, you're going to encounter another issue
-- Although those mods will install cleanly (because there are no direct code edits) those mods have their own templates, css and javascript which may not be "repsonsive"


Exactly. Popular mods like Gallery, Portals will be an issue.  The idea sounds good keeping up with todays trend but im feeling that this may end up in a dead end.

It feels like im reconstructing SM from the ground up.  An alternative would be forking SMF and create themes and mods.   Bah.

Mick.


Antechinus

#58
Quote from: Mick. on March 18, 2013, 09:49:23 AMExactly. Popular mods like Gallery, Portals will be an issue.  The idea sounds good keeping up with todays trend but im feeling that this may end up in a dead end.

Depends what you're aiming for. If you want something that will automatically deal with any and every mod, and still work on a phone, then it's probably a dead end. If you just want something that works on a phone, and mods are a seperate issue that people have to deal with themselves, then no problem.

If it's any consolation, portal templates are usually fairly easy to fix. I can't imagine a gallery being that difficult either. Still, if you're writing the thing it's your choice as to what you support and what you don't support. Traditionally, mod authors have been responsible for helping users figure out how to get their mods working on custom themes. ;)


QuoteIt feels like im reconstructing SM from the ground up.

Yup. Basically that's what you need to do. That's why I decided to write myself one lot of templates and css that handles all resolutions. It's less work for me in the long run, and gives a consistent look on all devices.

Once I have it, I can then do separate themes on top of it without a lot more work. IOW, I basically wrote a new default theme.

emanuele

Quote from: Mick. on March 18, 2013, 09:49:23 AM
An alternative would be forking SMF and create themes and mods.   Bah.
Or just push things to the open repository so that something may end up in a future version of SMF...


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

Advertisement: