joyride-tour-presentation-site

Joyride – créer un tour de présentation de votre site

Joyride est un plugin Jquery qui vous permet de réaliser un tour de présentation des fonctions de votre site, simplement et rapidement, à l’aide d’info bulle design.

De quoi mettre un peu plus d’interaction dans votre site, et amener l’utilisateur à découvrir les fonctionnalités de votre site.

Pour cela, ajouter les quelques scripts nécessaires à votre page :


/* Attacher la CSS */

/* jQuery */

/* le plugin jquery Joyride */

A chaque étape de votre visite, mettez simplement un attribut id avec un nom unique à l’élément HTML désiré :


Créer une liste ordonnée contenant chacune des étapes de votre visite guidée. Vous pouvez spécifier différentes choses:

  1. Joyride est un plugin permettant faire des présentations de fonctionnalités de site

  2. Description de la fonction 1.

  3. Description de la fonction 2.

  4. Dernière fonction

    Pour finir, une belle description mise en forme...

    Il est évidemment possible de mettre en forme les bulles en HTML/CSS

  1. Présentation

    WebJuice vous permet de découvrir de nouveaux outils, des infos pratiques et utiles pour développer vos compétences, votre communication sur internet

  2. Naviguer

    naviguer sur le site à l’aide du menu principal

  3. Nos Services

    Découvrez les prestations proposées par ACcréation, éditrice de ce blog

  4. Rechercher

    Rechercher un article sur un sujet donné à l’aide du formulaire dédié

  5. Echanger

    Suivez-nous sur les réseaux sociaux WebJuice et ACcréation, ou en vous inscrivant à la newsletter

  6. Commenter

    L’article vous plait ? Vous avez une question ? Laissez un commentaire ! ou contactez-nous

  7. Partager

    Nous souhaitez partager votre joie de nous lire mais ne savez pas comment ? N’hésitez plus !

Finalement, lancer le plugin au chargement de la page, en précisant éventuellement des paramètres facultatifs :


Et voilà, ça fonctionne !
N’est-ce pas ?

Lire la suite

google-plus-entreprise

Créer une page Google+ rapidement

Après plusieurs mois d’attente, les entreprises peuvent enfin créer leur page sur Google+ !

Entreprises, vous allez enfin pouvoir communiquer sur vos produits et services, comme vous le faites déjà sur Facebook.

Pour cela, rendez-vous à l’adresse plus.google.com/pages/create

Ensuite, suivez les instructions. C’est extrêmement simple !
Choisissez un nom, une adresse de site web, une catégorie, un logo, un slogan, et c’est parti !

Google vous propose enfin différentes choses pour promouvoir votre page, comme envoyer l’url à vos cercles, ajouter un badge Google+ sur votre site.

A noter toutefois :
Vous ne pourrez ajouter des personnes à vos cercles de page que si et seulement si ces personnes ont d’abord ajouté votre page à leurs cercles.
Google ne propose pas encore d’url très référençable comme peut le faire Facebook. Il faudra donc pour le moment se contenter d’un gros numéro de série.

N’hésitez pas à visiter la page G+ WebJuice  et l’ajouter à vos cercles.

Lire la suite

qr-code

Codes 2D gratuits pour vos publicités

Vous avez déjà dû voir l’un de ces codes barres en deux dimensions sur des affiches, magazines, flyers, ou même sur des sites à destination des mobiles.
A quoi servent-ils ?
C’est simple, à éviter de devoir taper de longues URL sur votre smartphone ! Prenez en photo ce code, et vous voilà sur le site internet ou l’application correspondant.

En pratique, il existe différentes normes de codes 2D.
La plus utilisée se nomme le QR Code, créé en 1994 par une filiale de Toyota. Son utilisation est maintenant une norme ISO, libre de droit (gratuite !) et permet d’encoder jusqu’à 4296 caractères alphanumériques, largement assez pour une simple adresse Web (l’utilisation la plus courante actuellement).

Le QR code (QR pour Quick Response) est un type de code-barres en deux dimensions (ou code matriciel datamatrix) constitué de modules noirs disposés dans un carré à fond blanc. QR veut dire en anglais Quick Response, car le contenu du code peut être décodé rapidement. Destiné à être lu par un lecteur de code-barres, un téléphone mobile, un smartphone, ou encore une webcam, il a l’avantage de pouvoir stocker plus d’informations qu’un code à barres, et surtout des données directement reconnues par des applications, permettant ainsi de déclencher facilement des actions comme :

  • naviguer vers un site internet, ou mettre l’adresse d’un site en marque-page ;
  • faire un paiement direct via son cellulaire (Europe et Asie principalement) ;
  • ajouter une carte de visite virtuelle (vCard, MeCard) dans les contacts, ou un événement (iCalendar) dans l’agenda électronique ;
  • déclencher un appel vers un numéro de téléphone ou envoyer un SMS ;
  • montrer un point géographique sur Google Maps ou Bing Maps ;
  • encoder un texte libre ;
  • etc.

(cf Wikipedia – QR Code)

Vous l’avez compris, de nombreuses utilisations sont possibles.
Parmi les plus courantes : permettre à l’internaute d’accéder à plus d’informations (sur un site mobile)

Le mobile (entendez principalement « le smartphone ») étant en plein boom, et son utilisation étant gratuite, ne vous privez pas de cette source de trafic non négligeable, et en pleine croissance.

N’hésitez pas à mettre un QR Code sur :

  • vos affiches publicitaires
  • vos flyers
  • vos menus
  • votre site (pour télécharger votre application iPhone, Android, … par exemple)

Pour les premiers cas, vous pourrez utiliser l’un des nombreux générateurs de QR Code disponibles en ligne, notamment l’excellent générateur du ZXing Project.

Pour votre site, vous pourrez préférer l’utilisation d’une bibliothèque dynamique, comme le plugin jQuery QR Code.

A vos téléphones, prêt, photographiez !

Lire la suite

coming-soon-page

Coming Soon Pages efficaces

Vous allez « bientôt » lancer votre site, dans quelques semaines ou mois.
Le nom de domaine est réservé et vous n’attendez plus que la mise en ligne officielle pour communiquer efficacement.
N’attendez pas. Une coming soon page (page d’attente ou page de maintenance) peut être mise en ligne dès maintenant, et vous permettre de vous faire connaitre, de donner envie à l’internaute de revenir, voir de l’informer le jour du lancement, et de voir arriver vos premiers clients dès la mise en ligne.
Pour cela, voyons les principales composantes d’une bonne page d’attente.

Premièrement, la page doit être agréable à regarder. Évitez les « site en construction » et les logos représentant une barrière, un casque de chantier, …

 

La page d’attente doit donner envie, susciter la curiosité. Pour cela, son identité doit être forte, comme le sera votre site.
Mettez votre logo sur la page, et utilisez les couleurs et le style qu’aura votre site à son lancement.
Cette page d’attente, tout comme votre site, représente votre société, en l’attente  du site final.

 

La page d’attente doit également vous permettre de vous faire connaitre, de faire le buzz.
Utilisez donc les réseaux sociaux les plus adaptés à votre activité pour permettre aux internautes de vous suivre et de s’intéresser à vous : Twitter et Facebook maintenant indispensables, Flickr ou DeviantArt pour les artistes, MySpace pour les musiciens, …
Bien sûr, ces réseaux devront être alimentés régulièrement pour maintenir le suspense, l’attention, et donner envie aux internautes de relayer l’information.

 

En plus des réseaux sociaux, n’hésitez pas à intégrer un formulaire d’inscription à une newsletter.
Cela vous permettra d’informer tous les intéressés lors du lancement du site.
C’est aussi un moyen efficace de pousser de l’information régulièrement, si votre site nécessite un temps de développement long.

Pour aller encore plus loin, pourquoi ne pas mettre un petit formulaire de contact?

Après tout, ce n’est pas parce que votre site n’est pas en ligne que votre entreprise ne peut pas travailler !

 

Pensez également référencement !

Les moteurs de recherche (notamment Google) prennent en compte l’ancienneté d’un nom de domaine, son contenu, ses liens.
Donc faire du buzz est très intéressant pour générer des liens vers votre nom de domaine.
Mais pensez à mettre un peu de contenu textuel. Disons idéalement 200 mots (ou au moins 50) présentant votre entreprise, ses produits/services.
Votre texte doit contenir les expressions ou mots-clés sur lesquels vous souhaitez être trouvé.

 

Donnez envie de revenir régulièrement !
Donnez une date de mise en ligne précise (avec un compte-à-rebours) ou approximative, annoncez des évènements afin de donner envie à l’internaute de revenir voir votre site.

 

Pour résumer, votre page d’attente doit contenir dans l’idéal :

  • Un design attrayant
  • Les coordonnées de votre entreprise, avec une description optimisée pour les moteurs de recherche
  • Un formulaire de contact et d’inscription à une newsletter
  • Des liens vers vos réseaux sociaux pour vous suivre

Avec tout cela, vous devriez très rapidement voir les premiers visiteurs et clients sur votre site dès sa mise en ligne !
Voilà pourquoi ACcréation travaille sur cette page, qui bien que temporaire, a toute son importance.

 

Lire la suite

design-adaptatif

Trucs et astuces pour un design adaptatif (responsive design)

Le design adaptatif, ou responsive design, très à la mode depuis l’émergence du mobile, est l’art de faire s’adapter un site à la taille de l’écran l’affichant.

En d’autres termes, naviguez sur un même site depuis votre PC ou depuis votre tablette tactile ou votre mobile, le site sera toujours lisible (sans défilement intempestif), et beau, mais il se présentera différemment.
Par exemple, les colonnes de droite s’afficheront en dessous sur un petit écran, voir pas du tout, ou sous une forme différente afin de simplifier la lecture ou la navigation.

Alors quelles sont les bonnes pratiques pour avoir un site adaptatif ?

  • Approche « Mobile first » afin de vous concentrer sur l’essentiel de votre communication, et adapter ensuite le site pour afficher plus de choses pour les écrans le permettant.
  • Utilisez les @media CSS pour adapter la présentation de la page à la taille de l’écran.
  • Utilisez les librairies Javascript comme Respond.js ou CSS3 Media Queries afin d’apporter la prise en charge des @media aux navigateurs ne les comprenant pas par défaut.
  • Utilisez des « fluid layouts », ou zones adaptatives et relatives, afin de s’adapter à l’écran. Ne faites pas une CSS pour les iPhone, une pour les tablettes, …, car demain (et déjà hier) un écran avec des dimensions intermédiaires sortira.
  • Faites votre design en fonction de votre contenu. Les frameworks CSS sont à la mode, et utiles dans certains cas, mais font rarement l’affaire pour un site sur-mesure. Ne les laissez pas mettre votre créativité dans des cases.
  • Adaptez la taille de vos images à la taille des écrans avec img { max-width: 100%; }. Cela permet de gérer l’affichage, mais télécharge toujours un fichier unique (en général, le fichier en taille réelle). Pour pallier ce problème, essayer avec un script comme Responsive Images afin de télécharger l’image de la taille correspondant à celle de l’écran.
  • Utilisez le lazy loading pour vos images. Un petite librairie Javascript qui permet de ne télécharger les images que lorsque l’internaute aura fait suffisamment défiler la page pour que l’image se trouve dans la zone visible. On peut citer le très bon plugin jQuery Lazy Load.
  • Oubliez la perfection (mais essayez de l’atteindre). Il y aura toujours des personnes avec de très vieux navigateurs, ou Javascript désactivé. Faites en sorte que l’affichage de votre design dans ces conditions soit correct, que le site reste beau et utilisable, même si tout ne sera pas parfait (le site aura par exemple des images haute résolution alors que l’écran de l’internaute n’est pas très grand).

Cette façon de concevoir est récente, mais s’avère de plus en plus nécessaire, compte-tenu des périphériques variés ayant accès à internet (PC fixes, portables, tablettes, mobiles, télévision).
Suivre ces recommandations demande du temps et de la réflexion pour obtenir un site joli, bien fait, utilisé et utilisable, mais c’est important, et vous les connaissez maintenant, alors comme on dit, y’a plus qu’à.

Lire la suite

faire-le-buzz

Comment faire du buzz avec un budget sur mesure

Faire parler de soi sur internet peut coûter cher, très cher.
Création de sites évènementiels, jeux en ligne, opérations virales, spots interactifs …, créés par des professionnels de la communication peut coûter plusieurs dizaines de milliers d’euros, voir centaines !

Mais le ticket d’entrée peut être de quelques centaines d’euros !
Pour cela, il vous faudra une bonne imagination, ou faire appel à une société spécialisée.

Retrouvez dans ce dossier spécial « L’Entreprise », comment faire du buzz autour de votre marque selon votre budget, et en évitant les pièges de la communication virale.

Lire la suite

geoplugin-geolocaliser-internautes

geoPlugin – géolocalisez vos visiteurs sans rien installer

En temps normal, afin de localiser un internaute (à partir de son adresse IP), vous devez passer par une librairie serveur s’appuyant souvent sur Maxmind, une base de données gratuite et fiable, mais que vous devez installer sur votre serveur.

Vous pourrez maintenant utiliser GeoPlugin, une librairie Javascript qui vous permettra d’afficher sur votre site la ville, la région, le pays, les coordonnées GPS, … de vos internautes.
Cette librairie fait appel à un webservice (via Ajax) et ne nécessite donc aucune installation sur votre serveur.

Quelques lignes suffisent à sa mise en place :



Cerise sur le gâteau pour ceux qui auraient besoin d’autres technologies.
Vous pouvez obtenir le retour du webservice en JSON, en XML ou en tableau PHP sérialisé.
Et deuxième cerise, la librairie dispose également d’un convertisseur de devises.

Lire la suite

fitvids-responsive-design-video

Responsive-webdesign : vos vidéos s’adaptent à votre taille d’écran

Le responsive-design est décidément dans l’ère du temps, avec l’explosion du mobile et autres tablettes, et la multiplication des tailles d’écrans.

Grâce à la librairie fitvids.js, vos vidéos youtube, viméo, … s’adaptent automatiquement à la taille de votre navigateur.

Même en pleine lecture, vous pouvez redimensionner votre navigateur (et donc votre vidéo) sans coupure !

Niveau intégration, comme toujours avec jQuery, rien de plus simple :

$(document).ready(function(){
$("#mavideo").fitVids();
});

Lire la suite

taille-de-police-web-rem

Fini la galère des tailles de police

Déterminer l’unité à utiliser pour vos polices (font) a toujours été un problème délicat, avec des avantages et inconvénients dans chaque cas.

Pour rappel, il existait jusqu’à maintenant deux principales unités dans le web :

  • l’unité absolue (pixel alias px)
  • l’unité relative (alias em)

Taille de police en px

Depuis le début du web, l’unité pixel est utilisée pour spécifier les tailles d’objets, et notamment les tailles de polices.

L’avantage de cette unité est que l’on sait exactement à quoi elle correspond.

L’inconvénient est qu’en l’utilisant, on perd une faculté importante, celle de pouvoir redimensionner le texte. Et il n’est pas possible de grossir la taille du texte avec cette unité, même sur des navigateurs récents.
Il existe toutefois une fonction zoom sur certains navigateurs (qui grossit tout, et pas seulement le texte), ce qui peut déjà  être un petit palliatif.

Taille de police en em

L’unité em parue il y a déjà plusieurs années parait donc être la solution absolue (enfin relative…).

Cette unité permet après définition de la taille de texte par défaut, de définir la taille du texte d’un bloc (une div par exemple) relativement à la taille du texte du bloc parent.

Par exemple:


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */

L’avantage de cette unité est sa notion d’unité relative, ce qui permet en changeant la taille du texte de base, de changer la taille de l’ensemble des textes du site.
Le navigateur peut ainsi en changeant sa taille de base, grossir l’ensemble des textes de la page, tout en gardant les différences entre les différents textes (le titre en plus gros, le copyright en plus petit, …).
L’inconvénient est que cette notion de relative est dépendante du bloc parent.
Dans l’exemple ci-dessus, si notre balise « a » est dans le body, elle aura une taille de 14 pixels, mais si notre « a » se trouve dans une balise « p », elle aura une taille de 20px (soit 14px * 1.4).
D’où un gros problème de design potentiel, obligeant à créer des styles pour les éléments enfants à 1em.

Par exemple :


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */
p a { font-size: 1em; } /* =14px */

C’est pénible !
La solution arrive avec CSS3 et l’unité rem.

Taille de police en rem

Cette unité, qui veut dire « root em », au lieu d’être relative à son parent direct, est relative à la racine du HTML, c’est à dire à la balise html.
En reprenant nos styles, cela donnerait donc :


html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
p { font-size: 1.4rem; } /* =14px */
a { font-size: 1.4rem; } /* =14px */

Noter qu’il n’y a plus de « ? » pour notre balise « a », car on est maintenant sûr de la taille de notre lien.
Elle est pas belle la vie ?
D’autant que le support de cette unité est plutôt correct : Safari 5, Chrome, Firefox 3.6+, et même Internet Explorer 9 !

Vous me direz, d’accord, mais pour les autres (IE6 à 8, Opéra, …) ?
Et bien, le mieux est de définir deux unités :

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
p { font-size: 14px; font-size: 1.4rem; } /* =14px */
a { font-size: 14px; font-size: 1.4rem; } /* =14px */

Vous savez maintenant comment avoir une belle taille de police, homogène dans tous les navigateurs.

Source : Snook.ca

Lire la suite