SellerDeck 2014
Responsive Design Guide
_______________________________________________________________________________________________ SellerDeck 2014 Responsive Design | 2
Contents
Contents
Contents
Contents
Introduction ... 3
Themes and Wireframe ... 4
Classic Theme... 4
Smart Theme... 5
Wireframe ... 6
How the Responsive Design Works ... 7
Tablet: ... 8
How can you customise the SellerDeck 2014 Responsive Designs?... 9
Company Logo... 9
Colour Scheme ... 10
Fonts... 11
Changing Element Positions... 12
What positions can you change to?... 12
Changing number of sidebars ... 13
Fixing Widths... 14
Introduction
Introduction
Introduction
Introduction
SellerDeck 2014 has two new themes and a new wireframe. All three themes are responsive.
This document will cover:
- The differences between each theme and the wireframe - How the responsive design works
- How you can customise the SellerDeck 2014 Responsive Designs This document will not cover the new features of SellerDeck 2014 or GFS.
_______________________________________________________________________________________________ SellerDeck 2014 Responsive Design | 4
Themes and Wireframe
Themes and Wireframe
Themes and Wireframe
Themes and Wireframe
There are two responsive themes in SellerDeck 2014, the Classic Theme and the Smart Theme.
Classic Theme
Classic Theme
Classic Theme
Classic Theme
Smart Theme
Smart Theme
Smart Theme
Smart Theme
_______________________________________________________________________________________________ SellerDeck 2014 Responsive Design | 6
Wireframe
Wireframe
Wireframe
Wireframe
The Wireframe was built so that you can create your own design and have it responsive. You are able to add the CSS design to any of the elements.
How the Responsive Design Works
How the Responsive Design Works
How the Responsive Design Works
How the Responsive Design Works
The responsive design works with the use of CSS.The Cascading Style Sheet (CSS) is what tells the site design what it is going to look like, what colour it is and what size things are displayed at. There are areas within the CSS that are called Media Queries, these are what make the design display differently at different sizes.
The best way to understand how this works is to open up one of our responsive sites. Grab one of the side edges of the browser and bring it in to make the width of the site smaller. As you do this you will notice that elements of the page will move, change size and change appearance completely. For example, as you make the width of the site smaller, the menu will suddenly change from the Mega Menu, to a drop down menu at tablet stage. You will also find that the two side bars will move to appear in one column under the main content.
_______________________________________________________________________________________________ SellerDeck 2014 Responsive Design | 8 With Tablet:
How can you customise the SellerDeck 2014 Responsive Designs?
How can you customise the SellerDeck 2014 Responsive Designs?
How can you customise the SellerDeck 2014 Responsive Designs?
How can you customise the SellerDeck 2014 Responsive Designs?
This section will take you through a number of customisations you are able to do to the responsive design.- Logo Change - Colour Scheme - Fonts
Company Logo
Company Logo
Company Logo
Company Logo
To be able to change your company logo, go to: Design > Themes > Corporate Logo
_______________________________________________________________________________________________ SellerDeck 2014 Responsive Design | 10
Colour Scheme
Colour Scheme
Colour Scheme
Colour Scheme
To be able to change your colour scheme of your site go to:
Design > Themes > Advanced Theme Configuration > Color Scheme
The three main colours you need to take note of are: - Palette Color 1
- Palette Color 2 - Palette Color 3
These are what control your main colours on the site. Other Colours Explained
- Background: The area outside of the website content - Text: Main content text such as the product full description
- Required Field: Changes the text of fields required to be filled in by the customer (such as ‘Name’ in the checkout)
- Link: the colour of hyperlinks
- Visited Link: the colour of hyperlinks once visited (E.g. Google links turn Purple) - Active Link: the colour of hyperlinks when being viewed in another tab in the browser - Mouse Hover Over: the colour of hyperlinks when hovered over by the mouse - Form Background: the background colour in the checkout
- Form Emphasis: The checkout header colours
- Search Highlight: the text will change to this colour when searched for - Error Highlight: the colour of the text in an error message.
Fonts
Fonts
Fonts
Fonts
Like previous versions of SellerDeck, you are able to change the Fonts of SellerDeck to set families. To be able to choose the font-family you wish to use, go to:
Settings > Site Options > General > Scroll down to ‘Appearance Settings’ > Default Font for Heading / Default Font for the Store.
_______________________________________________________________________________________________ SellerDeck 2014 Responsive Design | 12
Changing Element Positions
Changing Element Positions
Changing Element Positions
Changing Element Positions
There are a number of main elements as part of a SellerDeck site: - Section List
- Brochure Links - New Product List - Best Sellers List - Info Links List
You are able to easily move the positions of these elements. Go to: Settings > Site Options > Design Wizard
On the next page is a screen shot to show you what each name is referencing.
What positions can you change to? What positions can you change to? What positions can you change to? What positions can you change to?
- Section List: Left Sidebar, Main Menu Bar and Right Side Bar - Brochure Links: Left Sidebar, Main Menu Bar and Right Side Bar - New Product List: Left Sidebar and Right Sidebar
- Best Sellers List: Left Sidebar and Right Sidebar - Info Links List: Top and Sub Header
Changing number of sidebars
Changing number of sidebars
Changing number of sidebars
Changing number of sidebars
You will also notice there is the option to change your site from having two side bars to one sidebar.
This will simply remove the right hand side bar, as well as any content within it. You would need to change positions of the marketing lists, to the left hand side, to still view them.
Info Links List Section List Brochure Links
New Products List
_______________________________________________________________________________________________ SellerDeck 2014 Responsive Design | 14
Fixing Widths
Fixing Widths
Fixing Widths
Fixing Widths
There is also the ability to ‘fix’ the widths on desktop. It will still allow the site to become smaller and adapt to tablets and mobiles, it just stops the site spanning the full width of larger screens.
To do this, go to: Settings > Site Options > General > Site… - … Width For Main Area
- … Width of sidebar(s) in pixels - … width of web pages in pixels
When filling in the fixed widths, you will need to also do some calculations. One example of fixing the widths is the following:
- Width For Main Area: 1000 - Width of sidebar(s) in pixels: 170 - width of web pages in pixels: 1340
You will notice that the main area has a width (in this case 1000 pixels) Then the sidebars have a width of 170 pixels each.
Therefore the Width of Web Pages is a total of the Main Area plus the Sidebars. As there are two sidebars in this example, we add each sidebar width twice, totalling 1340 pixels.
Turning off the Responsive part of the site
Turning off the Responsive part of the site
Turning off the Responsive part of the site
Turning off the Responsive part of the site
You also have the ability to turn off the responsive part of the website.Go to: Settings > Site Options > General > Scroll down to Appearance Settings > Change the ‘Adapt Page Layouts to Screen Size’ to ‘False’.
