Il y a moins de 6 mois, Google testait le nouveau format de pages AMP et ajoutait la section Top Stories à ses résultats. Bientôt, elles se retrouveront partout dans les résultats.

Bref aperçu des AMP

Les pages AMP sont une initiative de Google qui souhaite fournir une meilleure expérience utilisateur aux mobinautes.

Pour y parvenir, les développeurs doivent créer une version plus légère des pages web. Ils assurent ainsi un chargement plus rapide du contenu statique. En gros, les pages chargent en moins d’une seconde !

Les pages AMP utilise le AMP HTML, le AMP JS et le Google AMP Cache. La méthode pour créer des pages AMP se retrouve sur ampproject.org.

Cette nouveauté a d’abord touché les sites de nouvelles. Ils ont ainsi pu publier du contenu pouvant être chargé beaucoup plus rapidement pour la lecture.

On a rapidement vu apparaître le carrousel des Top Stories dans le haut des résultats de Google sur mobile. Ce carrousel présente des nouvelles disponibles en format AMP. Elles ont aussi pris d’assaut les résultats de Google News.

Les AMP, la nouvelle norme pour les résultats de recherche mobiles ?

Il y a un mois, eBay adaptait ses pages au format AMP. Ce fut un changement majeur dans l’adoption de ce nouveau format qui laissait déjà présager plus du côté de Google.

Le 2 août 2016, Google a annoncé que les pages AMP ne seront plus réservées aux nouvelles. Elles seront disponibles dans les résultats de recherche sur mobile.

Elles seront reconnaissables grâce au subtil logo.

Il est possible d’avoir un aperçu des résultats sur le site démo pour mobile http://g.co/ampdemo.

Les publicités seront aussi chargées au format AMP

Une difficulté rencontrée par les sites de presse utilisant les nouvelles pages AMP était la lenteur de chargement des annonces d’où proviennent leurs revenus.

En effet, la page AMP chargeant plus vite que les annonces, les internautes passaient sans les visualiser, surtout celles se trouvant dans le haut des pages.

Paul Muret, VP des produits Display, vidéos et Analytics, a annoncé que le format AMP serait disponible pour les annonces. Le format d’annonces a4a permet d’améliorer grandement leur vitesse de chargement.

AMP et SEO

Google a bien spécifié que l’utilisation de pages AMP ne permet pas d’avoir une meilleure position dans les résultats. Le site démo proposé par Google permet de comparer les résultats sur ordinateur et mobile. Le classement ne semble pas être affecté par ce changement.

Toutefois, rappelez-vous que la vitesse de chargement est un critère SEO. Revoyez comment améliorer la vitesse de chargement de votre site.

De plus, le logo sera peut-être un nouveau gage de qualité pour les lecteurs sur mobile qui engendrera plus de clics.

En effet, les pages AMP répondent à trois principes importants en SEO que Google met régulièrement de l’avant, soit une bonne vitesse de chargement, une bonne expérience utilisateur et un site mobile. Ainsi, il est vrai qu’un site ayant déjà optimisé ces trois éléments ne verra pas de changement à son classement. Il pourrait toutefois être une bonne alternative pour les sites qui doivent retravailler ces éléments.

Quel est votre opinion sur l’impact des pages AMP sur le SEO ?

Cet article Les pages AMP à venir dans les résultats ! est apparu en premier sur Affluences.

Les pages d’atterrissage sont souvent conçues pour générer des clics et obtenir des formulaires complétés. Néanmoins, dans plusieurs domaines, les clients seront plus enclins à appeler qu’à compléter une action en ligne.

Si vous croyez que vos clients seraient plus portés à appeler qu’à effectuer une action en ligne, Search Engine Journal a rédigé des conseils pertinents.

Voici les points qui nous paraissent plus importants pour optimiser la page d’atterrissage et obtenir plus d’appels.

1. Cliquer pour appeler : l’utilisation de boutons ou de liens

Lorsque vous effectuez n’importe quelle campagne en ligne, rappelez-vous de simplifier la vie des utilisateurs au maximum.

Plus une action demande un effort, moins un internaute sera enclin à l’effectuer. C’est pourquoi les liens menant directement à un appel sont si utiles.

Certains navigateurs reconnaitront les numéros de téléphone et les rendront cliquables, mais ce n’est pas toujours le cas. Assurez-vous d’utiliser un lien comme celui-ci en incluant l’indicatif du pays :

<a href=”tel :+1-418-684-8881″> 418-684-8881</a>

Vous pouvez même indiquer votre numéro de téléphone sur un bouton pour le rendre plus apparent et inciter les gens à cliquer.

2. Un appel à l’action clair

Comme pour toute page d’atterrissage, un appel à l’action clair est nécessaire pour indiquer au client l’action suivante à prendre. Ainsi, dites-leur de vous contacter ! Dites-leur même ce qu’ils obtiendront en vous contactant !

Par exemple :

Appelez-nous pour obtenir un prix!

OU

Vous avez des questions ? Appelez-nous pour obtenir des réponses en discutant avec nos spécialistes!

Indiquez ensuite le numéro de téléphone incluant un lien pour faciliter l’appel.

Trouver le bon appel à l’action qui maximisera les conversions demande d’effectuer des tests A/B et comparer l’efficacité des différentes options.

N’oubliez pas que votre page devrait être aussi adaptée aux mobiles. Ne la surchargez donc pas puisque l’écran sera beaucoup plus petit. L’appel à l’action devrait toujours apparaître au dessus de la ligne de flottaison, même sur un cellulaire !

3. Une extension de rappel

Les internautes ne seront peut-être pas prêts à appeler immédiatement.

Dans ce cas, un formulaire très léger incluant un seul champ à remplir (le numéro de téléphone à rappeler) peut fonctionner. Il pourrait même permettre de faire un suivi des résultats d’une campagne.

Par contre, si vous proposez un service qui demande une assistance immédiate, comme un service de taxi, cette option n’est pas adaptée ! Pensez bien au processus qui mène vos clients à vous contacter. Vous appellent-ils quand ils ont besoin de vous immédiatement ou cherchent-ils à accumuler de l’information pour un processus de décision ?
Crédit photo : iStock Photo

Cet article 3 façons d’optimiser les pages d’atterrissage pour les appels est apparu en premier sur Affluences.

La vitesse de chargement d’une page figure parmi les éléments importants à considérer pour améliorer le SEO d’un site web.

Heureusement, Google fournit des directives claires sur les points considérés pour évaluer la vitesse de chargement d’une page web.

L’outil de départ est évidemment le PageSpeed Insights. Entrez votre URL et Google calculera la vitesse de chargement pour mobile et pour ordinateur.

Voici donc brièvement les éléments à considérer pour s’assurer d’une bonne vitesse de chargement.

Optimiser le poids des images

Une image peut être très lourde et augmentez le temps de chargement d’une page. Pour améliorer cet élément, deux choses peuvent être effectuées :

• Diminuer le format de l’image au minimum nécessaire. Sur un site web, il est rarement nécessaire que l’image dépasse 1680 pixels de large. Réduisez donc le format immédiatement au lieu de le modifier à l’aide du code HTML ou CSS de votre page.
• Compresser l’image pour diminuer le poids sans altérer la qualité de l’image un peu comme vous utilisez des fichiers zippés pour les envois plus légers. Pour y arriver, utilisez des outils comme Compressor.io et TinyPNG.

Réduire la taille des fichiers HTML, CSS et JavaScript

Tout comme pour les images, les fichiers de code peuvent être alourdis d’information non pertinente, correspondant principalement à des espaces et des caractères inutiles. Il faut donc les retirer pour diminuer le poids de la page.

Google propose de télécharger les fichiers déjà optimisés. Sinon, plusieurs solutions existent. Pour WordPress par exemple, il existe l’extension Autoptimize.

Exploiter la mise en cache des ressources dans le navigateur

La mise en cache, c’est un peu comme une sauvegarde temporaire que le navigateur effectue de votre site web pour éviter de devoir le charger entièrement à chaque fois que l’utilisateur le visite.

Pour les ressources statiques, la durée devrait être d’une semaine minimum; pour les annonces et widgets, un jour. Voici de l’aide pour en savoir plus sur la mise en cache.

Autoriser la compression

Encore une fois, on peut réduire la taille des ressources. Il faut en fait permettre la compression GZIP pour le serveur. Lorsqu’un utilisateur visite votre page, il chargera une version compressée de la page provenant de votre serveur, ce qui sera plus rapide.

Réduire le temps de réponse du serveur

Évidemment, le serveur doit répondre rapidement pour envoyer les ressources nécessaires. Si cet élément cause problème, voici quelques conseils de Google.

Afficher en priorité le contenu visible

Il faut éliminer les codes qui empêchent l’affichage rapide du contenu au-dessus de la ligne de flottaison.

Cet aspect plus technique nécessite évidemment des connaissances plus poussées. Néanmoins, le principe est simple. La ligne de flottaison est la limite de ce qui s’affichera à l’écran lors du chargement de la page. Ainsi, c’est ce que l’utilisateur pourra consulter sans utiliser la barre de défilement. Cette partie visible au dessus de la ligne de flottaison doit se charger en priorité.

L’utilisation de certains scripts et CSS peuvent retarder l’affichage du contenu. Il faut limiter leur utilisation pour le contenu figurant dans la partie du haut de la page.

Même si Google n’obtient pas la note de 100% sur son propre test, sachez qu’il est possible de le réaliser. Un article de Moz explique comment il a été possible d’atteindre le score parfait !

Ainsi, sans viser la perfection, veillez à ce que votre score reste acceptable pour Google afin que celui-ci ne pénalise pas vos efforts de référencement.

Cet article Comment améliorer la vitesse de chargement de votre site pour Google est apparu en premier sur Affluences.

Suite à cette aventure notre équipe a décidé de produire un guide explicatif pour sécuriser les installations de WordPress et de vous la partager. Nous avons basé notre travail sur ce guide de sécurité WordPress en anglais et avons gardé les conseils les plus simples à implanter.

Conseils classiques

Voici la liste des conseils que à rappeler pour avoir bonne conscience 😉 : tenez à jour votre plateforme et vos extensions, sauvegardez fréquemment, n’installez que les thèmes et extensions nécessaires et effacez ceux que vous n’utilisez pas.

Protection contre la brute force

Les attaques “brute force” sont une technique qui vise à essayer des combinaisons d’informations de connexion jusqu’à ce que l’attaquant puisse se connecter.

Renommez le compte Administrateur

Évidement le nom d’utilisateur ‘admin’ est celui que l’attaquant essaiera en premier. Voici un script SQL pour le modifier. Changez UTILISATEUR et MOT_DE_PASSE pour les informations de connexion désirées et voilà!

UPDATE `wp_secure`.`wp_users`
SET `user_login` = 'UTILISATEUR',
`user_pass` = MD5( 'MOT_DE_PASSE' ) ,
`user_nicename` = 'UTILISATEUR'
WHERE `wp_users`.`ID` =1;

Limitez les tentatives de connexion

Bien que certaines extensions ajoutent des vulnérabilités à votre installation celle-ci vous offrira une protection supplémentaire : Limit Login Attempts

L’extension bloque automatiquement les tentatives de connexion abusives et prend en note les événements liés à celles-ci.

Ajustements à la configuration

Voici quelques ajustements à la configuration de votre installation qui doivent être effectués.

Ajout des clés de sécurités

Le fichier wp-config.php comprend une section ou vous devez ajouter des clés de sécurité. Vous trouverez le code suivant :

define('AUTH_KEY', '');
define('SECURE_AUTH_KEY', '');
define('LOGGED_IN_KEY', '');
define('NONCE_KEY', '');
define('AUTH_SALT', '');
define('SECURE_AUTH_SALT', '');
define('LOGGED_IN_SALT', '');
define('NONCE_SALT', '');

Vous pouvez générer les clés avec l’outil officiel de WordPress.

Désactiver les inscriptions publiques

Par défaut WordPress permet à n’importe qui de créer un compte sur votre site et cela peut être utilisé pour compromettre votre site.

Dans le Tableau de bord -> Réglages -> Général il y une option “Inscription – Tout le monde peut s’enregistrer”. Décochez-la.

Effacez les comptes utilisateurs bidons

Si l’option précédente était active, il y a fort à parier que plusieurs comptes bidons ont été créés. Allez dans l’onglet “Utilisateurs” et effacez les comptes indésirables.

Protégez vos utilisateurs du spam

WordPress est présentement la plateforme web la plus utilisée donc vos commentaires seront inévitablement remplis de liens pointant vers des sites douteux qui peuvent contenir des malwares.

L’extension Askimet (http://akismet.com/) vient avec toutes les installations de WordPress. Par contre pour l’activer vous devez obtenir une clé. Il suffit de créer un compte et de faire un don de 0$.

Fichier robots.txt

Vous pouvez empêcher les moteurs de recherche de trouver vos pages privées en modifier le fichier robots.txt qui se trouve dans la racine de votre dossier FTP. Si le fichier n’y est pas vous pouvez le créer.

Ajouter y ce code :

User-agent: *

Disallow: /feed/
Disallow: /trackback/
Disallow: /wp-admin/
Disallow: /wp-content/
Disallow: /wp-includes/
Disallow: /xmlrpc.php
Disallow: /wp-

Supprimer les fichiers inutiles

Vous pouvez supprimer les fichiers suivant pour éviter que des attaquants n’obtiennent de l’information sur vos installations :
/license.txt
/readme.html
/wp-config-sample.php

Supprimez aussi tous les fichiers de type ‘readme’ dans vos extensions.

Cet article Sécurisez facilement votre site WordPress contre les pirates. est apparu en premier sur Affluences.

Beaucoup de gens ont donné le mandat de conception à des débutants et au final leur site ne convient pas du tout à leurs besoins.

Voici ce que ces « experts web » et vous ne savez pas qui fait de votre site un échec.

1 – Si ça s’affiche dans votre navigateur, ça ne veut pas dire que ça fonctionne.

Quand vous avez le lien pour tester votre site vous allez vérifier sur votre ordinateur si ça fonctionne. Ceci n’est pas une méthode de test valide.

Premièrement les navigateurs corrigent les erreurs de programmation. S’ils plantaient à chaque erreur 98% des sites ne fonctionneraient pas. Vous ne pouvez donc pas voir les erreurs. Les amateurs utilisent aussi cette méthode. Chaque navigateur, lecteur de contenu, moteur de recherche va corriger les erreurs à sa manière et vous aurez un site avec pleins de problèmes inexplicables.

Voici l’outil officiel de l’autorité des standards web : W3C Validation Service. J’ai vu beaucoup de sites avec plus de 200 erreurs. En gros c’est comme 200 fautes d’orthographe .

Ensuite il faut savoir que d’autres navigateurs existent : Google Chrome, Firefox, Internet Explorer, Opera, Safari et les systèmes d’exploitation : OSx, iOS, Chromium, Andriod, Windows et les plateformes : iPhone, iPad, tablette, téléphone intelligent, téléphone web et j’en passe. Il y en a beaucoup? Vous devez programmer différemment pour chaque élément. Votre beau-frère n’a encore rien vue. Voici les statistiques d’utilisation officielle du « web » : W3C Browser Information.

2 – Votre site est horrible, mais vous l’aimez

Saviez-vous que la conception de votre site est un des facteurs les plus importants de votre conversion? Si votre site est mal conçu, vous n’aurez pas de nouveaux clients. Vous pensez savoir comment le faire, mais c’est faux. Le livre de Steve Krug « Don’t make me think » fait 216 pages et ce n’est qu’une introduction en matière de conception fonctionnelle. Conception fonctionnelle? C’est un des sous-aspects de la conception web.

Si vous êtes brave, lisez cet article : Blog Design for Killer Search Engine Optimization – SEOmoz et vous verrez que votre intuition n’y connaît rien.

3 – Votre contenu est impertinent

Un autre truc amusant : 80% des « boss » décident de placer l’information « notre entreprise » et « nos valeurs » avant les liens de produit et services. Pourtant ce sont eux, ou vous qui ont créé l’entreprise. Ils devraient savoir que les clients qui s’intéressent à l’entreprise sont d’abord intéressés par le besoin auquel elle peut répondre. Eh bien non.

Vos émotions vont foutre le désordre dans votre site c’est absolument certain. Vous allez placer de l’information en avant plan qui vous fait sentir bien, mais vous n’aurez pas de nouveaux clients. Votre cousin n’est pas en mesure de bien vous conseiller et est lui aussi biaisé par votre projet.

4 – Vous ne saurez pas ce qui se passe sur votre site

C’est vrai qu’installer Google Analytics sur votre site c’est facile. Il suffit de suivrez ces 10 étapes.

La formation de base est d’environ 8 heures et il y a un examen à réussir. La note de passage est de 85%. Après tout l’université de conversion Google est ouverte à tous! La section sur les Expressions régulières est particulièrement intéressante.

Votre expert web connaît surement aussi les autres applications d’analyse populaire : Quantcast, comScrore, SiteCatalyst, StatCounter, Piwik et Webtrends.

5 – En fin de compte c’est votre argent qui est en jeu

Il est toujours étonnant de constater que plusieurs entreprises considèrent le Web comme une dépense. Or, c’est tout le contraire!

Un site bien fait rapportera rapidement l’investissement initial, alors qu’un site « pas cher » sera une dépense car ce dernier ne produira pas de revenu.

Au final c’est votre objectif de communication qui compte, et c’est votre argent qui est en jeu.

Cet article 5 raisons pour lesquelles ne pas faire concevoir votre site par un amateur est apparu en premier sur Affluences.

Les nouvelles balises

HTML5 contient de nouvelles balises qui servent à indiquer aux moteurs de rechercher et aux autres logiciels qui peuvent accéder à votre site ce qu’il contient. Si vous les utilisez adéquatement vous pourrez, par exemple, indiquer facilement où se trouve votre entreprise, quel est le numéro de téléphone à utiliser afin de vous contacter et indiquer où se trouvent les articles que vous avez rédigés.

Voici quelques exemples de balises que vous pouvez utiliser : adresse – <address>, article – <article>, citation d’une source externe – <blockqote> et titre d’un oeuvre – <cite>.

Vous pouvez consulter HTL5 – A technical specification for Web developers pour obtenir plus d’informations.

Les micro-données de Schema.org

Le 2 juin 2011 Bing, Google et Yahoo ont créé une initiative dans le but d’introduire le concept de web sémantique. À l’aide des techniques spécifiées par l’initiative vous pouvez permettre aux moteurs de recherche de lire facilement de nombreuses informations très détaillées. Si votre site contient un catalogue de produits, de services ou d’endroits que vous désirez faire découvrir à vos clients cette technique est idéale pour vous.

Tout ce que vous pouvez lister grâce aux micro-données est listé dans la documentation hiérarchique de schema.org.

Cet article Ce que le HTML5 peut apporter à votre entreprise. est apparu en premier sur Affluences.

J’ai dit facile? Oui… C’est bien ce que j’ai dit! Voici comment y arriver :

Programmez votre site en HTML 5 et CSS 3

Laissez aller tous vos talents d’élite magicien du web et amusez -vous! Programmez pour un navigateur qui supporte HTML 5.

Activez le support du HTML 5

Avec un petit code JavaScript vous pouvez créer les éléments en mémoire qui ne sont pas normalement reçus comme du HTML.

Vous pouvez ajouter tous les éléments HTML dont vous avez besoin.

Spécifiez l’affichage des éléments CSS

Internet Explorer ne possède aucune règle d’affichage pour les nouveaux éléments. Les éléments seront donc affichés en ligne (inline). Il faut donc spécifier dans une feuille de style le comportement de ces éléments.

hgroup, article, header, footer, section, nav { display: block }

Activez CSS 3 sur les éléments

Vous pouvez activer des fonctions CSS 3 dans Internet Explorer (9 à 6) grâce à des scripts VML (Vector Markup Language). Mon script préféré est CSS3 Pie. Présentement il ne supporte que les fonctionnalités les plus populaires mais cela convient dans la plupart des cas.

Téléchargez le fichier PIE.htc et placez-le à la racine du domaine. J’ai bien dit à la racine du domaine. Une fois de plus Internet Explorer ne respecte pas les standards et les chemins CSS ne sont pas interprétés de la même manière que dans IE 8-6. Je vous conseille aussi de placer le fichier dans le répertoire racine du site en développement. Lors de la mise en ligne vous n’aurez pas besoin d’y réfléchir.

Vous devez ensuite spécifier quels éléments doivent utiliser le script VML. Le script doit s’exécuter sur chaque élément donc placez-le seulement où vous en avez besoin.

element_avec_du_css3 {
	behavior: url(/PIE.htc);
}

CSS3 PIE ne supporte pas le text-shadow mais vous pouvez utiliser les filtres d’IE pour reproduire un effet similaire.

text_avec_ombrage {
	filter: glow(color=black,strength=2);
}

Astuces pour déboguer IE 8 à 6

Ces astuces devraient vous permettre de rendre votre site fonctionnel sous Internet Explorer en moins de deux heures. Il est important de garder en tête que le site sera visuellement différent sous les vieilles versions et que vous ne pouvez rien y faire.

Testez les versions d’Internet Explorer
IETester est un navigateur qui permet de visualiser votre site sous Internet Explorer 9 à 5. J’ai effectué des tests comparatifs avec les navigateurs originaux et je n’ai vu aucune différence.

Créez des feuilles de styles pour Internet Explorer
Je vous conseille de créer des feuilles de styles propriétaire à Internet Explorer afin de régler les problèmes d’affichages.

CSS : bordure des images
Internet Explorer est le seul navigateur qui entoure les images qui se trouvent dans une balise de navigation. Ajoutez ce CSS à votre feuille de style IE seulement afin de régler le problème.

img { border: 0 none }

CSS : inline-block
Internet Explorer 7 et 6 ne permettent pas d’utiliser la valeur inline-block. Cette valeur est souvent utilisée en CSS 3 pour aligner des éléments ensemble, comme dans un menu horizontal. Vous devez remplacer les valeurs par inline.

Voici un exemple :

element_de_menu { /* CSS 3 */
	display: inline-block;
}

element_de_menu { /* Internet Explorer */
	display: inline;
}

CSS : tailles et inherit (IE 6 seulement)
Internet Explorer 6 ne traite pas correctement les valeurs inherit et les tailles des objets. IE ignore tout simplement les valeurs inherit donc vous devez les spécifier pour chaque élément. Pour la taille des éléments elle est interprétée différemment donc vous devrez en spécifier d’autres.

Cet article Comment programmer en HTML 5 dans Internet Explorer est apparu en premier sur Affluences.

Documents

The Internet Explorer 6 Countdown

“Internet Explorer. Voici ce que avez à dire pour faire monter la pression sanguine d’un webmestre.” – Webmonkey.com

Que dire de plus? En fait, grâce à IE6 Countdown, vous pouvez maintenant dire qu’Internet Explorer n’est utilisé que par 2.2% des canadiens! Combiné avec 25% de frais supplémentaires au tarif de base pour la programmation IE6 vous n’aurez plus jamais à programmer pour EI6 (et 7?)!

CSS Floats 101

“Oh mon dieu… Pourquoi est-ce que la section du copyright du site se retrouve en plein par dessus l’image du sympathique propriétaire du site dans Firefox et Internet Explorer?” – Webmestre.

La réponse est simple. Vous l’avez mal programmé! Certaines choses sont si simples une fois qu’on les connaît…

Comment créer une application iFrame Facebook

Nous savons tous que mettre la photo de son chien qui jappe la promo du jour sur sa page Facebook fera fuir tout ses clients mais c’est lui qui paye votre salaire alors… Un site horrible de plus ou de moins…

Comparaison des lecteurs vidéo HTML 5

Heureusement nous n’avons jamais eu à utiliser cette charte. Mais vu le travail colossal que représente la gestion de contenu vidéo, autant bien être préparé! Comme dit le site “Voyez ce qui est moche.” afin de ne pas vous embêter avec.

Outils

CSS 3 Pie

Est-ce que j’ai dit plus haut que vous n’auriez plus de problème avec IE6? MOUHAHAHA! Quel rêve farfelu! Et bien au moins vous pourrez programmer votre site en CSS 3 et n’ajoutez qu’une seul ligne de code dans votre feuille de style afin qu’il s’affiche dans IE6-7 et 8.

IE CSS 3

Est-ce que j’ai dit plus haut que vous n’auriez plus de problème avec IE6? MOUHAHAHA! IE7 et 8 Sont malheureusement là pour le remplacer! Et bien si CSS3 Pie ne suffit pas, ajoutez encore plus de fonctions CSS3 à Internet Explorer.

Adapt.js

Votre patron s’est acheté un iPhone et vous demande  maintenant d’adapter le site de l’entreprise au mobile? No problemo! Cachez tous les éléments nuisibles et chargez quand même le site complet pour vous venger. Adapt.js s’occupe de charger la feuille de style dont vous avez besoin.

Screenfly

Votre chargé de projet s’est acheté un iPad et vous demande maintenant d’adapter le site de l’entreprise au mobile? Aucun problème! Montrez lui que vous n’avez rien à changer et que le site fonctionne très bien sur les tablettes et les télévisions HD! Vous pouvez tester sur un paquet d’appareil.

CSS Sprite Generator

CSS Sprite? C’est un genre de lutin? Il est possible d’encoder des images directement en CSS. Fort utile pour les petits boutons et autre graphiques qui se retrouvent partout dans l’interface. Je vous invite à en lire davantage.

Icon Archive

Un des rares bons sites qui fournit une icône gratuite pour de vrai. Juste un peu de pub sur le site (AdBlock plus quelqu’un?).

Testeur d’expressions régulières PHP

“Une expression quoi?” – Débutant

“Oh mon dieu… regular-expressions.info à la rescousse!” – Webmestre

Un vrai vétéran de guerre! Toutes vos expressions régulières agiront dans votre application exactement comme sur le site.

Extensions pour Google Chrome

“Oui mais je n’utilise pas Google Chrome!”

Il n’y a que les imbéciles qui ne changent pas d’avis comme on dit!

Gmail checker plus

“Oui mais je n’utilise pas Gmail!”

Il n’y a que les imbéciles qui ne changent pas d’avis comme on dit!

Extension officiel Facebook

Vous n’allez jamais sur Facebook au travail? Moi non plus bien sûr *tousse*. Grâce à ce plugin!

Cet article Ressources utiles pour les webmestres 2 – Le retour! est apparu en premier sur Affluences.

Voici comment procéder…

Création des images

Commencez par créer vos images. Elles doivent avoir les mêmes dimensions (hauteur et largeur). Les images ci-dessous ont une hauteur de 68 pixels et une largeur de 74 pixels.

Fusion des images

Ensuite il faut “fusionner” les images. On doit les coller l’une à l’autre. Vous pouvez coller n’importe quel côté ensemble mais, dans cet exemple,  j’ai choisi de le coller de gauche à droite.

Programmation de l’élément (html/css)

Ensuite il faut créer un élément générique vide, comme un div ou un span, et lui appliquer ces règles CSS :

La hauteur et la largeur spécifiées doivent correspondre à celles des images originales. Display: block; s’assure que votre élément gardera la bonne dimension peu importe quel est  l’élément HTML utilisé. Vous pouvez le remplacer par display: inline-block; pour l’afficher en ligne.

.menu_item {
    background: none no-repeat scroll 0 0 transparent;
    display: block;
    height: 68px;
    width: 74px;
}

C’est avec la règle :hover que la magie apparaît. On déplace simplement l’image vers la gauche. On utilise une seule image, peu importe son état, pour éviter le temps de chargement de d’autres images.

.menu_item:hover {
  background: none no-repeat scroll -74px 0 transparent;
}

Ensuite on applique l’image à l’élément.

.link_1 {
  background-image: url("images/images-combinés.png");
}

Conclusion

C’est tout! Voici le résultat!

Vous pouvez ajouter autant d’états et d’images que vous désirez.

Pour déplacer une image de fond vous pouvez utiliser la propriété background-position.

Cet article Programmer une image “roll-over” en CSS. est apparu en premier sur Affluences.