Pixmobi - Guide agences

Passer au Web mobileavec Pixmobi

Pour vous aider à convaincre vos clients de

GUIDE AGENCE

Utilisation de ce documentCe document est proposé par COWEMO, éditeur de la solution Pixmobi.

Il a pour objectif d’aider les agences qui souhaitent proposer à leurs clientsde 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 [email protected]

…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.

GUIDE AGENCE

mailto:[email protected]?subject=Demande%20de%20support%20de%20pr%C3%A9sentation

3

• 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

• Annexes10/01/2012 Le Web Mobile avec Pixmobi

GUIDE AGENCE

4

Plan d’actionWeb mobile avec Pixmobi

10/01/2012 Le Web Mobile avec Pixmobi

GUIDE AGENCE

5Le Web Mobile avec Pixmobi

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

http://www.emulateurmobile.com/

http://www.pixmobi.com/modeles.php


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


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


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


Choisir le bon outil pour gagner du temps

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

et donc de l’argent !


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 »

10/01/2012

Pour devenir "agence certifiée" Pixmobi et bénéficierde cette offre spécifique n'hésitez pas à nous contacter

http://www.pixmobi.com/partenaires.php

http://www.pixmobi.com/contact.php

11

Web mobileLe marché du


GUIDE AGENCE


La révolution mobile

1900 1950 1980 2010

Phone

1.5 Md

110 ans

TV

60 ans

PC

1 Md

30 ans

Mobile

3 Md

30 an

s

10/01/2012

et tout le monde est concerné !


Un succès fulgurant du web mobile

10/01/2012

20122014

Desktop

Mobile

Sources : Google juin 2011

Q4 2010

Desktop

Mobile

Au niveau mondial,les prévisions étaientplus ou moins optimistes…

En réalité, il y a déjàplus de connexions web depuis les terminaux mobiles que depuis les ordinateurs


Les usages des mobinautes français

10/01/2012

Ce qu’ils veulent : de l’info !17 millionsde mobinautes en France(moyenne 3,4 connexion/jr)

Se connectenttous les jours

59%45%55%

Sources : Google juin 2011

67%A tout moment…me permet d’obtenir des informations quand je ne suis pas devant l’ordinateur

65%En tous lieux…me sert de passe temps quand j’attends (le train, le bus…)

55%Instantanément…m’apporte immédiatement des réponses aux questions quand j’en ai besoin

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…


16

Solution professionnelledédiée web mobile

Pixmobi :


GUIDE AGENCE

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


18

Pixmobi Content Picker

Plateforme composée de 5 briques techniques :

PixmobiContent Manager

PixmobiPage

Manager

PixmobiPage

Designer

PixmobiDeviceDetect


1. Un système de récupération de contenus web existants2. Un outil de gestion des contenus web mobile3. Un outil de gestion des pages web mobile4. Des interfaces permettant d’habiller graphiquement les pages5. Un système de détection des capacités d’affichage des terminaux mobiles

http://www.google.fr/imgres?imgurl=http://www.australopitech.com/wp-content/uploads/2009/02/drupal-logo.png&imgrefurl=http://www.australopitech.com/tag/drupal&usg=__033jXzaQeTYezN6kwtkH1OWJxsM=&h=242&w=640&sz=62&hl=fr&start=4&sig2=C9gAJlVeZYNc1KpSG2-WwA&zoom=1&um=1&itbs=1&tbnid=gzltrCeiX96X6M:&tbnh=52&tbnw=137&prev=/images?q=drupal&um=1&hl=fr&sa=N&rls=com.microsoft:fr:IE-SearchBox&rlz=1I7SVEC_frFR380FR381&tbs=isch:1&ei=T3FxTK_2Kc2S4gb0oJCYCg

19

Existing web siteBDD

CMS

CMS

WebService


1. Récupérer des contenus web existants :


PixmobiPage

Manager

PixmobiPage

Designer

PixmobiDeviceDetect


1. Directement dans la basede données du site existant via un WebService

2. Grâce un connecteurspécifique à chaque CMS

3. Au travers d’un flux XML disponible4. Par sélection directement sur le site

puis par paramétrage des informationsà récupérer automatiquement

Un filtre permet ensuite de nettoyer la mise en forme existante de ces contenus

CMS Plug XML Connector Web ScraperWebServiceConnector

Content Cleaner


20


2. Gérer les contenus web mobiles :



1. Les contenus deviennent affichables dans les pages du site mobile

2. Une puissante interface permet de gérer les contenus spécifiques au site mobilePar exemple :

ArticlesPhotosEvènementsLiensFormulairesInfos géo localiséesFAQ…et tous types

de contenus structuré !

Existing web site

CMS

CMS

CMS Plug XML Connector Web ScraperWebServiceConnector

Content Cleaner

PixmobiPage

Manager

PixmobiPage

Designer

PixmobiDeviceDetect

Mobile contents

BDD

WebService


21


3-4. Gérer les pages du site mobile :



1. Une Interface intuitive permet degérer les rubriques du site mobileet d’agencer spécifiquement les contenus de chaque page

2. L’habillage graphique est géré par plusieurs interfaces de mise en forme

Existing web site

CMS

CMS

CMS Plug XML Connector Web Scraper

Content Cleaner

PixmobiPage

Manager

PixmobiPage

Designer

PixmobiDeviceDetect

Mobile contents

WebServiceConnector

BDD

WebService


22


5. Optimiser l’affichage en fonction du mobile :



1. Il existe une multitude de mobiles2. Grâce à un système de détection

automatique 3. Le site mobile est optimisé en fonction

des capacités d’affichage du mobile(Taille écran, navigateur…)

Existing web site

CMS

CMS


Content Cleaner

PixmobiPage

Manager

PixmobiPage

Designer

PixmobiDeviceDetect

Mobile contents

WebServiceConnector

BDD

WebService


23


Pixmobi : Architecture globale



Existing web site

CMS

CMS


Content Cleaner

PixmobiPage

Manager

PixmobiPage

Designer

PixmobiDeviceDetect

Mobile contents

WebServiceConnector

BDD

WebService



Démo Back-officeFaire une démonstration rapide des fonctionnalités d’administration qui intéresseront le plus le client

10/01/2012

N’hésitez pas à nous contacter pour une démonstration détaillée


Concepts de base

10/01/2012

1. Une page hérite d’un gabarit.2. Elle composée de modules,3. qui eux affichent des contenus

1

2

3Séparation complète des contenus et de leur présentation


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) et utiliser leurs propres CSS « libres »

10/01/2012

Laisser parler votre créativitésans contraintes techniques


Fonctions disponibles

10/01/2012

ADMINISTRATION Gestion multi-sites Gestion des langues Gestion des pages

(Composition et arborescence) Gestion des contenus Gestion des types de contenus **

Structuration des contenus Géo localisation des contenus

Gestion de la publication& versionning (Pages et contenus)

Gestion des médias(Photos, vidéos, documents…)

Gestion des catégories & dossiers de catégories

Gestion de la présentation Gestion des gabarits de page

(Modèles avec modules prédéfinis) Gestion des styles graphiques Gestion CSS avancées **

TECHNIQUES Serveur d'images

(Ré-échantillonnage dynamique) Gestion dynamique des vidéos

(Ré-échantillonnage multi-formats) Détection du terminal mobile

(Mobile Detect) Emulateur mobile Statistiques de consultation Paramètres site

Format du viewport Icônes mobiles QRcode (Par site et par page) Redirection 404 Redirection identification Redirection site classique Message maintenance

(Site Online/Offline) Gestion du cache

INTERFACE

Multi-langue "In context" (Editing, Sizing & Design) Editeur WYSIWYG Editeur CSS (Easy design) Plusieurs vues simultanées

Vue Arbre / Vue Page (Design) Vue Liste / Vue formulaire

Atouts ergonomiques Sélection multiples Drag & drop Copier/Coller/Dupliquer Recherche Pagination Trie et personnalisation des colonnes Nombre d'items par page Identification par codes couleurs

Gestion des formulaires Gestion des utilisateurs

(Administrateurs) Gestion des profils (Droits/rubrique) Notifications email

Gestion des visiteurs (Mobinautes) Gestion des informations utilisateurs Gestion des commentaires

Gestion de l'interactivité Gestion des Métas Gestion de l'URL rewriting Gestion des types de modules * Gestion des contenus externes *

CMS plug XML connector Web service connector Web scraper

Gestion de compte/licence

* Fonctions réservées aux licence Pro & Premium ** Fonctions réservées à la licence Premium


Démo Front-office

10/01/2012

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


Modules disponibles

10/01/2012

DE CONTENUS Module liste/détail de contenu Module liste de POI

Contenus géo localisés(Carte, distance et itinéraire)

Module détail (seul) Composants de modules

Contenus liés Recherche de contenus Avis et Commentaires Pagination Auteur Navigation module (Ajax)

Plusieurs modules déjàpré-paramétrés Actualités (Liste de news) Agenda (Liste d'événements) Diaporama (Liste de photos) FAQ (Liste de Questions/Réponses) ...

Module libre

DE NAVIGATION Menu de navigation Fil d'ariane Plan du site Titre de rubrique (dynamique) Accordéon Onglets Liens dynamiques

Page interne (avec ancre module) Page précédente Page parente Haut de page URL externe Média (fichier) Email SMS/MMS Appel téléphonique Changement de langue Zoom image Zoom écran Module en Lightbox/Fermeture

INTERACTIVITE PAGE Zoom viewport (Ecran) Navigation ajax Slide Vue Liste/Détail Affiche/Masque (de module) Onglets (de module) Accordéon (de modules) Lien sur groupe de champs Ouverture en Lightbox

FORMULAIRES Inscription Identification Contact (Email) Envoi à un ami (Email) Avis et commentaires Recherche de contenus Captcha mobile Bouton vide champ (Input)

M COMMERCE En préparation

INTERACTIVITE CONTENUS Zoom image Carrousel de liste (de contenus) Accordéon de liste (de contenus)

WIDGETS Google map Google météo Partage réseaux sociaux Ajouter comme « App » (IOS)

30

AnnexesPixmobi


GUIDE AGENCE

31

Hébergement serveur dédiéTaux de disponibilité assuré24/7 à 99,9 % sur infrastructure matérielle infrastructure logicielle réseau

Sondes de surveillance de l'espace disque du serveur Web du serveur MySQL du serveur FTP de l'accessibilité du serveur de l'état du RAID

Back-up quotidien Dans un autre data center

Pixmobi : Fiche technique


Apache 2.2.16 PHP 5.3

Framework Zend 1.10.7 Accélérateur Zend server 5.1.0 Modèle MVC Séparation complète du code

et de la présentation Base de données MySQL 5.1.49

Interface Back Office Xhtml 1.0 / CSS 2.0 JQuery 1.4.2 Ajax Wysiwyg CKEditor Statistiques Piwik


3 niveaux de licence en mode SaaSVersion Free Pro PremiumTarif 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

Merci de votre attention !

Mettez un QR code de l’URLdu prototype de site mobile

réalisé avec Pixmobi

Technology

Pixmobi - Guide agences