There’s no getting away from it, you can’t just design for desktop sites any more. Increasingly, users are accessing the web on their mobiles and tablets, just look at the stats:
- Mobile web adoption is growing 8 times faster than web adoption did in the 1990s and early 2000s
- There are over 1.2 billion people accessing the web from mobile devices
- Mobile traffic now accounts for 15% of all web traffic
- No one screen has more than 20% of the market share
- Mobile is the primary or exclusive means of going online for half of web users
And not responding can impact your results. In fact, 57% of mobile users will abandon your site if they have to wait 3 seconds for a page to load according to research from Strangeloop Networks.
Tips for using visual content on mobile screens
How you use images is a crucial part of good mobile design – and can help smooth the path to better engagement with your mobile site.
Here are 5 tips to using imagery on mobile screens for better engagement and visual impact:
1. Choose images to suit the device your customers are using
People respond differently to images on mobile than they do in other mediums. The fact they’re touching and swiping the screen makes it more real, more sensory. And the imagery needs to match, with close crops and HD quality. Nature, portraits, and chromatic, abstract designs work particularly well to create more sensory images on the smaller screen.
And alongside that, the images need to add value and reflect how you want your audience to feel about your brand or website.
2. Let images do the work where possible
With mobile and tablet having small screen sizes, it can be uncomfortable to read large amounts of text. If you can use an image to tell your story and replace long slabs of copy, your users will thank you. An image speaks louder than words.
3. Design for the largest resolution
Your images will look better scaled down rather than blown up. By targeting the highest screen resolution that your audience may be viewing, you’ll make sure you won’t need to replace poorer quality images later on as screen resolution improves (and it will). Your users will also be able to view them in full screen on mobile and tablet.
4. But keep the file size down
Make sure you optimise images for mobile and web, especially if you are using high-quality images. Programs like Adobe Photoshop offer you the option to “save for web & devices”. This way you’ll ensure large images have the smallest possible file size while retaining their quality.
5. Don’t forget video
With 1.3 billion people watching an average of 180 videos a month, it’s a great way to showcase your brand and engage your audience. Pages with video are more likely to appear on Google’s first page and can also increase conversions by as much as 80%.
- Choose images with impact on mobile screens – so that’s close crops and HD quality
- Let images do the work in telling your brand story
- Design for the highest screen resolution your audience may be viewing, but make sure the file size doesn’t slow down the user’s experience
- Combining images with video can improve audience engagement
Watch Senior Art Director Guy Merrill’s talk from Advertising Week Europe 2015 and discover how to select the right images for impact on mobile screens: