Marcus
A long time ago, in a galaxy not so far away, people designed websites to bring the Internet to your home via the desktop computer. Fast forward past the creation of the smartphone and tablet, and the Internet has changed dramatically to the point that designing for the desktop screen is no longer the priority. Sure, the website built for your brand looks great on the computer on your desk, and that beautiful image of a lovely couple using your product is just perfect. The problem is that the landing (or “hero”) image, or that slider that welcomes users to the site, only works for that particular screen.
The truth is that more and more people are accessing the Internet from mobile devices and tablets (as of 2014 more than half of all web surfing was done on a phone). Without responsive design in mind websites take longer to load, images get cropped, stretched or squeezed, or in the worst cases, become unreadable pixelated car accidents. The truth of the matter is, that any image you choose is going to be the wrong image at some scale.
Don’t worry, we’re here to help.
Let’s walk through this problem in a little more detail. We live in a very visual age, where icons and pictures speak volumes, often more than the text on a screen. Your brand or product needs something visual to help sell itself, so as a part of your marketing campaign you find/create the best images for your situation. Perhaps you’re trying to sell the world on a new piece of software and this is the landing for your website.
This looks good. You’ve got the hero image, which has text built in, and all you have to add is some flavor with a call to action. Boom. Done. Everything fits in the fixed height viewport that we’ve decided on. Okay, let’s see what happens when you shrink this screen to a tablet.
This still looks good. Everything fits on the screen nicely. Unfortunately, when we move to tablets we have to consider something completely new: rotation. Not everyone holds their tablet in landscape mode, so let’s see what happens when we rotate to portrait mode.
Immediately we can see that this is not good. The problem begins with the fact our text in the image doesn’t fit within the frame. Additionally, the image we’ve chosen here has a focal point that’s off center and to the left (the laptop screen). As we resize from desktop down to tablet we see that the left side of the image is cropped because it needs to fit the same height of viewport we decided on previously. To fix this, you need to set the positioning of the hero image to be on the left — of course, this will mess with the alignment of the text, but the text is already a mess. In other words, you may fix one problem only to create another.
Okay, let’s go smaller. Get your smartphone out.
Houston, we have a problem. That beautiful banner you chose is now cut down to something that is very difficult to discern. The focal point doesn’t fit on the screen and that beautiful text is completely cropped or just unreadable (or both). Given that we live in an era where more and more people are accessing the web from a phone or tablet, this just won’t do. The internet needs to fit in your pocket, and look good doing it.
This is where responsive images come into play. Your website needs to respond to whatever device it is being viewed on. The image we used in our example does not work that way. Text becomes unreadable and things get cropped. If that was an image of your product, you wouldn’t want that to happen. Responsive design and images can help deal with this problem, but every solution has a problem of its own design.
The New Text-ament
As your website changes screens and changes sizes, it’s important to ensure that your message isn’t lost between devices. An image that looks impressive, inviting, and nails your message on a desktop can get cropped and cut off on a phone, or shrunk down to something only Ant-Man could read without difficulty. The details of the image that you were drawing focus to with a call-to-action button or clever tagline get lost, such as the use of a unique typeface in your logo or image. This is not an appealing thing for your brand. What you can do is remove the text from the image and build it into its own HTML component. Done. It’s an easy thing to code, but the problem arises with the cost. Adding that text layer requires more design to be taken into account: How will the text respond to the image? Does it need to be over this exact spot all the time? These things need to be addressed or else you can end up with awkward situations where your text is suddenly covering the focal point of your image.
Let the Image Be Your Guide
Another way to get around this is to modify your image to adapt to resizing. When the viewport/browser window is resized to a certain width the image can be swapped out for a more appropriate version for that size (see: Square’s website). These breakpoints, as they are called, are common in responsive design and there are generally accepted pixel values for each to guide the creation of unique images. However, when it comes to design, it is better to let the image itself be the guide for generating breakpoints for your webpage. Resolution, quality, and content of the image have a large impact on the determination of breakpoints for your images.
For example, take Free People, a fashion website that focuses on quality clothing for intelligent, creative, and individual women in their mid-20s. Their landing page features a slideshow of outfits that relate to their latest fashion trend. If you note, the main image (though it disappears quickly, something to discuss in another post) features text built into the image.
Free People’s homepage on desktop (left) and mobile (right)
Attempting to resize the browser window shows that the image doesn’t change when it hits the first breakpoint. Instead, it suffers from being cut off, a problem that most users probably won’t experience. When the website is viewed on a phone we see something completely different. The slideshow is replaced with static images throughout the mobile site, all of which are culled from that large hero slider on the desktop page. Additionally, the type found on the original landing image is placed into a new image. It is easily readable for this screen size (the argument could be made that it is actually more easy to read here). This is a bit of an extreme case, where the site is redesigned from one screen to another. This is not advisable for most cases, but it works given what their product and target audience are.
It’s Hip to be Square
Considering a layout composed of simplistic geometric shapes such as rectangles and squares helps to make the transition from different screen sizes much easier. Almost every screen that we use these days is a rectangle of some sort. If your content can fit in that then you are much more likely to find a more responsive design. Google is making use of this with cards in Material Design, which not only unifies all of Google’s apps, but it gives them a clean presentation that works on any screen size.
Background Check
Then there’s the simplest solution, taking your stock image of beautiful humans doing their thing and replace it with a patterned background. This is something that has no focal point and is easily scalable. Unfortunately, from a design standpoint it does remove the feeling of a handcrafted page catered to your product and your users. But, in some cases it is the way to go, and it can be done well. There is also a hybrid situation, where your product remains visible and scalable at all sizes, but the background is something different that can come and go as your screen sees fit.
Drawbacks
Figuring out which method will work best for your site, be it making use of custom images for each breakpoint, or picking an image that works across all sizes, can be time consuming and relies on both the designer and the developer. Besides presenting more work to be done, there is also the matter of storage and retrieving of images. Using a method that requires multiple images means more space is required to store those images. This can be time consuming, especially if not done correctly. Using a single HD image and rescaling across all the different screen sizes may seem like a smart move, but it ends up costing more time, especially on mobile platforms. On smaller screens you don’t need an image with such a high resolution, so you can get away with uploading a small version, this will save time when the page is loading, and reduce the cost on the user’s end which is important if they don’t have an unlimited data plan.
There is the small issue that arises if someone were to resize their browser window, making the breakpoint noticeable as a flicker or sudden change in the image dimensions. Of course that is a minor thing, and one that most users probably won’t run into, but it is something to consider.
The Choice is Yours
As with most situations, there is no magic bullet, no all-pros-no-cons solution. The coding behind many of these solutions is not all that difficult. The task falls more heavily on the design side, and this begins to shed light on a larger problem, the designer-developer breakdown (but that’s a whole other blog post, or novel, or HBO series). Regardless of the solution you choose, these fixes will get your site to be responsive and cater to a wider audience. Of course, that is something that should always be on your mind: who is my audience? If you’re more likely to cater to folks who use older technology and stick to checking their emails and surfing the worldwide web on desktop computers at home or work, then you’d be better off designing with the desktop as your starting point. If your user base contains people who keep up with every new iteration of technology, then you’ll want to consider mobile first. Know your audience and you’ll know where your focus should be.
Important things to note:
- Does your chosen image have type in it?
- What size is your viewport?
- Where is the focus of your image?
- Is there a CTA?
- What are the breakpoints for your image?
- Can you get away with using just one image?
- How much time is this going to take to implement?
- What will the impact on the user be?
- How much time (more/less) will your page take to load on various platforms?
Tools for your utility belt:
-
Resizer (Google Material Design): a web tool developed by Google to help make your website more responsive by being able to view it on different devices to note how things change and move.
-
Responsive Image Breakpoints Generator: a web tool that generates responsive images for different screens, resolutions, and aspect ratios based on an uploaded image. It even provides the HTML code necessary to implement it.
For the next post in this series, click here!
