- A Holistic Approach to Mobile Images
- Inline Images
- Responsive Photo Grids
- Wrapping Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
Responsive Photo Grids
There are a variety of techniques for integrating photos and other images into web sites, and among them are some cool techniques for making larger image layouts responsive.
The responsive photo grid used in Design for Finland’s Photo Gallery uses two fantastic CSS3 properties, column-count and column-gap. These are properties that have support in some of the most popular browsers (Firefox, Safari, Opera) and, notably, in their mobile offspring.
So first, let’s take a look at what this photo grid looks like in a regular desktop browser. The idea is to tile photos and have them flow through a series of columns from left to right across the page. The approach is based on how newspaper and magazine columns work in print: when a column fills, the flow moves over one column to the right and automatically starts filling the next column. Figure 4.6 shows the result with 20 photos.
){kind=link}
)
Figure 4.6 A photo gallery using CSS3 columns. Living in the future!
So yeah, it looks suspiciously like a table doing the work here, doesn’t it? Well don’t you dare accuse me of something so gauche! There’s just the tiniest of clues in the HTML that points to what is going on:
<div id="grid">
<img src="images/gridimages/01.jpg" alt="Paimio Hospital, Alvar Aalto" />
<img src="images/gridimages/02.jpg" alt="Poster design, Erik Bruun" />
<img src="images/gridimages/03.jpg" alt="Bench, Helsinki" />
<img src="images/gridimages/04.jpg" alt="Old home, Turku" />
<img src="images/gridimages/05.jpg" alt="Cathedral, Turku" />
<img src="images/gridimages/06.jpg" alt="Bruun home, Suomenlinna" />
...
</div>
That’s right, other than a series of img tags, there is nothing to the HTML markup at all—just the div id.
So what does the CSS look like? Well, like this in the site’s main.css file:
#grid {
line-height: 0;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
#grid img {
width: 100% !important;
height: auto !important;
margin-bottom: 10px;
}
Wow, that’s it? Indeed—sometimes this great CSS3 stuff is as magical as it looks!
All you need to do is use the three flavors of column-count as one needs to with any CSS3 property these days, to cover yourself for both WebKit and Mozilla browsers, as well as to future-proof your CSS when browser prefixes are no longer necessary.
Then, you just define a spacer using column-gap if you do not want the images to be flush against each other. This takes care of the behavior for the div that wraps the images, #grid. Then for any image located inside the div, the width is specified to be 100%, the height auto, and each image has a 10 pixel margin below it to match the 10 pixel gap in between the columns.
How does this respond to mobile browsers? Here’s a wonderful lesson to savor from this use of CSS3: the easier it is to define a behavior in CSS, the easier it is to modify it for mobile responsiveness.
So hold on to your hat, because all you need to do is throw in a few media queries to have this layout respond to smaller screens. For the case study web site, I have chosen two different responses, one for screens 320px or smaller and another for screens up to 480px. Here’s what you add to mobile.css:
@media (max-width: 480px) { #grid { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media (max-width: 320px) { #grid { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } }
Adding this to the site’s mobile.css file does some quick and dirty magic, reducing the photo grid to two columns at 480 pixels or smaller (the size of the iPhone screen in landscape orientation) and to a single column at 320 pixels or smaller (and if you want to be more specific about targeting more specific screen sizes, adjust your media query accordingly).
So let’s take a look at the mobile versions of this flexible photo grid in Figures 4.7 and 4.8.
){kind=link}
){kind=link}
Figure 4.7 The responsive photo grid in portrait orientation as viewed in Mobile Safari.
)
Figure 4.8 The same responsive photo grid in landscape orientation.
I just love the simplicity of this responsive grid, and I feel like I could experiment for hours optimizing layouts for specific ranges of screen sizes (but I’ll let you take it further if you wish!). And I am also a huge fan of the asymmetrical layouts that can result by interspersing landscape- and portrait-oriented images in this layout—I think the results can be really beautiful.
So continue to have fun with image layouts in your web sites, and do not feel constrained by mobile presentations of your images. A design constraint is just another name for a design opportunity!