Since smartphones entered our everyday lives in the early 2000s, the number of mobile devices has been rising steadily. Today, most people use their smartphones to navigate the Internet. Online shopping is thus also shifting more and more to small screens. Since the classic desktop view and the smartphone interface are fundamentally different, store development must address this accordingly.
A popular approach to this is mobile first. The basic idea is simple: The most difficult design stage is worked on first. If all functions and design elements could be accommodated on a smartphone, they will also find plenty of space on larger screens. So after the store layout is created for mobile devices first, designers and developers gradually work their way to tablet and desktop.
With the help of a grid basis, this creates responsive design that store visitors can use on any device. In the following sections, we explain what needs to be considered in the mobile-first strategy and what good design for display on mobile devices looks like.
Inhaltsverzeichnis
This is what you need to consider
In addition to enabling browser caching, which briefly caches information so it doesn't have to be reloaded when you visit the store again, you can influence your customers' experience on mobile devices with targeted design decisions.
Tip1: Less is more
The small amount of space available on smartphones for the presentation of brand identity and store functions is striking. What can seem disadvantageous at the beginning helps to define the core elements of a store as well as to identify unnecessary and slowing down components. Remove unnecessary features or design components.
Here, reducing source code, content, videos and images will take up less storage space as well as bandwidth and shorten loading times. Image compression provides additional support. This allows you to create an engaging shopping experience even for visitors whose mobile connection quality varies.
Less content also means shorter scroll paths. These support a fluid movement of users through your store, the fast finding of products and thus the satisfaction of your customers.
Tip 2: Give space
Although this is obviously in contrast to the available space on a smartphone, spacing is an important design tool for your mobile store. White space not only creates a modern look, but also brings elements into focus by moving others out of view. In addition, users will find it easier to navigate if there is enough space around links, buttons or form fields and they can specifically click on an element. This way, you avoid page visitors unintentionally selecting an adjacent link and being interrupted in their movement through the store.
Images and videos should also be given more space on mobile devices. With large-format photos, you can place products attractively and already convey information about them. Use the entire width of the screen. If you place several images next to each other, make sure that the motifs are clearly recognizable.
The size of buttons can also be more generous on smartphones in relation to the continuous text. Present visitors with easily recognizable and quickly accessible call-to-actions to increase the click rate.
Reading Tip: Latori supported LIVE FAST DIE YOUNG (LFDY) with the store realization for big collection drops. Read how that went down in this interview.
Tip 3: Make interaction simple
Hover and scroll effects can lead to functional errors on smartphones. Therefore, make sure that navigation elements, menus and links can be operated with a single click. Also make sure that elements of this kind are large enough and placed at an appropriate distance from the next link so that they can be operated specifically with one finger and frustration among visitors can be avoided.
Discreetly placed instructions, such as "Swipe to go to..." or "Click to go to..." can assist in handling functions.
Tip 4: Do not forget the desktop
With the mobile-first approach, consider rendering on smartphones first. However, keep in mind that customers also access your store via other devices or even switch between devices within a few minutes. So make sure that users can perform the same actions everywhere and always check all functions on tablet and desktop. If necessary, adapt them for the appropriate screen size.
5 ideas for your mobile-first strategy
Place images and photos across the entire width of the screen
Replace multiple photos with a short video (note: videos can slow down your store)
Include easy to execute rating option
Integrate mobile-friendly chat function
Use smartphone-typical handling functions or designs (swiping, double-tap, save icons from social media...)
The Shopify merchants from LIVE FAST DIE YOUNG have a very young target group and know how to play to them with the right techniques. On your product pages, item photos can be easily swiped - just like the target group is used to from carousels on Instagram, for example.
Which specific design options you should use always depends on your target group. For example, younger people often don't need supporting instructions, while older people may prefer less interactive elements. So you should know your target audience well to know what might go down well with them.
Looking for a competent partner to develop customer-focused results on all screen sizes? Contact us today, we will be happy to help you!