5 Things to Keep in Mind When Designing for Mobile

It’s 2019, you probably don’t need us to tell you that mobile devices are massively important. We could trot out some statistics (like the recent Ad Age survey that found a year-over-year increase of 88% of consumers’ Internet time being spent on the phone) or we could point to tech giants emphasizing mobile more and more every day. But, just think about your own life: how much time do you spend on your phone? How often do you notice when a website has a poor mobile web experience? A user experience designed for mobile is an entirely different thing than one designed for a desktop, so it makes sense that when you’re sourcing assets for a mobile screen, you follow different rules than when designing for your full desktop site. To help you choose imagery for your mobile designs, we reached out to some of our creative professionals here at iStock—Kat Hargrave, Senior Designer and Zhen Huang, Product Designer—to get their tips.

Pick a clear theme and stick to it

When searching for any stock photo for any purpose, it’s important to know the emotion or message you’re trying to convey ahead of time. On mobile devices, an image will likely display smaller than on a desktop computer or a print asset. “Make sure you find a photo with a clear theme and be sure that that theme is portrayed very simply,” says Hargrave. That simplicity is important both because the mobile screen is smaller and because different sized devices might crop the image differently for their browsers. Think about it this way: if your background image is a basket of fruit, but the screen crops out half the fruit, then you’re missing half the story of that image. If you choose a watermelon-only image, then any crop of that image will still communicate “watermelon”.

Modern phones have substantial screen resolutions

New mobile devices from manufacturers like Apple and Samsung have put resolution at the forefront. This pixel arms race has led to seriously sharp displays, ones that make it virtually impossible to see any edges on even the largest text. “If you aren’t downloading high res images to start with, then you’re limited on how small you can crop them,” says Hargrave.

Thanks to the proliferation of Apple’s Retina displays, you’ll likely need to create two different assets for your responsive mobile sites, one at the resolution you’re seeing in your design program, and one at 2x that size. That’s because many displays still show imagery at a 1:1 pixel ratio, whereas Apple and other leading hardware manufacturers have developed their displays with software that crunches images into a 2:1 ratio (doubling the amount of pixels in the same area). Providing both assets give the webpage two sizes to choose from, depending on the size and resolution of the display it’s being viewed on.

Screen layouts are extra-important on mobile devices

While most phones employ a 16:9 aspect ratio, many newer large-screen displays are opting for numbers more like 18:9. This is much taller in portrait mode and much wider in landscape mode than what we’re historically used to seeing in desktop displays. Since most mobile navigation takes place in portrait mode, you’ll need an asset that looks good from top-to-bottom on a really tall screen. “What’s most important is that cropping your image doesn’t lose the spirit of it,” says Hargrave. “Filtering your searches to only contain vertically oriented images is a good start, but you’ll never get it perfect on every screen size and every browser.” So, make sure you select a simple image that isn’t trying to do too much, but still has the character we highlighted in the first point above.

Navigation is a key consideration

Beyond this, you should also take into account how mobile phones are being used. “Compared to computer screens, mobile devices are viewed closer to users’ eyes,” says Huang. “Since images take up more space on that screen, a simpler image with more breathable space is more appealing.” Most people interact with the bottom of their screen. This means you’ll want to select background assets with plenty of negative space down at the bottom to account for navigation and text on this end. Keep in mind what the full experience of the site is, and where you want your users’ navigation inputs to occur.

Keep file sizes in check (and videos off your servers)

Because you’re designing for mobile, chances are that your users’ internet access will be more sporadic than on desktop device, and therefore you want to export the smallest file possible. As we mentioned above, this doesn’t mean you should go for low-resolution images—you want to have plenty of crop options. Instead, lean on your design program’s “export for web” options. “72 ppi is sort of the standard size of asset for web, because it is a high enough in resolution, but doesn’t create a huge file size,” says Hargrave. The concern holds true for video, too. “Keep the videos brief and make sure it’s easy to load for everyone,” says Huang. We’d even go as far as suggesting you outsource all of your video hosting to sites like YouTube and Vimeo and embed the assets, to take the pressure of your site on load time. The bottom line with all of this is to make sure your mobile site runs smoothly for everyone, without sacrificing the creative effect you’re hoping to have on the user.

Looking for somewhere to start your image search? Check out a few of our favorite images on iStock.