According to recent numbers, mobile web browsing will eclipse desktop browsing sometime during 2013. This is certainly an exciting time to be in the web design business. Technology is ever changing and staying current means doing your homework, trying new things and keeping one eye on the crystal ball. What this means for those who rely on their online presence is one thing: mobile first.
What does mobile first mean? Ever go to a site on your iPhone that looks the same on your desktop? That isn't mobile first design. Mobile first is the approach to web design that those who understand the future of the internet use. It is about how the site is structured and designed, thinking about how it will render on a handheld device first, then making sure it renders properly on your desktop browser. For a few years the standard practice has been to have two web sites: one for your desktop and one for your device. This is bad practice and very cumbersome to maintain. No one wants to update and troubleshoot two websites instead of one. When you take a mobile first approach to the site design and functionality you will have one site that can recognize screen sizes and properly adjust to the viewing size and dimensions. While the site will not look exactly the same on all devices and screens (it never should, that can only happen in print) the content is there, the information is easily found and your site loads fast and cleanly.
There are two well-known mobile first ecommerce design strategies. Progressive Enhancement is the practice of beginning with an optimized mobile presence then adding in enhancements and content as the experience is shown on larger and larger screens. With this approach, you are completely mobile first, putting your best foot forward on the smallest screens and then gradually building up to a desktop experience. The second mobile first strategy is called Responsive Design. Responsive Design goes hand in hand with Progressive Enhancement, built around the concept of media queries that target specific devices and view sizes. That means you can code your CSS with a mobile prospective then use the media queries to selectively serve up additional styling as the view size increases.
As we at Groove move into this next phase of web standards and a new era of great ecommerce design from our team we are extremely excited for what mobile first design will do for our clients with sites that will not only look great on every screen out there, but have an even longer shelf life. Technology is an ever changing landscape and staying right on the edge of the curve is always the most exciting part.
Interested in how our Magento Certified team is approaching mobile design? Contact us!