« Pretty URLs things
Multiple default skins?
Moving topics, you can now send a PM »

Nao

  • Dadman with a boy
  • Posts: 16,082
Multiple default skins?
« on March 15th, 2012, 08:55 AM »
Another minor feature that I've been thinking of for a few days, is the ability to allow for multiple default skins.
It's easy really.

- Default skin for guests
- Default skin for new members

Until now, easy to grasp... But even easier:

- Default skin for mobile devices

This would allow for Wedge to use the 'Wireless' skin by default on iPhones and company, and admins would be able to install Dragooon's Wedge4Mobile theme, and then choose his theme as the default mobile skin as a replacement for Wireless, if they think it's too limited in terms of usability.

I'm sure we could also think of other opportunities to set a different default skin, but for now let's focus on mobile.
Yesterday I went to sm.org, wondering if someone had already thought of it, and indeed emanuele posted a similar mod last month, so I thought it was worth mentioning, just in case I get accused of stealing an idea -- I did think of it by myself, but I also acknowledge that I'm now aware there's a working implementation at SMF :P
I was curious and looked at the detection code (wanted to see if it differentiated between iOS devices and used any tricks to retrieve resolution, such as Ajax polling or a small redirection via JavaScript -- not so much), it's an open-source external script that's being used, I'm just surprised that it can take 32 kilobytes just to detect a mobile device... Oh my :lol:
Wedge does it in a single line, but obviously it's certainly not as extensive!

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Multiple default skins?
« Reply #1, on March 15th, 2012, 08:58 AM »
I have a fairly simple mobile detection code that doesn't take more than 30 lines. Not really extensive but works fairly well.
The way it's meant to be

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Multiple default skins?
« Reply #2, on March 15th, 2012, 09:05 AM »
Well, could definitely use that ;) I'm especially interested in speed (since we'll be running that code even on desktop) and strictness, i.e. ensure the device IS confirmed to have a smaller resolution than usual, e.g. testing for iPhone or iPod Touch or Android but remove devices that have a higher resolution e.g. Galaxy Note has a small screen but is good enough for normal browsing AFAIK, so where should it go?) instead of just ensuring it's running iOS/Android/etc and isn't a tablet...

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Multiple default skins?
« Reply #3, on March 15th, 2012, 09:10 AM »
That level of checking can be best done via CSS media queries. I treat Note as a mobile device and let my theme handle the splitview or single view dilemma, since at the end of the day it's a touch device. Here's the code that I use

Code: [Select]
$user_agents = array(
array('iPhone', 'iphone'),
array('iPod', 'ipod'),
array('iPad', 'ipad'),
array('PocketIE', 'iemobile'),
array('Opera Mini', isset($_SERVER['HTTP_X_OPERAMINI_PHONE_UA'])),
array('Opera Mobile', 'Opera Mobi'),
array('Android', 'android'),
array('Symbian', 'symbian'),
array('BlackBerry', 'blackberry'),
array('BlackBerry Storm', 'blackberry05'),
array('Palm', 'palm'),
array('Web OS', 'webos'),
);

foreach ($user_agents as $ua)
{
$string = $ua[1];
if ((is_bool($string) && $string == true) || (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), $string)))
/** Do mobile theme stuff **/
}

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Multiple default skins?
« Reply #4, on March 15th, 2012, 10:42 AM »
Quote from Dragooon on March 15th, 2012, 09:10 AM
That level of checking can be best done via CSS media queries. I treat Note as a mobile device and let my theme handle the splitview or single view dilemma, since at the end of the day it's a touch device. Here's the code that I use
Hmm yeah that's the thing -- philosophy differences. A mobile device can either be seen as a "device without a mouse or keyboard" (i.e. you need to redo the UI), or a "device with a low resolution". I chose to treat them as low-res devices first. The UI rewrite will come later. To me, what matters in priority is to ensure the text is readable without having to double-tap the screen. This can be done through a media query indeed, and much of it is actually done by default in Wedge (even in Weaving), but as Pete requested that a mobile theme removes elements it's going to hide anyway (because mobile devices are often limited when it comes to bandwidth), I decided to add an extra stylesheet for custom stuff, and deal with userboxes in the template... I don't know if it's for the *best*, but it's certainly looking better than a stock SMF install on my iPod ;)

BTW, PocketIE is a PocketPC program and as such, very old stuff. I think using 'IEMobile' would be smarter, as it accounts for Windows Mobile browsers.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Multiple default skins?
« Reply #5, on March 15th, 2012, 03:36 PM »
Quote
- Default skin for guests
- Default skin for new members

Until now, easy to grasp... But even easier:

- Default skin for mobile devices
Works for me.

Also: option to disable users picking their own (which is a shade cleaner than having to remove skins)
Quote
Hmm yeah that's the thing -- philosophy differences. A mobile device can either be seen as a "device without a mouse or keyboard" (i.e. you need to redo the UI), or a "device with a low resolution"
Yup. Though most current mobile devices subscribe to both camps; almost all mobile phones are both, most tablets are the former, but you can get keyboards for both.

I do get the impression that the mobile support should be handled less by a skin and more by a theme (bearing in mind that we can fall back to the default)
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Multiple default skins?
« Reply #6, on March 15th, 2012, 04:02 PM »
Quote from Arantor on March 15th, 2012, 03:36 PM
Works for me.

Also: option to disable users picking their own (which is a shade cleaner than having to remove skins)
You mean, adding a per-skin option like <disable> and <hide>, right...? (disable = not selectable, not usable, only used for inheritance. hide = not selectable, but usable through e.g. default skin selection.)
The main reason I never worked on these, is that it's pretty much impossible to put these variables into skin.xml because it means admins have to edit them manually, which is precisely what I want to avoid (so that they can easily upgrade their site later...)
So it has to be done in the admin area, something like having a variable that specifies skin paths to ignore... But I'm not big fan of that either ;) If only because I like the idea of skins being so flexible that, like plugins, you can immediately add or remove them through FTP and they'll be usable or deleted immediately. (Hmm, actually I never tried deleting a skin while it was being used... should try that.)
Quote
Yup. Though most current mobile devices subscribe to both camps; almost all mobile phones are both, most tablets are the former, but you can get keyboards for both.
Except it's very unlikely you'd do that. (There's only the Asus Eeepad Transformer/Transformer Prime that does that on a wider scale, AFAIK. These definitely qualify for full desktop experience to me.)
Quote
I do get the impression that the mobile support should be handled less by a skin and more by a theme (bearing in mind that we can fall back to the default)
Well, mobile support is included in our default theme... Considering that it's less than 30 lines of code or so, I don't think it's that big a deal. Do you?

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Multiple default skins?
« Reply #7, on March 15th, 2012, 04:15 PM »
Quote
You mean, adding a per-skin option like <disable> and <hide>, right...? (disable = not selectable, not usable, only used for inheritance. hide = not selectable, but usable through e.g. default skin selection.)
Yeah, something like that, so that the admin can set a skin as not being selectable by users. One of the things that I personally would want to do is set up a theme/skin/whatever and not let anyone else have anything else because on my site, it's about how I want to present it.
Quote
Except it's very unlikely you'd do that. (There's only the Asus Eeepad Transformer/Transformer Prime that does that on a wider scale, AFAIK. These definitely qualify for full desktop experience to me.)
Or an iPad with any Bluetooth keyboard ;)
Quote
Well, mobile support is included in our default theme... Considering that it's less than 30 lines of code or so, I don't think it's that big a deal. Do you?
That part isn't a big deal and I'd certainly agree with doing it.

The reason I'm so adamant about mobile support being a theme and not a skin is as indicated the reduction in bandwidth (and, if we're careful, there's no reason why we couldn't trim certain data we're not showing from even being queried in the first place)

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Multiple default skins?
« Reply #8, on April 25th, 2012, 10:29 AM »
So... This morning I worked on (finally) adding a separate mobile theme setting to Wedge.
*Normally*, if everything goes well, you should be getting the Wireless skin by default if you visit Wedge on a smartphone or tablet (I know -- with the iPad 3 now sporting a larger resolution than most desktop monitors, it sounds silly to include that in the mobile mode as well... probably should add some media queries to compensate a bit...), and the Weaving skin by default if you visit it with a desktop browser. These two settings should be independent, i.e. you can set Weaving in mobile mode and set Wireless in desktop mode, although there's little point in doing that, and I don't think one can select their mobile skin for now. (I haven't tried... I'm pretty sure it won't work though :P)

Just wanted to know if it works for you...
(It works on my iPod Touch, obviously it'll work on any iPhone too.)

(Two quick ways to confirm it's Wireless: the font is bigger :P, and forum posts have the avatar on top rather than on the left/right.)

billy2

  • Trying to earn brownie points for a lads trip to the Red Sea. Minus 1 already - just for asking!!
  • Posts: 350
<br /><br />cough, cough.

PantsManUK

  • [me=PantsManUK]would dearly love to dump SMF 1.X at this juncture...[/me]
  • Posts: 174
Re: Multiple default skins?
« Reply #10, on April 25th, 2012, 12:08 PM »
Working on Android ICS (CyanogenMod 4 on SGS II, default browser and Sleipnir tested).
« What is this thing you hoomans call "Facebook"? »

lazyt

  • Code Idiot
  • I still haven't managed to break anything. But not for lack of trying:-) :-) :-)
  • Posts: 40

Nightwish

  • Posts: 41
Re: Multiple default skins?
« Reply #12, on April 25th, 2012, 12:48 PM »
Works fine (Android 2.3, both stock browser and Opera Mobile tested), but the default font size could be a tad bigger.

BTW: Here is a very reliable, still relatively lightweight PHP class for detecting mobile devices. It pretty much detects everything you throw at it.
Every program has at least one bug and can be shortened by at least one instruction -- from which, by induction, one can deduce that every program can be reduced to a single instruction that doesn't work.
My SMF-based forum fork

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Multiple default skins?
« Reply #13, on April 25th, 2012, 01:37 PM »
Quote from Nightwish on April 25th, 2012, 12:48 PM
Works fine (Android 2.3, both stock browser and Opera Mobile tested), but the default font size could be a tad bigger.
And on my iPod it looks perfect to me... (Except for headers which are of variable sizes, hmpf...)
Quote
BTW: Here is a very reliable, still relatively lightweight PHP class for detecting mobile devices. It pretty much detects everything you throw at it.
Yup, I actually read about that in Web Designer Magazine (or was it .Net, I can't remember), and downloaded the two 'major' versions -- v2.x which was started by a new programmer last month, and v1.x which is the original. Interestingly, although v2 matches a LOT more user agents, I find it a bit too time consuming, so I took v1.x and rewrote it to be as fast as possible and match 'realistic' user agents (I also added a few UAs of mine that I thought would make sense.)

The code is also very, very tight now...

Code: [Select]
<?php
/**
 * Wedge
 *
 * Mobile browser detector. Very simplistic code, based on an early version of Mobile_Detect (MIT license).
 *
 * @package wedge
 * @copyright 2010-2012 Wedgeward, wedge.org
 * @license http://wedge.org/license/
 *
 * @version 0.1
 */

class weMoDe
{
 protected $devices = array(
 'Generic' => 'mobile',
 'iOS' => 'iphone|ipod|ipad',
 'Android' => 'android',
 'BlackBerry' => 'blackberry|rim tablet',
 'Symbian' => 'symbian',
 'Windows' => 'windows ce|windows phone',
 'PalmOS' => 'palm|avantgo|plucker|xiino',
 'Others' => 'kindle|silk|playstation|nintendo|wap|up.|bolt|opera mobi'
 );

 public function isMobile()
 {
 if (empty($_SERVER['HTTP_USER_AGENT']))
 return false;

 $ua = strtolower($_SERVER['HTTP_USER_AGENT']);

 if (isset($_SERVER['HTTP_PROFILE']) || isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_X_OPERAMINI_PHONE_UA']))
 return true;

 if (isset($_SERVER['HTTP_ACCEPT']) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/vnd.wap.wml') !== false || strpos($_SERVER['HTTP_ACCEPT'], 'application/vnd.wap.xhtml+xml') !== false))
 return true;

 foreach (explode('|', implode('|', $this->devices)) as $device)
 if (strpos($ua, $device) !== false)
 return true;

 return false;
 }
}

?>

However, by now I'm not even sure this is the 'right' thing to do anymore.
Because what bothered me in the first place was: inability to store the result in the database (because, basically, your account isn't tied to your browser), or a cookie (I like it to stay as short as possible really...), then it struck me that I could simply use a session variable for that... 'Eh.' Actually, I've never (ever!) used $_SESSION before to store anything in my own code, but I should do it more often -- if only because it acts as a secondary cache where I can put complex calculations that don't need to be done on every single page.

What do you think...?

I've rewritten my (short) code to use the session. Seems to work. Maybe I should switch to Mobile_Detect 2.x and use sessions for it...

Nightwish

  • Posts: 41
Re: Multiple default skins?
« Reply #14, on April 25th, 2012, 05:40 PM »
Quote from Nao on April 25th, 2012, 01:37 PM
What do you think...?
A session variable is probably the best way to store such short lived objects that have no business in the database. Cookie would probably work equally well, but with all the madness about cookies, it's probably best to avoid them when possible :)

Besides, how often do sessions expire? Shouldn't be a problem to run the detection code every 15 minutes (or so).

P.S. Just noticed. I can like my own posts. Intentional behavior?
« Pretty URLs things
Moving topics, you can now send a PM »