Four Rock Solid Guidelines for Designing Mobile Friendly Magento Commerce Layouts

If you’re running an eCommerce business and haven’t optimized your Magento site for mobile, then you are losing out on a big chunk of your sales and profits. Techcrunch reported that mobile sales increased by 258% from 2012 to 2013 alone during sales events like Thanksgiving and Black Friday. While not every online retailer will see those numbers, they are still nothing to scoff at. Optimizing mobile should be a priority for eCommerce business models if they want to adapt to inevitable trends, stay competitive, and be in the forefront of their market.

With that said, it’s one thing to know how important it is to do something but it’s another thing to know what to do. Magento is one of the best platforms for eCommerce but it is a challenging platform to build on if you’re doing it all yourself. Every site will follow a different web design concept but here are some foundational guidelines that you can work with to create a layout that meshes with mobile without limiting the presentation.

First, start by thinking about the various screen sizes before you begin to build out the UI (the navigation). You want to create a UI that looks appealing and adapts well to all sizes. Obviously, you will have to simplify it a bit if what you’re using now is complex. However, if you focus first on the function and then the form, you’ll end up with an outcome that will work well (even with screen sizes that haven’t been released yet).

Second, you’ll want to go with a responsive theme if you want an advantage in search engine optimization (SEO). You’ll get the most out of SEO with one responsive site as the assets you build (links, content, press, etc.) will benefit both your desktop and mobile search rankings. It’ll also be easier to manage and you’ll be investing for one site to reap the benefits of both.

Third, get serious about CSS. You can use CSS for many different purposes. For example, you can use CSS to make your images scale to the appropriate size for the device. It can help you cut down on loading time which is huge for mobile devices (just make sure you test extensively as coding can sometimes hurt you). It can also help make your text and content more attractive, making your site more mobile friendly.

Finally, focus on formatting and site organization. Keep your website clean. Make sure content is formatted correctly and the various sections of your websites are clearly distinguishable (content section, navigation menu, ad section, email subscription box, etc.). Organize your site according to your data about your target audience, in terms of related categories/subcategories, and in the right contexts. This should mostly be done in your UI (navigation menu) but also applied to other areas of your site like page previews, breadcrumb links, and footers.

A big lesson you’ll learn is that it’s not easy to get the right layout. You’ll have to experiment quite a bit and test aggressively. Part of the challenge will be finding the right themes and extensions to create the web design that suits you company/brand. In some cases, it may be necessary to hire a designer and developer to create custom themes and extensions for your Magento site. While it may not be most frugal option, it will certainly be well worth it if your eCommerce business is already performing.