Style guide

Introduction

This guide is intended to support individuals in getting the best from the Specsavers website. The following content is aimed at helping you understand our approach to design and development, with high level overviews of responsive web design, CSS and content.

This is an evolving web resource and any comments or suggestions are welcome. To submit your feedback please fill out this form.

Responsive web design (RWD)

What is responsive web design? RWD is an approach that aims to deliver web pages that respond to a users device irrespective of its screen resolution. There are many techniques, frameworks and methodologies to help us achieve this. At Specsavers we've chosen a few which we believe will help us deliver a great user experience across all devices.

The methodology we've chosen to take across development, design and content is mobile first. Why is mobile first important? The constraints of mobile devices force us to focus on what's truly important for the user. That may be screen resolution or limited bandwidth / connectivity.

The framework we've chosen is Bootstrap. Its open source, has a large development community and its built mobile first from the ground up.

Bootstrap grid guide

Bootstrap's grid framework always adds up to a row of 12 columns. All you need is a div with the class of 'row', and then the divs that will make up your columns for that row with the proper classes applied.

Its easier to understand the grid using a real life example, lets look at a contextual banner which has been built using Bootstrap.

The section on the left with the red background is 7 columns wide. The right-hand section with the image is 5 columns wide.

LG view of contextual banner

The next series of images illustrates how the grid scales. We still have a 12 column grid of 7 and 5 respectively. But our content is starting to scale down.

MD view of contextual banner

SM view of contextual banner

We're at mobile phone size now, so space is a real premium. We've made the left section 12 columns wide and hidden the section with the image.

XS view of contextual banner

4 even columns
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>



The examples above are fairly simple. Of course Bootstraps grid can cater for much more complex layouts. To learn more about the grid visit the Bootstrap docs

To help layout pages in Photoshop that adhere to the Bootstrap grid download these templates

Breakpoints introduction

Breakpoints or media queries are declared widths that change the layout once the browser is in the correct range. Bootstrap has 4 media queries and these are expressed with 4 different class names (XS, SM, MD & LG). We've added an extra break point (XXS) between 0 and 768.

Its easier to understand the break points when you see them in conjunction with the devices they were designed to cater for.

Mobile viewMobile is col-xxs - 0 - 480px
( Custom break point added to give extra control on extra small devices like phones ).

Mobile viewMobile is col-xs - 481px - 767px
( extra small devices like phones ).

Tablet viewTablet is col-sm - 768px - 991px
( small devices like tablets ).

Laptop viewLaptop is col-md - 992px - 1199px
( laptops and medium sized desktops ).




Desktop viewDesktop is col-lg - 1200px - up
( large desktops and TVs ).

You can test break points quite easily with a website called Responsive.is Simple type the URL of the page you want to test in the top left. Then click the following buttons at the top of the page to see the break points working.

Responsive buttons



To delve deeper into Bootstraps media queries click here.

Responsive images

Images added via the WYSIWYG aren't responsive by default. If your image is wider than 290px, on small mobile devices it'll disappear off screen.

This is easily fixed by following these steps.

Step:1 Add your image to your content like you normally would.

Step:2 Right click on the image and select "Image Properties".

Step:3 Delete the with and height.

Step:4 Then click the "Advanced" tab at the top of the overlay.

Step:6 In the field labeled "Stylesheet Classes" add "img-responsive" leaving a space between content.

The contents of the field should now look like "media-element file-default img-responsive"

Responsive tools and resources

Further reading

Tools

Resources

General site styles

font-family: 'Source Sans Pro' ; #333333

All text links should have an underline and follow this colour combination:

Text links #333333

Text links :hover #006338

<h1> 24px   font-weight: 500;
<p>     16px   line-height: 1.42857;

Colours

Text links:hover
#006338
“Homepage CTA button'”
#009b4f
Related links bar
#8a8a8a
Offers and price boxes
#2c4864
Copy
#333333
Borders
#dfdddd
Homepage borders
#c5c5c5
Border:hover
#8a8a8a
Hearing Centres
#0096c5
Eyecare at home
#e78800

Body copy

Specsavers global default font-size is 16px, with a line-height of 1.42857. This is applied to the <body> and all paragraphs. The font-fmaily is Source Sans Pro and the font-weight is normal

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Fonts

The Specsavers websites use 2 font families Soho Gothic and Source Sans Pro. They are available in a variety of different weights

We also use an icon font called Font Awesome to deliver scalable and consistent icons across devices.

Soho Gothic

Soho Gothic is Specsavers corporate font. Below are the weights used on all our sites. For more information on using this in your CSS use the CSS link on the right.

Soho Gothic Light CSS closefont-family:"Soho Gothic W01 Light";
font-weight:normal;

Soho Gothic Light Italic CSS closefont-family: "Soho Gothic W01 Light Italic";
font-weight:normal;

Soho Gothic Regular CSS closefont-family:"Soho Gothic W01 Regular";
font-weight:normal;

Soho Gothic Italic CSS closefont-family:"Soho Gothic W01 Italic";
font-weight:normal;

Soho Gothic Medium CSS closefont-family:"Soho Gothic W01 Medium";
font-weight:normal;

Soho Gothic Bold CSS closefont-family:"Soho Gothic W01 Bold";
font-weight:normal;

Source Sans Pro

Source Sans Pro Regular CSS closefont-family:'Source Sans Pro';
font-weight:normal;

Source Sans Pro Semi Bold CSS closefont-family:'Source Sans Pro';
font-weight:600;

Source Sans Pro Bold CSS closefont-family:'Source Sans Pro';
font-weight:700;

Font Awesome

Below are some basic examples of the icons. To view all the icons available and more information on using the icon font click here.

Font Awesome and Photoshop

We'd prefer if all icons were HTML but recognise this may not always be possible. So for consistency purposes we've provide a PDF that contains all the Font Awesome icons.

Download the Font Awesome icons

Buttons

All buttons on site should have no rounded edges. No underline

Normal Hover

 

Primary Padding 20px 16px
Font-size: 20px;
Font-weight: 600;

Secondary Padding 14px
Font-size: 16px;
Font-weight: normal;

Secondary:hover  

 

background-color: #009b4f

border #adadad

hover color: #ebebeb

 

General buttons

Non selected state
This is the state of the button before it is clickable. For example on the current contact lens page, when selecting the prescription, the 'Enter your prescription' button will not be clickable until a prescription has been added.

Padding 20px 16px

Large buttons should have a padding of 20px 16px

All none selected buttons should be #8a8a8a

 

Continue and back options

Padding 20px 16px

Padding 6px 12px

Continue buttons should be #009b4f

Back buttons should be #dfdddd

 

Cancel and delete buttons

Padding 6px 12px

Delete and cancel buttons should be #8a8a8a

Hearing Centres, Eyecare at home

 

Hearing Centre
Eyecare at home

Logos

Creating assets for designer brands listings page

The designer listings brands page consists of a banner, an area for promoting popular men's and women's brands and then all the designer brands available. This section explains what type of asset you need to supply.

For the popular brands section download our guide to creating a popular designer listing logo panel.

Download our guide to creating a generic designer listing logo panel.

Homepage

Benefits bar

colour #000000

colour :hover #006338

font-size: 16px; keep character limit to 32 for the benefits bar

Main banner image

Notes: Due to the responsive nature of the banner, images should leave a space on the left or right for the Title and CTA buttons + Copy and CTA should be placed in the centre of the empty space Image size: 1920 × 540
Mobile banner image is 767 × 309

Banner title

colour #000000 width: 180px This may change due to the length of the language padding: 5px 0;

Banner CTA

colour #009b4f margin-bottom: 12px; Spacing between the two CTA buttons font-size: 1.1em;

Banner CTA:hover

colour #006338
 

Buttons

Homepage buttons

Normal Hover

Home page - section 1

Notes: The image of the glasses should line up with the top of the two for one logo

Promo price - large 18px / Soho Gothic Medium
From - small 18px / Soho Gothic Regular
Copy 16px / Soho Gothic Regular
CTA 16px / Soho Gothic Regular
2 for 1 main promo panel

Double height promo panel - New homepage layout

Download our guide for creating assets for this panel

Double width promo panel - New homepage layout

Download our guide for creating assets for this panel

Standard width promo panel - New homepage layout

Download our guide for creating assets for this panel

Banners

Page banners take up one of the most important positions on the page. To help produce banner with impact we've created this section to help.

CMS - Creating responsive banners

This section covers the process of building a responsive banner or slideshow in Drupal. It assumes you already have the correctly sized assets available. For information on creating assets for responsive banners click here.

A responsive banner is made up of 2 content types Content: Slide and Content: Bootstrap banner.
You should familiarise yourself with what each of the templates fields do, to help we've produced these short guides.

Content: Slide guide
Content: Bootstrap banner guide

Step:1
Open a new Content: Slide
Content > Add content > Content: Slide

Step:2
If your banner has a title or sub title add these to the appropriate fields.

Step:3
Upload your correctly sized banner image (1140x323).

Step:4
Scale or Replace
Predominantly replace is the best choice for responsive banners but scale has its uses. Below is a 1140px banner scaled to 290px which is the size it would appear on a small mobile.

Example of 1140px banner scaled to 290px

If the image above contained embedded text it would be very difficult if not impossible for a customer to read. Even the model shot has lost a lot of its impact because of the extent of the scaling. Replace gives you more control over how images are displayed on mobile devices.

Step:5
Link to is an optional field that allows your banner to be clickable.

Step:6
Text colour theme gives you the ability to change the colour of your title and sub title. The options are Dark (black) and light (white).

Step:7
Text location positions your title and sub title either left, right or centre.

Step:8
Publish your banner slide.

A Slide needs to be included in a banner. A banner can contain 1 or more slides.

Step:8
Open a new Content: Bootstrap banner
Content > Add content > Content: Bootstrap banner
Give your banner a name.

Step:9
Enter your previously created slides name. You can enter multiple slides to create a carousel or slideshow.

Step:10
Publish your banner.
Note: It needs to be included in a page before you can view the banner working responsively.

CMS: Adding a hotspot

Below is a step by step guide to adding a hotspot in the CMS.
Alternatively you can download our hotspot guide.


Step:1

Hotspots are attached to specific pieces of content. For example if you wanted to attach a hotspot to a panelised landing page you’d need to know the title of the content , the SKU of the product featured and the position that the hotspot appears in.

Note: Certain types of pages will have multiple positions for hotspots. If a position is missing from a page type please log a ticket in Jira and it can be added quickly.

Step:2
In the main admin menu go to Content > Hotspots > Add hotspot.

Step 3: Name the hotspot
I use the pattern, name of the content its attached to and the SKU of the product. So my free reactions banner hotspot would have a name of:

Free reactions slide - 25666854

Note: Consistant naming conventions help you find things easier in the CMS.

Step 4: Fill in the form
Below is a brief description of what each of the fields do.

Slide Attached to
Enter the name of the content you’d like the hotpot to appear on. Its an auto complete field to help you find your content. Having the node ID of the content is also helpfully so you can distinguish between items with the same title.

Target
The SKU of the product in your hotspot. Its an auto complete field to help you find the product.

Position X and Position Y
These values let you position the hotspot within the banner. Adding the values 0, 0 would position the hotspot in the top left corner of the banner.

Placement
When you click on the hotspot it opens an overlay with the product information. Placement allows you to control where that overlay appears relative to the hotspot.

Element on the page
This is the position the hotspot sits in. For example, if you’d built a panelised landing page with an image tile widget and you wanted the first image on the image tile to have a hotspot you’d choose Image tile - Slot 1. If a the position you want doesn’t appear please log a Jira ticket.

Save your hotspot and it should appear on your content. Occasionally it can take a few minutes for the CMS to display the hotspot.

Note: You can add multiple hotspots to a banner by repeating these steps.

Offer listings grid panel

Download our short guide to creating assets for the offer thumbnail.

Offer listing grid panel guide

Contextual banners

Below are the banner modules used on the Specsavers global sites.

Large contextual banner


Women's glasses

Our stylish collection has an option for every woman, whether you’re looking for contemporary cool or geek chic.

Womens glasses at Specsavers Opticians
<div class="contextual-large">
<div class="row">
<div class="contextual-left red">
<h3> Women's glasses </h3>
<p> Our stylish collection has an option for every woman, whether you’re looking for contemporary cool or geek chic.</p>
<ul class="link-list">
<li> <a href="#"> Women's designer glasses</a> </li>
<li> <a href="#"> Women's glasses under £50</a> </li>
</ul>
</div>
<div class="contextual-right col-lg-5 col-md-5">
<img src="...." alt="....">
</div>
</div>
</div>

Supporting Contextual banner

<div class="contextual-sml col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="row">
<a href="#">
<div class="headline col-lg-7 col-md-7 col-sm-7 col-xs-7">
<h3>Explore the latest women’s trends</h3>
</div>
<div class="img-container col-lg-5 col-md-5 col-sm-5 col-xs-5">
<img class="img-responsive" src="...." />
</div>
</a>
</div>
</div>

Paneliser documentation

Panelised pages can contain various different elements or widgets. It’s up to the content author what widgets a page contains and what order they flow in. But at the core of a panelised page is the Panelised Landing Page content type.

To create a panelised landing page go to Content > Add content > Panelised Landing Page.

Download the guide to creating a panelised landing page.

Paneliser widgets

Below is a list of paneliser widgets, what they look like when published and documentation on creating the widget.

Offer panelised

Offers can now be created in paneliser. Please download our guide.

See how you save

The responsive see how you save module can be added to any responsive offer page. We've created this step by step guide to customising it.

Download our see how you save guide

If you would like further training on this module or any content within this guide please contact the global web development team.

HTML5 templates

The sites have 3 freeform HTML5 templates for you to use. Page HTML5, Content HTML5 and Offer HTML5 all have specific use cases and the following sections are aimed at helping you choose the correct type for your content.

Page HTML5

Page HTML5 does exactly what its called, it creates a complete HTML5 page with the sites header and footer included.

Log into Drupal and from the admin menu choose.
Content > Add Content > Page HTML5

You should familiarise yourself with what each of the fields do, to help we've produced this short PDF.

Most of the fields are self explanatory but 3 areas require further explanation.

Body

Body area in the template


When you open a new page HTML5 by default the Body is set to filtered HTML. It needs to be set to System or Full HTML.

Full HTML

You can enter any custom HTML with a few small caveats. Strips out broken links and internal links unless they are entered via the WYSIWYG. Strips out empty and unclosed tags. Adding a comment inside a empty tag will stop it being removed.

System

Removes the WYSIWYG and any editing of your HTML. You can add any mark up you like and it'll be published to the live servers.

JS

JS area in the template


You can add any JS you want in here. The Specsavers global sites run jQuery 1.7.1 and also run Modernizr 2.6.2. You should wrap any JS you write in an anonymous function.

;(function (/* jQuery */$) {
"use strict";
// Your code here - you can use $ here to refer to jQuery
})(jQuery);

If you want to use the same JS across a suite of pages please read about the HTML5 content below.

HTML5 content

HTML5 content area in the template


This gives you the ability to include a piece of Content HTML5 in your page. This is helpful if you want to share common CSS and Javascript across a group of pages.

This method is currently faster than creating separate CSS and JS files and including them via the External CSS and External JS fields. The reason for this is currently Drupal doesn't delete any assets uploaded via the Assets loader. Lets say you upload a file called main.css and you include that file in 5 pages. If you make a change to main.css and upload your new version, Drupal won't overwrite or delete the previous version. It'll just create a new file called main_0.css. For every version you upload it'll incrementally increase the number it appends to the file name.

You'll now need to update every page that references that file. If you intend to make changes to JS or CSS include it via Content HTML5. Plugins and frameworks can be included via the external CSS or JS fields within your Content HTML5.

To learn more about creating Content HTML5 see the following section.

Content HTML5

Content HTML5 is a piece of content and needs to be included in another page. For example the contextual banners (image below) are pieces of Content HTML5.

example of Contextual banners


To create a piece of Content HTML. Log into Drupal and from the admin menu choose.
Content > Add Content > Content HTML5

You should familiarise yourself with what each of the fields do, to help we've produced this short PDF.

You should also read the documentation about Page HTML5 which shares similarities around the WYSIWYG and including assets.

Building a page with blocks of HTML5 Content is useful if you need the flexibility of timed publish or unpublish. An example of this would be the homepage where all of the content can be timed to publish at separate times.

To build a page of Content HTML5 elements you need to include them in a page. The most common way is to use Page Featured.

To create a Page Featured. Log into Drupal and from the admin menu choose.
Content > Add Content > Page Featured

You should familiarise yourself with what each of the fields do, to help we've produced this short PDF.

Offer HTML5

The HTML5 offer template allows you to create a completely customised offer landing page. It still has all the benefits that the standard offer template has.

  • Offer appears in mega drop down list
  • Offer appears on the offers listings page and store home pages
  • Offer can be ranged to a region or specific store(s)
  • Optical or hearing offer switch

As a result of all this functionality the template has a lot of fields. You should familiarise yourself with what each of the fields do, to help we've produced this PDF document.

You should read all the other documentation for the HTML5 templates, this will help you get the most from the template quicker.

Video

Responsive You Tube video

Note: 15.05

After the global release of 15.05 (May 2015) you will no longer need to make You Tube video responsive. The site will take care of that for you.

All you need to do is set the text format to "Full html".

A simple guide to embedding a responsive You Tube video in your content.

Download our responsive You Tube player guide

Store pages

Additional store information

Content authors have the ability to add an extra piece of text on to any store landing page. This is ideal for copy that improves SEO or specific directions that may help a customer find the store.

Follow the steps below or download a PDF version.

Step:1

Find your store by going to Content > Stores.

Step:2

Stores can be filtered by name or EPOS number. Type in your prefered option and click “Apply”.

Step:3

Click the button on the left called “Store additional information”.

Step 4: Title & body

You can add a title and body, neither of the fields are mandatory.

Click “Save store” and your finished.

Download PDF guide to additional information

Javascript

The Specsavers global sites run the following libraries and plugins.

You should wrap any JS you write in an anonymous function.

;(function (/* jQuery */$) {
"use strict";
// Your code here - you can use $ here to refer to jQuery
})(jQuery);

Templates

Showcase
Example of a Showcase page

Offers listing
Example of an Offers listing page

Offer detail page
Example of an Offers detail page

Main section
Example of a Main section page

General content 1
Example of a General content page

General content 2
Example of a General content page