Table of Contents
Requirements of CMS for BSUP Websites
This document explains the requirements of the CMS to manage BSUP websites.
<html><span class='marketingParagraph'></html>This document is intended for the bSup development team. If you are interested in web solutions, please contact us through the Web Application Services page.<html></span></html>
Multiple website
- The Laravel application is required to support multi sites. Some of the sites may share common functions and information. For example,
- Some of the pages may have the same testimonials. Admin can edit the testimonials in one place, instead of editing the testimonials for each website, separately.
- The structure of the menu (not the menu items) can be the same in some of the websites.
- Contact information such as email and phone number for some of the websites are the same.
Multiple languages
- The content of some of the pages will be translated to different languages. For example, the home page may be in three languages and service page in two languages.
- Images may have different versions depending on the language. For example, on the English home page, we may use “assets/en/image1.png”. However, on the French version of the home page, we may use “assets/fr/image1.png”.
- Even the labels on the contact form of pages may change depending on the language.
- We use url instead of session due to readability by Google like
- example.com/en
- example.com/fr
Multi subsites
- A website may have multi subsites for example, bsup.ca/marketing and bsup.ca/design. Each subsite may have different elements such as menu and footer.
- Purpose of the subsite structure: They are almost independent websites but on the same domain name. For example, a subsite can be about marketing. The navigation/menu for this subsite may be different from the main site. Instead of having a large confusing website, we can break it to smaller subsites.
Multiple templates
A website or a subsite may have multiple templates. For example, a page is based on a custom template and another page is based on a general template.
Google Analytics and other analytics
It’s preferred to use analytics extensively on the websites.
No dashboard
No need for a dashboard. Admin can edit the website info inside the website files.
Image Folder Structure
The image folder is structured into the following folders
- “client_logo” folder: which contains the logo of clients
- “testimonial” folder: the picture of clients.
- “portfolio” folder
- “cities” folder: which contains the folder of different cities or locations. For each city, create a subfolder which includes images of that city.
- “team” folder: the images of the team members
- “logo” folder
- “service_product” folder
- “general” folder: any other images will be in this folder
Note: Break each of these folders into subfolders. Each subfolder name is the size of the containing images like the image below. Make sure an image is in the correct folder whose name represents the size of the image.
Database/Config
- {T100-contact-info} Contact Info
- {80-company} Company name
- {100-address} Address
- {120-phone} An array of phone numbers
- {120-phone:toll-free} Toll free phone
- {120-phone:vancouver} Vancouver phone
- {140-email} An array of email addresses
- {140-email:general} General email address visible on website
- {140-email:contact-form} The email address of the contact form
- {140-email:contact-form-cc} The cc email address of the contact form
- {180-site-url} Website’s friendly URL
- {200-lat} Latitude
- {220-lon} Longitude
- {T120-page} Page properties
- {100-title} The page title
- {120-description} The meta description of the page
- {140-active-menu-item} This identifies the active item on the menu. For example, item X on the menu has two items X1 and X2. If a user visits any of X1 or X2 pages, the item X on the menu is highlighted/activated.
- {160-url} Page URL
- {180-contact-form-title} The phrase to be included in the subject line of the email sent upon contact form submission
Page Sections
Some sections are shared on each page like a list of clients, testimonials and contact form.
{S100-contact} Contact Section
Some of the pages have a contact form.
Fields on the contact form are
- Your name
- Your email
- Your message
- Captcha
The data on the form should get validated,
- All fields are mandatory.
- {N100-contact-form-errors}
Upon form submission,
- {N120-form-submission-messages}
- send email to admins as follow,
- Title of the Email: “Email from the {T120-page→180-contact-form-title}”
- Send the message to {T100-contact-info→140-email:contact-form}
- Send a copy of the message to {T100-contact-info→140-email:contact-form-cc}
{S120-demo-form} Demo Form Section
Some of the pages have a demo form to request a demo of products.
Fields on the contact form are
- Name*
- Company*
- Email*
- Phone
- Website
- Address
- City
- Country
- Captcha
The data on the form should get validated,
- All fields are mandatory.
- {N100-contact-form-errors}
Upon form submission,
- {N120-form-submission-messages}
- send email to admin as follow,
- Title of the Email: “Request of a demo for {T120-page→180-contact-form-title}”
- Send a message to {T100-contact-info→140-email:contact-form} about the demo request with the information of the form.
- Send a copy of the message to {T100-contact-info→140-email:contact-form-cc}
- Send an automatic email to the person who submitted the form. The body of the email is in this file.
{S140-client} Client Section
On some pages, the list of our clients are listed.
Each client has the following info,
- Client Name
- Logo with different sizes
- “Alt” attribute of the image.
{S160-testimonial} Testimonial Section
A testimonial includes,
- Client name
- Client job title
- Client image
- Testimonial content
Menu/Navigation
The website may have multiple menus, for example each subsite may have a different menu.
Type 1 - Desktop View of Menu
The structure of main menu is like
[logo] | item1 item2 contact
The structure of subsite menu is like
[logo] | Subsite-Name item1 item2 contact
The main menu consists of,
- Logo, which is the first item and links to the homepage
- Other menu items
A subsite menu consists of,
- Logo, which is the first item and links to the homepage
- Subsite name which is linked to the homepage of subsite. It can be in bold and larger font like the image below.
- Other menu items
An example of this type of menu is microsoft.com which is displayed in the image below.
Type 2 - Mobile View of Menu
The structure of the menu on mobile is similar to Type 1, except instead of logo, display “Homepage”.
Type 3 - Subsite Menu on Desktop
An example of this type of menu is,
Type 4 - Subsite Menu on Mobile
An example of this type of menu is,
When a user clicks the menu icon, the subsite menu is shown first. When the user clicks arrows, the main menu is displayed.
The bg color of the subsite menu on mobile is gray. The bg color of the main menu on mobile is transparent.
Highlight Active Item on Menu
Highlight the active page on the menu. For example, if the user is on the service page or a subpage of the service page, highlight the service on the menu like the image below. Please note, a service page may have multiple sub pages. Visiting any of the sub pages, will highlight the service label on the menu. {T120-page→140-active-menu-item} indicates what item on the menu is highlighted.
Translation
The website can be translated to different languages. The material that can be translated is as follow,
- The text of each page
- The place holders and warning messages on contact form
- Images. For example the image on the banner of the French version of the home page might be different from that of English version.
- The global data.
Every url like ‘example.com/excel’ will redirect to ‘example.com/xx/excel’ where ‘xx’ is ‘en’ by default unless the user had previously changed the language to something else.
Notifications
- {N100-contact-form-errors} Error messages on a form submission are as follow
- If user did not fill a required field, display an error message below the field like “Please enter your name”
- Display error if email is not valid like “Please enter a valid email address”
- Display error if message is less than 10 characters like “Please enter at least 10 characters”
- Display error if captcha is wrong
- {N120-form-submission-messages} When user clicks the “Send Message” button,
- Change the “Send Message” button to “Sending…”
- When the message is successfully sent, show a success message
- If failure in delivery, show an error like “Failure in sending the message. Please try again or call us.”
Useful Links
- Related Google Docs (access is required)
- Web Application development services (coming soon).