Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Flexible images with CSS
Ethan Marcotte has a great article on responsive website design in ALA (and a similar article in the new issue of .net). The ALA article has a nice demo site to go along with it to showcase a fluid layout and flexible images (drag window to resize and see effects). All of this is initial work leading up to the use of media queries to target different sized devices with a single stylesheet rather than a separate stylesheet for each one (avoiding discussion of IE for the time being).
So, I have the laptop/tablet version of my flexible layout working smooth, except for the flexible images. I can get them to adjust horizontally (squishing the image width), but not proportionally like demonstrated in Ethan’s demo site. I am using max-width: 100%; as he does, but there must be something else I’m missing because that’s not working entirely.
One thing I don’t have is an element of some sort containing the images being flexed (Correction: the image does have a containing element also with max-width:100%;, so that can’t be the problem.), whereas Ethan’s demo puts them in a list item. A list item wouldn’t be ideal in my case because I’m only working with one image in a given place so I didn’t bother testing it. Should I put a containing element around images directly? As it is now it’s like…
<div>
<p> … </p>
<div><img> <p> … </p></div>
<p> … </p>
</div>
Thoughts on what I might be missing?
Last edited by Destry (2010-08-23 23:35:47)
Offline
Re: Flexible images with CSS
Sorry, I can’t help with your specific problem but as a possible counterpoint — or at least additional reading — to the articles you cited, I did briefly blog about mobile stylesheets recently. Being a keen content advocate, you’ll know the needs of your demographic already so this’ll be second nature when planning your sites, but for those who have been swept up in the hype surrounding media queries it might be useful to see both sides.
Ethan touched upon my primary concern in the closing paragraphs:
if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.
The use case is certainly not just for sites with limited scope, but also at the other end of the scale when pushing the mobile platform to its max and taking the bandwidth limitations into account. Anyway, bit of food for thought. Hope someone can help with your original problem.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Flexible images with CSS
Any chance you can post a demo of your code and I’ll take a look?
One thing to note is that you do not set a width and height of the image in the html img tag, that makes the image fit to it’s container – though that only works if the images are larger than the area.
One of the criticisms of this technique at the moment is you have to serve the images at quite a huge size and they are scaled down depending on the viewport, not too good if you are viewing on a mobile device with limited bandwidth as it has to load large images even though it displays them at small sizes.
A way around that for things such as logos would be svg graphics, which are finally getting native support in browsers without a plugin, but that will not work for bitmaps.
Last edited by philwareham (2010-08-24 09:38:25)
Offline
Re: Flexible images with CSS
Good cautionary point, Stef.
In my opinion as a “keen content advocate” ☺, the move (or not) to go responsive vs. build and maintain multiple sites or content versions (not without it’s own costs and headaches) should be preceded by a thorough overhaul of the existing site. Don’t just take this opportunity to change code and not the content. That’s where the real fallacy is.
In my case, for example, the site in question is wion.com. I’m working on a complete overhaul; eliminating ~50% of the content that existed and the needless links/navigation that went along with it, as well as functionality like article comments (dead artificats) and contact forms. These things are not needed in my site, and I would argue they are not needed anymore in most websites (an encrypted email address on the home page or footer is far more user-friendly and lightweight than a contact page and form). Tag clouds? FAQs? Please!
The content I am keeping, I’m rewriting to ensure it’s optimized too.
My advice to people is before simply adopting media queries, take the opportunity to think about your existing attic (or basement) first and get rid of content/functionality that doesn’t serve any real purpose, and if it does, think about how it can be redone to serve the purpose more efficiently. Chances are good your visitors will appreciate it anyway. Scale-down!
You should then be able to determine if you’ve optimized enough to go responsive or need to create a museum of site versions. Refining a site also helps make linearizing content easier and thus using media queries more meaningful. (And proprietary wizardry like webkit CSS is part of the fun too, when targeting iWhatever.)
There’s another reason I’m doing this with my site (besides being on mobile devices half the time myself), I have some mobile IxD work coming in the not distant future and I’m using wion.com as my guinea pig to sharpen up for that.
Of course the size of a site is going to matter in all of this too. A corporate website having enterprise content and armies of minisites is unlikely to ever be served as a single, responsive site. But that of a sole contractor is a different story — certainly doable.
Added:
This is a good article that gets to the different issues involved, Creating a Mobile Version of Your Site. He says something that pretty much sums up what I’m getting at:
…we have to give up some control and sophistication and accept that our primary goal is to make the sites simple and usable not pretty and exciting.
Last edited by Destry (2010-08-24 11:02:47)
Offline
Re: Flexible images with CSS
philwareham wrote:
Any chance you can post a demo of your code and I’ll take a look?
It’s all local dev at the moment. I could give you the relevent pieces, but I’m not sure that would be enough context.
One thing to note is that you do not set a width and height of the image in the html img tag, that makes the image fit to it’s container – though that only works if the images are larger than the area.
Not doing that. Correction! – I am doing that (via tags). You may have found the problem. I’m getting on that now!
One of the criticisms of this technique at the moment is you have to serve the images at quite a huge size and they are scaled down depending on the viewport, not too good if you are viewing on a mobile device with limited bandwidth as it has to load large images even though it displays them at small sizes.
Yeah, this is one of Bloke’s main arguments too, and it’s a valid one.
In fact, the portfolio section will require some rethinking in this respect; either going more text-based or perhaps leaving this section out entirely at the smartphone level. Should work fine in tablets, which in my site anyway doesn’t need a change from the default styles.
A way around that for things such as logos would be svg graphics
Yeah, I wish I was better at graphic design. LOL!
Last edited by Destry (2010-08-24 10:28:22)
Offline
Re: Flexible images with CSS
How about looking at a non-fluid grid with css media queries instead? Not quite as advanced I’ll admit but works well enough and no scaling of huge images. Here is a (very rough) work in progress of that exact technique on a site I’m currently building…
If you pull the window in to less than 960px it reverts to a 1 column (480px width) and moves the second column under the first column. So the page displays fine in such devices as an iPhone with 320px x 480px screen (scales portrait mode but still very readable).
It uses the 960 grid system.
Offline
Re: Flexible images with CSS
Thanks, Phil.
philwareham wrote:
How about looking at a non-fluid grid with css media queries instead?
This is pretty much what I’m doing. The demo site of Ethan’s was given to focus on the image scaling problem, but in fact I’m using media queries to readjust layout at smaller device sizes (like he describes later in his ALA article) and adjust element characteristics optimized for that size, rather than allow the device to “miniaturize” the viewport. Readability on iPhones (e.g.) is considerably better this way.
I’ll write it all up later (what I did, etc.) and then people can set me straight. :)
Offline
Re: Flexible images with CSS
So it looks like I have a Txp hurdle…
I didn’t think about the image height issue because I was outputting the image using <txp:article_image class="" />, which, rather invisibly, outputs width and height attributes in the markup.
What I need is a way to do it without width and height attributes, but which still preserves the article_image association and thus dynamic nature.
If there were an <txp:image_id /> tag, I could use something like this:
<img class=”“ src=”<txp:site_url />images/<txp:image_id />” alt=”“ />
The <txp:image /> tag, by contrast, requires assigning image IDs by an attribute, which won’t help me because I want to retain the auto-association between article and image.
Is there a plugin I can use to mock the idea of an <txp:image_id /> tag?
Last edited by Destry (2010-08-24 11:59:32)
Offline
Re: Flexible images with CSS
upm_image allows:
<txp:upm_article_image><txp:upm_img_full_url /></txp:upm_article_image>Would that do it? So it would be:
<img class=”“ src=”<txp:upm_article_image><txp:upm_img_full_url /></txp:upm_article_image>” alt=”“ />Last edited by philwareham (2010-08-24 12:14:55)
Offline
Re: Flexible images with CSS
Destry wrote:
using
<txp:article_image class="" />, which, rather invisibly, outputs width and height attributes in the markup.
Ah, yes, currently it does. If Phil’s suggestion doesn’t fit the bill and you don’t mind running SVN for now, the new image and article_image tags allow width and height overrides (using a value of 0 in either means “don’t display this dimension and thus let the browser scale the image accordingly”).
Last edited by Bloke (2010-08-24 12:28:34)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Flexible images with CSS
Bloke wrote:
the new image and article_image tags allow
widthandheightoverrides (using a value of 0 in either means “don’t display this dimension and thus let the browser scale the image accordingly”).
Eh?! New image tags?
/* drooling */
Size overrides?
/* more drooling */
F’ck yeah!
I don’t mind running under svn, though I have to brush up on how to get under that again. Don’t know how current these are:
Just curious, will these new tags be a TXP 5 thing?
Offline
Re: Flexible images with CSS
Destry wrote:
Eh?! New image tags?
Not sure if the docs you linked are up to date — the first points to the 4.2.0 branch not the 4.x dev branch. If you have an svn client installed on your machine, the checkout instructions are on the google code page.
If you can’t get at it for whatever reason, drop me a line and we’ll figure something out.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline