Nous pourrons ainsi vous donner quelques clés pour que vos recherches d’emploi et vos entretiens d’embauche se déroulent le mieux possible, dans le but de décrocher le job de vos rêves. 

Pour en savoir plus, consultez le site de la cité des métiers et de la formation

En soi, HTML5 ne rendra pas un site web plus beau, plus rapide ou meilleur que les autres. HTML5 apporte certes de nouvelles fonctionnalités, mais il reste nécessaire d’utiliser les technologies JavaScript, DOM et CSS3 pour réaliser un site pleinement fonctionnel. Trop souvent encore, l’apologie de l’HTML5 est faite en occultant l’utilisation de ces technologies complémentaires qui font pleinement partie de la révolution en marche.

Bien que tout aille très vite dans le monde du web, HTML5 est encore une technologie jeune dont toutes les fonctionnalités ne sont pas encore figées (les spécifications finales d’HTML5 sont attendues pour 2014) ni supportées par tous les navigateurs ; l’excellent site www.caniuse.com permet de s’en faire une représentation. Il n’en reste pas moins que le W3C encourage l’utilisation de l’HTML5 pour accélérer la transition et l’évolution des navigateurs.

Les évolutions apportées par le HTML5

En connaissance de cause, il est clair que l’HTML5 est devenu une technologie actuelle et qu’elle jouera un rôle central dans les développements futurs. L’HTML5 va aussi influencer notre façon de travailler dans le monde du web. Les frontières entre les différents métiers seront de moins en moins nettes du fait que l’HTML5 se révèle bien plus étendu et diversifié que les précédentes versions. Il est plus facile d’interagir directement avec les serveurs, le dynamisme des sites est augmenté tout comme la richesse des contenus proposés (audio, vidéo, animation, . . .). Tout cela implique des interactions encore plus fortes entre les intégrateurs, les développeurs, les designers, les administrateurs. . . bref, de quoi insuffler un nouvel élan au monde du développement web. 

Sur un plan plus technique, l’HTML5 permet d’améliorer le référencement au moyen de balises dédiées à l’identification de zones (<article>, <section>, <nav>, ...) et de contenus (<figure>, <output>, ...) auxquelles viennent s’ajouter les microdata. Ces balises, utilisées à bon escient, devrait permettre à l’HTML de retrouver ses vocations originelles : la structure et la clarté qui sont deux qualités grandement appréciées par les pincipaux moteurs de recherches (Google, Bing, ...) et par les utilisateurs.

HTML5 et l'accessibilité

En plus du référencement, l’HTML5 se veut plus « accessible ». Depuis longtemps, un code HTML bien construit et bien pensé aide à l’accessibilité en appliquant par exemple les règles WCAG à toutes les versions d’HTML. Le résultat sera alors un site web accessible aux personnes en situation de handicap. Mais HTML5 va encore plus loin ! Il a été pensé en intégrant WAI-ARIA qui permet de rendre accessibles les parties dynamiques du site, comme les appels AJAX, les contenus gérés en JavaScript, etc. Avec cette technologie, nous avons la possibilité d’offrir l’accès à un site web avancé et dynamique aux personnes en situation de handicap.

Une orientation mobile

Le dernier domaine dans lequel excelle l’HTML5 est probablement le domaine du mobile. Les fonctionnalités suivantes sont supportées :

• les « media queries » qui permettent de gérer l’affichage CSS en fonction du périphérique;
• la géolocalisation (qui permet de localiser le périphérique soit par GPS, soit par triangulation, soit par l’adresse IP) - API en cours de développement ;
• l’affichage « hors connexion » (qui permet au navigateur de cacher les ressources nécessaires pour afficher la page hors ligne) — API en cours de développement ;
• l’api « webstorage » (qui permet de stocker des données dans le client web) — API en cours de développement.

Finalement, très prometteur, l’HTML5 est en train de faire sa petite révolution du monde web. Nul doute que dans très peu de temps les sites web les plus influants utiliseront cette technologie pour le plus grand bonheur des utilisateurs et des développeurs qui semblent tenir un vrai standard universel avec l’HTML5.

La mobilité s’est installée partout avec le succès fulgurant des smartphones, la multiplication des systèmes d’exploitation pour mobiles, le nombre croissant d’applications, etc. En effet, 50% du trafic web passera par le mobile d’ici fin 2013*. 

Que ce soit sous Androïd ou iPhone, Daniel Gazzar a constaté que son site e-commerce est de plus en plus visité via un terminal mobile. Quelques mois après son lancement, ce dernier a décidé de lancer une version mobile de son site afin d’apporter un service supplémentaire à ses clients et de répondre ainsi à leurs attentes. 

Les vins Gazzar misent sur les avantages du mobile

Dans cette volonté de mieux satisfaire ses clients et de développer son activité, le mobile est devenu indispensable pour Elie Gazzar S.A. Des Vins d’Origine. En offrant la possibilité d’être connecté et d’avoir accès à l’information souhaitée de n’importe où et à n’importe quel moment, la version mobile du site permet :

• De découvrir l’offre des Vins Gazzar en conservant les fonctionnalités du site et de passer des commandes plus facilement grâce à une ergonomie optimisée, tant pour les vins en stock, que pour l’achat en souscription de Bordeaux primeurs ou de bons cadeaux. 
• D’optimiser les ventes via un email mobile, renforçant ainsi l’efficacité des campagnes e-mailing.
• De faciliter l’interaction et la participation des visiteurs : commentaires sur les produits achetés, notes, etc. 

Visiter le site mobile de Elie Gazzar S.A., Des Vins d'Origine

Le commerce mobile comme source de développement pour les entreprises

En permettant un accès facilité aux produits, une expérience d’achat améliorée, une personnalisation et une géolocalisation, le mobile est devenu un canal d’acquisition de nouveaux clients. Réel différentiateur, il est aujourd’hui un avantage concurrentiel indéniable. 

Deux exemples permettent de constater le potentiel de ce canal en termes de business : 

• Lors du Cyber Monday aux USA, la version e-commerce du célèbre « Black Friday », le mobile représentait 10% des achats en ligne. 
• Chez leShop.ch, en septembre de cette année, les commandes par mobiles (smartphones et tablettes) représentaient 11% des ventes du leader suisse du commerce de détail sur internet**.

Voir également la version germanophone du site

* Source : The Mobile Internet Report - Morgan Stanley
**Source :leshop.ch

L’intégration de fonctionnalités sociales sur une boutique en ligne peut se faire de manière plus ou moins importante selon vos objectifs ou moyens. La manière la plus simple et répandue est l’utilisation des plugins sociaux. Ces derniers regroupent des fonctionnalités virales, comme le fameux « J’aime », le bouton « Recommander » ou encore « Envoyer » ; et des fonctionnalités d’enrichissement de vos contenus avec les commentaires facebook ou encore le flux d’activité de votre communauté. Sachant que les plugins de partage facebook génèrent 52% du partage de contenu au niveau mondial et qu’en moyenne 20 visites sont générées lorsqu’un contenu est partagé par le biais de ceux-ci, nul doute que leur implémentation est essentielle.

Cross Agency a notamment travaillé sur le développement des boutiques e-commerce de Gazzar.ch et Koala.ch sur lesquelles des plugins sociaux facebook ont été intégrés.

La vitesse supérieure de l’intégration sociale se nomme l’Open Graph. Celui-ci permet aux sites d’enrichir sémantiquement le contenu de leurs pages web (comme les microdata), afin de permettre l’interaction sociale de n’importe quel objet (photo, vidéo, texte, via facebook). Concrètement l’Open Graph permet à l’utilisateur d’aller au-delà du simple « J’aime » en lui permettant de « Lire », « Regarder un film » ou encore « Ecouter une musique ». De plus, l’Open Graph permet l’utilisation de facebook connect, un système d’authentification universel permettant de se servir de son login et mot de passe facebook sur n’importe quel site tiers l’exploitant.

L’intégration de l’Open Graph est nettement plus lourde, cependant les opportunités de développement sont infinies et bénéfiques pour les 2 parties. D’un côté, l’utilisateur voit son expérience utilisateur enrichie. De l’autre, le site E-commerce exploite les informations de l’utilisateur afin de lui proposer des produits personnalisés et utilise facebook connect afin d’augmenter de manière considérable son taux d’inscription et donc de conversion.

Intégration du shop e-commerce dans facebook

La boutique intégrée directement dans la page facebook de l’entreprise, est la définition du f-commerce le plus souvent donnée. Concrètement, la boutique est accessible via un onglet disponible dans le menu de gauche de la page entreprise et, vu que l’intégration se fait via une iFrame, les possibilités de développement sont infinies. 

Ainsi, on peut en faire soit une page de type « vitrine » en y affichant dynamiquement les produits de la boutique qui, une fois cliqués, redirigent sur le site e-commerce classique, soit une implémentation plus avancée en intégrant le processus d’achat complet dans facebook. 

Les deux approches ont l’avantage d’aller chercher directement les utilisateurs là où ils se trouvent et où ils passent le plus de temps. Cependant l’intégration de shop directement dans une page facebook entreprise souffre aujourd’hui de deux problèmes majeurs.

Le premier concerne la mauvaise réputation de facebook dans le domaine de la confidentialité des données personnelles. Une récente étude de JWT Intelligence montre que 79% des 20-33 ans estime que facebook n’est pas une plateforme assez sûre pour effectuer des transactions e-commerce. 

Le deuxième problème réside dans l’expérience utilisateur proposée sur facebook. Entre les temps de chargement  et la largeur d’affichage réduite par les nombreuses publicités, celle-ci est loin d’être comparable aux shops e-commerce dédiés.

Il y a donc ici un axe d’amélioration prioritaire pour facebook, surtout s’ils désirent imposer leur monnaie virtuelle universelle facebook credits.

Cross Agency a travaillé sur l’implémentation d’un shop vitrine sur la page facebook de Art Of Brands ainsi qu'au développement de la boutique e-commerce.

Applications facebook

Les applications facebook commerciales permettent d’offrir une expérience qui sort des habitudes d’achats en ligne classiques en y apportant une composante utile mais surtout ludique. Comme pour les iFrame, les applications peuvent être intégrées dans une page facebook entreprise via les onglets du menu de gauche. La seule différence réside dans le fait que l’utilisateur, avant d’accéder à l’application, doit valider l’accès à ses informations personnelles.

Un très bon exemple d’utilisation originale, ludique et utile d’application facebook commerciale est « petits voyages entre amis ». Une application facebook développée par la SNCF afin de permettre à ses fans facebook d’organiser facilement un voyage en train avec leurs amis, puis de commander et acheter directement les billets en ligne.

Une composante de votre future stratégie digitale

Le f-commerce est un domaine vaste qui mérite réflexion avant de s’y lancer. Alors que l’intégration de plugins sociaux de type « j’aime » parait aujourd’hui essentielle, que vous soyez dans une logique d’acquisition ou de notoriété, une véritable stratégie digitale globale est nécessaire lors du déploiement d’un Open Graph, d’une application facebook ou d’un shop e-commerce dans votre page facebook entreprise.

ArtOfBrands fait appel à une multitude d'artistes internationaux (designers, peintres, dessinateurs, photographes) dans le but de créer des collections originales basées sur l’univers de marques mondialement connues comme Alfa Romeo, Alinghi ou Ducati. Les œuvres sont disponibles sur différents supports comme le papier d’art, la toile, plexiglass, di-bond ou le verre. 

Une nouvelle boutique E-commerce avec Magento

ArtOfBrands souhaitait refondre sa boutique en ligne artofbrands.com et retravailler le design pour mieux refléter l’image de la société sur ses marchés : les Etats-Unis, la Suisse et l’International, composé principalement l’Europe et l’Australie. L'objectif final étant l’augmentation du taux de conversion qui était jusqu'ici insatisfaisant.

Notre équipe a su apporter son expertise e-commerce et proposer ainsi deux solutions pour répondre aux objectifs : 

• La construction de la nouvelle boutique sur une plateforme Magento Professional Edition
• L’utilisation de la fonctionnalité Multisite nativement offerte par Magento permettant la gestion de différents points de livraisons et la possibilité pour les gestionnaires de chaque marché de gérer de manière indépendante leurs commandes.

Visitez la boutique en ligne

F-commerce : le choix de Facebook pour booster les ventes

Pour accompagner la refonte du site e-commerce, ArtOfBrands a misé sur le Social Commerce. Sur la page Facebook de ArtOfBrands, Cross Agency a ainsi mis en place un module de Facebook Commerce disponible sous l’onglet ArtOfBrands Art Boutique. Ce module répond ainsi à la volonté de la société d’utiliser les réseaux sociaux pour faire connaître leurs produits et augmenter le taux de conversion.

Visitez la page Facebook 

Pour cette fin d’année, Cross a choisi de soutenir l’Organisation Non Gouvernementale (ONG) Action Innocence qui agit pour une meilleure protection des enfants et des adolescents sur Internet.

Action Innocence intervient auprès des jeunes dans les établissements scolaires et sensibilise le « grand public » par de grandes campagnes dans les médias. L'association lutte également contre la pédocriminalité en étroite collaboration avec les services de police en Europe et au Canada. 

Beaucoup d’associations dépendent essentiellement de la générosité et du nombre de leurs donateurs. Pour elles, Internet est une opportunité énorme en permettant, avec un minimum de moyen, de toucher un maximum de donateurs potentiels. Les associations ont avant tout besoin de solutions simples, accessibles et faciles à mettre en place. 

Cross a décidé de soutenir Action Innocence par deux actions significatives:

• L’attribution de l’équivalent du budget consacré aux cadeaux de fin d'année.
• La mise en place d’une solution de récolte de dons en ligne disponible ici. Ce module conçu par Cross Agency pour le système de gestion de contenu Netvertis.CMS, a déjà été installé sur le site internet de l’Association pour le Bien des Aveugles et malvoyants. Le module comprend une partie front-office, permettant aux visiteurs d’effectuer facilement des dons pour l’association, ainsi qu’une partie back-office permettant de remercier les donateurs, générer des attestations pour le service des impôts et garder un suivi des dons et des donateurs.

Soutenez Action Innocence. Faites un don !

Au printemps dernier, Cross Agency avait participé à l’édition genevoise et animé une conférence sur le social commerce pour laquelle nous avions réuni plus de 400 personnes.

Ce décrochage local à Lausanne est une première et sera d’un format légèrement différent. En effet, plus de place sera donnée aux conférences et moins aux stands : d’où le nom de Swiss E-com Conférence.

Pour cette édition, Cross Agency animera une conférence sur le mobile commerce intitulée « Mobile + e-commerce = m-commerce ». Nous donnerons quelques clés essentielles pour étendre une boutique au canal mobile et augmenter le taux de transformation en captant des clients mobiles:

• Panorama du m-commerce,
• Tablet shopping,
• Nouvelles habitudes de consommation,
• Exemple du module Mobile de Magento : ce module Magento a été implanté pour Gazzar. Il s’agit ici d’une version d’accès au site sans passer par une application. 

Nous vous donnons RDV à 9h15 le 1er Décembre à Lausanne, au palais de Beaulieu.

Du HTML aux microdata

Jusqu’à maintenant, les balises HTML classiques constituaient la seule base disponible afin de structurer l’information. Ainsi, les moteurs de recherche comprenaient qu’un titre était un titre et un paragraphe, un paragraphe. Seule une appréciation humaine pouvait alors déterminer la nature des informations constituant les pages indexées.

Les microdata vont plus loin dans la structuration sémantique. Ceux-ci s’appuient sur le HTML existant en enrichissant les balises de ce dernier d’attributs permettant de décrire l’information. Ainsi, par exemple, le prix d’un produit, sa description et ses propriétés sont marqués et compris comme tels par les moteurs de recherche. Ces derniers peuvent ainsi retourner l’information sous forme de « rich snippet » ou « affichage de résultat enrichi », facilitant de ce fait la navigation de l’utilisateur et l’accès à l’information.

A chaque besoin son microdata

Conscients des enjeux du web sémantique et de l’impact de celui-ci sur la qualité des services proposés, les 3 grands, Google, Bing et Yahoo, se sont mis d’accord  sur un standard de microdata appelé « schema ». On en recense aujourd’hui une centaine permettant de décrire une panoplie toujours plus fournie d’informations:

• « Product » permet de décrire un produit ainsi que ses propriétés
• « LocalBusiness » permet de décrire l’emplacement physique d’un commerce ou d’une société 
• « Event » permet de décrire un évènement 
• « Review » permet de décrire les avis utilisateurs
• « Recipe » permet de décrire une recette

Et cela va encore plus loin avec la notion de sous-catégories de microdata qui permet d’arriver à un niveau de granularité sémantique encore plus détaillé. Par exemple « LocalBusiness » est composé de sous-catégories de type « Library », « ShoppingCenter »,  « FinancialService » et bien d’autres.

Ils sont déjà parmi nous

Les microdata sont déjà exploités par les moteurs de recherche. Ainsi, par exemple, « Event » a été exploité par Google durant le Paléo Festival afin de lister les concerts à venir. De même, Google exploite « Recipe » afin de mettre en avant des résultats pertinents lors de la recherche de recettes de cuisine. Les exemples ne manquent pas et cette tendance ne va qu’en s’amplifiant. 

Référencement naturel et microdata

Finalement, quel est l’intérêt de « microdater » vos contenus ? En rendant vos contenus compréhensibles pour les moteurs de recherche, vous permettez à ces derniers d’afficher des résultats de recherche avancés sur la base de vos contenus, améliorant et favorisant ainsi votre visibilité et la création de liens profonds vers des pages de destinations plus ciblées.

Au final, vous facilitez la navigation des internautes en réduisant le nombre de clics et optimisez par la même occasion votre entonnoir de conversion.  De plus, vu que le rich snippet attire plus facilement l’œil de l’internaute, le nombre de clics sur celui-ci aura tendance à augmenter, améliorant du coup votre taux de clic (CTR) et donc votre positionnement. En effet, depuis la fameuse mise à jour de Google Panda, on sait que le CTR influence directement votre positionnement. Au final, une sorte de cercle vertueux se met en place.

Nos recommandations

Les microdata sont déjà bien exploités sur les moteurs de recherche aux Etats-Unis, en France et ne tarderont pas en Suisse. C’est donc une opportunité à saisir dès maintenant. Il convient cependant de ne pas se lancer tête baissée dans l’aventure au risque de vouloir « microdater » tous les contenus de votre site. 

Nous recommandons donc la mise en place ciblée de microdata « schema » en accord avec votre stratégie de référencement naturel (SEO). En effet, les synergies entre optimisations SEO et microdata sont multiples. Par exemple, le référencement géolocalisé est intimement lié au microdata « LocalBusiness », de même que les optimisations SEO E-commerce le sont avec le microdata « Product ».