Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2011-03-22 00:02:00
- gomedia
- Plugin Author
- Registered: 2008-06-01
- Posts: 1,373
adi_mobile - Mobile browser detection
Summary
adi_mobile implements mobile browser detection, together with some website mode switch functionality and viewport measurement.
See the help supplied with the plugin, or have a look online.
Features
- detect device types: Android, Blackberry, Opera, Palm, Windows, iPhone, iPad, Generic, Tablet etc
- website mode switch mechanism, whereby a user can change between a mobile or normal version
- detect viewport dimensions & orientation
Why another mobile plugin?
CSS media queries are great but they don’t deliver mobile content – they simply restyle desktop content. act_if_mobile can do the content delivery for mobiles, but I wanted more granularity on identifying mobile types and I wasn’t keen on using code that requires a yearly subscription for use on commercial websites.
Examples
Serve up specific code to any mobile:
<txp:adi_if_mobile>
- all mobiles will see this -
</txp:adi_if_mobile>Serve up specific code to an iPhone:
<txp:adi_if_mobile type="iphone">
- only iPhones will see this -
</txp:adi_if_mobile>Serve up specific code to an iPhone OR an Android:
<txp:adi_if_mobile type="iphone,android">
- only iPhones & Androids will see this -
</txp:adi_if_mobile>Deliver content according to the viewport width:
<txp:adi_if_mobile width="narrow">
- viewport is narrow
<txp:else />
<txp:adi_if_mobile width="wide">
- viewport is wide
<txp:else />
- viewport is medium
</txp:adi_if_mobile>
</txp:adi_if_mobile>Targetting tablets:
<txp:adi_if_mobile>
Mobile content here
<txp:else />
Desktop & Tablet content here
<txp:adi_if_mobile type="tablet">
Tablet-only content here
<txp:else />
Desktop-only content here
</txp:adi_if_mobile>
</txp:adi_if_mobile>Demo
Visit this test page using a mobile. There you’ll see what’s been detected and if you’ve got an iPhone or an Android it’ll automatically adjust according to the orientation.
And because you “never buy a builder’s house” – the mobile version of my website is “a work in progress”, so don’t laugh. If you do see any major oddities though, please let me know via the feedback link.
Version History
- 0.2
- new attribute ‘useragent’
- new attribute ‘include’
- upgraded Mobile_Detect class (now detects Android Tablet/Blackberry Tablet/Windows Phone)
- improved tablet detection functionality
- 0.1
- initial release
Requirements
Mobile detection is done by analysing the user agent in PHP, but full functionality requires cookies & jQuery.
Download & Installation
Download adi_mobile and install the plugin in the usual way.
Bugs & Limitations
Cookies are used to store the mobile “mode” and the viewport information. If cookies are disabled then:
- it is not possible to disable the mobile detection functionality
- the viewport detection mechanism will refresh every page
If javascript is disabled then adi_mobile won’t be able to measure the viewport.
The viewport height is detected but currently adi_mobile doesn’t do anything with it.
Browser caching can produce some anomalies. If you see strange things going on, try switching to Debugging or Testing, or on a Live site set Send “Last-Modified” header? to No. The irony here, of course, is that we’re trying reduce the page size for mobiles but have to force them to download them in full every time. This may just be a problem with Safari but if anyone has any ideas please let me now.
Credits
Thanks go to Victor Stanciu for permission to use his php-mobile-detect code and to Peter (aka zero) for his encouragement, testing & feedback.
Feedback
Comments are most welcome.
Last edited by gomedia (2012-02-06 01:33:02)
Offline
Re: adi_mobile - Mobile browser detection
Just so people know, I only tested viewport on a desktop and my encouragement was to detect viewport width as well as mobiles! I enquired here about some way of detecting the viewport width so that content could be delivered based on that. And lo and behold, Adi made the fairly impossible possible! I say fairly impossible because there are complicated ways of getting a good compromise but I found nothing simple for designers who don’t know or don’t want the complications of coding in javascript or jquery. Adi has made it very simple to serve different images for different screens instead of one large image being reduced, thus enabling low bandwidth images for low bandwidth devices like mobiles, or the full monty if viewport width allows it. Adaptive or responsive web design is great but always had problems with images – until now. TXP rules! TXP coders rule! Adi_mobile rules! Of course, there’s a slight problem if javascript is not enabled but this is a fantastic plugin, imho, and yet another reason for developers to use Textpattern as their preferred CMS.
Thanks Adi, great job, and it was a pleasure and privilege being able to input a little.
Offline
Re: adi_mobile - Mobile browser detection
This plugin looks simply fantastic, and is a nice companion to Jeremy Keith’s terrific post on the sea change in current web design towards adaptive and responsive design.
Last edited by NickCaldwell (2011-03-22 00:55:59)
Offline
#4 2011-03-22 00:56:57
- Dandruff
- Member
- Registered: 2007-03-16
- Posts: 18
Re: adi_mobile - Mobile browser detection
This is simply amazing. Thank you so much for this and the detailed documentation.
Offline
#5 2011-03-22 14:17:30
- Ninja-Backflip
- Member
- From: England
- Registered: 2011-02-22
- Posts: 14
Re: adi_mobile - Mobile browser detection
Wow, that’s an awesome plugin you’ve got there chap!
I’ve always been wary of php sniffing, but the viewport option is giving me tight pants. Oooh, the possibilities….. Will give your plugin a thorough prodding and report back with my findings :-)
Offline
Re: adi_mobile - Mobile browser detection
Some mobile users may prefer to see the website in all its desktop glory instead. This can be achieved by setting URL variable “mobile_mode”, for example:
www.mywebsite.com/?mobile_mode=disabled
Wow Adi, nice work! You thought of a lot of use cases — thanks for making this available. I’m setting up one of my sites to use this and am super excited. I’m planning to use SLIR for resizing non-CSS imagery, but wondered what other techniques might be used for article images and such, given the variations in viewport size. Ideas welcome.
Also, are you detecting the switch to landscape via JS? Just noticed.
Last edited by maruchan (2011-03-31 03:09:56)
Offline
#7 2011-03-31 03:24:00
- gomedia
- Plugin Author
- Registered: 2008-06-01
- Posts: 1,373
Re: adi_mobile - Mobile browser detection
maruchan wrote:
Wow Adi, nice work! You thought of a lot of use cases — thanks for making this available.
My pleasure – I hope it’s useful.
I’m setting up one of my sites to use this and am super excited. I’m planning to use SLIR for resizing non-CSS imagery, but wondered what other techniques might be used for article images and such, given the variations in viewport size. Ideas welcome.
I guess the simplest way is output image thumbnails instead of the full-sized version when a mobile is detected. I’ve never heard of SLIR but it looks interesting.
Also, are you detecting the switch to landscape via JS? Just noticed.
Yes, adi_mobile can detect the static orientation but you’ll need to add in your own JS/jQuery to detect the actual change. I’ve got it to work OK on iPhone & Android (emulator).
Offline
Re: adi_mobile - Mobile browser detection
maruchan wrote:
but wondered what other techniques might be used for article images and such, given the variations in viewport size. Ideas welcome.
smd_thumbnail will create all the sizes you need when you upload the image and quality is not bad. Where quality isn’t good enough you can just replace the thumbs with your own optimised ones. I’d be interested to hear how you rate it compared with SLIR, which I haven’t used.
Offline
Re: adi_mobile - Mobile browser detection
I’d be interested to hear how you rate it compared with SLIR, which I haven’t used.
OK, I see how smd_thumbs works.
SLIR is usually only used with the main image; you don’t create any thumbnails by yourself, and it can make as many as you need. It should probably be called “Infinity thumbnail creator” or something like that.
You pass your image URL to SLIR like:
<img src="/slir/w100-h100/http://example.com/garden-steps.jpg" alt="A flower pot on garden steps" />And in that case it resizes to 100×100 when that code is run (Just In Time or JIT resizing). Then it caches that resulting image in case of further requests. Also, it will resize and crop, which is handy so you don’t get stretched images.
It does do facial recognition when it crops too.
That’s why I think it could be really handy for mobile development if you’ve got many different widths to target — although it sounds like smd_thumbnail is pretty great too. For example, I don’t think it’s as easy to replace SLIR’s automatic thumbnail with one that you like better, and still take advantage of the simple automation.
So right now I think I would tend to stick to SLIR for novice clients, and look at smd_thumbnail or a mix of the two for more technically-savvy types who want maximum control over presentation on a wide variety of devices.
Outside of mobile stuff, I use SLIR right now to make my clients’ job a lot easier — “no resizing required, feel free to upload any image and the website will take it from there.” Then if I ever need to change the design, I can just change the code without touching any thumbnails.
Last edited by maruchan (2011-03-31 16:33:09)
Offline
Re: adi_mobile - Mobile browser detection
I was thinking about quality of image after resizing, Marc, rather than how it is used. But thanks for the explanation, I’ll have to check it out, especially if you think it might be easier than smd_thumbnail.
If the design changes, you’d have to find all the code and change it, whereas with smd_thumbnail, you’d redo the batch of thumbnails and also change the paths to the connect to the new folders that smd_thumbnail creates for different thumb widths. So not a lot of difference I think. Either way, both are brilliant plugins!
Offline
Re: adi_mobile - Mobile browser detection
Ah. Yes, there’s a SLIR option for specifying image quality, if that’s what you mean.
Offline
Re: adi_mobile - Mobile browser detection
I’ve been checking and I can’t see any difference at all between smd_thumbnail and SLIR wrt the quality of image they produce. Although I can see an advantage for SLIR for delivering site design images, how do you go about delivering article images that are always changing? Inserting a txp tag into the SLIR path doesn’t work, or have you found a way round this?
Offline