3 Helpful Tips To Design a Mobile Optimized Site
Thinking mobile first means considering what the information is going to look like on a smaller screen before you design for larger desktops and laptops. Why is this important? Because more than ever people are using their iPhone and Androids to browse products, learn about companies, and vet against competitors before they make their purchase either in store or on their desktops. So what can you do to create a mobile optimized site and improve your customer’s experience online? Here are a few tips:
1. Clear Call To Action
You may be tempted to put all the same information you want when viewing on a desktop on mobile. You can accomplish this two ways. First, simplify things, so copy doesn’t run too long and also make sure there is a single button with minimal/clear text and large images. You can also create a desktop and mobile version of your section. Using code like media queries, you can determine what information shows when depending on the user’s screen size. An example would be replacing a GIF with just a static image, or removing it altogether and replacing it with a large and distinct button.
2. One or Two Columns Max
Keep things organized and concise. If you have a product carousel showing 4 of your best seller, don’t force cram those on a tiny screen. Show two rows of two, or better yet, stack them one on top of another and show only three items. It allows users to focus on your product easier; it makes the scroll of the homepage bearable, and it enhances user experience because they are already familiar with formats like this in apps like Instagram and Facebook feeds.
3. Careful With Images and Use More Color
Designing with images takes more forethought and consideration when designing your site for both desktop and mobile. If you have an e-commerce site with lots of photos, think of strategic ways to break them up so they’re not stacked right on top of or next to each other. Doing so might not be a problem on the desktop, but on mobile devices, things get cluttered and hard to understand what the focus is. Using thin, background colored borders can help break up images that sit next to each other or on top of each other. Additionally, lots of whitespace will help break up sections with pictures, and alternatively, blocks of your brand’s color create separation without seeming strange. As you can see, there are a lot of subtle details to take into consideration when creating a mobile optimized site. However, keeping these tips in mind will put you on the right track.