[request] Viewport width > different content

zero · 2011-03-12 16:43:21

TXP Tips has an article about act_if_mobile a plugin that can detect a mobile, and serve appropriate content based on that. I was wondering if something similar can be done for detecting viewport widths of extra-wide, wide, medium and thin, for example? So you could do something like this:
<txp:xyz_plugin_xwide>
1600pxphoto.jpg
<txp:else />
<txp:xyz_plugin_wide>
1280pxphoto.jpg
<txp:else />
<txp:xyz_plugin_medium>
800pxphoto.jpg
<txp:else />
<txp:xyz_plugin_thin>
300pxphoto.jpg
</txp:xyz_plugin>

So rather than the same large image served with different dimensions for all sizes, different images with better quality can be served for each screen size. I am thinking images but obviously different content of all kinds could be be served as well. Now that sites are viewed on all screen sizes, it seems that adaptive designs are the way to go, and CSS can already be adjusted using @media or javascript methods, but I haven’t seen anything re viewport-dependent content, except act_if_mobile.

jakob · 2011-03-12 18:01:14

Nice to see you back, Peter :-)

While it is possible to detect the user_agent at the time of page load using php – and hence to provide content for a particular browser – I don’t think there’s a way of detecting viewport width without either javascript or css media queries. Also, the way txp-tags are processed means that the detection could only take place at page load and would not respond to changes in the viewport width after page load, e.g. when someone resizes their browser window. For that you need javascript or css media queries in combination with a newer browser.

You might want to look at the less framework if you’re interested in seeing how media queries work. It’s quite instructive.

I can see the problem you are trying to solve is how to serve up smaller images for img tags (or alternative content). Most of the examples I’ve seen involve scaling down a larger image and trying to get resizing to work as well as possible. Here’s Ethan Marcotte’s article on fluid images and another pretty new article mentioning an alternative approach involving loading a small placeholder as standard and then loading the desired image via javascript to fit the viewport width. In combination with smd_thumbnail, which I believe you know well, you might be able to get that working but I guess there are issues when javascript is switched off.

maverick · 2011-03-12 18:19:23

jakob wrote:

Nice to see you back, Peter :-)

+1 :)

gomedia · 2011-03-12 21:59:30

zero wrote:

… I was wondering if something similar can be done for detecting viewport widths of extra-wide, wide, medium and thin …

Hi Peter,

I looked at @media queries for this sort of thing & realised that they are just re-styling pages not changing content – which has impacts on page load times & download bandwidth usage.

I’m working on a plugin at the moment which will do a similar job to act_if_mobile, but with a little bit more granularity on which mobile has been detected, plus some website normal/mobile mode switch functionality.

Give me a shout if you’d like to give it a go.

Cheers,

Adi

zero · 2011-03-13 10:16:43

Thanks for the warm welcome as always here on the most helpful friendly forum around :)

Jakob, those are interesting links I hadn’t seen before. I got most of my info from this Smashing Magazine article and following the links from there. Without the images problem, there are many fairly straightforward ways to alter the CSS to make adaptive layouts. Images make it a lot trickier but to my non-coder’s mind I thought that making a plugin would be quite simple for TXP genii coders, but I suppose if it was, they’d have already done it! I missed the fact that PHP can detect user agent but not viewport. However, if jQuery can detect viewport can that info not then be passed to PHP at page load time, and TXP then swap an image accordingly?

Adi, with new devices coming out all the time, it sounds like you’ve taken on a never-ending task if your plugin will detect more and more mobiles. My limited understanding says you should keep it simple, focus on detecting viewport size instead and save yourself a lot of work!! :) But no doubt impossible or you’d be doing it… And am I right that many mobiles don’t have javascript so jQuery would not work with them? Being rather reclusive, I don’t have a need for a mobile so I’m a strictly desktop man but if you thought I could possibly help, I’d be willing to be one of your plugin testers.

Although technology is improving all the time, perhaps bandwidth will always be the main problem for mobile devices? However, people’s first view of any website may increasingly be from a mobile, so I’m now thinking that it’s time to kind of go back a few years and design for low bandwidth – making image rich/high bandwidth sites optional rather than the other way round. If auto-detection and appropriate adjustment is so complicated or impractical, then perhaps it’s also time to return to the splash screen, not for fancy impressive displays but just to ask the user to select the size of image they want to view on their screen – eg. start by showing a 300px wide image and giving options to go bigger until they reach the size they prefer.

Gocom · 2011-03-13 11:02:40

Nice to see you here Peter. If you don’t mind explaining, but what would the plugin exactly do?

plugin would be quite simple for TXP [..] javascript

As developer I can probably comment on why we (or I as the presenter of rah ;)) don’t make such plugins; we don’t need to. It’s (simple) site presentational code and that’s something that for most cases doesn’t need plugins; cool admin interfaces with nifty settings and buttons. That’s the case when we are talking about Textpattern — a CMS where everything outside the backstage is customizable by the frontend devs, and making such restricted one-in-all plugins isn’t ideal, especially if the project is for the masses.

For example detecting window size is only one line of JavaScript code. Anyone can build list of images using build in image_list tag, or with some plugin, and select the appropriate size with JavaScript.

gomedia · 2011-03-13 11:32:10

zero wrote:

Adi, with new devices coming out all the time, it sounds like you’ve taken on a never-ending task if your plugin will detect more and more mobiles. My limited understanding says you should keep it simple …

You’re right when you say keep it simple. Rather than attempting to detect every single mobile device in existence I’m hoping that broadly identifying the mobile into a few types will be sufficient. Testing this, however, is a nightmare.

The important thing for me was to have a system, like act_if_mobile, that could deliver mobile content rather than simply restyled desktop content (as @media queries seem to do). Only time & experience will tell if this is feasible.

I’ve built in a method whereby the user can opt to see the full monty website – which echoes your thoughts regarding the user selecting the size that fits – and could be easily extended to small, medium or large.

If only the user agent contained the viewport size …

zero · 2011-03-13 11:36:26

Hi Jukka, perhaps anyone but me can make a simple plugin – my brain just seizes up even when I try to learn the basics of javascript or jQuery – I think I have a genetic coding defect! The way I see the plugin working would be:

User reaches the site
Plugin detects viewport width of user’s browser
If width is 1600px +, txp uses 1600px image (content image, not site design image)
If width is 1200px +, txp uses 1200px image
If width is 800px +, txp uses 800px image etcetera,
or txp applies the content that the designer specifies for that size of viewport.

So it’s about serving up different content depending on viewport width rather than presenting the same content differently. Unless, of course, you consider different sizes of the same image to be presentational. Hope that clarifies it…

colak · 2011-03-13 11:37:40

the only problem which I find with act_if_mobile is that it recognises the i-pad as a mobile devise. Which it is but a much wider one than normal phones. I know I said it elsewhere in the forum, but I am wondering as to if the holy grail are liquid layouts.

gomedia · 2011-03-13 11:45:48

colak wrote:

the only problem which I find with act_if_mobile is that it recognises the i-pad as a mobile devise. Which it is but a much wider one than normal phones. I know I said it elsewhere in the forum, but I am wondering as to if the holy grail are liquid layouts.

I’m spitting the iPad out as a non-mobile device by default but ultimately the user has control over this by using attributes in the conditional tag. And I’m wondering too! I’ve been experimenting with body width = 100% rather than body width = xyz pixels.

Ninja-Backflip · 2011-03-13 12:07:54

Interesting thread. I’ve been getting more and more requests for mobile friendly designs. So far, I just use media queries for the layout / to hide inappropriate content. As for images, I just scale them (width:100%). But as said previously, this in not really how it should be done. Especially the images. Downloading a 1000px image to a mobile phone can really hit user bandwidth and can be v.slow.

Has anyone been following the Filament Group’s Experiment ? I think it has potential, especially if they achieve better browser support.

Is it possible to have, say, a single txp install control two websites (STD / Mobile), without having to duplicate content? I’m thinking a more involved write screen that allows you to associate different images / content fields for each platform etc? Then spew that content out to different front end themes (with the mobile theme on a subdomain)?

Last edited by Ninja-Backflip (2011-03-13 12:25:46)

gomedia · 2011-03-22 00:25:02

adi_mobile released.

Textpattern CMS

Textpattern CMS support forum

#1 2011-03-12 16:43:21

[request] Viewport width > different content

#2 2011-03-12 18:01:14

Re: [request] Viewport width > different content

#3 2011-03-12 18:19:23

Re: [request] Viewport width > different content

#4 2011-03-12 21:59:30

Re: [request] Viewport width > different content

#5 2011-03-13 10:16:43

Re: [request] Viewport width > different content

#6 2011-03-13 11:02:40

Re: [request] Viewport width > different content

#7 2011-03-13 11:32:10

Re: [request] Viewport width > different content

#8 2011-03-13 11:36:26

Re: [request] Viewport width > different content

#9 2011-03-13 11:37:40

Re: [request] Viewport width > different content

#10 2011-03-13 11:45:48

Re: [request] Viewport width > different content

#11 2011-03-13 12:07:54

Re: [request] Viewport width > different content

#12 2011-03-22 00:25:02

Re: [request] Viewport width > different content

Board footer