1. GUIDE AGENCE
Pour vous aider à convaincre vos clients de
Passer au Web mobile
avec Pixmobi
2. GUIDE AGENCE
Utilisation de ce document
Ce document est proposé par COWEMO, éditeur de la solution Pixmobi.
Il a pour objectif d’aider les agences qui souhaitent proposer à leurs clients
de créer un site mobile avec Pixmobi.
Pour obtenir les sources de ce document afin de pouvoir le personnaliser,
merci d’en effectuer la demande auprès de contact@pixmobi.com
…
COWEMO dégage toute responsabilité quant à l’usage de ce document.
…
Les sources des différents chiffres présents dans ce document
sont indiquées en bas à droite de chaque page.
3. GUIDE AGENCE
• Le plan d’action
• Les étapes pour convaincre vos clients
• Répondre aux objections
• Choisir le bon outil pour gagner du temps
• Le marché du web mobile
• La révolution mobile
• Le succès fulgurant du web mobile
• Les usages…
• Pourquoi un site dédié mobile ?
• Pixmobi : Solution professionnelle dédiée web mobile
• Architecture globale
• Back-office
• Front-office
• Principaux atouts
• Annexes
10/01/2012 Le Web Mobile avec Pixmobi 3
4. GUIDE AGENCE
Web mobile avec Pixmobi
Plan d’action
10/01/2012 Le Web Mobile avec Pixmobi 4
5. Les étapes pour convaincre vos clients
1. Le web mobile c'est maintenant !
Une présentation du marché et les chiffres du web mobile les aiderons à
comprendre l'importance d'être présent sur ce canal
Ces éléments sont disponibles plus loin dans ce document
2. La preuve par l’exemple
Mettez leur(s) site(s) à l’épreuve et montrez-leur les difficultés de consultation
depuis un mobile.
Si vous ne pouvez pas leur montrer sur un terminal mobile, utilisez
www.emulateurmobile.com
Si nécessaire, montrez-leur où en est la concurrence (qui ont des sites
adaptés pour une consultation sur mobile)
3. Susciter l’envie
Un prototype personnalisé saura leur donner un avant goût
Avec Pixmobi, réaliser un prototype à partir d’un site modèle est très rapide
10/01/2012 Le Web Mobile avec Pixmobi 5
6. Répondre aux objections (1/3)
« Mon site est déjà compatible, j’arrive à le voir avec mon iPhone »
Oui mais cela ne suffit pas, les utilisateurs attendent désormais un site parfaitement
lisible sur leur écran sans avoir besoin de zoomer.
Le poids des pages est également un facteur important surtout en situation de mobilité
(débit réduit).
Enfin, exploiter les capacités de chacun de terminaux (pour les écrans tactiles
notamment) permet d’apporter une meilleur expérience utilisateur et donc de refléter
une image plus positive.
Les chiffres le disent…
« J’ai déjà investit dans la publicité sur mobile » (ou codes 2D)
Très bien, mais quand les mobinautes vont cliquer sur le lien (ou flasher le code) avec
leur mobile, ils vont arriver sur un site non adapté, ce qui risque fortement de nuire à
votre image. Il faut faire l’autre moitié du chemin…
« J’ai déjà une application iPhone et Android »
Très bien et les autres terminaux ? (Chiffres mobiles)
Une application est parfaite pour fidéliser vos clients, mais vos prospects, comment
vont-ils vous trouver ? La probabilité qu’ils vous cherche dans un store est très faible
par rapport à une recherche de mots clés dans un moteur comme Google.
10/01/2012 Le Web Mobile avec Pixmobi 6
7. Répondre aux objections (2/3)
« Je n’ai pas le temps d’administrer 2 sites ! »
Pas de problème, avec Pixmobi il existe plusieurs moyens de récupérer facilement les
contenus de votre site existant. Certains peuvent être mise en place immédiatement.
« Mettre en place un environnement c’est compliqué et puis il faut faire
appel à la DSI… »
Aucun souci, Pixmobi est disponible en mode SaaS. Accessible immédiatement, sa
licence inclus un hébergement haute disponibilité et la maintenance évolutive de l’outil.
« Ca peut attendre l’année prochaine… »
Le marché évolue très vite. Les chiffres parlent d’eux-mêmes…
Vous avez une opportunité de prendre de l’avance par rapport à vos concurrents et de
toucher un cible beaucoup plus large qu’avec votre site actuel.
« Avant de vous faire coder le site, il va falloir que je trouve le temps de tout
concevoir »
Avec Pixmobi, pas besoin de développement (tout se fait par paramétrage). Avec le
workflow de publication on peut très rapidement mettre en ligne une première version
que l’on peut ensuite faire évoluer de façon itérative (Développement « Agile »).
10/01/2012 Le Web Mobile avec Pixmobi 7
8. Répondre aux objections (3/3)
« Je n’ai pas le budget »
Les licences Pixmobi sont très abordables et le rapport coût/visibilité est
beaucoup plus intéressant qu’un site classique (compte tenu surtout, du
nombre de visiteurs potentiels).
« Un nouvel outil… Ca doit être compliqué à utiliser ! »
L’outil est puissant, mais l’interface est très ergonomique.
Vous n’avez pas besoin de tout connaître pour administrer votre site. La mise
à jour des contenus est très simple (Démo ajout d’un article),
de plus, on peut vous former très rapidement.
« Comment un site mobile peut me faire gagner du business ? »
Développer sa marque
Conquérir de nouveaux clients
Générer des revenus
Fidéliser sa clientèle
…
10/01/2012 Le Web Mobile avec Pixmobi 8
9. Choisir le bon outil pour gagner du temps
et donc de l’argent !
En phase d'avant-vente :
Réalisez très rapidement une maquette interactive fonctionnelle et personnalisée pour
susciter l'envie.
Proposer facilement (voir gratuitement) des fonctionnalités supplémentaires (besoins
non-exprimés).
En phase de conception :
Testez et validez des principes de navigation en quelques clics.
Ne frustrez plus le directeur artistique, la souplesse de Pixmobi permet de
personnaliser complètement le site.
En phase de réalisation/intégration :
Grâce aux fonctions de duplication, tout peut être instantanément dupliqué : D'un
simple contenu jusqu'à un site complet.
Pas besoin de développeur expert dans tel ou tel langage, tout est entièrement
paramétrable.
Mise en production :
Plus besoin de vous soucier de l'hébergement,
ni des mises à jour du CMS, Pixmobi est disponible en mode SaaS.
10/01/2012 Le Web Mobile avec Pixmobi 9
10. Offre « Pixmobi partner »
Licence Premium de test
Accompagnement spécifique en phase d'avant-vente
Support privilégié et participation à la roadmap produit
Formation remboursée (si vente licence « Premium »)
Journées d'accompagnement intégration offertes
Visibilité dans la rubrique « Partenaires »
Pour devenir "agence certifiée" Pixmobi et bénéficier
de cette offre spécifique n'hésitez pas à nous contacter
10/01/2012 Le Web Mobile avec Pixmobi 10
11. GUIDE AGENCE
Le marché du
Web mobile
10/01/2012 Le Web Mobile avec Pixmobi 11
12. La révolution mobile
3 Md
et tout le monde est concerné !
1.5 Md
1 Md
Mobile PC
Phone TV
1900 1950 1980 2010
10/01/2012 Le Web Mobile avec Pixmobi 12
13. Un succès fulgurant du web mobile
Au niveau mondial, Desktop
les prévisions étaient 2012
plus ou moins optimistes… Mobile
2014
En réalité, il y a déjà
plus de connexions web Desktop
depuis les terminaux mobiles Mobile Q4 2010
que depuis les ordinateurs
Sources : Google juin 2011
10/01/2012 Le Web Mobile avec Pixmobi 13
14. Les usages des mobinautes français
17 millions Ce qu’ils veulent : de l’info !
de mobinautes en France
(moyenne 3,4 connexion/jr)
Se connectent
tous les jours
59%
45%
67% 65% 55%
A tout moment En tous lieux Instantanément
…me permet d’obtenir des …me sert de passe temps …m’apporte immédiatement
55% informations quand je ne
suis pas devant l’ordinateur
quand j’attends (le train, le
bus…)
des réponses aux questions
quand j’en ai besoin
Sources : Google juin 2011
10/01/2012 Le Web Mobile avec Pixmobi 14
15. Pourquoi un site dédié mobile ?
La consultation d’un site classique sur un mobile est fastidieuse :
Trop d’informations
Pages trop lourdes (/ réseaux mobiles)
Caractères illisibles
Images dégradées et peu visibles…
Adapter la présentation à un petit écran est indispensable !
Mais cela ne suffit pas, il faut aussi :
Adapter les contenus
Ne garder que les informations essentielles
Fournir une bonne expérience utilisateur à tous
Exploiter les forces et faiblesses de chaque terminal :
Touch screen, absence de clavier, changement d’orientation…
10/01/2012 Le Web Mobile avec Pixmobi 15
16. GUIDE AGENCE
Pixmobi :
Solution professionnelle
dédiée web mobile
10/01/2012 Le Web Mobile avec Pixmobi 16
17. Parce qu’un site mobile n’est pas un site classique
Il faut un outil dédié !
Par rapport à une CMS classique, Pixmobi permet entre autre :
de récupérer les contenus d’un site web existant
d’ajouter des fonctionnalités dédiées à un usage mobile
d’utiliser des gabarits spécialement conçus pour des écrans de taille
réduite
de prendre en compte les capacités d’affichage spécifique à chaque
terminal pour assurer la meilleur expérience utilisateur
de designer facilement le site en pré visualisant le rendu sur plusieurs
types de terminaux mobile
Tout cela sans connaissances techniques particulières
10/01/2012 Le Web Mobile avec Pixmobi 17
18. Plateforme composée de 5 briques techniques :
1. Un système de récupération de contenus web existants
2. Un outil de gestion des contenus web mobile
3. Un outil de gestion des pages web mobile
4. Des interfaces permettant d’habiller graphiquement les pages
5. Un système de détection des capacités d’affichage des terminaux mobiles
Pixmobi Content Picker
Pixmobi
Page
Pixmobi Manager Pixmobi
Content Device
Manager Pixmobi Detect
Page
Designer
10/01/2012 Le Web Mobile avec Pixmobi 18
19. 1. Récupérer des contenus web existants :
Existing web site
BDD CMS
1. Directement dans la base
de données du site existant via un
WebService
Web
CMS 2. Grâce un connecteur
Service
spécifique à chaque CMS
3. Au travers d’un flux XML disponible
4. Par sélection directement sur le site
puis par paramétrage des informations
à récupérer automatiquement
WebService CMS Plug XML Connector Web Scraper
Connector Pixmobi Content Picker
Content Cleaner Un filtre permet ensuite de nettoyer
Pixmobi
la mise en forme existante de ces
Page contenus
Pixmobi Manager Pixmobi
Content Device
Manager Pixmobi Detect
Page
Designer
10/01/2012 Le Web Mobile avec Pixmobi 19
20. 2. Gérer les contenus web mobiles :
Existing web site
BDD CMS
1. Les contenus deviennent affichables dans
les pages du site mobile
CMS
Web
Service
2. Une puissante interface permet de gérer
les contenus spécifiques au site mobile
Par exemple :
Articles
Photos
WebService CMS Plug XML Connector Web Scraper Evènements
Connector Pixmobi Content Picker Liens
Content Cleaner
Formulaires
Pixmobi
Page
Infos géo localisées
Pixmobi
Mobile
Manager Pixmobi FAQ
Content Device
Manager
contents
Pixmobi Detect …
Page et tous types
Designer
de contenus structuré !
10/01/2012 Le Web Mobile avec Pixmobi 20
21. 3-4. Gérer les pages du site mobile :
Existing web site
BDD CMS
1. Une Interface intuitive permet de
gérer les rubriques du site mobile
et d’agencer spécifiquement les contenus
Web
CMS de chaque page
Service
2. L’habillage graphique est géré par
plusieurs interfaces de mise en forme
WebService CMS Plug XML Connector Web Scraper
Connector Pixmobi Content Picker
Content Cleaner
Pixmobi
Page
Pixmobi Manager Pixmobi
Mobile
Content contents Device
Manager Pixmobi Detect
Page
Designer
10/01/2012 Le Web Mobile avec Pixmobi 21
22. 5. Optimiser l’affichage en fonction du mobile :
Existing web site
BDD CMS
1. Il existe une multitude de mobiles
2. Grâce à un système de détection
automatique
CMS
Web
Service
3. Le site mobile est optimisé en fonction
des capacités d’affichage du mobile
(Taille écran, navigateur…)
WebService CMS Plug XML Connector Web Scraper
Connector Pixmobi Content Picker
Content Cleaner
Pixmobi
Page
Pixmobi Manager Pixmobi
Mobile
Content contents Device
Manager Pixmobi Detect
Page
Designer
10/01/2012 Le Web Mobile avec Pixmobi 22
23. Pixmobi : Architecture globale
Existing web site
BDD CMS
Web
CMS
Service
WebService CMS Plug XML Connector Web Scraper
Connector Pixmobi Content Picker
Content Cleaner
Pixmobi
Page
Pixmobi Manager Pixmobi
Mobile
Content contents Device
Manager Pixmobi Detect
Page
Designer
10/01/2012 Le Web Mobile avec Pixmobi 23
24. Démo Back-office
Faire une démonstration rapide des
fonctionnalités d’administration qui
intéresseront le plus le client
N’hésitez pas à nous contacter
pour une démonstration détaillée
10/01/2012 Le Web Mobile avec Pixmobi 24
25. Concepts de base
1. Une page hérite d’un gabarit.
1
2. Elle composée de modules,
3. qui eux affichent des contenus
2
Séparation complète des contenus 3
et de leur présentation
10/01/2012 Le Web Mobile avec Pixmobi 25
26. Interface riche 100 % WYSIWYG
Tout se fait par simple drag & drop et paramétrage
Structuration des contenus (type de champ: image, texte court, date…)
Présentation et agencement des modules d’affichage
Dimensions et styles graphique à appliquer (Editeur CSS assisté)
aux champs de contenu,
aux modules,
aux pages (et à leurs différentes zones)
aux images (Ré-échantillonnage dynamique)
Pages :
Arborescence et gabarit de page
Paramétrage, design & agencement des différents modules
Interactivité (Animations & « composants riches »)
Et les nostalgiques du code pourront
Créer des widgets spécifiques (PHP) Laisser parler votre créativité
et utiliser leurs propres CSS « libres » sans contraintes techniques
10/01/2012 Le Web Mobile avec Pixmobi 26
27. Fonctions disponibles
ADMINISTRATION TECHNIQUES INTERFACE
Gestion multi-sites Gestion des formulaires Serveur d'images Multi-langue
(Ré-échantillonnage dynamique)
Gestion des langues Gestion des utilisateurs "In context" (Editing, Sizing & Design)
Gestion des pages
(Administrateurs) Gestion dynamique des vidéos Editeur WYSIWYG
Gestion des profils (Droits/rubrique) (Ré-échantillonnage multi-formats)
(Composition et arborescence)
Editeur CSS (Easy design)
Gestion des contenus
Notifications email Détection du terminal mobile
Gestion des visiteurs (Mobinautes) (Mobile Detect) Plusieurs vues simultanées
Gestion des types de contenus ** Vue Arbre / Vue Page (Design)
Gestion des informations utilisateurs Emulateur mobile
Structuration des contenus Vue Liste / Vue formulaire
Gestion des commentaires Statistiques de consultation
Géo localisation des contenus
Gestion de l'interactivité Atouts ergonomiques
Gestion de la publication Paramètres site
Sélection multiples
& versionning Gestion des Métas Format du viewport
Drag & drop
(Pages et contenus) Gestion de l'URL rewriting Icônes mobiles
Copier/Coller/Dupliquer
QRcode (Par site et par page)
Gestion des médias Gestion des types de modules * Recherche
(Photos, vidéos, documents…) Redirection 404
Gestion des contenus externes * Pagination
Redirection identification
Gestion des catégories CMS plug Trie et personnalisation des colonnes
Redirection site classique
& dossiers de catégories Nombre d'items par page
XML connector Message maintenance
Gestion de la présentation Identification par codes couleurs
Web service connector (Site Online/Offline)
Gestion des gabarits de page Web scraper Gestion du cache
(Modèles avec modules prédéfinis)
Gestion de compte/licence
Gestion des styles graphiques
Gestion CSS avancées **
* Fonctions réservées aux licence Pro & Premium
** Fonctions réservées à la licence Premium
10/01/2012 Le Web Mobile avec Pixmobi 27
28. Démo Front-office
Faire une démonstration rapide des
fonctionnalités d’interactivité d’un site
réalisé avec Pixmobi (avec un terminal
mobile)
N’hésitez pas à nous contacter
pour une démonstration détaillée
10/01/2012 Le Web Mobile avec Pixmobi 28
29. Modules disponibles
DE CONTENUS FORMULAIRES DE NAVIGATION INTERACTIVITE PAGE
Module liste/détail de contenu Inscription Menu de navigation Zoom viewport (Ecran)
Module liste de POI Identification Fil d'ariane Navigation ajax
Contenus géo localisés Contact (Email) Plan du site Slide Vue Liste/Détail
(Carte, distance et itinéraire)
Envoi à un ami (Email) Titre de rubrique (dynamique) Affiche/Masque (de module)
Module détail (seul)
Avis et commentaires Accordéon Onglets (de module)
Composants de modules
Contenus liés
Recherche de contenus Onglets Accordéon (de modules)
Recherche de contenus Captcha mobile Liens dynamiques Lien sur groupe de champs
Avis et Commentaires Bouton vide champ (Input) Page interne (avec ancre module) Ouverture en Lightbox
Pagination Page précédente
Auteur Page parente
WIDGETS
Navigation module (Ajax) Haut de page INTERACTIVITE CONTENUS
Plusieurs modules déjà Google map URL externe
Média (fichier) Zoom image
pré-paramétrés Google météo
Email Carrousel de liste (de contenus)
Actualités (Liste de news)
Partage réseaux sociaux SMS/MMS
Agenda (Liste d'événements) Accordéon de liste (de contenus)
Ajouter comme « App » (IOS) Appel téléphonique
Diaporama (Liste de photos)
Changement de langue
FAQ (Liste de Questions/Réponses)
Zoom image
...
M COMMERCE Zoom écran
Module libre Module en Lightbox/Fermeture
En préparation
10/01/2012 Le Web Mobile avec Pixmobi 29
30. GUIDE AGENCE
Pixmobi
Annexes
10/01/2012 Le Web Mobile avec Pixmobi 30
31. Pixmobi : Fiche technique
Apache 2.2.16
PHP 5.3 Hébergement serveur dédié
Framework Zend 1.10.7 Taux de disponibilité assuré
Accélérateur Zend server 5.1.0 24/7 à 99,9 % sur
Modèle MVC infrastructure matérielle
Séparation complète du code infrastructure logicielle
et de la présentation réseau
Base de données MySQL 5.1.49 Sondes de surveillance
de l'espace disque
du serveur Web
Interface Back Office
du serveur MySQL
Xhtml 1.0 / CSS 2.0
du serveur FTP
JQuery 1.4.2 de l'accessibilité du serveur
Ajax de l'état du RAID
Wysiwyg CKEditor
Back-up quotidien
Statistiques Piwik
Dans un autre data center
10/01/2012 Le Web Mobile avec Pixmobi 31
32. 3 niveaux de licence en mode SaaS
Version Free Pro Premium
Tarif mensuel H.T. 0€ 99 € 499 €
Nombre de pages vues 10 000 illimité illimité
Stockage 100 Mo 1 Go illimité
Fonctions standards
Nom de domaine personnalisé
Gestion des Types de modules
Gestion des Contenus externes
Gestion des Types de contenus
Multi-sites
Design mode expert (CSS avancées)
Assistance en ligne
10/01/2012 Le Web Mobile avec Pixmobi 32
33. Merci de votre attention !
Mettez un QR code de l’URL
du prototype de site mobile
réalisé avec Pixmobi