zomigi.com » liquid http://zomigi.com The professional blog of Zoe Mickley Gillenwater Thu, 10 May 2012 16:30:37 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Media queries presentation at indieconf http://zomigi.com/blog/media-queries-presentation/ http://zomigi.com/blog/media-queries-presentation/#comments Sat, 19 Nov 2011 16:30:40 +0000 Zoe Gillenwater http://zomigi.com/?p=621 Today I had the pleasure of speaking at indieconf, a conference for independent web developers and designers, right here in my backyard of Raleigh, NC. I talked about the basics of CSS3 media query syntax but focused on the challenges and considerations that go into building a site from scratch with media queries to power the layout. I used the fictional Little Pea Bakery site from my book Stunning CSS3 as a demo for how to adapt the CSS to make better use of the space at different viewport widths. I covered some tips for making your design work on mobile devices and even old versions of IE.

You can view the slides on SlideShare, or download the slides here:

CSS3: Using media queries to improve the web site experience (PDF, 2.4 mb)

Here are several links to related resources, some of which are in the slides plus many that were not but which I recommend and think you’ll find useful.

Media query articles, tutorials, and tools

Dealing with IE 6-8 support

Fluid/liquid layout

Media query inspiration

Related Posts:

]]> http://zomigi.com/blog/media-queries-presentation/feed/ 2 Examples of flexible layouts with CSS3 media queries http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/ http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/#comments Wed, 15 Dec 2010 11:22:17 +0000 Zoe Gillenwater http://zomigi.com/?p=442 In my CSS3 presentation that I’ve given several times over the past year, the part that seems to impress the audience the most is my demonstrations of media queries. I’m with them. I think media queries are perhaps the most useful and exciting piece of all the great new stuff that’s new to CSS3.

While creating effective, attractive, flexible layouts that adapt to the user’s screen size has always been possible, media queries add another layer on top of flexible layouts to make them even more adaptable to an even wider range of sizes, allowing you to really fine-tune the experience for even more users. Media queries allow you to selectively feed styles based on the characteristics of the user’s display or device, such as how much width is available in the viewport, whether it’s in portrait or landscape mode, or whether it can display color.

My demonstration of media queries is the fictional Little Pea Bakery site, created for my book Stunning CSS3: A Project-based Guide to the Latest in CSS. Here’s how it looks for most users (shown here at 990 pixels wide):

The "default" layout seen by most users.

It’s a liquid (also known as fluid) layout so it can adapt to the user’s screen size, but the design doesn’t look as good and isn’t as readable when the viewport width is very narrow or very wide. I used media queries to solve this problem. Here’s how the page looks over 1200 pixels wide:

The layout for wide screens (over 1200 pixels) adds a third column.

Using a media query and just a few lines of CSS, I was able to easily turn the horizontal navigation bar into a vertical menu in a new third column. This kept the text line lengths from getting too long and making the overall design look too stretched out.

Going in the opposite direction, here’s what happens to the design under 760 pixels wide:

The layout for narrow screens.

We’re back to two columns, as in the “base” layout, but I’ve made changes to keep the content from appearing too squished and the line lengths getting too short. First, I got rid of the two columns in the introductory text. I also moved the three featured product boxes from sitting side-by-side to stacking on top of each other, moving the icon for each one from the top of the product box to the left side.

A third media query improves the design on small mobile screens, seen here at 480 pixels and 320 pixels:

The layout for very small mobile screens uses only one column.

The design is now a single column. The main page heading and introductory text are smaller, as are the product icons.

To see all these changes in action, view the page yourself and resize the browser window. To see how it was done, check out the CSS embedded in the head of the page. You can learn the full details, of course, by reading Chapter 6 of Stunning CSS3.

For more examples of flexible layouts that use media queries to further enhance the site’s adaptability, dubbed “responsive web design” by Ethan Marcotte, see the following sites. Small screenshots don’t do them justice, so be sure to click through to the sites and resize your browser window back and forth to get the full effect.

All of these sites use liquid layouts, but that’s not a requirement for using media queries. It’s also possible to use media queries to essentially create multiple fixed-width layouts that can be switched between on the fly. A few sites that do this are:

Know of any other great uses of media queries in the wild? Please share them in the comments!

Update 1/25/11:

I’ve learned about a few other resources for media queries/responsive layout inspiration:

Also, I’m bookmarking sites that I find to be nice examples of media queries on Delicious.

Related Posts:

]]> http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/feed/ 43 70+ essential resources for creating liquid and elastic layouts http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/ http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/#comments Mon, 25 Jan 2010 20:05:57 +0000 Zoe Gillenwater http://zomigi.com/?p=270 I often get asked for my recommendations of resources to learn how to create liquid/fluid and elastic layouts. My first answer is, of course, my own book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. Hey, is it so bad to be proud of your work? It’s the only book out there entirely devoted to designing and building flexible web sites, and the dozens of layout techniques it covers can also be applied to fixed-width design. But I’ll shut up about my book now; if you’re not the book-buying type, here are over 70 online resources to get you started creating attractive and robust flexible web pages.

Design inspiration

It’s always helpful to look at existing liquid and elastic sites to get inspiration for how to design your own. I’ve pulled together several sources of flexible design inspiration in a couple former blog posts on my site:

Templates

Even if you don’t read my book, you can download the example and exercise files from the book’s companion site. They essentially give you several liquid and elastic layout templates or starter pages that you can use to build your own liquid and elastic sites.

Here are some other layout templates:

Here are some frameworks and grid systems that allow you to make liquid and/or elastic layouts:

Articles

Here are some general articles on the what and why of flexible layouts:

Understanding min-width and max-width is essential to working with flexible layouts:

Understanding line lengths is also essential. Although popular belief is that there’s a narrow band of line lengths that are ideal for everyone’s reading comfort, the (limited) research that’s been done on on-screen reading suggests that there is a much larger range of effective line lengths, and that there is a difference between preference and efficacy. Age, disability, reading level, native language, leading, and other factors can all impact which line lengths are most effective for specific individuals in specific situations. See these articles for details:

Tutorials

Here are tutorials on creating multiple-column liquid and elastic layouts:

Creating successful flexible pages is about more than just the layout; you have to make sure the content inside the layout can be flexible too. Here are tutorials on making content, backgrounds, and other effects work with flexible layouts:

This should keep you busy for a while, no? I hope this will be the start of some lovely liquid and elastic designs for you, folks! Drop me a line if you have one you want to show off; I love seeing other people’s great work.

Digg this article if you enjoyed it. Thanks!

Related Posts:

]]> http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/feed/ 44 Me at The CSS Summit online conference http://zomigi.com/blog/css-summit/ http://zomigi.com/blog/css-summit/#comments Sat, 18 Jul 2009 19:30:35 +0000 Zoe Gillenwater http://zomigi.com/?p=216 I just gave my talk Designing CSS Layouts for the Flexible Web from my own little basement office for The CSS Summit online conference. Yes, yes, I’ve given this presentation before, but of course I had to do a little bit of updating and improving, especially because this is the first time I gave it online instead of with a live audience. So, here are the new and improved slides for your downloading pleasure:

Designing CSS Layouts for the Flexible Web (PDF, 5.5 mb)

Yes, it’s a big file—there are a lot of graphics in the PowerPoint. But I didn’t want to compress it very much and have all those graphics look distorted, since examining the graphics is the main point of the presentation.

There’s a little CSS in the presentation, but if you want more in-depth tutorials on the techniques alluded to in the presentation, I’ve written up many of them on this blog:

Related Posts:

]]> http://zomigi.com/blog/css-summit/feed/ 7 The liquid web site motherload http://zomigi.com/blog/the-liquid-web-site-motherload/ http://zomigi.com/blog/the-liquid-web-site-motherload/#comments Thu, 16 Jul 2009 20:03:13 +0000 Zoe Gillenwater http://zomigi.com/?p=192 I feel like a kid in a candy store. A nerdy kid. Because I’ve hit the liquid web site motherload: Nomensa’s portfolio.

Nomensa is a web agency specializing in accessibility and usability. Their own site is a nice example of a liquid design, and I’ve had it bookmarked for a while, but I finally got a chance to check out the sites in their portfolio. There are dozens and dozens of them, and almost all of them are liquid. (They also have a few elastic ones, and a few fixed-width.) Unfortunately, Nomensa doesn’t provide links to all of their work, but only a select few as case studies. But, you can google the names of the non-case-study clients, and you’ll find that most of these sites are liquid as well.

Now, I grant you, many of the sites are not terribly stylish. But they still are really useful to look at to get ideas for how to handle content and layout in liquid layouts. You could easily use the same techniques they’re using with a bit more spit and polish added.

Here are a few of the most well done liquid sites from Nomensa’s portfolio:

Barcham Online
The header using seven images of tree foliage that expand and contract to fill the available space is very clever and attractive. Also check out the feature boxes on the home page and the thumbnail gallery under Our Trees. It’s notable that this is an e-commerce site, which you don’t often see liquid.
Broads Authority
I’m not in love with the overall look and feel of this site, but I appreciate the unique layout of the home page. The main image on the home page that has a text box below, which moves down as the text in the adjacent columns grows, revealing more of the image above, is very well done.
Preston City Council
Another unique home page layout and neat use of “variable cropping” on the main photo. Be sure to check out the Gallery under Get Involved, as well as all the little feature boxes and things on the inner pages.
Macmillan Cancer Support
This site is notable for the large amount of information that it organizes into liquid rounded corner boxes throughout the site, without everything becoming chaotic and unbalanced at different viewport widths.
Business Startup Community
Again, not a very attractive site, but I’m bookmarking it simply for the treatment of the three tabs on the inner sections of the site.

I’ll be sure to stop by Nomensa’s portfolio periodically to see what new work they are featuring and gather ideas for solving problems in my own work. I should have mentioned in my flexible web design inspiration post that a great place to find liquid and elastic sites is within the portfolios of agencies or designers who themselves have liquid or elastic sites. Nomensa is now on this list for me.

Related Posts:

]]> http://zomigi.com/blog/the-liquid-web-site-motherload/feed/ 3 Why browser zoom shouldn’t kill flexible layouts http://zomigi.com/blog/why-browser-zoom-shouldnt-kill-flexible-layouts/ http://zomigi.com/blog/why-browser-zoom-shouldnt-kill-flexible-layouts/#comments Tue, 16 Jun 2009 14:24:38 +0000 Zoe Gillenwater http://zomigi.com/?p=56 Now that all the major browsers include the ability to zoom the entire page layout, rather than just increase text size, are liquid and elastic layouts obsolete? Can’t we just use fixed-width layouts and let the user zoom them if needed? The answer to that question depends on whether browser zoom solves all of the same problems than liquid and elastic layouts solve, and I don’t think it does.

Don’t get me wrong—it’s great that browsers have added this zoom ability. It’s yet another tool to give users more control to view web pages in a way that is most easy and enjoyable for them. But liquid and elastic layouts still offer a lot of benefits, as does plain old text resizing. Let’s go through the flexible layout benefits one by one and see if browser zooming on fixed-width layouts can deliver just as well.

Prevent horizontal scrolling

Liquid layouts get rid of the dreaded horizontal scrollbar (or crawlbar, as Jeremy Keith would have us say) for most users, since the layout adapts to whatever viewport size they’re currently using. This is a great boost to readability and overall usability. Browser zooming doesn’t do this automatically, and though it can be used to get rid of the horizontal scrollbar once it’s shown up, it produces unwanted side effects in the process.

Here’s an example from my own experience to illustrate what I mean. I usually keep my browser window at about 900 pixels wide, simply because that’s a width I find comfortable to read and visually pleasing, and because it fits well with the other windows I have open in my widescreen monitor. Browsing at 900 pixels means that most sites designed for a 1024 resolution produce a horizontal scrollbar for me. Now, I can zoom out of the page in order to make the whole layout smaller and make it fit in my window. But when I do this, the text size of the page gets smaller, since everything is smaller when you use browser zoom. Now I can’t read the page. All I wanted was the page to fit in my viewport, not for the text to change size. Liquid layouts are perfectly suited to this task, and browser zoom is not.

Take advantage of screen real estate

Liquid layouts allow you to make full use of the area available in the viewport, showing more or less content, depending on what will fit at any given moment. Browser zoom doesn’t do this. You can zoom in to fill up the viewport, but again, this just makes everything bigger, instead of showing more content to the user who has the space for it.

Allow users to choose their own line lengths

Liquid layouts essentially allow users to choose the line length, or number of text characters per line of text, that is most comfortable for them to read. Although most people will find the same, optimal line length easily readable (75 to 100 characters seems to be best for most people for on-screen reading), there are certain people who favor long or short lines of text, and those people who do make a conscious choice about their line lengths deserve to have this preference respected.

Browser zooming with fixed-width layouts doesn’t give users this ability to adjust the line length to fit their needs. Instead, the line length is fixed at a particular value that varies only based on the user’s text size. Users with large default text sizes may get much shorter line lengths than they prefer, for instance, and changing the zoom level will only preserve these un-ideal line lengths for them.

Set an optimal line length

Elastic layouts also don’t give users the ability to change the line length to suit their needs, but they do give the designer the ability to choose a line length that will be ideal for the majority of users. You might think you can do this with a fixed-width layout as well—and you could, if all your users had the same text size. If everyone kept the 16-pixel default text size, you could make your layout a fixed number of pixels and know exactly how many text characters would fit across each line. Then, if the users needed to zoom in to make the text bigger and easier for them to read, this same, optimal line length would be preserved, just with larger text characters.

But it doesn’t work this way in the real world. Not everyone uses the default text size. Some people make it bigger due to vision problems or other disabilities. Some people make it bigger because they have such a huge resolution on their huge monitor. Some people simply have the dpi on their machines set to 120 instead of 96, which makes all text throughout their system bigger. All of these users are going to have a different line length than the one you intended in your fixed-width layout. This won’t happen in an elastic layout, because its width will always be based on the user’s default or current text size, keeping line lengths constant.

But it doesn’t work this way in the real world. Not everyone uses the default text size, and those that don’t are going to have a different line length than the one you intended in your fixed-width layout. This won’t happen in an elastic layout, because its width will always be based on the user’s default or current text size, keeping line lengths constant.

Preserve design proportions

Elastic layouts give you more control over where text falls in relation to other design components on the page. No matter the text size, your design remains proportional and visually consistent (depending on if you choose to make the images scale too, of course). Again, you might think you can accomplish this with fixed-width layouts and browser zoom, but variable user text sizes make it impossible to know where a piece of text is going to fall on a fixed-width page.

Make text more readable

All of the benefits of liquid and elastic layouts that I’ve gone over have to do with respecting user preferences and making text easier to read. It seems to me that this is the goal of browser zoom as well, and in many cases it does make text easier for the user to read. But browser zoom also scales images. In some cases, this is probably desirable, as the user may want to get a better look at an image as well as the text. But, images scaled through zooming are going to be pixellated and blurry, so zooming may not help the user at all. And, I’m willing to bet that in most cases, users have no need or desire to view your logo or sidebar ad at three times its original size, and that the now-huge images are just getting in their way. (That’s why I reset Firefox, my default browser, to just scale text instead of zooming.)

If you have images that you think the user will want to get a closer look at, you can choose to scale only these images using easy CSS tricks. You can set up your images and CSS in such a way that the images will have little distortion or blurriness when scaled dynamically by the browser. The other images can all remain a constant size, so that they don’t get in the way of users with very large text and contribute to horizontal scrollbars, float drops, or other nasty things that can happen when you put huge images into web pages. And of couse, if a user does want to scale one of the non-scalable images, they can always use the browser zoom function as a backup method.

Conclusion

Again, I have to stress that zooming is a great function for browsers to include. Also, fixed-width layouts are not evil—they are ideal in certain situations. But liquid and elastic layouts have a lot of benefits that fixed-width layouts in combination with browser zoom can’t necessarily match. Luckily, I’m not the only one who recognizes this. Don’t use browser zooming as a reason to stop—or never start—making flexible layouts.

If you want more detail on all these benefits of flexible layouts, check out the free sample of Chapter 1 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS.

Related Posts:

]]> http://zomigi.com/blog/why-browser-zoom-shouldnt-kill-flexible-layouts/feed/ 44 Voices That Matter: Web Design Conference 2009 http://zomigi.com/blog/vtm-web-design-conference-2009/ http://zomigi.com/blog/vtm-web-design-conference-2009/#comments Tue, 28 Apr 2009 20:00:23 +0000 Zoe Gillenwater http://zomigi.com/?p=83 I just gave my talk Designing CSS Layouts for the Flexible Web here in San Francisco for the Voices That Matter: Web Design Conference. I was asked to give the same presentation I gave last year, but of course I had to do a little bit of updating and improving. So, here are the new and improved slides for your downloading pleasure:

Designing CSS Layouts for the Flexible Web (PDF, 5 mb)

Yes, it’s a big file—there are a lot of graphics in the PowerPoint. But I didn’t want to compress it very much and have all those graphics look distorted, since examining the graphics is the main point of the presentation.

If you’re ready to get beyond the graphics and start working on the actual CSS techniques alluded to in the presentation, I’ve written up many of them on this blog:

Related Posts:

]]> http://zomigi.com/blog/vtm-web-design-conference-2009/feed/ 1 Creating sliding composite images http://zomigi.com/blog/creating-sliding-composite-images/ http://zomigi.com/blog/creating-sliding-composite-images/#comments Mon, 27 Apr 2009 18:00:45 +0000 Zoe Gillenwater http://zomigi.com/?p=101 This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

I’ve already written about how to make images literally scale and how to use variable cropping on images. But perhaps you don’t want either end of your image dynamically cropped off—there may be important content on each side that you want to always keep in view. And perhaps you don’t want to scale the entire image, because although this would keep the entire width of the image always visible, it would also change the vertical space the image takes up, which might not work for your design. This is the perfect time to try using what I call a composite image.

Creating what appears to be a single image out of multiple pieces that slide over and away from each other takes a little more work on the graphics side than the variable width image techniques we’ve gone over so far. You can use an unlimited number of images, but we’ll keep it simple and use two for our own alieninvasion example as well.

One image is going to be at least partially overlapping the other, so at least the topmost image needs to have a transparent background. (You may choose to make the lower image transparent too, to allow parts of the main page background to show through, for instance.) You can use either a GIF with index transparency or a PNG with alpha transparency. PNGs are more versatile, since they can lay over any other color or pattern without the skinny colored edge that shows around GIF images when they’re placed over something that’s a different color than they were optimized for. PNGs can also have variable degrees of transparency, instead of each pixel being either 100 percent transparent or 100 percent opaque.

We’ll use an alpha-transparent PNG of a flying saucer for our top image in this example. The flying saucer will be laid on top of a photo of the Chicago skyline, saved as an ordinary JPG.

Once you have your images made, you need two block elements to place each on as a background image. One block element needs to be nested inside the other. In a real page, you’d want to make use of block elements that were already in place as much as possible, such as existing wrapper and header divs. For this simple example, we’ll use two empty divs:

<div id="outer"><div id="inner"></div></div>

Next, you need to create rules placing each image as a non-repeating background on each div, with the image you want on the bottom used for the background of the outer div:

#outer {
	background: url(skyline.jpg) no-repeat;
	}
#inner {
	background: url(ufo.png) no-repeat;
}

Since the divs are empty, they also need dimensions added to them to stop them from collapsing entirely, as well as to create the flexible behavior that we want:

#outer {
	width: 100%;
	max-width: 1000px; 
	height: 300px;
	background: url(skyline.jpg) no-repeat;
	}
#inner {
	width: 100px;
	height: 250px; 
	background: url(ufo.png) no-repeat;
	}

Both of the images now show on the page, with the flying saucer layered over the skyline. However, the flying saucer never moves when the window changes in size—it’s always pinned to the top left corner of the skyline photo. That’s because the div for which it’s a background begins in that corner, and non-repeating, non-positioned background images display in the top left corner by default.

Note: Remember that IE 6 and earlier do not support alpha-transparent PNGs, so the flying saucer image will have a solid gray background in those browsers. Use the alphaimageloader hack described in the exercise section of Chapter 7 to fix this.

There are a couple ways to fix this: use the background-position property to change where the flying saucer displays within the div, or move the entire div. Either option is fine, but the latter seems a little easier to understand and implement—at least to me—so that’s what we’ll use here. We’ll move the div using absolute positioning; floating would work as well. First, add position: relative; to the #outer rule to make that div act as the containing element for the absolutely positioned inner div. Then, add position: absolute; as well as top and right values to the #inner rule:

#inner {
	position: absolute;
	top: 50px; 
	right: 50px;
	width: 100px;
	height: 250px;
	background: url(ufo.png) no-repeat;
	}

Now the flying saucer image will always be 50 pixels away from both the top and right edges of the skyline photo. Because the outer div has a flexible width, its right edge moves as the window is resized, which in turn makes the flying saucer image move as well.

Update, June 2009: I’ve written another tutorial on creating composite images that takes a different approach. Thought you might want to check it out too!

Related Posts:

]]> http://zomigi.com/blog/creating-sliding-composite-images/feed/ 15 Hiding and revealing portions of images http://zomigi.com/blog/hiding-and-revealing-portions-of-images/ http://zomigi.com/blog/hiding-and-revealing-portions-of-images/#comments Sat, 25 Apr 2009 22:25:32 +0000 Zoe Gillenwater http://zomigi.com/?p=90 This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

I’ve already written about how to make images literally scale, but another way to change the amount of screen area an image takes up is to dynamically change how much of the image is shown at any given time. The image itself doesn’t change in size—the amount of space in which it’s allowed to show does, and the rest of the image just remains hidden outside of that space. I call this “variable cropping.”

You can create a variable cropping effect with either background or foreground images. Both look the same, but each is specially suited to different situations.

Variable cropping with background images

Putting the image that you want to dynamically crop in the background is ideal when the image is purely decorative. This technique lets you keep the image in the CSS with the other decorative images, so if you later change the look of the site, all the decorative images can be changed in a single style sheet instead of having to replace multiple img elements across multiple pages of the site. By keeping the decorative image as a CSS background, you’re also making it likely that the image won’t print when the user prints the page—background printing is turned off by default in all major browsers—so the user can save ink by printing only content.

To use a CSS background image, you’ll fi rst need an element on which to place the background. This example will use a div:

<div id="background"></div>

The div is completely empty; it contains no content, but exists simply to hold a background image. If you have a more semantic element you can hang the background on instead, use it. For instance, perhaps the image you want to dynamically crop sits above an h3 element and matches it in width. You could add the image as a background to the h3 element and give the h3 enough top padding to make sure its text sits below the image, not on top of it.

Next, create a rule for this div that sets the image as its non-tiling background:

div#background {
	background: url(styx.jpg) no-repeat;
	border: 2px solid #000;
	}

I’ve added a border on to this div as well so you can easily see where its edges lie. Right now, with no content within the div, it will collapse to zero height. Add dimensions to the div to prop it open:

div#background {
	width: 50%; 
	height: 330px;
	background: url(styx.jpg) no-repeat;
	border: 2px solid #000;
	}

Tip: To dynamically change the height of the image as well as or instead of the width, use a flexible value for the height property.

The width is set to some flexible dimension—either a percentage, as I’ve done here, or an em value to make it elastic—so that the div can change in width to show more or less of the image. The height is set to the pixel height of the image so that the entire height of the image will show at all times.

The div will now always be 50 percent as wide as the viewport; its background image doesn’t change in size, but gets cropped to a varying degree from the right side.

However, this particular image would look better cropped from the left side, as the cat’s face is on the right side of the photo. To specify from where the image gets cropped, use the background-position property, or its shorthand in the background property, to change the alignment of the image within the div:

div#background {
	width: 50%;
	height: 330px;
	background: url(styx.jpg) no-repeat right;
	border: 2px solid #000;
	}

The image is now anchored to the right side of the div, so more or less of its left side shows as the div changes in size.

This is all the CSS necessary to get the basic variable cropping technique working, but you can add a few other enhancements if you like. For instance, right now, once the div exceeds the width of the image, empty white space shows within the div. There are a few ways you could handle this. You could add a background color to the div as well that would fill up whatever space the image cannot; if you blend the edge of the image into this background color, the effect can look seamless. Or, you could add a maximum width to the div so it can never grow larger than the image. You could also add minimum widths, as well as maximum and minimum heights, to ensure that the div can never grow or shrink past particular
points in the image.

Variable cropping with foreground images

If the image that you want to dynamically crop is functional content, you’ll want to keep it as a foreground image by placing it in the (X)HTML using the img element. You can ask yourself these questions to determine if the image is content, not decoration:

  • Does the image convey information that I ought to put as text in an alt attribute?
  • Do I want to make sure the image always prints because without it the
    printout wouldn’t make sense or be complete?
  • Do I want to link the image?

If the answer to any of these questions is yes, the image is content and should be kept in the (X)HTML. CSS background images can’t achieve any of these goals—at least not without some complicated workarounds and hacks, all of which are quite silly, considering how easily a simple img element can achieve all this.

As with the background-image version of the variable cropping technique, you’ll need some block element in the (X)HTML to hold the image. We’ll use a div again; this time it won’t be empty, but will instead contain the img element:

<div id="foreground">
	<img src="styx.jpg" alt="my cat Styx" width="500" height="330">
</div>

Note: The img element has an alt attribute providing the text equivalent of the image. You can’t do this with a CSS background image.

Just as before, the div needs to have a flexible width and a height set to the pixel height of the image:

div#foreground {
	width: 50%;
	height: 330px;
	border: 2px solid #000;
	}

So far, all we have is a regular div holding a regular image—there’s nothing yet that makes this a variable cropping technique. If the image is bigger than the div, it doesn’t get cropped, but simply overflows.

To get the cropping effect, add overflow: hidden; to the CSS rule:

div#foreground {
	overflow: hidden; 
	width: 50%;
	height: 330px;
	border: 2px solid #000;
	}

Now whatever portion of the image would overflow out of the div is hidden from view.

Once again, though, it would be better for this image to be cropped from the left side, not the right. We can’t use the background-position property this time because it’s not a background image. To change how a foreground image is anchored within its parent, you can float the image:

div#foreground img {
	float: right;
	}

This anchors the image to the right side of the div, so more or less of its left side shows as the div changes in size. Using a foreground image results in an effect that looks exactly like using a background image, but the foreground image has alternative text, and you could also easily add a link to it.

Related Posts:

]]> http://zomigi.com/blog/hiding-and-revealing-portions-of-images/feed/ 40 Foreground images that scale with the layout http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/ http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/#comments Fri, 24 Apr 2009 21:44:34 +0000 Zoe Gillenwater http://zomigi.com/?p=58 This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

One way to dynamically alter the footprint of an image is to make it literally scale, based on either the text size or the changing dimensions of its parent element. Both are elegant effects that are deceptively simple to create.

Both liquid and elastic scaling images start out with a regular img element in the (X)HTML:

<img src="styx.jpg" alt="my cat Styx">

Notice that this img element has no width or height attributes, as it normally would. You control the dimensions with CSS instead.

For a liquid image, create a CSS rule to set the image’s width to a percentage value:

img {
  	width: 50%;
  	}

Note: This rule will make all images 50 percent as wide as their parents. In a real page, you would probably add an id or class to the specific image you wanted to scale and use that id or class as the selector in the CSS.

No height value is necessary; the browser determines the height that will proportionately constrain the image’s dimensions. If you were more concerned about making the height of your image stay proportional to its parent’s height than you were with width, you could use the height property in the CSS and leave off the width property. Just make sure not to use the two together.

As with all percentage dimensions, the percentage width value you choose is relative to the width of the parent element. As you change the width of the parent element, the image scales to match.

If you want the image to scale with the text size instead of the width of the parent element, simply change the width value in the CSS to an em value:

img {
  	width: 20em;
  	}

Any time a browser scales an image, there’s going to be some distortion, but you can keep it minimal by starting out with a very large image so the browser will usually be scaling it down.

To assure that the browser always scales the image down, not up, you can set a maximum width on the image that matches its set pixel width:

img {
  	width: 20em;
  	max-width: 500px;
  	}

Tip: If the image must stay above a certain size to remain “readable,” add a pixel min-width value too.

Now the image will scale only until it grows to 500 pixels wide; thereafter it will act as any other fixed-width image.

Simulate image scaling with JavaScript

If you don’t want the browser to scale your images at all, yet you want them to change in size based on the amount of space available, you can use JavaScript to swap in differently sized versions of the same image. The JavaScript detects the user’s viewport size and chooses the appropriate version of the image to show. This works in the same way that resolution-dependent layouts swap in different CSS files based on viewport size.

A live site that uses image-swapping to simulate scaling is Art & Logic. There are four illustrations under the banner on the home page. Try narrowing or widening your browser window; the images don’t scale in real time in most browsers, but as soon as you stop moving the window, they jump to a different size to match the available new space.

Related Posts:

]]> http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/feed/ 17