As technology changes, so must design techniques evolve to adapt to those changes. Today consumers shop on tvs, laptops, phones, tablets, and many other devices. If you are interested in incorporating a design that targets different devices, discover first what would work best for your business. Here are some options and concepts to consider:
Mobile / Content First
“Mobile / Content First” is the idea that a website’s content, layout, and design should be prepared for mobile devices and their specific content first. This prevents wasted bandwidth and screen space on loading functions and content that may not be pertinent to the mobile users’ goals. As the screen space and download speed increases, functions and elements are added in as user goals develop. Too often, design and content is built to take up space. Much like when a person moves into a larger home, they may buy more furniture to fill their home even though it may not be functional or necessary. Mobile First keeps designers and content managers honest because it questions the need and value of decisions they make.
Mobile Specific Templates
Mobile-specific templates load a unique template or theme when a mobile screen is detected. Usually, you can tell when a mobile template is loaded on a site because the page URL will change to something similar to “https://m.envalo.com.” Creating a mobile specific template has advantages because you can optimize everything for mobile screens since you know you don’t have to accommodate for larger monitors. However, one major disadvantage for mobile specific templates is duplication of page URLs which negatively impacts your SEO. This means that you have both a “www.envalo.com” that shows up for all devices except mobile and a “m.envalo.com” that shows up for phones only. This creates duplicates of products pages, content pages and so forth. Technically, you are showing the same content, but your SEO stats are divided because of the URL redirect.
Adaptive Web Design
Adaptive web design optimizes the design at predefined screen sizes, based on the device the page was being viewed on. Because of the predefined screen sizes, one of the advantages of adaptive design is that specific devices can be targeted which can help speed up template development time. One disadvantage of adaptive design is that devices that are not targeted might display wasted space or an overly simplified design. This can become an issue as technology advances and new devices with varying screen sizes become popular.
A responsive design targets more devices by being built with a fluid grid, displaying flexible images, type, and video, and using media queries to adjust CSS based on screen size. Since you do not target screens and instead enhance at breakpoints, responsive design can be time-consuming. However, if done right, the design will work and look its best on a wide variety of devices – future and present. For this reason, responsive design is the direction Envalo has gone when designing eCommerce sites for different devices.
Do you have a mobile presence? If yes, then you are offering your customers the best of your store no matter what device they are using to shop! I’d love to hear about your successes with developing and implementing a mobile strategy for your site! If you don’t have a mobile presence, you’re behind the game! What’s stopping you? Comment below and let’s get the conversation started!
Nicole Domanski is a founding partner and the Chief Design Officer for Envalo, Inc., a Cleveland, Ohio-based eCommerce solutions company.