Website Design
Page Layout Structure
All of the websites we build use the Bootstrap grid system as this allows us to easily use columns to form the layout of the pages, as well as providing responsive options for modifying the column widths, etc. You can find out more about Bootstrap here: https://getbootstrap.com/.
When designing the layout of the site we recommend working to the 24 column Bootstrap grid system when positioning elements, as this is what we will be using to build the site.
Standard Website Structure
Below is a diagram of the standard website structure for Khaos Control Web sites. This is just to give an example of the possible page designs that would be required, as well as which pages lead on to which other pages.
This can be customised to fit your needs, so you do not have to follow this exactly. Below this is some alternative checkout layouts, as examples of the customisability. 
Alternative Checkout Structure Examples
The checkout within Khaos Control Web is customisable to fit with your requirements. Here are some alternative checkout structures:
It is also possible to skip certain sections of the checkout by default for logged in customers, such as the address stages, and then give the customer the option to go back and change them if required. This provides a much more compact checkout experience for the customer, while still allowing all of the customisation of the order required. In this way it is possible to create a "single page" checkout, where the remaining elements such as delivery method and payment options are combined onto a single page.
Website Design Requirements
As part of a Khaos Control Web project you will need to provide us with the designs for the different areas of the website. We will then match these designs as closely as possible while building your website.
Here is a list of designs that are commonly required for a project:
- Header and Footer (these are normally integrated into the other designs, but can be separate)
- Home page
- Account login page
- Account registration page
- Forgotten password / Reset password pages
- Main account page
- Each account section page, for example:
- Address list page
- Add / edit address page
- Previous order list page
- Individual previous order page
- Account details / password page
- Category page
- Search page
- Product page
- SCS product page (if required)
- Basket page
- Checkout login page
- Checkout stages (see the section above for various options for this)
- Order confirmation page
- Order failed page (in case there is an error during confirmation)
- Content pages (contact us, etc)
- Main blog page
- Individual blog article page
If there are other pages that you want in your website, to accommodate custom functionality, etc, then please provide those as well. If there are designs that are required, such as if you are not having a blog on your site, then these can be ignored.
NOTE: It isn't a requirement to provide designs for content pages that are just text, or ones that you will be creating yourself, it is mostly required for content pages that would require specific styling or custom layouts.
As well as providing the designs for these different pages, it is also really helpful to have notes on specific functionality, whether a section of content should be hard coded or customisable in the CMS as static content, what happens when a button or link is hovered over, and any other aspect of the design that might not be clear from a static image.
Assets
Where possible you should also provide any assets such as background images, logo images, icons, etc. Background images and logos should be provided in JPG or PNG format, depending on any transparency requirements, and icons should be provided in SVG format if possible, or PNG format if not.
Related Articles
Translate your Website
There are two stages to fully translating your website, translating the hard-coded text within your theme, and translating your Static Content and other Pages. Translating your Theme The following guide will take you through the steps of creating ...Add Products to your Website
In order for a product to show up on your website, you will need to do the following: You must add your product to a category within the “Web Categories” screen in Khaos Control. For more information: ...Handle Your Website Going Down or Becoming Unresponsive
It is worth noting that there is an auto-recycle in place on all of the Khaos Control Web sites that checks the connection to the website and DLL every 5 minutes, and if there is an issue it will automatically trigger a restart of the website and DLL ...Pause your Website for Copy Live to Test
If a Copy Live to Test needs to be run for Khaos Control the staging site DLL and Website will need to be paused for the duration to prevent it from accessing Khaos Control and interrupting the Copy Live to Test. 1. Log into the web server. 2. Run ...v3.0.0.0
- We have totally reworked how customer and order data is loaded from Khaos Control, which should resolve the inconsistent issues with guest baskets being lost. - Improved the session and basket recovery for customers returning to the website. - ...