eCommerce Design Guidelines

Last updated 14/10/14

Download Grids Designing within a grid space is an old tradition that finds its roots in the need for structure and balance. Users should be left with the impression that things are easy to handle if the order employed at crafting them suggests so. The grid makes it possible to bring all the elements of design — type characters, imagery, icons and colour — into a formal relationship with each other.

Based on a 990px width the grid follows a 12 column layout, each column being 64px. It has a 12px margin and an 18px gutter.

Typography Global eComm mComm iPhone iPad Android Mobile Android Tablet

Below you can find different examples of how we use the Argos typeface across the eCommerce channel.

  •   Font Size Usage
  • Main Heading Argos Book 30px Main page titles
  • Subheading Argos Book 20px Subtitles (such as H2's)
  • Sidemenu Heading Argos Book 20px Titles of sections within sidemenus. For example, PLP.
  • £999.99 Argos Compressed Bold 37px Main PDP price
  • £999.99 Argos Compressed Bold 26px Product lister pricing
  • was £999.99 Argos Book Italic 16px Was pricing across site
  • SAVE £999.99 Argos Condensed Extra Bold 18px Saving messaging
  • MAIN MENU Argos Condensed Book 15px Level 1 mega menu links in header
  • Body text Arial / Helvetica 14px General body text across site
Download fonts

Copy and paste the styles below into your CSS document to correctly embed the Argos fonts into your page. You can also download the font pack from the button on the right hand side.

Show/hide CSS

@font-face { font-family: argosbook; src: url(../fonts/argos-book-webfont.eot);	src: url(../fonts/argos-book-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-book-webfont.woff) format("woff"), url(../fonts/argos-book-webfont.ttf) format("truetype"), url(../fonts/argos-book-webfont.svg#argosbook) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argosbookitalic; src: url(../fonts/argos-bookitalic-webfont.eot); src: url(../fonts/argos-bookitalic-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-bookitalic-webfont.woff) format("woff"), url(../fonts/argos-bookitalic-webfont.ttf) format("truetype"), url(../fonts/argos-bookitalic-webfont.svg#argosbookitalic) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscompressedbold; src: url(../fonts/argos-compressedbold-webfont.eot);	src: url(../fonts/argos-compressedbold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-compressedbold-webfont.woff) format("woff"), url(../fonts/argos-compressedbold-webfont.ttf) format("truetype"), url(../fonts/argos-compressedbold-webfont.svg#argoscompressedbold) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscondensedbook; src: url(../fonts/argos-condensedbook-webfont.eot); src: url(../fonts/argos-condensedbook-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-condensedbook-webfont.woff) format("woff"), url(../fonts/argos-condensedbook-webfont.ttf) format("truetype"), url(../fonts/argos-condensedbook-webfont.svg#argoscondensedbook) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscondensedextrabold; src: url(../fonts/argos-condensedextrabold-webfont.eot); src: url(../fonts/argos-condensedextrabold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-condensedextrabold-webfont.woff) format("woff"), url(../fonts/argos-condensedextrabold-webfont.ttf) format("truetype"), url(../fonts/argos-condensedextrabold-webfont.svg#argoscondensedextrabold) format("svg");	font-weight: 400; font-style: normal }
@font-face { font-family: argosbold; src: url(../fonts/argos-bold-webfont.eot); src: url(../fonts/argos-bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-bold-webfont.woff) format("woff"), url(../fonts/argos-bold-webfont.ttf) format("truetype"), url(../fonts/argos-bold-webfont.svg#argosbold) format("svg");	font-weight: 400; font-style: normal }

.argosbook, .argosbookitalic, .argoscompressedbold, .argoscondensedbook, .argoscondensedextrabold, .bodytext { color: #040404; text-shadow: none; font-weight: normal; }
	
.argosbook { font-family: argosbook; }
.argosbookitalic { font-family: argosbookitalic; }
.argosbold { font-family: argosbold; }
.argoscompressedbold { font-family: argoscompressedbold; }
.argoscondensedbook { font-family: argoscondensedbook; }
.argoscondensedextrabold { font-family: argoscondensedextrabold; }
.bodytext { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

.mainheading { font-size: 30px; }
.subheading { font-size: 23px; }
.sideheading { font-size: 20px; }
.pdpprice { font-size: 37px; }
.plpprice { font-size: 23px; }
.wasprice { font-size: 16px; color: #777; font-family: argosbookitalic; }
.saving { font-size: 18px; color: #EE3124; }
.headermenu { font-size: 15px; color: #585858; }
.headerlinks { font-size: 13px; color: #585858; }

Buttons Global eComm mComm iPhone iPad Android Mobile Android Tablet

Outlined below are the different button styles (and associated markup) that we use across the eCommerce platform as well as rules for using them.

Primary Button
<a class="button primary">Primary Button</a>
Secondary Button
<a class="button secondary">Secondary Button</a>
Tertiary Button
<a class="button">Tertiary Button</a>
Turn on 1 Click Reserve
<a class="button oneclickoff">Turn on 1 Click Reserve</a>
1 Click Reserve
<a class="button oneclick">1 Click Reserve</a>

As you can see, we use the button class on any element which is to be used as a button, and then add an additional class to adjust it to either a primary, secondary, Tertiary or 1 Click related button style.

Below are the CSS styles which show the different classes. Overrides should be used where necessary for positioning.

Show/hide CSS

General button style

.button { 
  background-color: #FFF;
  border: 1px solid #CCC;
  border-bottom: 3px solid #CCC;
  height: 28px;
  display: inline-block;
  float: left;
  font-family: argoscondensedextrabold; 
  color: #333; 
  text-transform: uppercase; 
  padding: 0 10px; 
  font-size: 14px; 
  line-height: 28px; }

Primary style

.primary { 
  height: 40px; 
  font-size: 18px; 
  background-color: #00AA50; 
  color: #FFF; 
  border: none; 
  border-bottom: 3px solid #CCC; 
  line-height: 40px; 
  padding: 0 15px; }

Secondary style

.secondary { 
  color: #F7941D; }

1 Click Reserve style

a.oneclick { 
  height: 40px; 
  font-size: 18px; 
  background-color: #AA4E9E; 
  color: #FFF; 
  border: none; 
  border-bottom: 
  3px solid #CCC; 
  line-height: 40px; 
  padding: 0 15px; }

Turn on 1 Click style

a.oneclickoff { 
  height: 40px; 
  font-size: 18px; 
  color: #AA4E9E; 
  line-height: 40px; 
  padding: 0 15px; }

Hover state

.button:hover { 
  margin-top: 1px;
  border-bottom: 2px solid #CCC;
  cursor: pointer; }

Active (hit) style

.button:active { 
  background-color: #F7941D;
  color: #FFF; }

Fields eComm mComm iPhone iPad Android Mobile Android Tablet

Field style and states are demonstrated in this section.


Primary submit button
<label class="field">Short title</label><input type="text"><br/>
<label class="field">A very much longer title</label><input type="text" style="float: left;"> <a class="button primary fieldprimary" style="margin-left: 10px;">Primary submit button</a>

Standard submit button
<label class="field">Short title</label><input type="text"><br/>
<label class="field">A very much longer title</label><input type="text" style="float: left;"> <a class="button field" style="margin-left: 10px;">Standard submit button</a>

Buttons which are displayed alongside fields should have an additional class applied which make the heights match.

Show/hide CSS

input[type=text], select {
  height: 35px;
  border: 1px solid #CCC;
  border-bottom: 3px solid #CCC;
  font-family: argosbook;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: 20px; }

input[type=text]:focus {
  margin: 1px 1px 10px 1px;
  border: none;
  border-bottom: 3px solid #F7941D;
  outline: none; }

label.field { 
  font-family: argosbook; 
  font-size: 15px; 
  display: block; 
  float: left; 
  line-height: 35px; 
  margin-right: 10px; 
  text-align: right; 
  width: 170px; }

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 input[type=text]:focus {
  margin: 1px 3px 10px 3px; }}
  

Style for dropdown (select) lists below. Note that the width should vary as per the design.

Show/hide CSS

.dropdown { 
  width: 140px; overflow: hidden; border-right: 1px solid #CCC; }
.dropdown select { 
  width: 160px; background: transparent url("../images/dropdown.png") no-repeat 80% 50%; }
.dropdown select:hover { 
  cursor: pointer; background: transparent url("../images/dropdown_focus.png") no-repeat 80% 50%; }
.dropdown option {
  padding: 10px; }
 
*Note: Change widths depending on usage and design.

Radio Buttons eComm mComm iPhone iPad Android Mobile Android Tablet

Radio button styles and markup can be found below.


Show/hide CSS

input[type=radio] {
  opacity: 0;
  position: absolute; }

input[type=radio] + label {
  padding-left:23px;
  height:18px; 
  display:inline-block;
  line-height:18px;
  background-repeat:no-repeat;
  background-position: 0 0;
  vertical-align:middle;
  cursor:pointer;
  background: url("../images/rad_off.png") no-repeat;
  font: 14px normal Helvetica, Arial, sans-serif; }

input[type=radio]:checked + label {
  background: url("../images/rad_on.png") no-repeat; }
  
input[type=radio]:focus + label, input[type=radio]:checked:focus + label  { 
  font-weight: bold; }

label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

Checkboxes eComm mComm iPhone iPad Android Mobile Android Tablet

Checkbox styles and markup can be found below.


Show/hide CSS

input[type=checkbox] {
  opacity: 0;
  position: absolute; }

input[type=checkbox] + label {
  padding-left:23px;
  height:18px; 
  display:inline-block;
  line-height:18px;
  background-repeat:no-repeat;
  background-position: 0 0;
  vertical-align:middle;
  cursor:pointer;
  background: url("../images/check_off.png") no-repeat;
  font: 14px normal Helvetica, Arial, sans-serif; }

input[type=checkbox]:checked + label {
  background: url("../images/check_on.png") no-repeat; }

input[type=checkbox]:focus + label, input[type=checkbox]:checked:focus + label { 
  font-weight: bold; }

label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

Note that the above CSS for radio buttons and checkboxes can be combined to save repeating code;

input[type=checkbox], input[type=radio] {
  opacity: 0;
  position: absolute; }

input[type=checkbox] + label, input[type=radio] + label {
  padding-left:23px;
  height:18px; 
  display:inline-block;
  line-height:18px;
  background-repeat:no-repeat;
  background-position: 0 0;
  vertical-align:middle;
  cursor:pointer;
  background: url("../images/check_off.png") no-repeat;
  font: 14px normal Helvetica, Arial, sans-serif; }

input[type=checkbox] + label { 
  background: url("../images/check_off.png") no-repeat; }
  
input[type=checkbox]:checked + label {
  background: url("../images/check_on.png") no-repeat; }
  
input[type=radio] + label {
  background: url("../images/rad_off.png") no-repeat; }
  
input[type=radio]:checked + label {
  background: url("../images/rad_on.png") no-repeat; }
  
input[type=checkbox]:focus + label, input[type=checkbox]:checked:focus + label, input[type=radio]:focus + label, input[type=radio]:checked:focus + label  { 
  font-weight: bold; }

label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

Iconography Global eComm mComm iPhone iPad Android Mobile Android Tablet

Download icons

In this section we have included all the icons used across the site. You can also download a pack of these from the button on the right hand side.

Generic Icons

Close Search Trolley Location Refine Refresh Sort by... Reset Send Share Home Delivery Store Collection Zoom Add to Wishlist Remove from Wishlist Select chevron Cross Tick Delivery Slot Settings / Options Delivery Instructions Home Delivery Two-man Delivery Order Summary Details

Loading Wheel Global eComm mComm iPhone iPad Android Mobile Android Tablet

New loading wheel replaces all instances of old blue version and should spin through CSS at 1.5 seconds per rotation. Size should be set on a case by case basis to best fit the space available.

Show/hide CSS

.loading {
  -webkit-animation:spin 1.5s linear infinite;
  -moz-animation:spin 1.5s linear infinite;
  animation:spin 1.5s linear infinite;
  width: 60px;
  height: 60px; }
  
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Tables Global eComm mComm iPhone iPad Android Mobile Android Tablet

Buying choices
How can I get it?
Specifications
Quantity 24 24 24
Rechargable No No No
Pre-charged No No No
Settings Variable Recharge Delayed

Show/hide CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 20px; }

tr { height: 32px; line-height: 32px; }

tr.title { background-color: #F5F5F5; text-transform: uppercase; font-family: argosbold; font-size: 18px; }

tr.even { background-color: #F5FCF8; }

td { border-right: 1px solid #F5F5F5; padding: 0 18px; }

td:last-of-type { border-right: none; }

tr.odd:hover, tr.even:hover { background-color: #BAE8D0; }

Spacing / Layout

PLP / CLP

The Product List Page (PLP) and Category List Page (CLP) should be split into two columns, the left hand side containing links to deeper category levels in the case of CLP, or refinements once the PLP is reached.

The right hand column is then reserved for the actual page content, which should include any inpage banners, category, and product links.

PDP

The Product Description Page (PDP) contains two columns, the left being reserved for the main product information such as title and images, whilst the right hand side should contain the fulfilment area.

Beyond this information, the page should change to 100% width for the remainder of the page.

Modal Windows

Modal Windows should be used in instances where the user does not need to load an etirely new page, this will annoy most users. Modal Windows allow us to save space by getting rid of large elements that dont need to be on the main page or provide a space for an action to be completed. Examples like this on the Argos site include sign-in, store locator, quickview, media player.

The eComm modal is 838px wide in #FFFFFF with a 60px high header in #F1F1F1 and a 2px shadow in #CCCCCC. The overlay over the content is at 60% opactity in #000000

Breadcrumbs

Breadcrumbs provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one

The eComm breadcrumb has the following styling: Font-size: 13px, Font-family: Arial, Colour: #666666