Mobile First

This topic applies to

Applies to

SuiteCommerce Web Stores

SCA is developed with a Mobile First approach. Mobile First design results in faster, sleeker sites while enabling for easier design. Developing sites with the Mobile First approach promotes using only the most important elements on your screen while avoiding cluttering the screen with secondary elements not critical to the current task. This enhances the user experience by allowing users to quickly find and finish the task at hand whether it be finding 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 with a width of 100%. Only when the media is of $screen—sm—min size (tablet) is the width adjusted. The default media sizes are all defined in Sass variable files.

.button-medium{
   padding:$sc-base-padding * 2.5 $sc-base-padding * 4;
   letter-spacing:0.5px;
   font-size: $sc-button-medium-font-size;
   width:100%;
   text-align: center;
   line-height:1;

   @media(min-width: $screen-sm-min){
      width: auto;
   }
}