Mobile & Responsive Design

Mieux vous connaître: sondage

• Votre site web est-il adapté aux Smartphones et Tablettes?

• Quels problèmes rencontrez-vous?

• Pensez-vous qu'il est important d'avoir une marque mobile de nos jours?

A propos des speakers

+352 / 691 219 850

+33 / 673 923 708

A propos de WSI

©2013 WSI. All rights reserved.

Leader mondial du marketing digitalSavoir faire international, Résultats locaux.

• Fournir des solutions de marketing numérique de pointe• Pour les entreprises de toutes tailles et dans tous les secteurs• Le plus grand réseau mondial de consultants Internet (1.200)• Présent dans plus de 80 pays à l'échelle internationale• Siège social du groupe à Toronto, au Canada

www.wsi-marketing-internet.fr

Le Nouveau Livre WSI

Disponible aussi sur Amazon : http://amzn.to/1kImhJP

Concours en seconde partie de webinaire1 gagnant remportera un exemplaire du livreDigital Minds

Sommaire

• Contexte• Le Marketing Mobile aujourd’hui

• Le Responsive Design• Conclusion

©2014 WSI. All rights reserved.

CONTEXTE

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

©2012 RAM. All rights

reserved.

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

©2012 RAM. All rights

reserved.

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

©2012 RAM. All rights

reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812

Plus de chiffres…

©2012 RAM. All rights

reserved.

http://fr.slideshare.net/HubSpot/50-

mobilefactsdeck62812

Impact Futur

“Le mobile aura un plus gros impact que

l’Internet.”-Keith Weed, Unilever CMO

©2014 WSI. All rights reserved.

Le Marketing Mobile aujourd’hui

Le Marketing Mobile aujourd’hui

GSM

Smartphone

Tablette

Que Fait-on Sur Nos Mobiles?

Un Monde Multi-Ecrans

Source : http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html

Le Marketing Mobile

Il est complémentaire - il se combine

avec tous les autres médias et supports.

Le Marketing Mobile

©2012 RAM. All rights

reserved.

• C’est un média qui

influence le parcours

d’achat

entre exposition

publicitaire et acte

d’achat.

Le mobile influence l’acte d’achat

©2012 RAM. All rights

reserved.

Zero Moment of Truth

©2012 RAM. All rights reserved.

SoLoMo

©2012 RAM. All rights reserved.http://www.mymarketingmobile.fr/2013/12/19/solomo-

etude-marketing-adobe-neolane-2013-infographie/

C’est le moment?

Mesurez l’importance du mobile pour votrebusiness grâce à Google Analytics

25%!

L’approche ‘’mobile first’’

Approche

traditionnelle

Approche

Mobile First

Le Responsive Design

De quoi parle-t-on?

Responsive Web Design

Site Mobile

Adaptive Web Design

Compatible Mobile

Quelques termes utilisés:

De quoi parle-t-on?

On peut retenir 2 categories principales:

• Adaptive Web Design (AWD)

• Responsive Web Design (RWD)

AWD & RWD

• Les deux permettent de créer des sites Web pouvant être consultés avec les appareils mobiles et différentes tailles d'écrans

• Les deux offrent finalement aux visiteurs une meilleure expérience utilisateur mobile

AWD

• Utilise le serveur pour détecter le périphérique utilisé pour consulter le site (PC, tablette, smartphone)

• Envoie des fichiers spécifiques pour cet appareil

• Des modèles distincts sont créés pour chaque appareil

• Le chargement des pages est plus rapide – chaque variante est généralement hébergée sur son propre domaine « mobile.domain.com » ou « domain.com/mobile »

La définition courte d’un design adaptatif, c'est que le design va changer pour s'adapter à un ensemble

prédéterminé de tailles d'écrans et d'appareils.

Exemple de site “AWD”

URL Spécifique

RWD

• Utilise du code CSS spécifique pour modifier la présentation d'un site Web en fonction de la taille de l'appareil sur lequel il est affiché.

• L’information pour chaque écran est téléchargée indépendamment du fait qu‘elle est utilisée ou non

• Le chargement des pages est plus lent - Le nom de domaine est toujours le même.

La définition courte d'un design « Responsive » est donc qu'il va changer de manière fluide et s'adapter

à n'importe quelle taille d’écran ou d'appareil.

Exemple de site “RWD”

Choisir entre AWD & RWD

AWD

• Il faut développer et maintenir des sites Web distincts

• Avec un site distinct / HTML, vous pouvez affiner et optimiser la façon dont votre site affiche sur un appareil particulier

• Avec un design Web adaptatif, vous pouvez optimiser la taille des images (par exemple prévoir une basse résolution pour de faibles bandes passantes)

• SEO, liens, contenu tout doit être reconstruit pour chaque site

Choisir entre AWD & RWD

RWD

• La conception de sites RWD repose sur HTML5, CSS3 et Javascript, et donc fonctionne mieux avec les navigateurs web relativement modernes

• Le Responsive Web Design est particulièrement adapté dans un marché d’appareils mobiles de plus en plus fragmenté (Il existe plusieurs centaines d’appareils différents, tablettes ou smartphones)

• SEO, liens, contenu tout est conservé ... Google aime le Responsive Web Design

Les avantages du Responsive Design

Les Avantages du Responsive Design

gain de temps et d’argent(développement et maintenance)

plus facile à maintenir que des apps ou des sites dédiés

améliore et renforce le SEO

offre une meilleure expérience de navigation

génère une meilleure conversion

Impact SEO du Responsive Design

…

• URL unique (plus facile à gérer)

• Pas de duplicate content

• On bénéficie des liens préexistant du site classique

pour la version mobile

• La construction de liens devient plus facile

• Diminution du temps de téléchargement

Les Inconvénients du Responsive Design

temps de téléchargement plus long de bonnes connaissances techniques sont

nécessaires une veille technologique constante des tests nombreux et variés tout au long

du projet limites ergonomiques et de performances

des navigateurs web c'est plus long à développer (25% du temps

supplémentaire)

Pour conclure sur le Responsive Design

Un chapitre consacré au Mobile & Responsive Design

Disponible aussi sur Amazon : http://amzn.to/1kImhJP

Digital Minds12 Recommandations

essentielles pour un

Marketing Digital

réussi

Pour aller plus loin...

• Responsive Webdesign par Ethan Marcotte

Source : http://www.blogduwebdesign.com/livre-webdesign/responsive-webdesign-par-ethan-marcotte/558

Le Nouveau Livre WSI

Disponible aussi sur Amazon : http://amzn.to/1kImhJP

Le Concours c’est maintenant !1 gagnant remportera un exemplaire du livreDigital Minds

La réponse est:

Contactez votre agence WSI

Laurent Annet

Tel : +352 27 39 57 27

lannet@wsiluxembourg.com

Jean-Jacques Turroc

Luxembourg - Windhof Région Ile de France Autres régions

+ 50 consultantshttp://www.wsi-marketing-

internet.fr

/agences-wsi/agences-wsi-

france.html

Tel : +33 (0) 970 46 90 00 |

GSM : +33 (0) 673 92 37 08

jjt@wsi4yoursuccess.fr

Questions & Réponses

Participez à notre prochain webinar:http://www.wsi-marketing-internet.fr/webinar-webmarketing-analytics.htm

Questions & Réponses

Merci et bonne journée à tous !

Laurent Annet

Tel : +352 27 39 57 27

lannet@wsiluxembourg.com

Jean-Jacques Turroc

Luxembourg - Windhof Région Ile de France Autres régions

+ 50 consultantshttp://www.wsi-marketing-

internet.fr

/agences-wsi/agences-wsi-

france.html

Tel : +33 (0) 970 46 90 00 |

GSM : +33 (0) 673 92 37 08

jjt@wsi4yoursuccess.fr