This chapter is from the book
This chapter is from the book
This chapter is from the book
Inline Images
When it comes to mobile images, you might initially jump to the conclusion that images should always be smaller because the screens are smaller, so therefore the images should take up less of that precious real estate.
Which can be true in some cases. But not always!
Sometimes Mobilizing Means Smaller . . .
As Figure 3.7 illustrated at the end of the previous chapter, one of the issues you can run into is an image that was originally sized to display at its full size. Consider the blue and white Finnish flag at the top of the screen as an example of this. It is 150 pixels wide and 90 pixels tall. For the original 950 pixel wide design of the desktop experience, this flag was sized in Photoshop and intended to be displayed at 100%.
So the CSS for this image in main.css is:
img#flag {
margin-right: 15px;
border: 1px solid #999;
}
Granted, there are two issues going on in this area of the design at the moment: a flag image that may be too large, and the “Design in Finland” text that is also too large for the space of the small screen. We will deal just with the image issue here.
The solution for the image, as you have probably guessed, is to size it down a bit. Fortunately, our HTML allows us to do this rather conveniently:
<img src="../images/flag.png" alt="Finnish flag" id="flag" />
Note that there are no width or height attributes in the img tag. And this is exactly what we want when we are relying on CSS to do the heavy lifting of styling and positioning—keep the HTML light and airy, providing just a touch of structure to our content.
So note that if you have img tags with width and height attributes, and you’re striving for a responsive, mobilized design, you will want to strip out those attributes and have your CSS do the sizing; set an id or class for each image as you do this.
Getting back to resizing the image, adding a new CSS rule in mobile.css for this image looks like this:
img#flag {
width: 25%;
margin-top: 20px;
}
The adjustments include narrowing the width to 25% which, on a mobile screen of 320 pixels, results in a more modest flag that is 38 pixels wide instead of 150. I also added a margin of 20px above the flag. Previously, it was flush to the top of the page and looked a bit goofy in the mobile presentation.
But other than that, I’m taking advantage of the cascading nature of CSS and not redefining the border or right margin of the flag in main.css. Consequently, those properties are still applied to the flag and the result is a flag with a narrow gray border and some right margin to buffer the headline text, just as before (Figure 4.1).
){kind=link}
Figure 4.1 Our resized Finnish flag, no longer dominating the header with its full glory of 150 pixel width.
Perfect!
. . . and Sometimes Mobilizing Means Larger
In other cases, you may not want to use your images at 100% or even size them smaller. There are cases where you will want to size them larger instead.
Seriously? Make them bigger when you have less screen to work with?
Yes. Seriously.
To see why, let’s take a look at the images in the interview section of the Finnish design web site (Figure 4.2). In a desktop environment, they have been sized to be adjacent to each other. This layout is attractive and works quite well, and the image size (40% of their 600 pixel width) is just right for showing detail.
){kind=link}
)
Figure 4.2 The interview page when viewed in the desktop version of Safari.
But when viewing this page on a mobile screen (Figure 4.3), I feel that the images are kind of small. The layout itself is still fine, but if I want to emphasize the images as content, I’m not certain that it’s particularly successful here.
){kind=link}
Figure 4.3 The interview page when viewed in the mobile version of Safari.
So the lesson here isn’t nearly as technical as it is contextual and editorial: if you are assessing the success of images in mobile presentation, don’t hesitate to make them larger to make them work better on smaller screens.
In this case, the adjustment to make in the CSS is fairly simple, going from this in main.css:
.interviewphotos img {
width: 40%;
padding: 10px;
}
to these additional rules in mobile.css:
.interviewphotos {
width: 100%;
}
.interviewphotos img {
width: 90%;
}
These changes do two essential things:
- The change to the interviewphotos class makes the div’s width 100% of the screen width.
- The change to any images contained in an interviewphotos div results in them being 90% of the div width (or 90% of the screen width).
The redefinition of interviewphotos and interviewphotos img results in this mobile presentation of the images as shown in Figure 4.4.
){kind=link}
Figure 4.4 The interview page when viewed in the mobile version of Safari.
Granted, the photos stack now and increase scrolling. Might too much of this be a problem on a mobile device? It certainly could—I’m not suggesting that stacking everything works in every case, so you have to make your own judgment calls on a project-by-project (and even screen-by-screen) basis. But the scrolling in this example is not outrageous by any means, and as you go from image to image, the text beneath the images resumes and keeps prodding the user to scroll. It’s a natural flow that is aesthetically and contextually pleasing (Figure 4.5).
){kind=link}
Figure 4.5 As you scroll the interview page in mobile Safari, the larger images are still manageable. There’s more scrolling, to be sure—but it is still reasonable.
So we have examined two ways to handle inline images. Deciding when to make something smaller or when to make something larger is a decision to make based on the amount and purpose of your image content.