Mobile First
Commerce websites are developed with a Mobile First approach. Mobile First design results in faster, sleeker sites while enabling easier design. Developing sites with the Mobile First approach promotes using only the most important elements on your screen and thereby avoids cluttering the screen with secondary elements not critical to the current task. This approach enhances the user experience by allowing users to quickly find and finish the task at hand whether they are looking for a product to purchase in a B2C environment or reordering in bulk in a B2B environment.
Using the Mobile First approach, element styles are defined for mobile devices and then scaled progressively for tablet and desktop display.
For example, in the following code sample the .button—medium style is defined to be $sc-button-medium-mobile-width. And then the width is adjusted when the media is of $screen—sm—min size (tablet). The default media sizes are all defined in Sass variable files.
.button-medium {
width: $sc-button-medium-mobile-width;
padding: $sc-button-medium-padding-v $sc-button-medium-padding-h;
font-size: $sc-button-medium-font-size;
line-height: $sc-button-medium-line-height;
letter-spacing: $sc-button-medium-letter-spacing;
text-align: center;
@media(min-width: $screen-sm-min) {
width: $sc-button-medium-desktop-width;
}
}