Bon. Heureusement que Dad!, le célèbre dessinateur et président de Nekomix nous a permis de passer cet été de bonne humeur et de prolonger un peu cet état euphorique.

Pour ce dernier épisode (oui, tout les bonnes choses ont une fin), Dad! nous apprend à dessiner un château. Et vous aurez, si vous arrivez à suivre jusqu’au bout, un petit bonus. Car le château ne va pas rester comme ça, tout bête, sans rien… Non non…

Mais laissons place au maître :

Liens

Nekomix : www.nekomix.com

Dans ce troisième épisode, à rebondissement, Dad! nous apprend à bien dessiner un lapin, un lapin content et, comble du rebondissement, un lapin fille.

Vous verrez qu’un lapin fille ne se dessine pas comme ça. Ce n’est pas aussi simple. Il y a toute une stratégie.

Episode III : un lapin, un lapin content et un lapin fille

Mais place à la star !

Liens

Nekomix : www.nekomix.com

Vous avez aimé le teeshirt de la semaine dernière ?! Vous allez adoré celui-ci : teeshirt Nekomix

Pour ce second épisode, Dad! à choisi de nous apprendre à bien dessiner un Dad!. Car savoir bien dessiner un Dad! est … important.

Evidemment, même en vacances, je n’oublie pas d’oublier d’allumer le micro et du coup, vous ne pourrez pas entendre les premières minutes de cet épisode. Mais rassurez vous, je n’allais pas vous laisser comme ça, je vous ai réservé une petite bande son du meilleur goût.

Episode II : un Dad!

Mais place à la star !

Liens

Nekomix : www.nekomix.com

Alors ? Quel teeshirt avez-vous choisi ?! Je dois bien avouer avoir un faible pour ce Neko Jack …

Nous y sommes arrivé, non sans mal, avec l’aide de quelques liquides de bonnes qualité (préférez « l’agricole » si vous voyez ce que je veux dire…).

Nous allons donc vous livrer 4 épisodes qui vont vous permettre de savoir dessiner, entre autre, un château fort, un lapin et plein d’autres choses passionnantes et hallucinantes !

Episode I : une épée

Dans cet épisode, vous apprendrez à comment bien dessiner une épée. Mais aussi un personnage (ça, c’est le bonus).

Je vous laisse avec Dad!

Liens

Nekomix : www.nekomix.com

Vous reconnaîtrez sans aucun doute le logo et les teeshirts qui vont avec…

Qu’est-ce qu’une favicon ?

La favicon est la petite icone qui apparaît dans la barre d’adresse devant l’URL des sites.
Elle apparaît également dans le menu des favoris / marques-pages.
Enfin, pour les utilisateurs d’onglets, elle apparaît sur chaque onglets.

La favicon dans la barre d’adresse

La favicon dans la liste des favoris

La favicon dans les onglets

Pourquoi avoir une favicon sur son site ?

La favicon est un élément supplémentaire qui va participer à l’identité du site. Elle est un facteur supplémentaire qui fait qu’on identifie et mémorise le site ; un peu comme un mini-logo.

Ce petit élément visuel permet également de plus rapidement repérer le site qu’on recherche dans une liste (les favoris, ou les onglets notamment).

Enfin, d’un point de vue purement pratique, avoir une favicon permet de limiter les logs d’erreur : en effet, certains navigateurs la recherche automatiquement à la visite d’un site ; c’est autant d’erreurs 404 créées.

Comment fabriquer une favicon ?

Afin de pouvoir s’adapter, une favicon doit être créée au moins au format 32 x32 pixels, d’après la Bonne Pratique Opquast n°30. Mais c’est au format 16×16 pixels qu’elle s’affiche la pluspart du temps. Il faut donc prévoir que l’icône soit toujours « lisible » et que l’image soit propre dans ces deux tailles. Une favicon peut également être prévue en 48 x 48 pixels.

Une favicon peut être une image de différents formats : jpg, gif, png, bmp, mng, xbm et ico.
Parmis ces formats, seul le .ico n’est pas reconnu par les standards. Néanmoins, il reste nécéssaire car … c’est le seul compris par Internet Explorer ! Les navigateurs standards comprennent l’ensemble des formats.

Il est à noter que certains de ces formats permettent une animation (voir sont un format vidéo !). L’icône peut donc ne pas être figée. Il faut pourtant en user avec parcimonie : en effet, les animations en boucles peuvent être désagréables et perturber la lecture d’un site ; elles peuvent agacer.

Pour créer l’image de chacun de ces formats, vous pouvez utiliser votre éditeur graphique habituel.
Néanmoins, pour le .ico, il existe des outils en ligne très pratiques, comme le très bon FavIcon from Pics. Il suffit de préparer une image au format gif, jpg, png, ico ou bmp (en 32 x 32 pixels) et l’outil génère une icône multi-format (32 x 32 et 16 x 16 pixels).

Le code pour insérer une favicon

Pour insérer votre favicon, vous devez :
– placer l’image à la racine de votre site ;
– placer le code d’appel à l’image sur votre page index.

Là encore, il y a le code standard compris par les navigateurs standard … et le code pour Internet Explorer.
Ainsi, si vous voulez insérer les deux cas, utilisez le code ci-dessous :

Internet Explorer lit la première déclaration et l’applique. Il ne tient pas compte de la deuxième qu’il ne comprend pas.
Les navigateurs standards vont lire et comprendre la première déclaration, puis la deuxième. Ils appliqueront celle qui arrive en dernier.

A lire :
Opquast – Rubrique icone de favori : Le code source des pages contient un appel valide à une icône de favori ; L’icône de favori est au moins proposée au format 32 x 32 pixels

Icônes de pages web, la favicon.ico

Le plan du site comme aide à la navigation

La toute première fonction d’un plan du site est d’aider le visiteur dans sa navigation.

Cela peut, par exemple, être un visiteur qui recherche un type d’information précis et n’arrive pas à le trouver dans le menu, ni dans les pages. Si le site n’a pas de module de recherche, ou si l’internaute ne souhaite pas y faire appel, il peut alors utiliser le plan du site.

Mais l’internaute peut tout aussi bien avoir consulter le plan du site sans avoir fait une seule recherche dans les rubriques du menu ou en navigant. Il se peut très bien que le plan soit le premier lien auquel il ait recours. Soit qu’il recherche une information pointue et estime qu’il la trouvera plus facilement en ayant accès aux sous-rubriques et autres niveaux directement. Soit, tout simplement, pour se donner une idée de la prestation d’un site et des domaines couverts.

Des mot-clés et des liens pertinents

Le plan du site, par sa fonction même, va reprendre les mots importants du site : le titre des pages.

Mais la plus grande force encore du plan du site vient du fait que c’est un véritable réseau de liens sur le site.

D’abord, en listant la totalité des pages du site (ou des pages principales), on s’assure que le robot des moteurs de recherche trouvera chacune d’entre-elles. C’est donc une page que le spider doit facilement trouver.

Comment faire ?

Emplacement

On a vu que le réseau de lien que représente le plan du site est un avantage pour le référencement. Cet avantage est réellement efficace si de nombreuses pages pointent vers le plan du site. Mais de toute façon, d’un point de vue ergonomique, la présence d’un lien vers le plan du site sur chaque page est indispensable. En effet, on ne peut savoir d’avance à quel moment un visiteur va en avoir besoin. Et comme c’est un outil d’aide à la navigation… il doit facilement être trouvable !

Par habitude, on s’attend à trouver un lien vers le plan du site au moins en bas de page.

Présentation

Un plan de site peut-avoir un aspect très différent selon que le site est composé de quelques pages ou de plusieurs centaines ! Il n’y a pas une façon de faire un plan mais il faut savoir s’adapter à la situation.

Dans le cas d’un site à beaucoup de pages, vous n’allez pas lister dans votre plan la totalité (ou en utilisant une solution faisant apparaître des sections, par exemple). Vous pouvez très bien, également, faire un plan sur plusieurs pages. Gardez d’ailleurs à l’esprit que Google déconseille d’avoir plus de 100 liens dans une page et que les règles d’accessibilité préconisent 40 liens maximum.

Au contraire, pour le plan d’un site ayant peu de pages, vous pouvez vous permettre un plus grand niveau de détails. Vous pouvez même aller jusqu’à une description succincte de la page derrière chaque lien, pour mieux aiguiller l’internaute (et glisser quelques mot-clés !)

Pour que votre plan soit vraiment utile à l’internaute, pensez à bien l’organiser. Hiérarchisez les rubriques, les pages.

Les marges, les couleurs peuvent vous aider à créer des zones. N’oubliez pas que si votre plan est agréable à consulter, cela pourrait insciter l’internaute à le regarder dans le détail et, peut-être, à voir des pages qu’il n’aurait pas pensé à chercher autrement.

Code

Un plan, ce n’est rien d’autre que la liste des pages du site. Il faut donc utiliser les balises <ul> <li> (dans certains cas <ol> <li>). Vous aurez certainement à imbriquer ces listes.

La syntaxe est la suivante :

Pour que votre référencement soit vraiment optimisé, n’oubliez pas d’utiliser l’attribut title sur vos liens.

La page 404

Votre site devrait contenir une page 404 personnalisée. Si un internaute arrive dessus, c’est soit qu’il y a une erreur dans l’URL qu’il a tapée.

Soit il identifie et corrige son erreur immédiatement, soit la page n’existe plus ou tout autre situation. Il faut alors aider votre visiteur et quoi de mieux que le plan du site ?!

Il est donc utile de prévoir, si on le peut, le plan du site dans un include qui serait appelé depuis la page plan du site et depuis la page 404.

http://www.service-public.fr/aide/plan.html

Pour ce site aux nombreuses pages, en plus des rubriques déjà présentes, le plan a été découpé en trois espaces thématiques.

http://pourpre.com/pied/plan.php

Pour ce site très riche autour d’un thème unique, la courte description a côté des rubriques et des sous-rubrique apporte une aide en plus.

Ce n’est pas tous les jours qu’un jeu fait peau neuve, alors on a sauté sur l’occasion.

Game On Net : Pourquoi avoir fait ces changements d’interface ?

Nouveau skin jour

Ancien skin jour

GoN : Ces changements ont été réclamés par vos joueurs ?

Ideo : Les joueurs n’ont rien réclamé, ils étaient meme un peu surpris au départ du changement majeur mais ont quasiment tous admis au final que le changement était une réussite. Ils ont fait des propositions d’améliorations pour des choses qui leur manquait par rapport à l’ancienne version.

Par exemple, le design à texture parchemin et vieillot manquait à certain et le nouveau faisait trop « design », trop dessin animé, un skin « oldies » a donc été mis en place pour les nostalgique 🙂

Ancien skin nuit

Nouveau skin nuit

La volonté de changement a vraiment été interne d’une part pour essayer d’ameliorer notre image vis a vis de l’exterieur et aussi niveau interfacage, pour essayer de ne pas perdre les débutants qui avaient du mal a s’y retrouver face à la foultitude d’informations.

GoN : Qui a validé ces nouveaux graphismes ?

Ideo : Mon responsable Design ainsi que moi même (Wax) avons mis en place tous les éléments graphiques et les avons validé en équipe via le forum de développement.

En général, on a tous plus ou moins les mêmes goûts artistiques donc pas vraiment de souci sur ce point.

Ancien screen de jeu

Nouveau screen de jeu

Merci Wax pour ces informations et longue vie à Ideo !

Ideo : www.ideo-lejeu.com

Rechercher

Même si vous vous sentez plus à l’aise avec le dessin sur un logiciel que sur le papier, privilégiez tout de même le support papier pour vos recherches.
Il vous donnera plus de liberté dans une phase où il est important de se laisser aller à l’imagination.
Utiliser un outil simple et avec lequel vous vous sentez à l’aise. Il n’est pas nécessaire dans un premier temps que vos essais soient  » beaux  » ; il s’agit plus d’une quête d’idée que d’esthétique. Variez les propositions, prenez un peu de recul, revenez voir votre travail. Et recommencez.

Peaufiner

Faites ensuite un choix dans votre travail : la proposition la plus proche des idées à véhiculer, la plus  » dans le ton « .
Elle est forcément à retravailler. Toujours sur papier, poursuivez vos recherches dans cette unique direction en essayant de vous rapprochez toujours plus du logo parfait. Toutes ces recherches peuvent durer plusieurs jours mais, quand vous aurez l’impression d’avoir  » fait le tour  » et de vous trouver face à une idée aboutie, une idée qui vous satisfasse, vous pourrez commencer la phase  » numérique « .

Décliner

Quelque soit le logiciel avec lequel vous êtes familiarisé, si vous voulez pouvoir faire plusieurs utilisations de votre logo, privilégiez une conception vectorielle du logo. C’est le seul moyen pour pouvoir l’utiliser proprement et sans perte à toutes les tailles, y compris les plus grandes.

Si votre logo est destiné à être imprimé, privilégiez, dans la mesure du possible, une réalisation en couleur Pantone © ; c’est-à-dire conformément à un standard qui permettra de ne pas avoir de surprise à l’impression quel que soit le papier utilisé, la machine … ou simplement le réglage de votre écran !

Soigner

Soignez votre réalisation ! Certains détails peuvent  » passer  » au moment de votre première utilisation mais être un véritable problème si votre projet prend de l’ampleur et que vous êtes amené à le faire en grande taille ou simplement sur d’autres supports.
De plus, le logo véhiculant une identité qui doit être marquante et reconnaissable, vous n’avez pas le droit à l’erreur : un logo doit durer et non pas être modifier régulièrement pour des améliorations.

Utiliser 😉

Votre logo est parfait et terminé ? Vous allez pouvoir l’utiliser à volonté sur chacun de vos supports !

En Février 2005, la Loi sur l’Accessibilité Numérique laissait aux quelques 5000 sites publics français jusqu’à 3 ans pour être accessible à tous. Plusieurs sites privés, pourtant non concernés par cette obligation, ont d’ores et déjà fait le choix de l’accessibilité. On peut penser qu’ils ont anticipé une généralisation de la loi, aux sites commerciaux, par exemple, et se sont alignés. Mais le premier impact pour eux, en plus de s’ouvrir à une part supplémentaire de la population, est, bien sûr, l’image de marque, l’impression donnée qui va de l’ouverture d’esprit au respect du visiteur.

Et le nombre de visiteurs à bénéficier de ces efforts est bien plus important qu’on ne se l’imagine. Il y a d’abord, bien sûr, les non-voyants, les handicapés moteurs. Mais les obstacles que l’accessibilité abat concernent aussi les personnes âgées, malvoyantes, les handicapés mentaux… En tout, 30% de la population française déclare rencontrer des difficultés, plus ou moins importante*. 30% de la population qui bénéficient directement des mesures d’accessibilité. Car indirectement, nous en profitons tous. En veillant à des impératifs d’accessibilité, on met à la disposition de chaque visiteur des infos pratiques en plus, on veille à avoir une navigation fluide, on laisse beaucoup de liberté à chacun quand à l’affichage.

Non seulement le site y a gagné en ouverture vers ses visiteurs, mais il y gagne aussi en qualité de code et toutes ses considérations optimisent son référencement. Il ne s’agit pas de miracle ou de techniques pointues propres aux référenceurs, mais de détails auxquels les moteurs de recherche seront sensibles : des titres de liens renseignés, des balises sommary et caption détaillées, l’attribut longdesc utilisé à bon escient… sont autant d’informations données aux moteurs de recherche, cernant ainsi mieux votre page et votre site.

Le développement d’un site en considérant les points d’accessibilité vous permet donc d’obtenir un code plus propre, plus efficace, ergonomique et ouvert à tous. Des articles à venir vous détaillerons, de manière pratique, comment faire. Pour les plus curieux, voici quelques liens utiles :

Accessibilité : pourquoi et comment l’améliorer (Open-S)

Loi sur l’Accessibilité Numérique (Assemblée Nationale)

Directives pour l’accessibilité aux contenus Web

* : D’après une enquête de l’INSEE (Institut National de Statistiques et des Etudes Economiques) menées en 1999.

Les informations

Des informations concises et utiles

Le formulaire va d’abord donner une première impression au visiteur ; la page ne doit pas le faire fuir.

Il ne faut pas oublier que les internautes ne sont pas patients, qu’ils passent souvent leur temps à remplir des formulaires d’inscription, à devoir donner des informations sur eux, leur goûts, etc., pour accéder à des pages. Il vaut mieux éviter de demander des informations en trop grand nombre ! D’abord, cela va charger votre base avec des informations dont vous ne ferez probablement pas usage (Allez-vous vraiment téléphoner à vos internautes ?!) Ensuite, cela peut décourager celui qui voulait s’inscrire. Non seulement c’est trop long mais il est aussi en droit de se demander pour quelle raison on a besoin de savoir sa ville pour jouer à un jeu en ligne.

N’oubliez pas, d’autant plus, que s’il estime la question inutile ou trop personnelle, rien ne l’empêchera de remplir de fausses informations !

Aider à la saisie

Mentionnez, dés le début, les champs obligatoires et, comme précédemment, ne rendez obligatoires que ce qui doit vraiment l’être.

Une aide contextuelle est la bienvenue. Pour indiquer un format de date, préciser en quoi on a besoin de telle information, etc.

Attention, tout de fois, à ne pas surcharger le formulaire en renseignements : vos indications comme vos libellés, pour être efficaces, doivent être clairs, concis … inutile de faire de la littérature ici.

La présentation

Une présentation adaptée

Ce premier point acquis, soignez la présentation de votre page.
Si le contexte de votre site nécessite un formulaire long, découpez le en plusieurs étapes que l’internaute pourra visualiser et identifier. Ainsi, il ne sera ni surpris ni lassé si, en validant sa page, il doit encore remplir d’autres renseignements.

Cheminement et actions

Dans ce type de questionnaire à étapes, il y a quelques règles à respecter.

Il est notamment nécessaire de permettre de revenir aux étapes précédentes. Au moment de la validation finale, un récapitulatif de l’ensemble des informations données, avec la possibilité de les modifier, est, là aussi, le bienvenu. Que ce soit pour l’accessibilité du site… comme pour le confort de tous.

Exemple de navigation d’un formulaire à étapes

Pour un formulaire long comme pour un formulaire court, n’oubliez pas d’afficher une confirmation après la validation. Rien de plus perturbant pour un internaute que de n’avoir aucune explication de ce qu’il va découler d’une action qu’il vient de faire !

L’ergonomie et le design

Une utilisation fluide et agréable

Après avoir travaillé le contenu, apporter un soin tout particulier à sa présentation et à son comportement peut être d’une grande aide pour l’internaute et, là encore, contribuer à l’effort de séduction que vous faites envers lui.

Découpez les types d’informations en zones, grâce aux balises et