Mobile & Responsive Design: Rendez votre marque mobile

55
Mobile & Responsive Design

description

Les consommateurs sont de plus en plus mobiles en terme de connexion, votre marque doit l'être également. Découvrez l'importance d'avoir un site mobile, adapté à différents supports (smartphones, tablettes...) et les possibilités qui s'offrent à vous pour développer votre stratégie webmarketing. Présenté par Laurent Annet et Jean-Jacques Turroc, consultants en digital marketing WSI Contactez l'expert en webmarketing le plus proche de chez vous: http://www.wsi-marketing-internet.fr/agences-wsi/agences-wsi-france.html

Transcript of Mobile & Responsive Design: Rendez votre marque mobile

Page 1: Mobile & Responsive Design: Rendez votre marque mobile

Mobile & Responsive Design

Page 2: Mobile & Responsive Design: Rendez votre marque mobile

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?

Page 3: Mobile & Responsive Design: Rendez votre marque mobile

A propos des speakers

+352 / 691 219 850

+33 / 673 923 708

Page 4: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 5: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 6: Mobile & Responsive Design: Rendez votre marque mobile

Sommaire

• Contexte• Le Marketing Mobile aujourd’hui

• Le Responsive Design• Conclusion

Page 7: Mobile & Responsive Design: Rendez votre marque mobile

©2014 WSI. All rights reserved.

CONTEXTE

Page 8: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 9: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

reserved.

Page 10: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 11: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

reserved.

Page 12: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 13: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 14: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 15: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 16: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 17: Mobile & Responsive Design: Rendez votre marque mobile

©2012 RAM. All rights

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

Page 18: Mobile & Responsive Design: Rendez votre marque mobile

Plus de chiffres…

©2012 RAM. All rights

reserved.

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

mobilefactsdeck62812

Page 19: Mobile & Responsive Design: Rendez votre marque mobile

Impact Futur

“Le mobile aura un plus gros impact que

l’Internet.”-Keith Weed, Unilever CMO

Page 20: Mobile & Responsive Design: Rendez votre marque mobile

©2014 WSI. All rights reserved.

Page 23: Mobile & Responsive Design: Rendez votre marque mobile

Que Fait-on Sur Nos Mobiles?

Page 24: Mobile & Responsive Design: Rendez votre marque mobile

Un Monde Multi-Ecrans

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

Page 26: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 29: Mobile & Responsive Design: Rendez votre marque mobile

SoLoMo

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

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

Page 30: Mobile & Responsive Design: Rendez votre marque mobile

C’est le moment?

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

25%!

Page 31: Mobile & Responsive Design: Rendez votre marque mobile

L’approche ‘’mobile first’’

Approche

traditionnelle

Approche

Mobile First

Page 32: Mobile & Responsive Design: Rendez votre marque mobile

Le Responsive Design

Page 33: Mobile & Responsive Design: Rendez votre marque mobile

De quoi parle-t-on?

Responsive Web Design

Site Mobile

Adaptive Web Design

Compatible Mobile

Quelques termes utilisés:

Page 34: Mobile & Responsive Design: Rendez votre marque mobile

De quoi parle-t-on?

On peut retenir 2 categories principales:

• Adaptive Web Design (AWD)

• Responsive Web Design (RWD)

Page 35: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 36: Mobile & Responsive Design: Rendez votre marque 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.

Page 37: Mobile & Responsive Design: Rendez votre marque mobile

Exemple de site “AWD”

URL Spécifique

Page 38: Mobile & Responsive Design: Rendez votre marque mobile

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.

Page 39: Mobile & Responsive Design: Rendez votre marque mobile

Exemple de site “RWD”

Page 40: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 41: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 42: Mobile & Responsive Design: Rendez votre marque mobile

Les avantages du Responsive Design

Page 43: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 44: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 45: Mobile & Responsive Design: Rendez votre marque mobile

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)

Page 46: Mobile & Responsive Design: Rendez votre marque mobile

Pour conclure sur le Responsive Design

Page 47: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 48: Mobile & Responsive Design: Rendez votre marque mobile

Pour aller plus loin...

• Responsive Webdesign par Ethan Marcotte

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

Page 49: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 50: Mobile & Responsive Design: Rendez votre marque mobile

La réponse est:

Page 51: Mobile & Responsive Design: Rendez votre marque mobile

Contactez votre agence WSI

Laurent Annet

Tel : +352 27 39 57 27

[email protected]

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

[email protected]

Page 52: Mobile & Responsive Design: Rendez votre marque mobile

Questions & Réponses

Page 53: Mobile & Responsive Design: Rendez votre marque mobile

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

Page 54: Mobile & Responsive Design: Rendez votre marque mobile

Questions & Réponses

Page 55: Mobile & Responsive Design: Rendez votre marque mobile

Merci et bonne journée à tous !

Laurent Annet

Tel : +352 27 39 57 27

[email protected]

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

[email protected]