Suggestion: mobile user agent recognition

Hi all,
I have a small suggestion to be included in the G2. Since mobile phones with internet access are becoming more popular it would be nice if Gallery was more accessible with mobile devices. By accessible I mean for example restucturing the page layout, different themes, down-scaled images, etc.

I have written few lines of code that allow easy recognition of mobile phones and later usage of that information for example in layout/themes.

In GalleryInitSecondPass() (init.php) right after initializing the session I added the following lines:

/*
 * If we have a mobile user, set the necessary session variables.
 * These variables can later be used, for example, to modify the page 
 * layout to better fit to small screen size.
 */
if (GalleryUtilities::isMobileUser()) {
    $session->put('core.mobile.user', true);
    $screen = GalleryUtilities::getScreenSize();
    $session->put('core.mobile.width', $screen['width']);
    $session->put('core.mobile.height', $screen['height']);
}
else {
    $session->put('core.mobile.user', false);
}

You can probably think of some better names for the session variables.

The two functions mentioned above are defined in GalleryUtilities.class as follows:

/**
 * Return true if the user agent is mobile device. Otherwise return false.
 *
 * @param string The user agent identification string. Optional, if not
 *		provided, then $_SERVER['HTTP_USER_AGENT'] will be used.
 * @return true or false
 */
function isMobileUser($userAgent = null) {
    if ($userAgent == null) {
        $userAgent = $_SERVER['HTTP_USER_AGENT'];
    }

    if (GalleryUtilities::getScreenSize($userAgent) !== null) {
        return true;
    }

    return false;
}

/**
 * Return the screen size of the mobile user agent. If the user is not regocnized 
 * to be a mobile device then return null. File mobileterminals.inc contains a list
 * of known mobile user agents.
 *
 * @param string The user agent identification string. Optional, if not
 *		provided, then $_SERVER['HTTP_USER_AGENT'] will be used.
 * @return array(width, height)
 */
function getScreenSize($userAgent = null) {
    global $gallery;

    /* Get the screen size definitions. */
    $screenSizes = array();
    $basedir = $gallery->getConfig('code.gallery.base');
    include_once($basedir . 'mobileterminals.inc');

    if ($userAgent == null) {
        $userAgent = $_SERVER['HTTP_USER_AGENT'];
    }

    /* Step through the array $screensizes and try to find matching user agent. */
    foreach (array_keys($screenSizes) as $key) {
        /* Check if user agent matches this screen size key. */
        if (preg_match($key, $userAgent)) {
            /* It matched, so return screen size. */
            return $screenSizes[$key];
        }
    }

    return null;
}

The mobileterminals.inc file is just a definition of an array that has different UA strings as keys and screen sizes as values. It is in separate file so that it's easy to update. It looks like this:

<?php
/**
 * This file contains a list of known mobile phone user agent identification 
 * strings. Each key of the $screenSizes array is a regular expression that 
 * matches the UA string and the value is an array that stores the width and
 * the height of the mobile device's screen size.
 *
 * If you want to add more mobile phone models just add new lines following 
 * the same structure than in the existing ones. The more specific regular
 * expression you use to match the US string, the higher up in the list it 
 * should be. If it's very generic then add it at the end of the array.
 */

// Phones that use the Series 60 platform, e.g. Nokia 3650 and 6600.
$screenSizes['/.*?Series60.*?/'] = array('width' => 176, 'height' => 208);
// Phones that use the Series 90 platform, e.g. Nokia 7700.
$screenSizes['/.*?Series90.*?/'] = array('width' => 640, 'height' => 320);

// The generic mobile phone using Symbian OS. All Symbian phones don't necessarily 
// have the same screen size so if you want to include some specific Symbian phones 
// then place them above this line.
$screenSizes['/.*?Symbian.*?/'] = array('width' => 176, 'height' => 208);

?>

What do you think, could this be included in the G2? This would allow the development of mobile friendly themes and layouts and possibly a lot more nice features. As an example take a look at http://mummola.cs.tut.fi/mobgallery/ where we have implemented this in Gallery 1.4.1.

-Jerome
[rannikko at cs dot tut dot fi]

That's pretty cool.

So what kinds of modifications would we have to make to the layout and theme to support mobile platforms? Is there a best practices guide out there for porting your site to a platform like that?

G2 will be entirely CSS based when we're done with the next round of refactoring the UI so we could obviously do a lot by just changing the stylesheet (which would be controlled by the theme). Since every album can have its own theme, we'd have to have themes that have a mobile vs. desktop version.

What kinds of changes would we have to make to the layout? It looks like you're generating two different versions of the thumbnails (200x150 for desktop and 80x60 for mobile). Thumbnail sizes are controlled by per-album preferences and can be overridden by per-item preferences, so in order for an album to be mobile friendly we'd have to use a mobile-friendly layout, mobile-friendly theme and choose our per thumbnail settings wisely for each album that we want to be viewed that way. It's definitely doable.

Just an idea, but if something like this does get implemented. Maybe the people working on it should take a look over as OSNews to see what they've done.

Looks like they've done a lot of work to make their site work across a lot of different devices.

http://www.osnews.com/story.php?news_id=6191

http://www.osnews.com/comment.php?news_id=6191

Perhaps Eugenia, if asked nicely ;), would even share some of the work she's done. Like the UA srtrings she's collected (though I hate browser sniffing), and maybe some of the quirks between different platforms. Most of this should be able to be done via CSS as long as the positioning (layout) for G2 is pure CSS and does not use tables ;)

Hi folks,

I'm writing from the land of mobile phones (=Japan).
If you going to support mobile phones you should consider the following points.

1) size-wise a distinction between mobile phones and pda's
2) there are many, many different types of mobile phones in Japan
3) there are different codesets being used
4) there are different web standards

1) can probably easily solved by defining a 'device category' (PC, PDA, Mobile).

2) The various types and models are commonly distinguished by the its user-agent settings. It would be a good idea to define a *.inc file which may contain actual user-agent strings as well as regex definitions

3) Currently NTT i-mode phones are using Shift-JIS while the website might be in EUC-JP, UTF-8 or Shift-JIS. This means that you might have to do charset conversions.

4) While NTT's i-mode and Vodaphones J-SKY are pretty similiar, KDDI is using WAP.

BTW, this year or next year all main carriers in Japan will be introducing CDMA (UTMS). KDDI is already offering a first version.

Tja, just some pointers.

Bernd

mindless
GalleryMobileLayout.class seems like a good idea. Also the fetchLayout() modification looks good but I have a question about that (just to make sure I understood what you ment). You wrote

Do you mean that there would be only one mobile layout? Or didn't I just understand? I think that there probably is need for more than just one different mobile layout, just like there are many normal layouts (and themes).

I think maybe one way to do this is to have in the different layout directories layout.inc and mobilelayout.inc. The latter implementing the MobileLayout class. Then fetchLayout() would in the case of mobile UA first check if it can load an implementation of the MobileLayout and if not then use a default mobile layout, e.g. mobile version of the Matrix layout.

Or, yet another way, just modify the existing layout(s) so that the layout itself can adapt to the mobile device.

Yes, all what's not absolutely necessary info should be left out. It speeds up the download quite a bit on mobile devices and also saves the screen space for the main content. Althoug it all doesn't necessarily have to be in single column since some new phones using Series90 platform have quite wide screens - 640 pixels (height 320). Instead we can figure out the number of columns by reserving, say, 150 pixels for each (thumbnail) image horizontally. Here's an example from loadTemplate() in layout.inc, just before calling _loadAlbumTemplate() or _loadSingleTemplate().

if (GalleryUtilities::isMobileUser()) {
  // give each mobile picture 150 pixels of horizontal space
  $cols = floor(GalleryUtilities::getScreenWidth()/150);
  if ($cols > $params['columns']) {$cols = $params['columns'];}
  // we want approximately the same number of pictures per page
  $params['rows'] = floor($params['rows'] * $params['columns'] / $cols);
  $params['columns'] = $cols;  
}

(The getScreenWidth() function returns (as the name says) the width of the screen. I'll post the new versions of the mobile related functions soon.)

-Jerome
[rannikko at cs dot tut dot fi]

Hi tokyoman

1&2) As you suggested yourself it is best to take care of these in a separate, easy-to-update file. As you can see from the first post this is just what we've done. And when the screen size is known it doesn't really matter if the device itselft is phone or pda or whatever.

3) The mobile user interface is just meant to present the contents of Gallery in a mobile friendly way, not to make any changes (like language) to it. The Gallery itself, though, can be fully localized language-wise.

4) Like said in the previous point, the aim is not to make any changes in the actual content, only the presentation. Gallery is in HTML and CSS and the mobile user interface is not going to change that. Especially since 'all' new internet enabled mobile phones support (X)HTML and CSS I don't see it very important to worry about other (minor) options like WML.

I hope these comments answered (some of) your concerns.

-Jerome, from another land of mobile phones (=Finland)
[rannikko at cs dot tut dot fi]

Hi Jerome,

A PDA screen is perhaps 5 times as big as a mobile phone screen while mobile phones maybe vary by up to 50%. Maybe you want to use the bigger PDA screen to display additional content (or to structure it differently) than for mobile phones.

3) Sorry, but you're missing the point. The gallery itself may be running in EUC-JP or UTF-8 while the mobile phone needs the content in Shift-JIS. So we're talking about present mobile content and PC content in different codesets.

4) In Japan there is a big installed basis of phones using different versions of i-mode etc. It is correct that new i-mode phones support xhtml (Open Mobile Alliance standard www.openmobilealliance.org) but KDDI phones support a different XHTML type. In addition all variants in Japan support (different) sets of special 1 character pictures showing anything from cars, restaurants, wheather, (NTT i-mode over 200, Vodafone some 500, KDDI up to over 800 - depending on the type).

You should have at least the flexibility to differentiate by carrier and major mobile phone type. If you don't want to go into the details required to present the content in a nice and appealing way - which is very important in Japan - then Japanese users will appreciate if you'd prepare some user-exits allowing us to easily add functionality.

Regards,

Bernd

FYI, I'm monitoring this thread and it looks cool, but I don't have the cycles (and I don't think we have the time) to make a serious effort to get this into G2.0. I think it's a good contender for G2.1 or thereabouts. I don't think that the framework precludes any of this and will keep an eye on the discussion to try to ensure that we leave the door wide open for this kind of approach, but the primary target for G2.0 is web browser based interaction.

Again - G2 is entirely UTF-8 based. If there is a need for another character set for mobile phones, we need to arrange some sort of translation - an intermediary for those phones that don't support UTF-8.

We went with UTF-8 so the interface can be in a different language from the metadata. With UTF-8 one can view an album of photos of Greece with the Greek names in Greek, the controls in Japanese, and a few comments in Cyrillic from a Russian friend (provided that you have all of the appropriate fonts).

Behind the scenes we convert input into html entities so that we are only storing ASCII text in the database.

Anyway, putting together a translation layer that translates any UTF-8 characters into Shift-JIS (or whatever character set the phone uses) shouldn't be too terribly difficult. Translating input from a phone into html entities also shouldn't be too difficult, but any admin who wants to make that available would probably have to have extra language libraries installed on their system.

I'd love to keep chatting about this - maybe we could start a new thread to discuss the character set needs of phones/pdas/whatever.

any progress on this? has it been discusses elsewhere since 2004?????

pity!!! I cant believe it!!!