Depuis sa sortie, vous êtes nombreux à faire vos retours dans le support et nous vous remercions pour vos remarques constructives et vos encouragements :)

Certaines demandes reviennent régulièrement. Nous allons donc reprendre dans cette note le fonctionnement de la version responsive WMaker et les différents points techniques importants à comprendre.

Grâce à la version responsive, les colonnes de votre site et leurs modules s'ajustent, se redimensionnent et se déplacent automatiquement selon la résolution d'écran utilisée. Les modules de votre site s'adaptent en largeur. Quand il n'y a plus assez de place, les modules sont réorganisés. Chaque moment où les modules de votre design sont réorganisés est appelé un point de rupture.

Nous avons défini 2 points de ruptures pour lesquels l’affichage prend 100% de la largeur du device : 800 px (affichage sur les tablettes en mode portrait) et 600 px (affichage de la version responsive sur mobile).

Cette zone va se transformer complètement lorsque vous atteignez le premier ou second point de rupture :
- Tous les modules sont cachés à l’exception des modules typés de contenu (A la une, Fil de l'eau, slideshow etc.)
- Un module Swipe est ajouté automatiquement. Il s'agit d'un module de navigation (Menu principal) paramétrable.
- Un module Bannière de titre est également ajouté lui aussi paramétrable.
Ces 2 modules ne peuvent être supprimés, vous pouvez cependant les mettre en stock si vous ne souhaitez pas les afficher.

Les colonnes vont s'ajuster dès le premier point de rupture atteint, les colonnes maigres passent en dessous de la colonne centrale.
La colonne 1 (colonne centrale) se retrouve toujours en haut de la page.
Les modules dans les combos restent alignés sur les tablettes, mais au second point de rupture (affichage mobile) passent également les uns en dessous des autres.

Selon le point de rupture atteint, l'affichage des modules est différent de celui paramétré pour la version desktop.

- Pour un affichage mobile par exemple, le design est épuré et certaines informations ne sont plus affichées (résumé dans les modules de unes...). La taille des polices paramétrée sur la version desktop est conservée pour la version tablette, mais fixe et non paramétrable pour la version mobile.

- Le système de colonnage dans certains modules (utilisant un affichage mosaïque) est arbitraire et peut ne pas refléter les paramètres définis sur le web. Si vous paramétrez un module Galerie sur 3 colonnes, le rendu sera de 4 colonnes sur tablette, 2 colonnes sur mobile, 3 colonnes en mobile/paysage.

- L'espacement du contenu de chaque module est fixe et ne peut être paramétré.

- Si vous ne souhaitez pas afficher tous vos modules une fois le point de rupture 1 atteint, vous avez la possibilité de cacher un module directement dans les paramètres de ce dernier. Et inversement, vous pouvez ajouter des modules qui seront cachés uniquement sur la version desktop.

Par défaut, lorsque la version responsive est activée, le design adaptatif de la home est appliqué à toutes vos templates.

Pour activer les versions responsives spécifiques de chacune de vos templates en plus de celle de la home, rendez vous simplement sur la template concernée dans le menu Design > Mode responsive.

Google est malin, avec l'arrivée du responsive il a tout prévu et a mis au point des bannières intelligentes de taille adaptable. Ce qui signifie que si vous utilisez ce type de bannières, elles s'adapteront aussi bien à la version desktop, qu'à la version mobile ou tablette.

Si vous avez déjà paramétré toutes vos bannières sur la version desktop et que vous ne souhaitez pas tout modifier, vous pouvez facilement cacher ces modules sur la version responsive puis simplement ajouter vos modules avec des bannières de taille adaptable pour la version responsive (qui seront eux cachés sur la version desktop).

Voilà, vous avez désormais tous les éléments en main pour activer votre version responsive :) Si vous avez d'autres questions, n'hésitez pas à nous contacter via le support de vos sites.

Il y a 3 ans nous avons commencé à avoir les premières demandes au sujet du Responsive design, puis petit à petit c’est devenu un buzzword.

Nous avions à l’époque la vision que la voie la plus noble était de proposer la même expérience utilisateur que FaceBook peut offrir Web / Desktop et AppsNative / Mobile, le meilleur de la technologie suivant le support.

C’était seulement à la porté de quelques bourses mais notre culture de produits industriels nous fait croire qu’il serait possible de diviser par 50 le coût d’une Apps Mobile.

Aujourd’hui c’est possible avec le couple de produits WMaker / GoodBaber mais ça reste encore des produits séparés, ce n'est pas encore assez simple… mais on va y arriver il nous faut encore un peu de temps.

Le Design Responsive utilise des technologies assez simples et peu coûteuses, mais nécessite aussi d’avoir des designs adaptés et simples.
Si vous refaites votre site de zéro aucun problème, mais si vous avez un site média très fourni ça devient vite un casse tête, d’ailleurs Lemonde.fr n’est pas responsive.

On s’était résigné à sortir des maquettes responsives pour dire on a « des maquettes responsives »  mais on savait très bien que nos utilisateurs devrait refaire leur site de zéro pour que ça marche.
WMaker à plusieurs milliers de sites, ça veut dire que l’ensemble des sites ne serait pas responsive avant 2 ou 3 ans, peut être plus.

Du coup nous avons focalisé notre énergie sur la version Mobile pour être compatible avec une des 3 options préconisées par Google en SEO : la version Mobile m.site.com
Une 2 eme est en préparation, c’est la détection dynamique du device pour garder la même URL. 

Je n’aime pas demander à l’équipe de travailler sur quelque chose, sachant pertinemment que cela ne règle que partiellement le problème. Mais la pression était forte pour qu’on propose des designs Responsives.

C'est là que notre notre trio magic Lesia, Laurent et Jean-Mathieu est intervenu : "On va pas commencer par les maquettes Responsive, on va attaquer le problème de front comme rendre 100% des sites WMaker Responsive en 1 clic". 

L’idée est séduisante, mais il y avait une montagne de problèmes à résoudre.
On devait réécrire tous les modules de WMaker, mais aussi et surtout il fallait que nos solutions soit rétro-compatibles avec les milliers de combinaisons existantes. 

Lesia a crée une bible graphique des design pattern pour anticiper le maximum de combinaison possible. Laurent et Jean-Mathieu sont très expérimentés, ils connaissent WMaker dans le moindre détail, mais surtout ils ont fait un travail itératif avec Lesia extraordinaire.

J’ai assisté à certaines des réunions au début sur les cas limites, il y avait des centaines de règles à poser en plus de ces designs pattern. C’était super fluide ils ont eu vraiment une super dynamique, tout à roulé.

Il y a dans nos bureaux la copie exact de 100% de nos clients sur nos serveurs cela nous sert pour tester ce qu’on fait avec des vrais données et des cas réel d’utilisation.
Tout au long du développement on a passé en revu des centaines de sites, les plus compliqués possible pour voir comment cela se comportait.

Après s’être amusé pendant 15 jours avec la copie de vos données nous avons mis en production de manière silencieuse sur tous les serveurs de production le travail effectué.

Les pages en responsive design  sont plus lourdes car elles embarquent le design Web+Mobile mais avec la 4G on ne sent plus trop de ralentissement lié au poids des pages, ça va très vite.

J’ai demandé à l’équipe encore quelques jours, pour ouvrir sur un petit panel de cobayes, histoire d’être sûre.
Mais là je n’arrive plus à les tenir …. 

C’est un peu de la magie au final, vous avez en 1 clic une version 100% responsive.
C’est aussi 100% réversible si vous préférez la version mobile, pas de souci pour tester sans aucun risque.

A la différence du menu Swipe, ce nouveau module vous permettra de naviguer sur vos versions mobiles directement à partir de la home et d'afficher un menu très visuel contenant vos images. Il peut être être utilisé par exemple pour les sites vitrines assez statiques. Les paramétrages de ce module fonctionnent comme le module Menu Perso sur la version web de vos sites. Dans un premier temps vous ajoutez vos différents menu et choisissez sur quelles pages ils pointent. Une fois vos liens crées, vous ajoutez vos visuels.

Ce module de navigation permet 4 types d'affichages différents : Visuel, Une grid, Grid et Classic.

Si vous choisissez l'affichage Grid, nous vous conseillons d'ajouter des marges sur les cotés du module afin d'obtenir un bel effet.
Concernant l'affichage Classic, nous avons choisi de lier la couleur des flèches et des liens pour garder un affichage cohérent.

Les images sont recadrées automatiquement par le centre selon la taille d'écran du mobile utilisé et du type d'affichage choisi.

Ce module fonctionne de la même façon que le module Un article sur la version web.
Vous pouvez choisir le nombre de paragraphes à afficher, choisir manuellement l'article ou bien afficher automatiquement le dernier article, le plus vu ou plus commenté.

C'est très pratique pour afficher une page "A propos" directement sur la home de vos versions mobiles par exemple.

Jean-Mathieu s'est également penché sur la mise en page de vos pages de rubrique. Vous avez désormais le choix entre 3 types d'affichages. Les affichages Classic, Grid ou bien Visuels, si vous utilisez le module mobile Dernières actualités vous connaissez déjà ces affichages.

Faites plaisir à Google, faites plaisir à vos visiteurs en améliorant leur expérience utilisateurs et faites vous plaisir aussi grâce à vos beautifuls versions mobiles ! :)

Nous y sommes enfin !
L'acte II de la version mobile qui finalise un gros travail effectué sur les versions mobiles de vos WebTV et Sites est enfin en ligne :)

Nous avons corrigé plusieurs choses suites à vos retours après la mise en production de l'acte I. Mais de belles nouveautés sont également au rendez vous !

Concernant les réseaux sociaux désormais incontournables, nous avons crée un module Service web2.0 adapté pour un affichage mobile. Il vous permet d'afficher des liens vers les pages de vos réseaux sociaux. Vous pourrez choisir d’utiliser nos icônes ou les vôtres  pour lier vos pages sur les réseaux sociaux à votre version mobile.

Au niveau des commentaires aussi il y a du nouveau, l’ancienne version mobile ne gérait pas Facebook comment ou Disqus. Avec la nouvelle version mobile, si vous avez activé Disqus ou Facebook comments, ces services seront également activés sur la version mobile !!

Pour l'acte I, nous avions mis en prod les pages internes de la galerie, cette fois, ce sont les pages internes du webservice Agenda que vous allez découvrir. Nous avons également revu toutes les pages de navigation (pages de rubrique). N'hésitez pas à nous faire partager vos impressions !!

Le module Menu Perso a été complètement recréé. Vous avez aujourd'hui accès à un module de navigation construit pour une version mobile et un affichage adapté à des écrans de smartphone. Vous pouvez choisir d'afficher uniquement une liste de liens ou comme vous pouvez le voir sur l'illustration ci-dessus vous amuser à mettre de beaux visuels.

Nous avons également créée un module Mes notes spécifique pour les mobiles :) Ce module affiche les articles à la façon d'un blog : titre, texte et ensemble d'informations relatives à la rédaction de l'article (auteur, date, tags etc.). Toutes ces options sont paramétrables. Il affiche les n derniers articles rédigés dans votre site par date de rédaction (antéchronologique du plus récent au plus ancien).

Et enfin pour ceux d'entre vous qui le demandaient, nous vous donnons accès à la balise head de la version mobile :) Pour cela rendez vous dans le menu Référencement > Options avancées.

Cela est très pratique pour appeler votre CSS externe ou bien coller un bout de code par exemple pour afficher la smart app banner d'Apple si vous avez une application sur IOS.

Nos amis de Montres de Luxe ( http://m.montres-de-luxe.com  ) nous ont autorisé à utiliser leur site pour vous montrer plus concrètement ce que l'on peut faire avec la nouvelle version mobile de WMaker. Largement inspirée des développements et de la recherche sur GoodBarber, cette nouvelle version mobile est une véritable tuerie, on a envie de remercier encore une fois Jean Mathieu et Seb2 pour cela : )

Lesia quant à elle, s'est fait plaisir, elle vous en fait également profiter grâce à cette vidéo showcase :)

Si vous êtes fiers de votre site et/ou version mobile, n'hésitez pas à nous en parler, nous publierons peut être un showcase de votre site sur le blog ! Pour cela n'oubliez pas de laisser votre URL dans les commentaires :)

Voilà, c'est fait. Vous avez tous pu le remarquer, votre version mobile à changé, elle est beaucoup plus au goût du jour :)
L'ancienne version était dépassée, avec l'évolution du mobile, il était urgent que vous puissiez accéder à une belle version de votre site adaptée aux mobiles.

Dans un premier temps, nous avons refondu les modules existants pour un design digne d'une "beautiful app ", nous avons également mis à jour les pages internes de contenu.

Nous ne nous sommes pas contentés d'améliorer l'existant :)
Nous avons aussi ajouté de nouvelles fonctions qui sont bien utiles :
- Un nouveau module vous permettant l'inscription à la Newsletter
- La page interne pour le webservice de la galerie
- Le menu Swipe qui vous permet de naviguer sur votre site, il est présent et immédiatement accessible sur toutes les pages de la version mobile
- Gestion des pages internes organisée comme dans le menu Design de la version web

Voyons cela plus en détails ensemble.

Vous avez pu vous en rendre compte, les modules ont été complètement modifiés. Lesia notre directrice artistique avec Jim et seb2 (nos loyaux développeurs) ont travaillé pour rendre la version mobile de WMaker belle, propre et adaptée aux mobiles d'aujourd'hui.

Nous avons du faire le ménage et nous séparer de certains modules comme le module Rubrique à la Une qui ne correspondait plus à ce que l'on recherche sur une version mobile. Si vous aviez un module Rubrique à la Une, remplacez le par un module Dernières actualités. Celui ci par exemple, comparé à l'ancien module, vous permet désormais de choisir entre 3 types d'affichages et de définir la ou les rubriques concernées ce qui n'était pas possible auparavant. Vous pouvez également afficher ou pas la date, l'heure et l'auteur grâce aux tokens.

Tous nos modules ont été complètement refondus pour vous donner plus d'options d'affichage et de paramétrage.
Je vous conseille vivement de vous rendre sur votre back office et de les tester au plus vite.

Vous remarquerez aussi que désormais il y a un module Newsletter disponible afin que vos visiteurs puissent s'inscrire pour recevoir vos newsletter. La page de Galerie, elle, est enfin disponible sur la version mobile ! Vous pouvez aujourd'hui mettre en avant vos albums photos sur votre version mobile.
D'autres modules et pages de webservices seront livrés dans l'acte II  ;)

Le menu Design  > Mobile de vos backoffices a lui aussi évolué.
Vous pouvez à présent gérer le design des pages internes comme celles de la version Web. Utilisez les menus Design des pages > Page concernée dans la colonne de gauche du back office pour accéder à leur paramétrages.

Nous avons ajouté un bouton preview en haut à droite pour vous permettre de prévisualiser facilement votre nouvelle version mobile.
Et vous remarquerez la colonne de Navigation avec le Menu principal !  Ce qui nous amène au menu Swipe :)

Une colonne est réservée au menu de navigation principal de votre version mobile. Il s'agit d'un menu Swipe qui vous permet de naviguer sur votre site de manière plus naturelle sur un mobile.
Il est très simple à paramétrer, de la même manière que dans n'importe quel menu de navigation, vous ajoutez vos liens en utilisant les menus déroulants mis à votre disposition.
Vous pouvez faire des liens vers votre contenu, mais aussi vers des fonctions mobiles telles qu'un numéro de téléphone ou un mail.

N'hésitez pas à tester toutes ces nouveautés et à nous partager vos impressions !!

C'est un gros chantier que nous avons attaqué, la bascule de l'ancienne version mobile des CMS et WebTv va se faire en 2 étapes. La première sera ce mercredi.

Jim, Seb2 et Lesia travaillent sur les derniers détails de chacun des modules existants qui ont été complètement refondus. Ils ont supprimé certains modules qui étaient obsolètes et repensent totalement les pages internes relatives à votre contenu, avec en plus quelques surprises que nous ne vous dévoileront pas aujourd'hui ;)

Ne vous inquiétez pas nous nous occupons de tout !!
Mercredi matin, nous allons couper l'accès au menu Design Mobile de vos backoffice pendant 2 petites heures. Toutes les autres parties de vos backoffice resterons fonctionnelles.
Pendant ces 2 heures, nous allons mettre à jour les modules de toutes les versions mobiles pour que vous puissiez en bénéficier directement.

Une fois que nous ré-ouvrirons le menu Design Mobile, vos modules auront été actualisés :)

Nous comptons sur vous pour tester toutes les nouveautés et nous donner vos impressions via le support.
Dans un deuxième temps, nous procéderons de la même manière, mais pour ajouter de nouvelles pages internes de webservices et de nouveaux modules.

A mercredi !!

PS : Nous n'oublions pas le responsive, en fin de semaine nous présenterons la stratégie de Sébastien :)

Tout le monde le sait, les mariages c'est en été! Alors même si le beau temps tarde à venir, nous pensons que c'est le bon moment pour sortir ce nouveau thème.

Pour annoncer l'évènement certes le bon vieux faire part est toujours utilisé mais nous voyons de plus en plus de couples qui décident d'utiliser également le Web et les réseaux sociaux.

Ce nouveau thème est donc parfait pour annoncer un mariage, mais également créer une boutique de produit liés à cet évènement ou pourquoi pas un site vitrine proposant de la prestation de service autour de ce thème, à vous de voir ;)

Voir la démo

Souvenez-vous, il y a quelques mois le réseau social Pinterest nous faisait découvrir une nouvelle façon de partager des images sur le web et les autres plateformes. Nous avions donc sauté sur l'occasion pour l'implémenter dans notre CMS. Jusque ici, vous pouviez proposer à vos utilisateurs de partager une image d'un article publié sur votre site.

Aujourd'hui Pinterest est le réseau social incontournable pour partager des photos, c'est donc tout naturellement que nous avons décidé de l'implémenter dans le webservice Galerie.

Nous affichons le bouton de partage au dernier niveau de la galerie et de 2 façons différentes.
Si l'option "Ouverture en Ibox" dans l'album n'est pas cochée alors la photo s'affiche dans la page et nous proposons un bouton sous forme de ruban.

Si au contraire l'option d'ouverture en ibox est activée alors nous affichons le bouton classic Pin It.

Enfin pour activer cette option vous devez vous rendre dans l'onglet Fonctionnalité du design de votre Galerie (Design>>Design des pages>>Galerie).

Cette semaine, Lesia et Seb2 ont travaillé ensemble afin de remettre au goût du jour l'accès au contenu restreint sur vos sites.
Les améliorations concernent aussi bien le back, ergonomie, que l'affichage côté site. Nous allons détailler dans cette note toutes ces nouveautés :)

Vous avez 3 façons de restreindre du contenu sur vos sites selon l'offre que vous avez :
La restriction par profling : seuls les visiteurs inscrits sur votre site, après s’être inscrits ou connectés accèdent au contenu restreint.
La restriction par Micro-paiement : l'accès au contenu est disponible seulement après le paiement en ligne.
La restriction par abonnement : seuls les abonnés à votre site ont accès au contenu restreint (offre Pro)

Désormais, lorsque vous cliquez sur un contenu restreint, c'est une toute nouvelle page qui s'affiche, avec un bloc reprenant le titre de l'article, l'image de une de celui-ci ainsi que la date de rédaction.

Pour cela allez dans le menu Design > Design des pages > Section restreinte.
Ces paramétrages seront appliqués dans les 3 cas de restrictions.

Dans l'onglet Fonctionnalité, vous avez la possibilité de choisir via le menu déroulant d'afficher soit le chapô, soit le premier paragraphe, soit aucun contenu avant d'accéder à l'article entier.
La mise en page de l'aperçu sera celle définie sur la page de l'article.

La partie "Textes explicatifs" est composée de 3 liens vous permettant de paramétrer le bloc selon la restriction.

Prenons par exemple le lien Définir les messages de Micro-paiement.
Ce lien vous redirige directement sur la page du back office afin de paramétrer les textes du bloc vous permettant l'accès à la section restreindre dans le cas d'une restriction par Micro-paiement.
Il en est de même pour les liens vers le bloc dans le cas d'une restriction par profling ou bien par abonnement.
Vous pouvez paramétrer le titre du bloc, mettre un message d'explication pour les infos supplémentaires et même modifier l'intitulé du bouton (pour les abonements et le micro-paiement)

Les polices de ce bloc se gèrent à partir de l'onglet Polices du menu Design > Design des pages > Section restreinte
Le bouton se paramètre à partir du menu Éléments visuels.

Si vous avez plusieurs restrictions sur un article, nous afficherons prioritairement en premier le texte (Message explicatif) paramétré dans la partie micro-paiement, ensuite celui d'abonnement et enfin du profiling.