Imagery can make or break a website. As a design firm, a big part of our job is to be smart about using imagery to support our clients communication goals. We aim to create page layouts that create a strong visual impression upon first load. But the web is a constellation of various screen sizes; balancing imagery and text across all layouts is one of the primary challenges of designing for the responsive web.
Before I go any further, I should explain that Im not talking about home pages, for the most part. Im talking about a sites workhorse pages: an article/blog post or universal subpage.
Ideally, your user will visit three or more of these pages in a session; they shouldnt have to wade through floral design choices just to understand how to take a simple action or read your content. On the other end of the spectrum, text-only layouts get old, too.
In addition to the challenges inherent in skillfully presenting images on their own, observing best practices in usability introduces even more complexity.
- We are vigilant in avoiding layouts that push textual content too far down on the page. Its not because of the mythical fold, rather our own testing shows that users get frustrated when an article or universal subpage takes too long to get to the point, especially if the header real estate is filled with generic imagery. Therefore, we aim for a headline within the top 600 pixels on desktop.
- We look for ways to use bold imagery without sacrificing other content elements. This can lead designers to layer elements on top of each other. However, large images with text overlays are an overly common design pattern right now (and one Medium itself recently dropped) so its not a choice we want to overuse.
- If we dont lead with imagery or use an overlay, its common to arrive at a sort of squashed content stack that forces navigation, header images, headlines and other page elements into narrow horizontal slices. This is the solution that creates cruel and unusual header image crops in ratios like 6:1. Theres no beauty or visual impact in that ratio, especially considering that photographers use their skill to compose images on canvases closer to a 4:3 ratio.
Take Fast Company, For Example
Because of the way our screens and browsers are commonly oriented, UI designers consider two primary canvases: a squat landscape rectangle and a tall portrait rectangle. Rarely do images contain a focal point that works perfectly in both situations.
Even if the image itself has a flexible focal point, doing the CSS work to identity a focal point and adjust cropping across breakpoints is often prohibitively time-intensive. (If someone knows a solution to that, post a link!)
And thats why we often see problematic croppings when high-impact feature images are used along the top of a page, even on popular, highly-designed sites like Fast Company.
On Fast Companys mobile display, we see the entire illustration.
On a standard laptop display, a key section of the illustration is hidden behind the headline.
In working with clients to explain our design approach, weve begun to make a distinction between two categories of imagery.
Narrative images tell a story on their own. Many involve faces or other important elements. They are strong images and can shoulder a significant part of the storytelling. But they dont belong in a layout that features text overlays or odd cropping. The missing man in Fast Companys desktop article view is a great example of how this dilemma plays out.
In the Plan Your Visit mobile screen below, the subjects expressions should successfully communicate the fun of visiting, but thats not evident without seeing their faces.
This screen an example of a strong photo sabotaged by the auto cropping built into the layout.
CharityWater does narrative photo layouts exceptionally well. The layout below balances a strong environmental portrait with a clear and vivid narrative, but leaves plenty of room for copy to accompany the image. It sits just above the footer, functioning as an elegant grace note when a viewer scrolls to the bottom of the page. Best of all, the text and image never overlap awkwardly, no matter how the sites flexes across viewports.
Now, Charity Water has a strong team and its likely that they carefully finessed this layout. In many cases, we know our clients dont have a bank of strong narrative images or the time or resources achieve this kind of display. Were also designing templates that will be managed by content creators who are not professional designers, developers, or photo editors. We include imagery guidelines in our training docs, but often, we just have a hunch that finding narrative images that work well in the layout will just be too difficult to sustain.
In these cases, we turn to textural images. These images dont have focal points. They look great at any crop and perform well on every type of screen. Youve seen these everywhere: many templated designs make heavy use of textural images. They can be beautiful, flexible, and convey a great sense of mood. The SquareSpace template below is a great example. Note that the mobile crop cuts off the guitarists head, but thats not a problem, because the images success is about mood and feeling, not about connecting with his expression.
Landscapes, textures, bokeh, and still lifes can all function as textural images.
While immensely helpful, textural imagery isnt a panacea. By its very nature, its generic. For this reason, textures can bring a certain blah-ness to the party and wont necessarily help differentiate you from your peers.
Back to Fast Company
Its not surprising that the beta version of Fast Companys new design solves the feature image challenge by using color blocks to provide visual impact, while allowing photography to shine in a traditional ratio. Theyve also moved the title above the image. This realignment of elements serves the user better and is a solid solution to a knotty problem.
In short: Smart designers create space for a mixture of both narrative and textural imagery.
A few takeaways:
- Designers: Consider sustainable image planning practices when creating layouts. Put your clients real images into your code and run it though Brad Frosts disco or hay! mode, depending on your mood. Take a walk to recover from the horror and adjust your design accordingly. Then congratulate yourselfyoure paving the way for a site that will look great even after your beautiful hand-picked images are rotated out.
- Clients: Make things easier on yourself and your design team by developing and maintaining a bank of high-quality, original images. When you see these stellar images in design layouts, ask about other photographs your designer would recommend for that image area. Be wary of designs that will only succeed with a specific image, intense image manipulations or uniformly generic image choices.
All in all, choosing an image that will work at every viewport is no easy task. But a designers job is to stack the odds of successful visual communication in the users favor.
Web designs that fail to inspire and delight are very likely missing the visual strength that high quality images lend to a page. Heres hoping this narrative/textural framework helps you make the right choice for your layouts.
