With the increase in mobile browsing, it’s more important than ever for ecommerce brands to optimize their site for mobile users. Here are four tips to keep in mind when designing your site for mobile:

1 - Simplify

Less is more when it comes to mobile design. Your mobile site will squeeze and vertically stack all the content of your desktop site, substantially extending the scroll length of your pages. It may be worth removing some content (like images or graphics) from your mobile experience if it isn’t absolutely necessary.

You can also condense content that is broken into three or more columns into a scrolling carousel for mobile users:

2 - Mobile-Friendly Interactions

Mobile browsers use their thumb or index finger to interact with your website. Design controls based on hand position - place your most-used interactions at the bottom, right-hand corner of the website (aka “thumb territory”). Also, make sure your links and buttons are large enough, as finger taps aren’t as precise as mouse clicks on desktop. 

You may need to entirely redesign certain interactions for the mobile experience - for example, while you might have a static navigation bar on your desktop site (where it’s easy to scroll back to the top of a page), it’s better for the navigation bar on your mobile site to slide with a user’s scroll, ensuring they’re always one click away from the menu.

3 - Resizing

Your site’s landscape-oriented images and videos may resize down to portrait for mobile users. You can provide your CMS a second media option for mobile or use media queries to adjust the image.

Additionally, mobile browsers may resize your website’s text - use an easily scalable font unit such as em or rem to avoid having mobile browsers resize your text, making it unreadable.

4 - Test

Always test to make sure your content can be viewed on multiple devices! Depending on what you’ve designed, there may be more or fewer media queries necessary to keep the content easily digestible.