Mobile First CSS Approach for SCA Optimization

In my previous post, we talked about the importance of using a mobile-first strategy for modern web design and how it can help enhance your ecommerce store’s customer experience, ultimately resulting in increased sales and revenue.

In this post, we’ll look at some coding best practices for coding in a mobile-first strategy. Using a mobile-first strategy doesn’t just improve your online revenue, it also streamlines the code base of your web store. Since in a mobile-first CSS approach, we write the mobile styles first (before media queries) so that mobile devices can access their styles directly, without needing to wade through the tons of styles written for desktop devices.

Below are the coding best practices you should follow when coding under a mobile first approach.

Use min-width media queries

The most common question we get when discussing mobile first coding practices is ‘why does it make a difference whether I use min-width or max-width media queries?’ The answer is simple. By using min-width media queries, you can write all of the common styles first.

That way, all the CSS rules that are applicable to tablets and phones, can be written without using media queries. After you have coded the common style(s), you can then use media queries for desktop screens. Writing common CSS styles therefore ensures the loading of mobile styles first, without mixing them up with desktop CSS styles, which significantly improves the customer experience on mobile devices.

Some Examples of Min-Width Media Queries:

Below are some examples of min-width media queries.

• All common styles for devices and different screen sizes (no media query)

• Media query with a smaller min-width break-point e.g. @media (min-width: 768px)

• Media query with a slightly larger min-width break-point e.g. @media (min-width: 992px)

• Media query with a larger still min-width break-point e.g. @media (min-width: 1200px)

Have a look at the example below. In this example, we’ll be creating a gallery using both desktop-first and mobile-first approaches.

Desktop-First CSS

 

	.gallery-item {
		padding: 15px;
		width: 25%;
		float: left;
		box-sizing: border-box;
	}

	@media screen and (max-width: 1170px) {
		.gallery-item {
			width: 33.33333%;
		}
	}

	@media screen and (max-width: 991px) {
		.gallery-item {
			width: 50%;
		}
	}

	@media screen and (max-width: 767px) {
		.gallery-item {
			width: 100%;
			float: none;
		}
	}

 

Mobile-First CSS

 

	.gallery-item {
		padding: 15px;
		box-sizing: border-box;
	}

	@media screen and (min-width: 768px) {
		.gallery-item {
			width: 50%;
			float: left;
		}
	}

	@media screen and (min-width: 992px) {
		.gallery-item {
			width: 33.33333%;
		}
	}

	@media screen and (min-width: 1200px) {
		.gallery-item {
			width: 25%;
		}
	}

 

As you can see in the above example, if client is on a mobile device (and likely on a low bandwidth connection), their web browser will not have to dig through desktop CSS styles in order to display the appropriate content, rather it will use the default behavior of HTML elements, thereby keeping things streamlined. If the visitor is browsing from a desktop, the browser will adjust the elements accordingly by leveraging the high bandwidth and larger screen size.

Writing mobile-first CSS with SASS

Sass is a CSS pre-processor which helps you organize your code and provides excellent benefits particularly if you are building large scale applications. You can create variables for colors and typography, and create mixins and reusable CSS blocks which can be used dynamically. You can view the complete documentation for Sass here.

Below is the same example we looked at above, this time coded using Sass, in mobile-first approach.

 

	.gallery-item {
		padding: 15px;
		box-sizing: border-box;
		@media screen and (min-width: 768px) {
			width: 50%;
			float: left;
		}

		@media screen and (min-width: 992px) {
			width: 33.33333%;
		}

		@media screen and (min-width: 1200px) {
			width: 25%;
		}
	}

 

In the code snippet example, I’m combining Boostrap’s Sass version with a mobile-first approach.

 

	.gallery-item {
		@extend .col-sm-6;
		@extend .col-md-4;
		@extend .col-lg-3;
		padding-top: 15px;
		padding-bottom: 15px;
	}

 

Wrapping Up

Using a mobile-first approach with Sass offers a lot of advantages, especially when you are building a large scale application like an e-commerce store or a dashboard application for analytics etc.

When we talk about using a mobile-first coding approach, it’s not just about writing code that is optimized for mobile devices. Mobile-first is a strategy that is primarily used to enhance the customer experience across devices and platforms and to enhance mobile based ecommerce revenue.

With the right marketing and content strategy, and by using best practices in user experience design and an optimized coding strategy such as mobile-first, you can create impressive applications which will not only delight your customers but will also help your business grow.