[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
Groupe Adèle Project- Human Equation 2
DI
Wireframes
• http://demo.huewebstudio.com/adele/
Groupe Adèle Project- Human Equation 3
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.
Groupe Adèle Project- Human Equation 4
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).
Groupe Adèle Project- Human Equation 5
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
• -Beginning of the text of the WYSIWYG on the single page
• -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)
• -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 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)
Groupe Adèle Project- Human Equation 6
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
Groupe Adèle Project- Human Equation 7
Splash page
Groupe Adèle Project- Human Equation 8
VM89
VM90
VM91 VM92 VM93 VM94
Footer
Groupe Adèle Project- Human Equation 9
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
Groupe Adèle Project- Human Equation 10
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
Groupe Adèle Project- Human Equation 11
VM1
VM2
VM3
VM4
VM5
VM6
VM7VM8
VM9
VM10
VM13
VM14
VM87
VM114
Services – Template BFirst level page
Groupe Adèle Project- Human Equation 12
VM19
VM20
VM23
VM115
VM126
Service>Entretien_regulier –Templace Cthird level page
Groupe Adèle Project- Human Equation 13
VM27
VM28
NL7
VM29 VM30
VM31
VM32
VM33
Service>Eco_responsableTemplate D
Groupe Adèle Project- Human Equation 14
VM43 VM117
PromotionTemplate E
Groupe Adèle Project- Human Equation 15
VM44
VM45
Ce qu’on dit de nousTemplate F
Groupe Adèle Project- Human Equation 16
VM55
VM56
VM57
NL8
VM59
VM62
Details of the custom post types « ce qu’on dit de nous »
Groupe Adèle Project- Human Equation 17
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
Groupe Adèle Project- Human Equation 18
Devenir_une_franchiseTemplate B (declination)No design, please duplicate from template B and adapte the second section (see the yellow square)
Groupe Adèle Project- Human Equation 19
VM70
- Franchise_entretien_menager- Franchise_grand_entretien- Franchise_super_franchiseDuplicate template C (entretien ménager)
Groupe Adèle Project- Human Equation 20
- NouvellesDuplicate Template E (promotion)
Groupe Adèle Project- Human Equation 21
VM78
Autre régionTemplate G
Optionnel (poste only)
optionnel
optionnel
optionnel
optionnel
Groupe Adèle Project- Human Equation 22
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
Groupe Adèle Project- Human Equation 23
VM125
Nous recrutonsTemplate I
Groupe Adèle Project- Human Equation 24
VM120
VM121VM122
VM123
VM124
Mobile mock-up (draft)
Groupe Adèle Project- Human Equation 25
NL11