{"id":6298,"date":"2019-07-30T13:27:17","date_gmt":"2019-07-30T19:27:17","guid":{"rendered":"https:\/\/www.webii.net\/blog\/?p=6298"},"modified":"2022-02-24T10:59:11","modified_gmt":"2022-02-24T16:59:11","slug":"the-role-of-images-in-mobile-first-web-design","status":"publish","type":"post","link":"https:\/\/www.webii.net\/blog\/the-role-of-images-in-mobile-first-web-design\/","title":{"rendered":"The Role of Images in Mobile First Web Design"},"content":{"rendered":"

When Google first announced that mobile-friendliness<\/a> was now a ranking factor in its algorithms, companies began to incorporate ways of making their website accessible on a range of mobile devices. These strategies, however, usually consisted of stripping down their existing, desktop-friendly websites to be simpler and easier to load and navigate on mobile devices.<\/p>\n

\"web<\/p>\n

This desktop-first approach, however, has proved insufficient for meeting mobile users’ needs. Simultaneously, mobile usage has continued to skyrocket. Today, about 70 percent of all online traffic takes place on mobile devices, and the average smartphone user spends a whopping 5 hours a day on their device. In 2016, desktop use was surpassed by, you guessed it, mobile traffic.<\/p>\n

Mobile-first web design offers a way of creating a website that focuses on the ways in which people are accessing the Internet.<\/h2>\n

With mobile devices now defining the way in which people use the Internet, web design<\/a><\/u> has to change to accommodate this new reality. And it is, with the advent of mobile-first design. Mobile-first web design creates a website based first on the needs of mobile users. Then, layers of functionality, text, graphics, and more are added to create a site that also works on larger screens.<\/p>\n

Mobile-first web design focuses on what will create the most exceptional experience for mobile device users. Now, the most important elements of the site are the first to be included in the design, meaning mobile device users don’t lose out on content or functionality because the site they are accessing was stripped down from a desktop-first design.<\/p>\n

In fact, as Moz contributor, Brad Smith says<\/a>, “…mobile devices present an untapped opportunity to utilize extra functionality that\u2019s unavailable for desktop users. The smallest examples include your real-time GPS or the advances being made with applications like Apple\u2019s Health. Even the gestures you can use on mobile present a more dynamic world that leaves the mouse button behind.”<\/em><\/p>\n

The result is a look and feel that is ideal for capturing the attention of people who access your website via mobile devices.<\/p>\n

Content and messaging come first.<\/h2>\n

Thanks to the new emphasis on designing for mobile devices first, one question that arises is that of the role of images. Large, powerful images and videos have long been a staple of web design. They serve to capture visitors’ attention and immediately communicate important information about a brand.<\/p>\n

Images, however, are also difficult to render effectively on a mobile device. They are notorious for slowing down page load times, an error that can lose companies’ visitors and conversions at a shocking rate.<\/p>\n

Many mobile-first designs<\/a><\/u> focus instead on text and messaging, rather than on wowing visitors right away with graphics. Does that then mean that the use of images and graphics is optional in a mobile-first design? And if not, how are web designers and businesses supposed to deal with images when they want to create a site that is both appealing and easy to use on a small screen?<\/p>\n

Images in mobile-first web design support the site’s content and messaging.<\/h2>\n

The answer is yes, images are important in a mobile-first web design. About 85 percent of Internet users expect the websites they see on their mobile devices to be of the same quality as those they see on their desktop computers.<\/p>\n

\"Unusual

Unusual and impactful imagery.<\/em><\/p><\/div>\n

Images in a mobile-first design have an important role to play in supporting the rest of the content and messaging of the website. They add information and interest to the content on the site. As a result, they help to capture the attention of the mobile user (an important role considering the fact that visitors decide to stay or leave a website in a matter of moments).<\/p>\n

In addition, images help to drive visitor retention of your messaging. A 2018 study found that people remember 65 percent of what they learn three days later if that information was paired with an image. Without an image, only 10 percent of information is retained. Images are critical in ensuring that your mobile visitors not only see but remember what you want them to know about your business.\u00a0<\/strong><\/p>\n

It is true that, in order to prevent slow page load speeds and difficult navigation, images need to be compressed and chosen carefully. However, as with the rest of the content on the mobile site, this laser focus on user experience and quality can improve the overall functionality of the site. Your images, with the right design, will not only work on a mobile device but, because they were added specifically with mobile devices in mind, will create an experience that users will remember even after they have left your site.<\/p>\n

Images contribute to the goal: A clear, compelling, and tailored user experience.<\/h2>\n

Images don’t just help to drive home the messaging of your mobile-first web development<\/a><\/u>\u00a0project. They can also provide the look and feel that will appeal to mobile users. In particular, mobile users want the following qualities in the websites they visit:<\/p>\n