Search

Hi,

I am currently experimenting with media queries and mobile devices: "One page" for all. But when it comes to images we face some problems (CSS Media Query for Mobile is Fool’s Gold) using media queries. In short: There are some solutions for background images but images added with the img-tag are downloaded in full-size and resized in the browser using css.

To reduce traffic for mobile devices it would be nice to be able to use JIT and still only code one page for all devices.

Let's assume I somehow would know the device width or the size of the box/container the code could look something like this:

<xsl:choose>
   <xsl:when test=" CONTAINER WIDTH == '320px'">
      <xsl:text>/image/1/150/0</xsl:text>
   </xsl:when>
   <xsl:otherwise>
      <xsl:value-of select="$workspace"/>
   </xsl:otherwise>
</xsl:choose>

Makes sence? Any ideas?

Greetings Patrick

I'm in the process of deciding on my standard approach and building it into a template/boilerplate/project starting point, and also want to serve variable image sizes depending on either viewport size or device type. I like the idea of using JIT to do it for Symphony sites.

One option would be to use the server-side http://www.handsetdetection.com/ (PHP API available) and base JIT image size on the device type (e.g. mobile, tablet, console).

There's quite a good article and discussion in which I took part on this kind of stuff here: Using Media Queries in the Real World

There exists already a Mobile Device Detection Extension for Symphony. I am curious if this could be adapted to set some kind of flag instead of "just" redirecting...

The problem is that media queries execute client side, after Symphony has given you the rendered HTML. You'll either need to add some JavaScript to manipulate image src attributes to update widths (retaining this logic on the client), or attempt to pass this information back to Symphony (perhaps with server headers, or included in the Mobile Device Detection extension redirect).

cssgrid.net seems like a nice media query approach, but Nicks info makes me think it's a hit on rendering from the off... I'm interested in knowing if it's possible to dynamically rescale using JIT for this purpose as well.

Not unless the content is being called from CSS. You could do something like:

@media (min-width: 1024px) {
    .class {
      content: url(/image/1/1000/0/blah.jpg);
    }
 }

@media (max-width: 1023px) {
    .class {
      content: url(/image/1/500/0/blah.jpg);
    }
 }

But that brings up other problems.

Some serverside logic (or gasp UA sniffing) seems most robust at the moment. I have no experience with http://handsetdetection.com but it looks promising.

Even when you use CSS images (i.c.w. Media Queries) the wrong images often get downloaded, defeating the purpose. There are ways to prevent devices from loading the CSS desktop images though. Check out some tests at http://www.cloudfour.com/examples/mediaqueries/image-test/

If you're using pure background images and use CSS there are a few things you need to take care of. Have a look at CSS Media Query for Mobile is Fool’s Gold (For tests and solutions as David and me pointed out).

I would only use "max-device-width" (or min-) and NOT "max-width" (nor min-) to only address different devices. I wouldn't wanna address browser resizing on desktop screens!

nick: In this case and if I knew the device width we could just use some xmlt and JIT. No need for constantly checking the browser size.

Here is another source you may find useful using media queries: Hardboiledb css3 media queries

On media queries in general, it's worth remembering that a lot of devices still don't support them. This means it's better to supply basic styles that work for mobile-sized viewports in a non-media queried form, and then add min-width media queries that progressively add support for larger viewports.

On the desktop, IE can be coerced into using media queries using JS.

[http://blog.mobileesp.com/?page_id=2][1]

MobileESP: easy-to-use and lightweight API for detecting whether visitors are using a mobile device, and if so, what kind. The APIs provide simple boolean results for identifying individual device categories, device capabilities, and broad classes of devices.

Does it help?

There is a nice caching of images that we use with a wordpress theme called adaptive images. We've found this quite handy for serving alternative images to different devices recently.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details