Mobile First Responsive Web Design

Mobile-first responsive web design is an approach to responsive web design where the small screen CSS styles are applied by default. The CSS is built for the small devices first, with "progressive enhancements" added for larger screens. (Where as with the traditional RWD approach you develop from the top down, starting with the CSS definitions for the large screens, and then adding styles for smaller devices). 

Mobile-first responsive web design uses a "reverse" media query that looks something like:

@media (min-width: 41rem) {

.. CSS for screens wider than 640px

} 

Of course, with SignalMind you don't have to worry about these technicalities, as our platform handles them for you behind the scenes.

The benefits of mobile first responsive web design are many.

First, it ensures that the content will look good on the smallest devices.

Second, if structured correctly, it helps with the load performance on small devices. With the traditional RWD all the desktop content gets downloaded to all devices, regardless of whether or not it is used on these devices, which potentially creates a problem for smart phone users who may be on slower connections or limited data plans. 
With mobile first RWD you can prevent certain large screen content from being downloaded to smart phones (e.g., heavy background images for large screens can be specified inside media queries).

Third, it forces you to minimize the filler content, avoid unnecessary elements and keep things simple in general.

As the share of mobile traffic (or traffic coming from smaller devices, such as smart phones and small tablets) is growing and has surpassed the desktop traffic for certain industries, it makes sense to prioritize that experience and think in terms of mobile fist.