Conférence animée par Romain (Trained People) & Anne-Sophie (Commerce Guys) à Drupagora 2012

1. Une interface moderne et multi
devices avec Drupal
Focus sur Omega

2. Romain
Jarraud
Formateur
/
consultant
Drupal
Anne-­‐Sophie
Picot
Chef
de
projets

3. Publier du contenu aujourd’hui
> Plateformes de consultation de plus en plus variées.
> Disparité des appareils donc des écrans.
> Utilisation de plus en plus massive d’internet en mobilité.
> Adaptation nécessaire pour publier du contenu.

4. Publier du contenu pour le Web
> Canal de diffusion unique : Internet.
> Transmission et affichages multiples.
> S’adapter à la taille, à la résolution et à l’orientation de la
fenêtre d’affichage pour présenter le contenu.

5. Responsive Design
> Avant (il n’y a pas si longtemps) plusieurs thèmes pour un
même site : thème « classique » et thème « mobile ».
> Aujourd’hui il faudrait au moins 4 thèmes pour prendre en
compte toutes les situations !
> Le thème doit détecter comment est affiché le site et
s’adapter automatiquement : Responsive Design.

6. Responsive Design et Drupal
> Drupal est un Content Management System… et doit le
rester.
> Le système est en charge du workflow de création/
publication de contenus.
> Le thème est responsable de la présentation des contenus.

7. Responsive Design et Drupal
> Le choix du thème est primordial.
Ø Plusieurs solutions de base avec Drupal :
Ø Zen
Ø AdaptiveTheme
Ø Omega
> Le thème Omega est l’une des solutions les plus abouties :
Responsive Design, Grid 960 et HTML5.

8. Démonstration – frontoffice
> Présentation du site et de ses régions.
> Principe du système de grille.
> Mise en évidence du Responsive Design : navigateur
« classique » et smartphone.

9. Démonstration – backoffice
> Configuration des zones et des régions.
> Modification de la largeur des colonnes de droite et de
gauche.
> Utilisation de grilles différentes selon les zones.
> Déplacement d’une région d’une zone à une autre.

10. Mobile first
> Mobile (défaut) pour smartphone.
> Narrow > 740px pour tablette (portrait) et smartphone
(paysage).
> Normal > 980px pour écran de PC/Mac de bureau.
> Wide > 1220px pour grand écran.

11. Modules complémentaires
> Omega Tools : export des réglages du backoffice afin de les
réutiliser sur un autre site.
> Delta : permet d’avoir une présentation différente en fonction
du contexte (url, type de contenu, taxonomie…).

12. Démonstration - Delta
> Création d’une nouvelle présentation.
> Association d’une présentation et du contexte d’utilisation.

13. Et ensuite…
> La présentation s’adapte (finalement) bien.
> Les medias sont toujours statiques (dimensions fixes). Il est
nécessaire de les adapter également (resp_img, fitvids…).
> Drupal 8 : initiatives HTML5, Layout et Mobile.

14. Omega et Commerce Kickstart

15. Commerce Kickstart ?
Commerce Kickstart version 2
• Nouveauté d’Août 2012
• Une boutique de démonstration
• Une base pour constituer un POC
• Une base pour composer votre boutique
(sur périmètre identique à proche)
Commerce Kickstart Thème
• Un thème utilisable tout de suite
• Une base de thème pour votre boutique

16. De
Commerce
Kickstart
1
à
Commerce
Kickstart
2
Contenus
Configura6ons
Blocs
Images
Thèmes
Menus

17. Omega ou Kickstart ?
Les thèmes de Commerce Kickstart version 2
1. Omega
2. Omega Kickstart (sous thème de Omega)
3. Commerce Kickstart Theme (sous thème d’Omega
Kickstart)
? ? ?
Pourquoi
trois
thèmes
Lequel
u8liser
Comment
les
maintenir
Comment
créer
le
thème
de
ma
bou7que
?

18. Omega Kickstart
Omega kickstart c’est un sous thème d’Omega
c’est notre base de travail
Comment créer le thème de ma boutique avec Omega
Kickstart ?
- Copier le thème Commerce Kickstart Theme pour en
faire le votre et disposer des fonctionnalités d’Omega et de notre
travail sur Omega Kickstart
- Créer un nouveau sous thème en se basant sur
Commerce Kickstart Theme

19. Le RTL Pour écouter les grosses têtes ?
Right to Left
Besoin de séparer les fichier rtl par format de résolution.
Global.css > global-rtl.css => sur un thème classique
Prendre en compte non pas 1 mais 3 fichiers rtl
chaque résolution d’écran/support à son équivalent rtl

20. Retour
d’expérience
Créa6on
d’un
sous
thème
Omega
Répondant
aux
besoins
de
la
distribu6on
Prise
de
recul
sur
les
objec6fs
du
produit
Besoin
de
créer
rapidement
des
versions
différentes
du
thème
pour
des
cas
pra6ques
Créa6on
d’un
starter
thème
intermédiaire
Portage
des
éléments
principaux
dans
le
thème
Le
thème
u6lisé
dans
la
démonstra6on
de
Kickstart
dépend
de
deux
thèmes
de
base,
mais
offre
une
meilleur
adaptabilité
à
de
nouveaux
projets.

21. Processus idéal
Créer un starter thème d’Omega qui sera la base de thème des
prochains sous-thèmes
Omega > Omega Kickstart > Commerce Kickstart Theme
Créer un sous-thème à votre starter thème
Qui sera notre thème par défaut de votre site de démo
Créer un autre sous thème pour un autre cas d’usage de
démonstration à partir d’une base commune
Mutualiser un base de thème pour créer plus facilement des
exemple de démonstration

22. Maintenir sa boutique
Mettre à jour Commerce Kickstart
Commerce Kickstart suit les mises à jour de Drupal et de
Drupal Commerce
Mettre à jour son thème
Omega Kickstart peut être amené à être mis à jour (le
thème suit les mises à jour d’Omega). La dernière
version est toujours packagée avec la distribution.
Commerce Kickstart ne se base que sur les versions stables
Actuellement : Commerce Kickstart 7.x-­‐2.0-­‐rc3

23. Et
après
Nous
réfléchissons
actuellement
à
la
mise
en
place
d’un
sous
thème
à
par6r
de
la
nouvelle
version
d’Omega
(Omega
4
actuellement
en
version
dev)

24. Ressources
> Omega drupal.org/project/omega
> Commerce Kickstart drupal.org/project/commerce_kickstart
> Omega Tools drupal.org/project/omega_tools
> Delta drupal.org/project/delta
> Context drupal.org/project/context
> Commerce Kickstart avec démonstration
commerceguys.com/product/commerce-kickstart

25. Merci !

26. Questions ?