Retour sur la Kiwiparty 2012 autour des thèmes de la conception web et de ses bonnes pratiques

Sur Strasbourg les événements Web se font rares, mais heureusement, l’agence web Alsacréations nous a concocté cette année (et pour la 3ème fois) la KiwiParty !

Dans cet article, je vais vous faire un retour sur les différentes conférences auxquelles j’ai assistées. Pour celles que j’ai ratées (puisqu’il y en a en simultanée), je vous mettrai les liens des présentations (lorsqu’elles sont disponibles).

La KiwiParty ? C’est quoi ?

La KiwiParty, c’est un événement annuel proposant des conférences durant entre 30 et 60 min autour des divers sujets du web : Développement, Référencement, Ergonomie, Méthodologie, etc. C’est un événement entièrement gratuit, mais (mal)heureusement limité en nombre d’entrées. C’est donc les plus rapides chaque année qui ont l’occasion de participer à cet événement et cette année ce n’est pas moins de 150 places qui étaient disponibles et qui ont été réservées en un peu plus d’une heure; c’est dire l’engouement des participants !

Je vais vous faire un retour non-exhaustif des différents sujets auxquels j’ai eu l’occasion d’assister, en attendant la disponibilité des slides utilisés par les différents orateurs (que je vous transmettrai dès qu’ils seront disponibles).

Programme de la journée :

• 9H – Accueil
• 9H30 – « Référencement : Google et nouvelles balises »
• 10H30 – « Responsive Web Design » OU « L’accessibilité, pour qui ? » suivi de « Développer une application avec PhoneGap et Sencha Touch »
• 11H30 – « Le développement HTML5 au sein de Windows 8 » OU « Les effets graphiques (très) avancés » suivi de « jQuery mobile et applications »
• 12H30 – Pause déjeuner
• 14H – « Référentiels de bonnes pratiques : Industrialisons nos savoir-faire » OU « Du légo au proto… Aller plus loin que le wireframing ! »
• 15H – « Les solutions de tests automatiques » OU « Un design sans pépins »
• 15H30 – « Goutaÿ »
• 16H30 – « Conquérir l’internet des objets avec les technologies web » OU « Images : Etat de l’art et aspects méconnus »
• 17H – « Les transitions et animations CSS3 »
• 18H – Fin et Quiz

Référencement : Google et nouvelles balises

Par Olivier Andrieu, Expert en référencement chez Abondance

Quelques bases du référencement

Avant de rentrer dans les divers sujets du référencement, il est bon de revoir quelques bases du référencement.

• Balise H1 : Il est conseillé de n’avoir qu’une seule balise H1 par page et celle-ci doit contenir entre 5 et 7 mots. Toutefois si il vous est nécessaire d’avoir plus d’un titre H1, il vous faudra conserver la règle de 5 à 7 mots au total pour toutes ces balises.
• Les autres balises Hn : Les titres doivent correspondre au contenu de la page et former une structure compréhensible. L’outil Web Developer disponible pour Firefox et Chrome permet d’analyser la structure d’une page : « Entourer » > « Entourer les titres (H1 – H6) ».
• Titres des pages : Les titres de vos pages doivent reprendre le contenu de votre balise H1 ou en être proche tout en ayant la même signification. N’oubliez pas que sur un petit site il sera possible de modifier les titres de chaque page par rapport à sa balise H1, en revanche le travail devient rapidement fastidieux si votre site à un minimum d’envergure, n’hésitez donc pas à recopier automatiquement les titres de vos pages.
• Meta description : La description de votre page ne doit pas excéder 300 mots et être fidèle à son contenu.
• Contenu : Le contenu de vos pages doit être composé au minimum de 200 mots.
• Liens internes : Soignez les ancres de vos liens, n’utilisez pas de terme comme « cliquez-ici » mais favorisez des termes explicites et contenant de mots clés en rapport avec la page pointée. Evitez également les underscore (_) dans vos urls et remplacez-les (si possible) par des tirets (-).
• Liens externes : N’oubliez pas que Google apprécie les liens externes. Si votre site ne contient que des liens internes il sera déprécié par Google, hé oui, le web est là pour partager.
• Mots clés : Essayez de placer un mot clé dans chacun de vos titres, il n’y pas d’intérêt à en mettre plus. Dans votre contenu, vous pouvez mettre un gras un mot clé pour 100 mots : si votre contenu fait 540 mots, vous pouvez donc mettre en gras 5 mots. Reprenez également dans le titre de votre page le mot clé de votre balise H1.

Les autres conseils

La copie du contenu est l’un des points que Google pourchasse avec ardeur. Ne piquez donc pas le contenu d’autres sites (duplicate content) et pensez à créer votre propre contenu, vous ne ferez qu’en gagner en plus-value. Il est donc bien sûr fortement déconseillé de faire du « content spinning », c’est-à-dire de reprendre du contenu et d’en changer les mots pour arriver au même sens de la phrase mais avec des phrases différentes. Bannissez les autres mauvaises pratiques tels que : cloaking, keyword stuffing, scraping, etc… Je vous laisse faire votre propre recherche sur ces sujets.

Le contenu éditorial de votre page ne doit pas contenir de publicité, placez les donc avant, après ou dans les sidebars (si vous en avez).

Il faut également accepter de désindexer certaines pages, comme par exemple une page de contact. Celles-ci ne contiennent aucun mot-clé et ne favorise pas votre référencement, vous avez donc tout intérêt de ne pas les indexer dans les moteurs de recherche.

Etre bien référencé sur Google c’est bien, mais il ne faut pas en être dépendant ! Evitez que le trafic de votre site internet ne dépasse les 40% en provenance de Google, le reste doit venir d’autres moteurs de recherche, de liens externes ou de trafic direct.

Panda et Pingouin, les karchers de Google

Panda est arrivé il y a quelques semaines et met à jour régulièrement les sites référencés sur Google. Il doit, à terme, permettre d’avoir des résultats de meilleure qualité en évitant par exemple les sites comparateurs de prix.

Pingouin est dans une optique similaire mais pour les liens. Les sites annuaires, d’achat de liens ou encore les liens Facebook ou Twitter vont perdre de leurs intérêts avec cet algorithme et les blogs pourraient en pâtir. Attention, Google Plus n’est (comme par hasard) pas concerné…

Les Rich Snippets

Les Rich Snippets permettent d’afficher une structure dans les recherches Google. Pour cela, vous pouvez vous référez à la documentation disponible sur Schema.org

Ce qu’il faut aussi savoir

Les temps de chargement jouerai sur le référencement mais rien n’a été prouvé jusque-là. Pas d’inquiétude donc à voir, surtout si votre site charge en moins de 1,5 secondes. Autrement, il est peut-être temps de remettre en question l’architecture de votre site.

Les « +1 », « like » et « RT » impactent peu le SEO.

Les attributs hreflang sur les liens sont interprétés par Google et permettent d’éviter que le contenu soit considéré comme du contenu dupliqué.

N’oubliez pas également que les résultats de vos recherches Google sont personnalisés selon votre IP (historique de recherches), la langue de votre navigateurs, etc. Un site sera donc positionné différemment chez chaque internaute, pensez à utiliser la navigation privée pour les tests de SEO.

Responsive Web Design

Par Guillaume Verstraete, Directeur technique chez Sapriski

Avec la montée en puissance des différents appareils de navigation web (ordinateurs, tablettes, smartphones et TV) et leurs différentes résolutions, il devient de plus en plus difficile d’avoir un site qui s’affiche correctement sur toutes les plateformes. Le Responsive Web Design vient répondre à cette problématique en proposant un design flexible pour votre site web.

Plusieurs outils sont essentiels pour cette pratique :

• 960 grid system : Un générateur de CSS sous forme de grille et des templates pour différents logiciels tels que Photoshop, Inkscape, etc.
• CSS Grid : Un script CSS sur 12 colonnes qui s’adapte aux interfaces mobiles (1140px de largeur par défaut)
• Columnal : Similaire à CSS Grid, Columnal est un « mix » de différents systèmes CSS en s’inspirant notamment de 960 grid system.

Pour obtenir un web design « responsive », il vous faudra avant tout que vos images s’adaptent automatiquement à la largeur de votre page, ou du moins à son conteneur. Pour cela une simple ligne de CSS suffit : img{ max-width: 100%; }

Concernant les autres éléments de vos pages, pensez à utiliser les media queries pour adapter le CSS selon la largeur d’affichage de la page : @media handled, screen and (max-width: 640px;){ //Votre code CSS pour les smartphone }

Si vous voulez un exemple de responsive web design, le site de la WWF : 3200 Tigres est parfaitement adapté aux ordinateurs, tablettes et smartphones. Sur un ordinateur, redimensionnez simplement la fenêtre de votre navigateur pour un rendu immédiat et profitez-en pour signer la pétition.

L’accessibilité, pour qui ?

Par Laurie-Anne Bourdain, Gestionnaire de risque chez ING Belgique

Développer une application avec PhoneGap et Sencha Touch

Par Élie Makany, Développeur d’applications web

Le développement HTML5 au sein de Windows 8

Par David Rousset, Responsable développeurs Web chez Microsoft France – Retour de la conférence par Baptiste Simon

Application Windows 8 native en HTML5/CSS3 et JavaScript avec les Windows RunTime (RT) APIs ainsi que la librairie WinJS pour les contrôles Metro. Possibilité d’utiliser d’autres framework JS comme jQuery ou Backbone.js.

Préfixes vendeurs -ms pour ce qui est des media queries CSS3.

IDE : Microsoft Expression Blend dans lequel est intégré le moteur de rendu d’IE10.

Pour aller plus loin : Comment créer un petit lecteur RSS pour Windows 8 Metro en HTML5 en 30 min

Les effets graphiques (très) avancés

Par Vincent de Oliveira, Formateur web chez ENSG

Lors de cette conférence, on nous a proposé de découvrir non pas les nouvelles fonctionnalités de CSS3, mais celles qui pourraient arrivées dans CSS4.

Il faut dire que les effets sont relativement convaincants, même si certains ne seront pas forcément très utiles. Mais les images sont souvent mieux que les mots, je vous invite donc à visualiser la présentation ci-dessous :

Note : Attention à voir les compatibilités en bas des slides pour les différents navigateurs

jQuery mobile et applications

Par Nicolas Hoffmann, Contributeur Openweb

jQuery est l’un des framework Javascript le plus connu et il était inévitable qu’ils sortent une version pour mobile. Cette conférence était donc là pour nous présenter le potentiel de ce framework et sa facilité d’utilisation.

Personnellement, je suis entièrement convaincu par le côté utile et pratique, et notamment grâce aux différents thèmes présents par défaut dans jQuery Mobile (surtout que les thèmes s’adaptent selon le système : Android, iOS, etc.); en revanche je ne suis pas convaincu par l’implémentation du code… Je trouve cela relativement lourd, et cela empêche également votre interface web d’être valide pour le W3C.

Par exemple pour définir une liste vous retrouverez ceci : <ul data-role="listview" data-inset="true">

encore que dans cet exemple ce n’est pas extrême, mais prenons un autre exemple avec un bouton d’accueil (pour revenir à la page précédente) :

Je vous laisse à présent consulter le reste de la présentation qui contient bien plus d’informations sur le sujet.

Référentiels de bonnes pratiques : Industrialisons nos savoir-faire

Par Delphine Malassingne, Responsable qualité chez Ekino et Elie Sloïm, Président de Temesis

L’utilisation de checklists (listes de règles) peut vous permettre de suivre et contrôler voir certifier vos projets. Les listes qui nous ont été présentées sont les listes de bonnes pratiques OpQuast (pour Open Quality Standards).

Actuellement, il y a 4 listes disponibles :

• Qualité Web
• SEO (Référencement)
• Open Data
• Accessibilité

et une dernière est en cours de conception dans « l’atelier » concernant les Performances web.

La conception des listes

Les listes sont élaborées afin de correspondre aux besoins de tous les utilisateurs, et plusieurs participants sont nécessaires à leurs conceptions : Expert méthodologique, Expert(s) technique(s) et utilisateurs.

Le processus de création de checklists quant à lui est en 3 étapes :

1. Brainstorming
2. Atelier privé
3. Atelier public (auquel vous pouvez donc participer)

Les listes sont en amélioration continue et donc entièrement ouvertes aux idées. Vous pouvez donc faire un retour à l’équipe d’OpQuast si vous pensez qu’une règle n’est pas généraliste par exemple.

Du Lego au Proto… Aller plus loin que le wireframing !

Par Eric Emery, Dirigeant et développeur front-end chez Natural-net

Les solutions de tests automatiques

Par Karl Dubost, Web Opener chez Opera Software – Retour de la conférence par Baptiste Simon

Automatiser les tests navigateurs au travers de Selenium 2.0 : présence de contenu, captures d’écran, interagir avec des formulaires, manipuler des cookies, etc.

Facebook utilise WebDriver pour tester les pages du réseau social.

Méthode Agile BDD (Behavior Driven Development) avec Cucumber en Ruby ou Lettuce en Python.

Un design sans pépins

Par Philippe Roser, Responsable qualité, ergonome et intégrateur chez CAP-TIC

Quelques conseils pour l’ergonomie de vos sites web :

• Organiser les informations affichées et les priorisées
• Hiérarchiser les informations (titres, contenus, etc.)
• Aérer les informations (pensez au negative et positive space)
• L’outil Wirify.com vous permet de visualiser un site sous forme de wireframing
• Contrastez votre site : Tailles, couleurs, textures, positions, formes, orientations, etc. Par exemple les boutons d’actions comme le bouton « Nouveau message » sur GMail
• Etre cohérent, notamment dans les listes sur les sites de e-commerce (ordonner et trier par type : puissance, taille, etc.)
• Pour des liens d’actions, les représenter tous sous forme de texte ou tous sous forme d’icônes, mais pas de mélange.
• Présenter la légende des formulaires (astérisques) avant celui-ci (au-dessus)
• Indiquer directement et clairement les contraintes du formulaire (longueur, caractères autorisés, format des dates, etc.)
• Toujours informer l’utilisateur durant toute sa démarche, par exemple pour l’inscription ou l’achat de produits en lui indiquant où il se trouve et se qu’il se passe (Amazon le fait très bien par exemple)

Exemple de formulaire d’inscription original et clair : HufferDuffer SignUp

Conquérir l’internet des objets avec les technologies web

Par Steren Giannini, Chef de produit chez JoshFire

Les nouveaux supports de plus en plus répandus tels que les tablettes, smartphones et télévisions obligent à adapter les sites web ou applications à chaque appareil, mais comment et quels sont les outils pour y arriver ?

Comment ?

Il existe deux techniques pour détecter l’appareil sur lequel est visualisé votre site ou application web :

• Utiliser la résolution pour détecter l’appareil (voir : le calcul de la résolution et des pixels)
• Utiliser les User-Agent (qui renvoi le nom de l’appareil) et les media queries CSS, notamment pour l’orientation de l’appareil

La première technique demandera toutefois moins de maintenance et pourrait être privilégiée pour des clients.

Outils

• Frameworks MVC : Backbone.js ou Ember (jQuery mobile et Sencha Touch n’étant pas encore adaptés aux nouvelles plateformes telles que les télévisions)
• Code (découpe, optimisation) : requireJS et LESS
• Validation du code : JS Hint

Les transitions et animations en CSS3

Par Jeremie Patonnier

L’époque des gifs animés est révolue ! Dites bonjour au SVG, SMIL et vidéos HTML5, mais pour les animations ce n’est pas très pratique…

Alors que faire quand on ne souhaite pas utiliser le lourd Flash et non fonctionnel sur tous les appareils ? Utilisez les transitions et animations CSS3 !

Les transitions

Avant tout, pensez à utiliser le délai dans les transitions. Ceci vous évitera d’avoir des « sursauts » comme vous pouvez le voir sur certains menus lorsque vous glissez rapidement votre souris par dessus.

Pour obtenir un effet plus naturel qui accélère au fur et à mesure jusqu’à une vitesse constante puis ralenti un peu avant l’arrêt, utilisez les « Timing function ». Les maths vous permettront même de personnaliser vos transitions.

Les animations

Les animations fonctionnent à l’aide de keyframes (vous pourrez en découvrir d’avantage dans le lien de la présentation).

Quelques sites à visiter pour l’animation en CSS3 :

• Mozilla CSS 3D Dev Derby March 2012
• Smashing Magazine : The guide to CSS animation
• Tympanus : Boutons animés en CSS3 (7 examples)

Vous pouvez même coupler vos animations avec le Javascript en utilisant les fonctions : transitionend, animationstart, animationiteration et animationend qui envoient des informations directement au DOM (donc événements récupérables en JS).

Mais attention…

Les spécifications des animations sont encore loin d’être stables durant encore quelques mois. Le fonctionnement n’étant pas encore entièrement défini, celui-ci pourrait encore changer, surtout avec le SVG dans le HTML5. Il subsiste encore également le problème des préfixe pour chaque navigateur (-moz-, -webkit-, etc.). Il n’est également pas encore possible de synchroniser les animations, toutefois sans Javascript, ce qui pose des problèmes d’accessibilité.

En attendant que les prometteuses animations soient stables, favorisez plutôt l’utilisation des transitions qui elles, sont bien supportées par tous les navigateurs prenant en charge CSS3.

Retours de la conférence de développement HTML5 au sein de Windows 8 et des solutions de tests automatiques par Baptiste Simon de Weblife.fr

Note : Je remercie sincèrement Régis pour cet article !

Vous y étiez ? Qu’avez-vous pensé de cette Kiwiparty 2012 ? Avez-vous des conférences à partager avec nos lecteurs ? Venez réagir !