Creabilis signe le site e-commerce de l’artisan chocolatier Thierry Aimé

Fait rare : notre client Thierry Aimé nous a laissé carte blanche pour la réalisation de sa boutique en ligne. Nous avons pris une direction artistique centrée sur les qualités gourmandes et esthétiques de ces produits premium : chocolats en coffret, tablettes mais aussi pâtisseries.

Nous avons démarré le projet par la séance de prises de vue réalisée en interne : 800 photos et 60 vidéos.
Ce matériel nous a permis de concevoir un web design épuré, sans artifice, dont l’unique objectif est mettre en scène le Produit, de susciter la gourmandise et l’envie de déguster.

Il a fallu concilier les contraintes e-commerce en considérant les différents parcours d’achat en fonction de la nature des produits recherchés et expérience du consommateur, tout en préservant l’univers propre à cet artisan.

Il en résulte un site tout en finesse et en élégance ou l’immersion est permanente. La part belle est donnée à la photo pour un site full page, tout est fait pour donner envie :

  • Vidéo immersive de présentation des différents produits.
  • Des photos de grandes dimensions.
  • Nombreuses galerie photos défilantes.
  • Un design différent sur chaque univers produit : tablettes, chocolats, pâtisseries et gourmandises pour des parcours d’achat spécifiques

La vidéo YouTube de démo avec interview :


Côté technique, le site est basé sur un socle Prestashop 1.7 avec un layout en responsive design et de nombreuses animations css.

L’équipe Creabilis s’est donnée à fond pour monter un site élégant, moderne, et gourmand.

Un Grand Merci à Thierry Aimé qui nous a transmis avec cœur et sympathie sa passion du chocolat.

Rendez-vous sur le site : https://www.thierry-aime-chocolatier.com

         

 

A propos de Thierry Aimé :

Cuisinier de formation, Thierry Aimé découvre en 2000 la pâtisserie confiserie et le travail du chocolat pour lequel il se passionne, après une première boutique sur Toulouse, il s’installe en 2014 à Lavaur dans le Tarn.
Élaborant lui-même ses produits à partir de matières premières nobles, il vous garantit des produits artisanaux 100 % pur beurre de cacao et aux saveurs uniques.

A propos de Creabilis :

Agence Web Toulousaine : Creabilis est spécialisé dans la réalisation de sites e-commerce. Nos métiers : web design, intégration, développement, référencement et web marketing.

https://www.creabilis.com/

Partager :

Comment améliorer les performances d’un site Internet ?

Voici quelques tips que nous mettons régulièrement en œuvre chez Creabilis pour optimiser les performances d’un site Internet, que ce soit un site internet de vente en ligne, un site vitrine, corporate ou un blog, mais également un site mobile, ou le back end d’une application mobile.

Le cache de page

L’exécution des lignes de code php, la connexion à la base de données (mysql ou autre) et l’exécution des requêtes sql prennent du temps processeur et de la mémoire serveur Le fonctionnement d’un cache de page est le suivant :

  • Lors du premier appel le serveur « génère la page » une première fois en exécutant le php, les requêtes  sql, les appels fichiers, …
  • Le système de cache capture la page html résultat et la stocke sur disque.
  • Pendant la durée de vie du cache (à ajuster en fonction de la fréquence de changement) le système de cache sert la page « statique » aux internautes réduisant drastiquement la charge serveur et le temps de réponse.

Nous avons pu constater sur certaines pages un temps de réponse divisé par 50 ! Nous réglons en général la durée de vie des pages entre 12H et 3 jours.

Le seul inconvénient : le e-marchand doit prendre en compte ce composant et vider le cache des pages concernées s’il souhaite que l’actualisation soit immédiate.

Bien entendu, les pages dynamiques par essence (caddie, disponibilité de produit, formulaire de contact) ne seront pas mises en cache.

Techniquement, le système de cache dépend du cms que vous utilisez, voici nos recommandations :

Compression gzip

La compression gzip des données lors du transfert http permet de réduire la quantité de données transférée pour les éléments de type texte : pages html, css, javascript, web fonts, …

La compression réduit d’environ 50 à 60% le poids et donc le temps de téléchargement.

Elle n’a pas contre aucun impact sur les images car elles sont déjà compressées : jpeg, png, gif.

Pour le mettre en place, on utilise le module apache mod_deflate via la directive AddOutputFilterByType, exemple :

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Pour vérifier que la compression fonctionne, il suffit de vérifier la présente du header Content-Encoding:gzip dans la réponse http.

Minify javascript et css

Cette technique côté serveur permet de combiner plusieurs fichiers javascript et CSS en un seul, limitant le nombre de requêtes HTTP nécessaires.  Minify supprime également les caractères non indispensables comme les espaces et les sauts de lignes mais également les commentaires. Minify peut également réécrire les variables pour les raccourcir.

Le fichier généré est beaucoup plus petit que l’original.

Nous utilisons le projet Minify en php5 https://code.google.com/p/minify/

Soigner le cache navigateur

Le cache navigateur (Internet explorer, Chrome, Safari, Firefox) n’est pas forcément un ennemi 😉 Il peut être très utile pour accélérer le chargement des pages d’un site internet complet : la seconde page visitée comporte généralement une bonne partie d’éléments déjà chargés : logo, image de fond, css, icones, javascripts, webfonts .

Pour cela, il convient de le soigner et de lui indiquer les durées de vie des différents éléments du site et donc le « forçer » à mettre en page ces éléments :

  • Les pages html : durée de vie courte, voir nulle pour les pages dynamiques php non mise en cache.
  • Les images : durée de vie longue
  • Les css et javascripts : durée de vie longue

Pour cela, le module apache mod_expires permet de le définir facilement :

ExpiresByType text/html                 « access plus 0 seconds »
ExpiresByType image/jpeg                « access plus 1 week »
ExpiresByType text/css                  « access plus 1 week »

Mettre en œuvre un CDN ou Content Delivery Network

Cette technique un peu pointue consiste à déporter les ressources statiques (images, css, javascript, web fonts) sur un domaine différent (ou un sous-domaine différent) qui peut être sur le même serveur web ou (encore mieux) sur un second serveur.

Plusieurs avantages :

  • Les navigateurs sont limités à X téléchargements simultanés par nom de domaine (HTTP 1.1 limité à 2 connexions et HTTP 1.0 limité à 4 connexions), en multipliant les noms de domaines (sans abuser) vous augmentez le nombre de téléchargements en parallèle.
  • Ce second domaine n’ayant pas à lancer le module php (5 à 10Mo par processus) il est plus léger.
  • Les cookies et en particulier les cookies de session ne transitent plus inutilement : gain de bande passante mais également de ressource serveur qui n’a pas à monter en mémoire les données de session.
Attention à ne pas provoquer de surchauffe si les différents noms de domaine sont sur le même serveur physique : à ajuster donc finement.
Exemple à découvrir chez Label Art ou les images sont sur http://img.label-art.fr/

Images gérées en Sprites CSS

Plusieurs images (en général les icones du site) sont regroupées dans une seule image et sont par la suite découpées et ajustées en css.

Cela permet de réduire le nombre d’images à charger et donc de gagner sur la latente nécessaire à chaque connexion http. Cela allège également le nombre de processus serveur.

Exemple avec cette image sur le site internet stores et moustiquaires :

Pour finir

Il est possible de mesurer le niveau de performance d’un site via l’excellent service GT Metrix : http://gtmetrix.com/

Il combine les outils de Yahoo (Yslow) et de Google (Page speed).

L’ensemble de ces optimisations permettent d’augmenter drastiquement le nombre de visiteurs simultanés de votre site internet, mais également de réduire leur temps d’attente. Souvenez vous qu’un internaute lambda n’attends généralement pas plus de 4 secondes avant de décider de … changer de site, s’il est trop long.

JF

Partager :

Comment récupérer les vidéos d’une chaîne YouTube sur son site avec l’API YouTube Data

L’un de nos clients alimente régulièreYoutubement sa chaîne Youtube, ll était donc donc temps d’automatiser la récupération en php de l’ensemble des vidéos sur le site web tout en conservant la présentation.

Nous avons pour cela utilisé la YouTube Data API : une API qui crache du JSON :(structure de données javascript) https://developers.google.com/youtube/v3/?hl=fr

Côté php, google propose en beta la Google API Client Library for PHP https://developers.google.com/api-client-library/php/?hl=fr
Il s’agit d’une librairie assez peu documenté permettant d’accéder à l’ensemble des API google et pas uniquement à Youtube.

Les outils sont choisis, maintenant la mise en musique en 4 mouvements :

1) Etape 1 : le flux de vidéos est public, donc pas besoin d’authentification OAuth 2.0, il suffit d’utiliser une clé publique sur https://console.developers.google.com
Cette clé permet à google de comptabiliser les accès et mettre en oeuvre les quotas.
L’api youtube est limitée, en offre gratuite à 50 000 000 unités/jour et à 3 000 requêtes par seconde.

2) Etape 2 : utilisation de l’API Google Google_Client et déclaration de la clé publique :

$client = new Google_Client();
$client->setDeveloperKey('maclé');

3) Etape 3 : utilisation de l’api youtube pour récuperer les vidéos de la playlist « uploads »

$youtube = new Google_Service_YouTube($client);
$m = $youtube->playlistItems->listPlaylistItems('snippet', array('playlistId'=>'id du channel youtube upload', 'maxResults'=>50));

4) Parcours et affichage des vidéos

$videos = $m->getItems();
if ($videos) foreach($videos as $video) {
echo $video->snippet['title'];
...
}

Afin d’éviter d’appeler à nouveau l’api à chaque chargement de page, nous avons utiliser notre mécanisme de cache de page.

Pour voir le résultat sur Label Art : http://www.label-art.fr/cmt-videos

Partager :

Comment éviter d’être considéré comme spammeur


logo_altospamNous vous proposons un article de notre partenaire AltoSpam proposant un service innovant de passerelle anti-spam et serveur de messagerie sortant.

Régulièrement, nos clients nous demandent comment faire pour que les e-mails soient correctement interprétés par les anti-spams. Dans cet article, nous allons vous présenter les règles à respecter pour éviter d’être considéré comme un spammeur, notamment lors de la réalisation de vos newsletters et campagnes d’e-mailing. Ces règles sont classées en deux catégories : celles applicables au mail proprement dit et celles liées au serveur de messagerie. Dans cette liste, les recommandations spécifiques à l’emailing et aux newsletters seront suivies du caractère « * ».

1) En ce qui concerne le mail :
– Ecrivez le plus simplement possible sans caractères trop originaux. Evitez notamment de remplacer des lettres par des équivalents visuels par exemple « ! » pour « i » ou « / » pour « v ».
– Utilisez une adresse email spécifique pour l’émission des emailings et si possible diffusez sur un domaine différent du domaine habituel *
– L’adresse email utilisée pour envoyer des emails doit pouvoir recevoir des réponses et le nom de domaine doit vous appartenir. Surtout n’usurper pas l’identité d’un tiers.
– Utilisez impérativement pour vos emailings une base d’adresses de destinataires qualifiée (c’est le plus important), si par hasard une des adresses email de votre liste correspond à un spamtrap, vous vous retrouveriez immédiatement blacklisté. *
– Utilisez un codage HTML correct, surtout dans les newsletters (ne faites surtout pas du copier/coller de Word) *
–  Évitez la présence de fortes sommes d’argent dans le contenu du mail, ou les chiffres importants assimilables à de grosses sommes d’argent.
– Evitez d’intégrer dans votre email de longues URL ou des URL trop compliquées contenant des caractères spéciaux ou un trop grand nombre de consonnes successives, par exemple.
– Evitez les signatures de mail comportant des imagettes,
– Evitez trop de majuscules dans le sujet du message (ne pas mettre tout le sujet en majuscules),
– N’utilisez pas de liens non symétriques (Anchor  != URL) tel le nom du lien qui ne correspondrait pas à son pointeur (par exemple en html les codes de ce type :  <a href=http://www.toto.com>http://www.tata.com</a> ).

2) En ce qui concerne le Serveur de messagerie :
– Le serveur de messagerie doit impérativement être entièrement nommé (FQDN). Il ne doit pas s’appeler « mail » mais: « mail.domaine.com ».
– Assurez-vous que votre adresse IP pointe bien sur votre serveur de messagerie au sens Reverse DNS.  (Pour vérifier cela, faites simplement un « ping -a » sur votre adresse IP).
– La correspondance entre reverse IP et nom FQDN du serveur est la configuration idéale.
– Configurez sur le domaine utilisé pour l’expédition les IP autorisées à envoyer des emails dans les champs SPF
– Evitez d’utiliser une connexion internet de type : adsl particulier (free, sfr, orange,… ) pour votre serveur de mails. Toutes ces adresses sont dites DUL et sont systématiquement blacklistées.
– N’utilisez pas la même IP publique pour l’envoi des mailings que celle de  votre serveur de mails (afin d’éviter de bloquer sa messagerie à cause d’un emailing irresponsable) *
– Respectez la RFC 2369 qui normalise des champs d’en-tête afin de faciliter la gestion de newsletters. Ajoutez notamment les champs : « List-Unsubscribe: » et « List-Owner: » dans vos newletters. *

Si vous n’êtes pas en mesure de respecter toutes ces règles, notamment au niveau de la configuration de votre serveur de messagerie, vous pouvez aussi utiliser un relais SMTP sortant pour expédier vos emails. Pour information, ALTOSPAM propose ce type de services sous forme d’option : ALTOSPAM MailOut, qui de plus, vous assure de ne pas être vecteur de virus en contrôlant tous les messages émis par trois antivirus.

Merci à Stéphane pour cet excellent article. Référence de l’article : http://www.altospam.com/actualite/2008/10/eviter-detre-considere-comme-spammeur/ par

En complément, nous recommandons cet article du capitaine commerce : « ecommerce : Les 11 facteurs impactant la Délivrabilité »

http://www.capitaine-commerce.com/2013/02/12/33286-les-11-facteurs-impactant-la-delivrabilite/

Partager :