SlideShare une entreprise Scribd logo

Webmobile - Rendre son site compatible avec les nouveaux usages du WEB

M
M

Webschool du Jura - Webmobile - Rendre son site compatible avec les nouveaux usages du WEB

Webmobile - Rendre son site compatible avec les nouveaux usages du WEB

1  sur  6
Télécharger pour lire hors ligne
Rendre son site compatible avecRendre son site compatible avec
les nouveaux usages du WEBles nouveaux usages du WEB
Webschool de la CCI du Jura
24 mars 2014
par François Bonneville - ARICIA
Votre site WEB est-ilVotre site WEB est-il
« compatible » mobile ?« compatible » mobile ?
• Bannir les applications FlashBannir les applications Flash
– Non supportées par certains système IOS (Apple)Non supportées par certains système IOS (Apple)
• Vérifier l'efficience des mécanismesVérifier l'efficience des mécanismes
d'interactivitéd'interactivité
– Les menus « déployer - cliquer »Les menus « déployer - cliquer »
– La taille et le fonctionnement des formulairesLa taille et le fonctionnement des formulaires
– Eviter les popupsEviter les popups
• Ne pas avoir des pages trop largesNe pas avoir des pages trop larges
Concevoir un site WEB dédié mobile,Concevoir un site WEB dédié mobile,
bonne ou mauvaise idée ?bonne ou mauvaise idée ?
• Qu'est-ce qu'un site WEB dédié mobile ?Qu'est-ce qu'un site WEB dédié mobile ?
Exemple : http://m.haut-jura.comExemple : http://m.haut-jura.com
• AvantagesAvantages
– Ergonomie conçue spécifiquement pour les mobilesErgonomie conçue spécifiquement pour les mobiles
– Contenu pouvant être adapté à des visiteurs nomadesContenu pouvant être adapté à des visiteurs nomades

InconvénientsInconvénients
– Coût de création importantCoût de création important
– Maintenance parfois compliquée (2 sites à gérer)Maintenance parfois compliquée (2 sites à gérer)
Le "responsive design"Le "responsive design"
Le concept : ne plus de créer autant de pages qu'il yLe concept : ne plus de créer autant de pages qu'il y
a de famille de terminaux mais concevoir unea de famille de terminaux mais concevoir une
seule interface auto-adaptableseule interface auto-adaptable
Grâce à de nouvelles normes de développementGrâce à de nouvelles normes de développement
WEB :WEB :
• Media queries : règles conditionnelles pour styler uneMedia queries : règles conditionnelles pour styler une
page en fonction de la résolutionpage en fonction de la résolution
• Le concept de grille fluide : dimensionnement relatifLe concept de grille fluide : dimensionnement relatif
des différents blocs de la page.des différents blocs de la page.
• Images dimensionnées en unité relative, afin de prévenirImages dimensionnées en unité relative, afin de prévenir
un éventuel débordement du contenuun éventuel débordement du contenu
La bonne technique de conceptionLa bonne technique de conception
THINK MOBILE FIRSTTHINK MOBILE FIRST
Privilégier la construction d'une interface ergonomique pourPrivilégier la construction d'une interface ergonomique pour
terminaux mobilesterminaux mobiles
La contrainte d'un faible espace d'affichage force à épurerLa contrainte d'un faible espace d'affichage force à épurer
au maximum les éléments visiblesau maximum les éléments visibles
Ensuite enrichir l'interface pour les supports « bureau »Ensuite enrichir l'interface pour les supports « bureau »
Méthode très difficile à faire accepter aux graphistesMéthode très difficile à faire accepter aux graphistes
La bonne technique de conceptionLa bonne technique de conception
THINK MOBILE FIRSTTHINK MOBILE FIRST
Privilégier la construction d'une interface ergonomique pourPrivilégier la construction d'une interface ergonomique pour
terminaux mobilesterminaux mobiles
La contrainte d'un faible espace d'affichage force à épurerLa contrainte d'un faible espace d'affichage force à épurer
au maximum les éléments visiblesau maximum les éléments visibles
Ensuite enrichir l'interface pour les supports « bureau »Ensuite enrichir l'interface pour les supports « bureau »
Méthode très difficile à faire accepter aux graphistesMéthode très difficile à faire accepter aux graphistes

Recommandé

Comment vendre efficacement sur Facebook "Canvas" ?
Comment vendre efficacement sur Facebook "Canvas" ?Comment vendre efficacement sur Facebook "Canvas" ?
Comment vendre efficacement sur Facebook "Canvas" ?Lengow
 
Architecture mobile
Architecture mobileArchitecture mobile
Architecture mobilePatrice Cote
 
Pixmobi - Guide agences
Pixmobi - Guide agencesPixmobi - Guide agences
Pixmobi - Guide agencesCOWEMO
 
Offre applimag
Offre applimagOffre applimag
Offre applimagApplimag
 
Content marketing - Quelle est la part d'articles (textes) VS médias (vidéos...
Content marketing  - Quelle est la part d'articles (textes) VS médias (vidéos...Content marketing  - Quelle est la part d'articles (textes) VS médias (vidéos...
Content marketing - Quelle est la part d'articles (textes) VS médias (vidéos...Jean-Charles Gautard
 
Présentationcelinetypepad
PrésentationcelinetypepadPrésentationcelinetypepad
PrésentationcelinetypepadCelinevulcain
 
2 admoove 100412
2 admoove 1004122 admoove 100412
2 admoove 100412AFMM
 

Contenu connexe

En vedette

Traballo sobre O liño, Marlén 6º curso
Traballo sobre O liño, Marlén 6º  cursoTraballo sobre O liño, Marlén 6º  curso
Traballo sobre O liño, Marlén 6º cursoMarta Pérez Lage
 
GLORIOUS PICS - LIFE!
GLORIOUS  PICS - LIFE!GLORIOUS  PICS - LIFE!
GLORIOUS PICS - LIFE!georgeh1
 
Presentación impress. madrid de los austrias
Presentación impress. madrid de los austriasPresentación impress. madrid de los austrias
Presentación impress. madrid de los austriassaragalancano
 
Operation chammal oct 2014
Operation chammal    oct 2014Operation chammal    oct 2014
Operation chammal oct 2014RP defense
 
Unsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werden
Unsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werdenUnsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werden
Unsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werdenAnita Holdener
 
Bordeaux Coups de Coeur 2010
Bordeaux Coups de Coeur 2010Bordeaux Coups de Coeur 2010
Bordeaux Coups de Coeur 2010Benjamin Anseaume
 
LUKi - Einsatz für Freie Software in den Kirchen
LUKi - Einsatz für Freie Software in den KirchenLUKi - Einsatz für Freie Software in den Kirchen
LUKi - Einsatz für Freie Software in den KirchenUlrich Berens
 
Présentation au colloque Campus durable 2011
Présentation au colloque Campus durable 2011Présentation au colloque Campus durable 2011
Présentation au colloque Campus durable 2011AlexandreGauthier
 
Gloria Ambas
Gloria AmbasGloria Ambas
Gloria Ambasmgag
 
Les Avatars : régénération et devenir technologique du corps en ligne
Les Avatars : régénération et devenir technologique du corps en ligneLes Avatars : régénération et devenir technologique du corps en ligne
Les Avatars : régénération et devenir technologique du corps en ligneBodyspacesociety Blog
 
Innovacion reynaldo oropeza
Innovacion   reynaldo oropezaInnovacion   reynaldo oropeza
Innovacion reynaldo oropezaejoropz
 
Rheinland Pfalz
Rheinland PfalzRheinland Pfalz
Rheinland PfalzYPEPTH
 
GENERATIONDESIGN Messereview imm 2013
GENERATIONDESIGN Messereview imm 2013GENERATIONDESIGN Messereview imm 2013
GENERATIONDESIGN Messereview imm 2013GENERATIONDESIGN GmbH
 
Qué no hacer en Youtube para la salud
Qué no hacer en Youtube para la saludQué no hacer en Youtube para la salud
Qué no hacer en Youtube para la saludOlga Navarro
 

En vedette (20)

Arbeitsmuede
ArbeitsmuedeArbeitsmuede
Arbeitsmuede
 
Asea produit brochure
Asea produit brochureAsea produit brochure
Asea produit brochure
 
Traballo sobre O liño, Marlén 6º curso
Traballo sobre O liño, Marlén 6º  cursoTraballo sobre O liño, Marlén 6º  curso
Traballo sobre O liño, Marlén 6º curso
 
GLORIOUS PICS - LIFE!
GLORIOUS  PICS - LIFE!GLORIOUS  PICS - LIFE!
GLORIOUS PICS - LIFE!
 
Presentación impress. madrid de los austrias
Presentación impress. madrid de los austriasPresentación impress. madrid de los austrias
Presentación impress. madrid de los austrias
 
Modelo de datos
Modelo de datosModelo de datos
Modelo de datos
 
Muller traballadora
Muller traballadoraMuller traballadora
Muller traballadora
 
Operation chammal oct 2014
Operation chammal    oct 2014Operation chammal    oct 2014
Operation chammal oct 2014
 
Unsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werden
Unsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werdenUnsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werden
Unsere kleine Farm - wie an der Hochschule Luzern Blogs genutzt werden
 
Bordeaux Coups de Coeur 2010
Bordeaux Coups de Coeur 2010Bordeaux Coups de Coeur 2010
Bordeaux Coups de Coeur 2010
 
Dios dijo No
Dios dijo NoDios dijo No
Dios dijo No
 
LUKi - Einsatz für Freie Software in den Kirchen
LUKi - Einsatz für Freie Software in den KirchenLUKi - Einsatz für Freie Software in den Kirchen
LUKi - Einsatz für Freie Software in den Kirchen
 
Présentation au colloque Campus durable 2011
Présentation au colloque Campus durable 2011Présentation au colloque Campus durable 2011
Présentation au colloque Campus durable 2011
 
Gloria Ambas
Gloria AmbasGloria Ambas
Gloria Ambas
 
Les Avatars : régénération et devenir technologique du corps en ligne
Les Avatars : régénération et devenir technologique du corps en ligneLes Avatars : régénération et devenir technologique du corps en ligne
Les Avatars : régénération et devenir technologique du corps en ligne
 
Innovacion reynaldo oropeza
Innovacion   reynaldo oropezaInnovacion   reynaldo oropeza
Innovacion reynaldo oropeza
 
Rheinland Pfalz
Rheinland PfalzRheinland Pfalz
Rheinland Pfalz
 
GENERATIONDESIGN Messereview imm 2013
GENERATIONDESIGN Messereview imm 2013GENERATIONDESIGN Messereview imm 2013
GENERATIONDESIGN Messereview imm 2013
 
Qué no hacer en Youtube para la salud
Qué no hacer en Youtube para la saludQué no hacer en Youtube para la salud
Qué no hacer en Youtube para la salud
 
Asem galicia presentación rsc
Asem galicia presentación rscAsem galicia presentación rsc
Asem galicia presentación rsc
 

Similaire à Webmobile - Rendre son site compatible avec les nouveaux usages du WEB

CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?Smile I.T is open
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Office de Tourisme Luberon Durance
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?WebSchool Orléans
 
L'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webL'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webJulien Dereumaux
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
 
Refonte et Optimisation de site Web
Refonte et Optimisation de site WebRefonte et Optimisation de site Web
Refonte et Optimisation de site WebWSI France
 
Présentation EMLDesign
Présentation EMLDesignPrésentation EMLDesign
Présentation EMLDesignEric Delhoulle
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileWSI France
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Webambin_fr
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Synerg'hetic
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...
1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...
1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...Olivier Andrieu
 
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesAccessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesEtienne Samson
 
Appwork : solution digitale complète pour CE et CSE
Appwork : solution digitale complète pour CE et CSEAppwork : solution digitale complète pour CE et CSE
Appwork : solution digitale complète pour CE et CSELaure Antoine
 
Appwork plaquette compressed
Appwork plaquette compressedAppwork plaquette compressed
Appwork plaquette compressedHaylieDUMONT
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
Séminaire Communication web - partie 1
Séminaire Communication web - partie 1Séminaire Communication web - partie 1
Séminaire Communication web - partie 1Noémie Toledano
 
Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015SADC d'Abitibi-Ouest
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?Chambé-Carnet
 

Similaire à Webmobile - Rendre son site compatible avec les nouveaux usages du WEB (20)

CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
L'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webL'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site web
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Refonte et Optimisation de site Web
Refonte et Optimisation de site WebRefonte et Optimisation de site Web
Refonte et Optimisation de site Web
 
Présentation EMLDesign
Présentation EMLDesignPrésentation EMLDesign
Présentation EMLDesign
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...
1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...
1&1, e-Monsite, Jimdo, Wix, … Les platesformes clés-en-main permettent-elles ...
 
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéficesAccessiblite Web, Idées reçues, enjeux, implications et bénéfices
Accessiblite Web, Idées reçues, enjeux, implications et bénéfices
 
Appwork : solution digitale complète pour CE et CSE
Appwork : solution digitale complète pour CE et CSEAppwork : solution digitale complète pour CE et CSE
Appwork : solution digitale complète pour CE et CSE
 
Appwork plaquette compressed
Appwork plaquette compressedAppwork plaquette compressed
Appwork plaquette compressed
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
Séminaire Communication web - partie 1
Séminaire Communication web - partie 1Séminaire Communication web - partie 1
Séminaire Communication web - partie 1
 
Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 

Plus de mariejura

Webschool du Jura - Etre un entrepreneur malin
Webschool du Jura - Etre un entrepreneur malinWebschool du Jura - Etre un entrepreneur malin
Webschool du Jura - Etre un entrepreneur malinmariejura
 
Webschool du Jura - La cybercriminalité en entreprise
Webschool du Jura - La cybercriminalité en entrepriseWebschool du Jura - La cybercriminalité en entreprise
Webschool du Jura - La cybercriminalité en entreprisemariejura
 
Webschool Médias Sociaux
Webschool Médias SociauxWebschool Médias Sociaux
Webschool Médias Sociauxmariejura
 
Les réseaux sociaux comme moyen de recurtement
Les réseaux sociaux comme moyen de recurtementLes réseaux sociaux comme moyen de recurtement
Les réseaux sociaux comme moyen de recurtementmariejura
 
Webschool du Jura - Financement participatif avec Bulb in Town
Webschool du Jura - Financement participatif avec Bulb in TownWebschool du Jura - Financement participatif avec Bulb in Town
Webschool du Jura - Financement participatif avec Bulb in Townmariejura
 
Webschool du Jura - Cybercriminalité en entreprise
Webschool du Jura - Cybercriminalité en entrepriseWebschool du Jura - Cybercriminalité en entreprise
Webschool du Jura - Cybercriminalité en entreprisemariejura
 
Webschool du Jura - Facebook Entreprise
Webschool du Jura - Facebook Entreprise Webschool du Jura - Facebook Entreprise
Webschool du Jura - Facebook Entreprise mariejura
 
Forum rh- 13 octobre 2016
Forum rh- 13 octobre 2016Forum rh- 13 octobre 2016
Forum rh- 13 octobre 2016mariejura
 
Webschool 2016 - Ecrire pour le web : être vu, être lu !
Webschool 2016 - Ecrire pour le web : être vu, être lu !Webschool 2016 - Ecrire pour le web : être vu, être lu !
Webschool 2016 - Ecrire pour le web : être vu, être lu !mariejura
 
Ateliers Découverte Plateforme RH - 2016
Ateliers Découverte Plateforme RH - 2016Ateliers Découverte Plateforme RH - 2016
Ateliers Découverte Plateforme RH - 2016mariejura
 
Webschool du Jura - Cartographie et Géolocalisation
Webschool du Jura - Cartographie et GéolocalisationWebschool du Jura - Cartographie et Géolocalisation
Webschool du Jura - Cartographie et Géolocalisationmariejura
 
Webschool - Les tendances e-commerce en 2015
Webschool - Les tendances e-commerce en 2015Webschool - Les tendances e-commerce en 2015
Webschool - Les tendances e-commerce en 2015mariejura
 
Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015mariejura
 
Webschool contenu-de-qualite-pour-le-web
Webschool contenu-de-qualite-pour-le-webWebschool contenu-de-qualite-pour-le-web
Webschool contenu-de-qualite-pour-le-webmariejura
 
Webschool E-commerce - Comment booster vos ventes ?
Webschool E-commerce - Comment booster vos ventes ?Webschool E-commerce - Comment booster vos ventes ?
Webschool E-commerce - Comment booster vos ventes ?mariejura
 
Mtourisme - Le Jura dans la poche : avant, pendant, aprés...
Mtourisme - Le Jura dans la poche : avant, pendant, aprés...Mtourisme - Le Jura dans la poche : avant, pendant, aprés...
Mtourisme - Le Jura dans la poche : avant, pendant, aprés...mariejura
 
Facebook, créez sa page pro. - Webschool du Jura
Facebook, créez sa page pro. - Webschool du JuraFacebook, créez sa page pro. - Webschool du Jura
Facebook, créez sa page pro. - Webschool du Juramariejura
 
e/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situ
e/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situe/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situ
e/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situmariejura
 
Propriété intellectuelle et sites internet
Propriété intellectuelle et sites internetPropriété intellectuelle et sites internet
Propriété intellectuelle et sites internetmariejura
 
Webschool du Jura - Internet ou comment fidéliser ses clients
Webschool du Jura - Internet ou comment fidéliser ses clientsWebschool du Jura - Internet ou comment fidéliser ses clients
Webschool du Jura - Internet ou comment fidéliser ses clientsmariejura
 

Plus de mariejura (20)

Webschool du Jura - Etre un entrepreneur malin
Webschool du Jura - Etre un entrepreneur malinWebschool du Jura - Etre un entrepreneur malin
Webschool du Jura - Etre un entrepreneur malin
 
Webschool du Jura - La cybercriminalité en entreprise
Webschool du Jura - La cybercriminalité en entrepriseWebschool du Jura - La cybercriminalité en entreprise
Webschool du Jura - La cybercriminalité en entreprise
 
Webschool Médias Sociaux
Webschool Médias SociauxWebschool Médias Sociaux
Webschool Médias Sociaux
 
Les réseaux sociaux comme moyen de recurtement
Les réseaux sociaux comme moyen de recurtementLes réseaux sociaux comme moyen de recurtement
Les réseaux sociaux comme moyen de recurtement
 
Webschool du Jura - Financement participatif avec Bulb in Town
Webschool du Jura - Financement participatif avec Bulb in TownWebschool du Jura - Financement participatif avec Bulb in Town
Webschool du Jura - Financement participatif avec Bulb in Town
 
Webschool du Jura - Cybercriminalité en entreprise
Webschool du Jura - Cybercriminalité en entrepriseWebschool du Jura - Cybercriminalité en entreprise
Webschool du Jura - Cybercriminalité en entreprise
 
Webschool du Jura - Facebook Entreprise
Webschool du Jura - Facebook Entreprise Webschool du Jura - Facebook Entreprise
Webschool du Jura - Facebook Entreprise
 
Forum rh- 13 octobre 2016
Forum rh- 13 octobre 2016Forum rh- 13 octobre 2016
Forum rh- 13 octobre 2016
 
Webschool 2016 - Ecrire pour le web : être vu, être lu !
Webschool 2016 - Ecrire pour le web : être vu, être lu !Webschool 2016 - Ecrire pour le web : être vu, être lu !
Webschool 2016 - Ecrire pour le web : être vu, être lu !
 
Ateliers Découverte Plateforme RH - 2016
Ateliers Découverte Plateforme RH - 2016Ateliers Découverte Plateforme RH - 2016
Ateliers Découverte Plateforme RH - 2016
 
Webschool du Jura - Cartographie et Géolocalisation
Webschool du Jura - Cartographie et GéolocalisationWebschool du Jura - Cartographie et Géolocalisation
Webschool du Jura - Cartographie et Géolocalisation
 
Webschool - Les tendances e-commerce en 2015
Webschool - Les tendances e-commerce en 2015Webschool - Les tendances e-commerce en 2015
Webschool - Les tendances e-commerce en 2015
 
Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015Webschool - Les tendences e-commerce en 2015
Webschool - Les tendences e-commerce en 2015
 
Webschool contenu-de-qualite-pour-le-web
Webschool contenu-de-qualite-pour-le-webWebschool contenu-de-qualite-pour-le-web
Webschool contenu-de-qualite-pour-le-web
 
Webschool E-commerce - Comment booster vos ventes ?
Webschool E-commerce - Comment booster vos ventes ?Webschool E-commerce - Comment booster vos ventes ?
Webschool E-commerce - Comment booster vos ventes ?
 
Mtourisme - Le Jura dans la poche : avant, pendant, aprés...
Mtourisme - Le Jura dans la poche : avant, pendant, aprés...Mtourisme - Le Jura dans la poche : avant, pendant, aprés...
Mtourisme - Le Jura dans la poche : avant, pendant, aprés...
 
Facebook, créez sa page pro. - Webschool du Jura
Facebook, créez sa page pro. - Webschool du JuraFacebook, créez sa page pro. - Webschool du Jura
Facebook, créez sa page pro. - Webschool du Jura
 
e/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situ
e/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situe/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situ
e/m-Tourisme, e/m-Commerce - Vente par correspondance vs Vente In Situ
 
Propriété intellectuelle et sites internet
Propriété intellectuelle et sites internetPropriété intellectuelle et sites internet
Propriété intellectuelle et sites internet
 
Webschool du Jura - Internet ou comment fidéliser ses clients
Webschool du Jura - Internet ou comment fidéliser ses clientsWebschool du Jura - Internet ou comment fidéliser ses clients
Webschool du Jura - Internet ou comment fidéliser ses clients
 

Dernier

Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by NijiNiji
 
Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)benj_2
 
Wave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfWave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfDomotica daVinci
 
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024Infopole1
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualDomotica daVinci
 
JDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfJDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfAlexandre Contat
 

Dernier (6)

Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by Niji
 
Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)
 
Wave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfWave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdf
 
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave Manual
 
JDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfJDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdf
 

Webmobile - Rendre son site compatible avec les nouveaux usages du WEB

  • 1. Rendre son site compatible avecRendre son site compatible avec les nouveaux usages du WEBles nouveaux usages du WEB Webschool de la CCI du Jura 24 mars 2014 par François Bonneville - ARICIA
  • 2. Votre site WEB est-ilVotre site WEB est-il « compatible » mobile ?« compatible » mobile ? • Bannir les applications FlashBannir les applications Flash – Non supportées par certains système IOS (Apple)Non supportées par certains système IOS (Apple) • Vérifier l'efficience des mécanismesVérifier l'efficience des mécanismes d'interactivitéd'interactivité – Les menus « déployer - cliquer »Les menus « déployer - cliquer » – La taille et le fonctionnement des formulairesLa taille et le fonctionnement des formulaires – Eviter les popupsEviter les popups • Ne pas avoir des pages trop largesNe pas avoir des pages trop larges
  • 3. Concevoir un site WEB dédié mobile,Concevoir un site WEB dédié mobile, bonne ou mauvaise idée ?bonne ou mauvaise idée ? • Qu'est-ce qu'un site WEB dédié mobile ?Qu'est-ce qu'un site WEB dédié mobile ? Exemple : http://m.haut-jura.comExemple : http://m.haut-jura.com • AvantagesAvantages – Ergonomie conçue spécifiquement pour les mobilesErgonomie conçue spécifiquement pour les mobiles – Contenu pouvant être adapté à des visiteurs nomadesContenu pouvant être adapté à des visiteurs nomades  InconvénientsInconvénients – Coût de création importantCoût de création important – Maintenance parfois compliquée (2 sites à gérer)Maintenance parfois compliquée (2 sites à gérer)
  • 4. Le "responsive design"Le "responsive design" Le concept : ne plus de créer autant de pages qu'il yLe concept : ne plus de créer autant de pages qu'il y a de famille de terminaux mais concevoir unea de famille de terminaux mais concevoir une seule interface auto-adaptableseule interface auto-adaptable Grâce à de nouvelles normes de développementGrâce à de nouvelles normes de développement WEB :WEB : • Media queries : règles conditionnelles pour styler uneMedia queries : règles conditionnelles pour styler une page en fonction de la résolutionpage en fonction de la résolution • Le concept de grille fluide : dimensionnement relatifLe concept de grille fluide : dimensionnement relatif des différents blocs de la page.des différents blocs de la page. • Images dimensionnées en unité relative, afin de prévenirImages dimensionnées en unité relative, afin de prévenir un éventuel débordement du contenuun éventuel débordement du contenu
  • 5. La bonne technique de conceptionLa bonne technique de conception THINK MOBILE FIRSTTHINK MOBILE FIRST Privilégier la construction d'une interface ergonomique pourPrivilégier la construction d'une interface ergonomique pour terminaux mobilesterminaux mobiles La contrainte d'un faible espace d'affichage force à épurerLa contrainte d'un faible espace d'affichage force à épurer au maximum les éléments visiblesau maximum les éléments visibles Ensuite enrichir l'interface pour les supports « bureau »Ensuite enrichir l'interface pour les supports « bureau » Méthode très difficile à faire accepter aux graphistesMéthode très difficile à faire accepter aux graphistes
  • 6. La bonne technique de conceptionLa bonne technique de conception THINK MOBILE FIRSTTHINK MOBILE FIRST Privilégier la construction d'une interface ergonomique pourPrivilégier la construction d'une interface ergonomique pour terminaux mobilesterminaux mobiles La contrainte d'un faible espace d'affichage force à épurerLa contrainte d'un faible espace d'affichage force à épurer au maximum les éléments visiblesau maximum les éléments visibles Ensuite enrichir l'interface pour les supports « bureau »Ensuite enrichir l'interface pour les supports « bureau » Méthode très difficile à faire accepter aux graphistesMéthode très difficile à faire accepter aux graphistes