Developing for Mobile First

Mobile Design
If you’ve been following the Demac Blog for the last little while you might have noticed a trend in what we’re saying, reporting on, and doing with our work. Technology is rapidly advancing before our eyes; our statistics alone for traffic and conversions are showing that mobile is the new norm. Recently we even reported on a presentation created by Benedict Evans, a Partner at Venture Capital Firm Andreessen Horowitz known for their essay “Why Software is Eating the World”, on the rise and take over of mobile technology, “Mobile is Eating the World”. If you don’t find that presentation compelling evidence enough, it is estimated that in 2015 we will hit 2 Billion mobile users, with 83% of internet usage coming from mobile devices.

What I’m getting at here is with our work we’ve begun to shift paradigms, and would encourage you to do the same for eCommerce success!


Related: Infographic: A Portrait of Mobile Commerce and its Consumer

Why should I develop for mobile first?

Developing sites for mobile first allows for quick load time for mobile users and decreased data usage, which can be important for users who don’t have data to spare. I mentioned previously the rise in the usage of mobile technology, especially when it comes to eCommerce. Consumers are using their smartphones to browse your online store, and it would be worth while to start your development process with mobile first to leverage these interactions.

Related: UX Design of a Mobile Off Canvas Mini Cart

Who needs mobile first?

Every site should be built this way. Not too long ago this wasn’t the case. I would have said to tailor your development to your needs, but with the rise of mobile technology you want to guarantee your site is absolutely prepared and created with a responsive a browsing experience in mind. People are using desktops less and less! Smartphone and tablet usage has grown exponentially, you need to consider this in the first stages of development.

Related: [Mini Tutorial] Magento Mobile Off Canvas Mini Cart

That’s cool tell me more!

Developing for Mobile First
When you are developing for mobile first it’s important, (but not essential depending on your site and goals) to start the process in design. If you start the process in design then you can address issues like where and how content should scale; otherwise it will be hell for your developers to build. If you are someone who never designed for responsive previously, or are unsure about what could go array, you should feel free to openly ask your team about possible issues that could arise during the design process. Designers need to keep in mind how content will flow from mobile to desktop, and vice versa. Once the design step is completed and approved it’s time to move onto development. Where you will then set your break points.

The Execution

The proper way to develop for mobile first is to use min-width media queries. If you are unaware of what media queries are, they are CSS3 specification using a media type which will run like if the following criteria is met.

/* Mobile */
body {
background-color: red;
}
/*Tablet and up*/
@media only screen and (min-width: 768px) {
body {
background-color: green;
}
}

As you can see by the example above for mobile devices up to 768px screen width will have the background-color of red. But once you enter tablet (768px) or any screen size larger will have the background-color of green. You can easy add as many break points as you see fit to your site.

Another very important part of mobile development is to set the devices viewport. Mobile browsers are set to a higher viewport, but by using the following code this will take the devices actual viewport.
<meta name="viewport" content="width=device-width, initial-scale=1" />

Images, images, images… all sites have them and can be a big drain on page load. Try to cut down on http requests wherever possible from sprite sheets to HTML special characters to CSS gradients; these simple approaches can really add up quick. But for those images that can’t be solved using those simple approaches will need to addressed differently. There are tons of ways out there to load up optimized images. One of the most common is to load the mobile images first and then go up from there if needed. Also there is a server side approach which loads generated images, but as I said there are many other ways to do the same thing so look for what works best for you.

Here’s Looking at you, Mobile

Developing for Mobile First

We’re moving quickly towards a mobile-centric world. More and more of the majority of the population have access to and are using portal devices on a regular basis for everyday interactions, including browsing and shopping online! It would be to your benefit to develop for mobile first now, rather than wait too long and get left behind as technology moves past you and your eCommerce business. If you follow these important tips, and do a bit of research on you image optimization of choice, you will be kicking-@$$ in your mobile market soon enough.

Related: Tips to Designing a Better Mobile Checkout