[he-3044] groupe adèle - adeleplus.com€¦ · [he-3044] groupe adèle brief to psd2html may 1st,...

[HE-3044] Groupe AdèleBrief to PSD2HTML

May 1st, 2014

Document completed by

Vanessa Moreau

Nadine Lessard

Groupe Adèle Project- Human Equation 1

Arborescence

A

B

C D

E F

EC

DSingle page WYSIWYG

B

C CC

D

E

G

H

HH

H


DI

Wireframes

• http://demo.huewebstudio.com/adele/


General concerns

• Modify the more text as possible• As I said before on other projects, we deliver our website to

clients who don’t know at all about web. It’s important for us that our clients are autonome as much as possible. So, wewant to be able to modify the more text as possible in the CMS. So, please, work almost as if everything had to bemanagable.

• No code in WYSIWYG• Again, our standards ask us to deliver « userfriendly » CMS.

Therefore, we can’t have code in our WYSIWYG. The otherproject that psd2html coded the CMS, we were oblige to redoall the parts where they were WYSIWYG. Please, contact us if you have concerns with the design. We can maybe change a few details if it’s easier for you.

• Height of the sections connected to a WYSIWYG• Everywhere where there is a WYSIWYG, the height of the

front end space should be dynamic. So, if the client entersmore content the height should be bigger

• URL rewritting• We have lots of custom post types and posts. I would like to

be sure that every posts will have the URL rewritting for SEO purpose.


Questions

• Question 1 : Lightbox : mobile and responsive?We want a responsive website, but we have some light boxes. How do you usually deal with this issue?

• Our recommendation: use the Fancybox plugin for videos and images and if it’s forms or text, please use Bootstrap modal (http://getbootstrap.com/javascript/#modals).


Custom post types listHere is the list of all the custom post types we will need on this projet. You have mostlyall the fields requiered. In the next pages, you will find the designs with someexplications. So, see design to understand

• Page « promotions », • Name of the custom post type : Promotion• Fields :

• Title• WYSIWYG

• Text in the button• Upload field (for when the user click on the button)

• ** if the admin user doesn’t upload a file, please don't show the button on the front end**

• Image (on the left)• We also should be able to put a youtube link instead of an image

• Ce qu’on dit de nous• Radio and Journaux

• Date of the post

• -Title

• -Beginning of the text of the WYSIWYG on the single page

• -Field to put an external link (_blank) or to upload a audio file

• -the image Is added manually

• When you click, it goes to its single page.

• These categories (radio and journaux) will be display in some sliders on other pages

• Vidéos• -Date of the post• -Title


• -Field to put the Youtube video• -Thumbnail is either added manually by an upload field or automatically with the default one of Youtube

• When you click, it goes to its single page.

• -The video plays in a lightbox on the single page• Please confirm that you can use the Fancybox plugin

• Témoignage• -Date of the post• -Title (nom de la personne)


• When you click, it goes to its single page.• On this category, we need to be able to chose which quote to display on the other pages

• Keep in mind that the section “Ce qu’on dit de nous” will evolve in time; you we should be able to add easily different kinds of post (per example, a regular blog article)

• Prix et distinctions• Duplicate the custom post type « promotion »• On the home page, display the last ones posted (image/video and title)


Special features

• Translation & cookiesWhen the user arrives on the site, there is a splash page (displayed in the langage of the browser) that ask the user to identify the content he is interested in (country/province).

• Québec• FR (default landing language when a user clicks on Québec)

• EN

• Ontario• EN (default landing language when a user clicks on Ontario)

• FR

• France• FR (default landing language when a user clicks on France)

We would like to use the translation tool of wordpress. Basically, we would have 5 langages in the site

Also, we need, with the uses of a cookie for the browser to remember the choice of the visitor


Splash page


VM89

VM90

VM91 VM92 VM93 VM94

Footer


Here is the footer that should be on every pages.Even if the footer changes on certain designs, please display that one

AlignmentsVM95

VM96

Header


Here is the header that should appear on every page

But, on some pages, this beige line appears. Please, see on the wireframe to confirm on which pages it should be, not on the designs : http://demo.huewebstudio.com/adele/

VM97

VM98 VM99 VM100 VM101VM102 VM103

VM104

VM105

VM106

VM107 VM108 VM109 VM110

VM111 VM112 VM113

Accueil – Template A


VM1

VM2

VM3

VM4

VM5

VM6

VM7VM8

VM9

VM10

VM13

VM14

VM87

VM114

Services – Template BFirst level page


VM19

VM20

VM23

VM115

VM126

Service>Entretien_regulier –Templace Cthird level page


VM27

VM28

NL7

VM29 VM30

VM31

VM32

VM33

Service>Eco_responsableTemplate D


VM43 VM117

PromotionTemplate E


VM44

VM45

Ce qu’on dit de nousTemplate F


VM55

VM56

VM57

NL8

VM59

VM62

Details of the custom post types « ce qu’on dit de nous »


Video Radio and journaux Témoignage

-Date of the post-Title-Beginning of the text of the WYSIWYG on the single page-Field to put the Youtubevideo-Thumbnail is either added manually by an upload field or automatically with the default one of youtube

When you click, it goes to its single page.-The video plays in a Fancybox lightbox on the single page

• Each element has its own single page

-Date of the post-Title-Beginning of the text of the WYSIWYG on the single page-Field to put an external link (_blank) or to upload a audio file-the image Is added manually

When you click, it goes to its single page.

These categories (radio and journaux) will be display in some sliders on other pages

-Date of the post-Title (nom de la personne)-Beginning of the text of the WYSIWYG on the single page

When you click, it goes to its single page.

On this category, we need to be able to chose wich quote to display on the other pages

VM118

VM119

Prix et distinctions

• Custom post type

• Use the same template then « promotions » but the click on the button goes to its single page


Devenir_une_franchiseTemplate B (declination)No design, please duplicate from template B and adapte the second section (see the yellow square)


VM70

- Franchise_entretien_menager- Franchise_grand_entretien- Franchise_super_franchiseDuplicate template C (entretien ménager)


- NouvellesDuplicate Template E (promotion)


VM78

Autre régionTemplate G

Optionnel (poste only)

optionnel

optionnel

optionnel

optionnel


VM79

VM80

VM81

NL10

VM83

3 formsTemplate H (forms)

Please, use the style of the form in the template G to do these 4 forms

• Services > Demande d’estimation• http://demo.huewebstudio.com/adele/Formulaire_dem

ande_destimation.html

• Devenir une franchise > Demande d’information• http://demo.huewebstudio.com/adele/Formulaire_dem

ande_dinformation.html

• Nous recrutons >Demande d’emploi• http://demo.huewebstudio.com/adele/Formulaire_dem

ande_demplois.html

• Nous joindre• http://demo.huewebstudio.com/adele/Nous_joindre.ht

ml


VM125

http://demo.huewebstudio.com/adele/Formulaire_demande_destimation.html

http://demo.huewebstudio.com/adele/Formulaire_demande_dinformation.html

http://demo.huewebstudio.com/adele/Formulaire_demande_demplois.html

http://demo.huewebstudio.com/adele/Nous_joindre.html

Nous recrutonsTemplate I


VM120

VM121VM122

VM123

VM124

Mobile mock-up (draft)


NL11

[he-3044] groupe adèle - adeleplus.com€¦ · [he-3044] groupe adèle brief to psd2html may 1st,...

Documents