Chez Soluo nous travaillons actuellement sur un projet d’application web. C’est dans ce cadre que je me suis penchée sur les différentes manières d’afficher des messages d’erreur, d’avertissement, d’information et de confirmation.

Les messages d’erreur sont probablement les plus connus, mais les autres types de notifications peuvent aussi être utiles. Parfois, on veut signaler à l’utilisateur que l’action qu’il a déclenché s’est déroulée comme prévue, car si rien ne se passe à l’écran, il peut croire qu’une erreur s’est produite et c’est très frustrant. D’autres fois, une partie des actions ont réussi tandis que d’autres ont échoué. Il faut donc en informer l’utilisateur.

J’ai identifié 5 manières de présenter de telles informations au sein d’une interface web. Le souci est de savoir laquelle utiliser et dans quel cas. De plus, dans une application comme sur un site web, il faut faire preuve de cohérence : on évitera d’utiliser ces 5 styles de notifications sur une même interface, on risquerait de désorienter l’utilisateur.

1ère méthode : la zone unique de notification

C’est un emplacement, souvent situé en haut de l’interface, qui sert à afficher les notifications de tous types à travers l’application. Cette zone vient toujours se positionner à la même place. Si on décide de la situer dans le header, cela implique de la laisser vide en l’absence de notification. On peut aussi choisir de l’afficher sous le header de manière à ce qu’elle pousse le contenu vers le bas lorsqu’elle apparaît.
Exemple de zone unique de notification

Avantages : Participe à la cohérence de l’application car les messages sont toujours au même endroit. Il n’y a donc pas de surprise, et c’est une bonne chose. De plus, rien ne nous empêche d’utiliser cette approche et de la combiner avec la suivante dans certains cas.

Inconvénients : Quand l’utilisateur est descendu en bas d’une page longue, cette zone est alors masquée. Si on ne voit pas le message, on peut avoir l’impression que rien ne s’est passé. Si la page revient brusquement tout en haut afin que le message soit visible, cela peut être frustrant pour l’utilisateur que l’on a presque redirigé, sans lui demander son avis.

2ème méthode : les messages contextuels

Ce sont les messages que l’on positionne au sein même de la zone concernée. Le meilleur exemple est celui des formulaires. Si le formulaire ne valide pas car un champ comporte une erreur, on préférera mettre en valeur ce champ – en rouge par exemple – plutôt que de mettre un message générique en haut du formulaire. De cette manière l’utilisateur n’a pas trop d’effort à faire : il sait tout de suite ce qui s’est passé et comment rectifier le problème.

Pour faire encore mieux, on peut allier les méthodes 1 & 2 en mettant un message en haut de page avec les détails de l’erreur ET en faisant ressortir les champs à modifier.
Exemple de message contextuel

Avantages : Le message est positionné dans la zone de l’interface concernée, donc l’utilisateur a toutes les chances de le voir.

Inconvénients : Représente un peu plus de travail pour les développeurs et intégrateurs car chaque message est un peu « sur mesure ».

3ème méthode : la fenêtre modale

Elles sont très à la mode, surtout pour la présentation de galeries photo, mais aussi pour les notifications importantes. En général elles sont positionnées de manière centrale dans la fenêtre, avec un calque transparent en fond, signifiant ainsi que le reste de l’interface est désactivé.
Exemple de fenêtre modale (lui-même présenté dans une fenêtre modale)

Avantage : On peut être sûr que l’utilisateur va voir le message. Il y a une idée « d’urgence », ou du moins à une situation critique qu’il faut examiner de plus près.

Inconvénient : C’est une approche assez agressive car on empêche l’utilisateur d’interagir avec le reste de l’application. De plus, on l’oblige à prendre une décision, sans quoi il ne peut pas se débarrasser de la fenêtre. Bref, il ne faut pas abuser des fenêtres modales.

4ème méthode : la boite de dialogue

Par boite de dialogue, j’entends « l’alert box » du navigateur. Elle s’apparente à la fenêtre modale car elle requière une action de la part de l’utilisateur. Par contre le web designer n’a aucun contrôle sur son aspect visuel et son positionnement : cette boite appartient à l’interface du navigateur plutôt qu’à celle de l’application web ou site web.
Exemple de boite de dialogue

Avantages : Le sentiment d’urgence et de gravité qu’elle procure si utilisée avec parcimonie.

Inconvénient : C’est encore plus intrusif qu’une fenêtre modale : on l’associe plus à une « erreur fatale ». Son utilisation est troublante quand il s’agit de communiquer un message purement informatif ou de confirmation car on s’attend à un message d’une certaine gravité.
Contrairement à la fenêtre modale, la boite de dialogue peut passer inaperçue : le reste de l’interface est désactivé mais ce n’est pas mis en évidence visuellement.
Vous l’aurez compris, je n’ai pas beaucoup d’affection pour ce mode de notification et je ne vois pas très bien où il a sa place sur le web.

5ème méthode : les notifications de type « Growl »

Ce sont ces messages qui apparaissent assez discrètement dans un coin de l’écran ou de la fenêtre. Parfois ils disparaissent d’eux-même au bout de quelques secondes, d’autres fois il faut cliquer sur un bouton pour les fermer. Ces notifications se superposent donc à l’interface de manière plutôt subtile.
Voir la démo d’un plugin de type « Growl »

Avantages : Ce système permet d’afficher des messages dans une même zone de la fenêtre quelle que soit la longueur de la page. Cela résout donc le problème de la 1ère méthode où le message peut être masqué si on est en bas de page. Ce type de notification permet de discrètement afficher des messages informatifs et n’empêche pas l’utilisation du reste de l’interface.

Inconvénients : Si on utilise ce système pour des notifications importantes, on risque de ne pas les voir ou de ne pas comprendre l’urgence du message car leur positionnement dans la page n’est pas contextuel. De plus il y a des zones auxquelles nous faisons moins attention (en bas à gauche/droite).

Alternative aux notifications intrusives

Je suis arrivée à la conclusion que toutes ces méthodes – à part peut être la boite de dialogue – sont des solutions valides, mais qu’il faut savoir utiliser au bon moment.

Les solutions intrusives telles que les fenêtres modales et les boites de dialogue sont à utiliser le moins possible, car leur problème est justement… qu’elles sont intrusives.
Et si on pouvait s’en passer complètement ?

En lisant le chapitre « Notifying and Confirming » du livre About Face 2.0, The essentials of interaction design (Alan Cooper & Robert Reimann, Wiley Publishing, 2003), j’ai réalisé qu’il y avait presque toujours une alternative au message intrusif.

Par exemple, si l’utilisateur clique sur un bouton « supprimer » afin d’effacer un document de l’application, pourquoi afficher une fenêtre modale lui demandant de confirmer l’action à effectuer ? Dans 95% des cas, la personne veut vraiment effacer le document. Lui demander de confirmer cette action peut instiguer le doute et créer un certain stress. Par ailleurs, si la même fenêtre apparaît à chaque fois que l’utilisateur souhaite effacer quelque chose, il risque d’y être tellement habitué qu’il va machinalement cliquer sur « OK ».

Mieux vaut donc effacer le document sans rien demander, mais en donnant après coup la possibilité de le restaurer. Gmail fait ça très bien ; il m’arrive parfois de sélectionner un email et de cliquer sur « signaler comme spam » au lieu d’un autre bouton. Aussitôt l’action effectuée, la possibilité de l’annuler est bien visible dans la zone de header, sur fond jaune.

Cette manière de faire est beaucoup plus pertinente car elle traite des cas rares – ces 5% – où l’utilisateur s’est trompé, au lieu d’ajouter une étape pour les 95% des cas où tout se passe comme prévu.

Il faut tout de même savoir que la création d’une fonction « annuler » peut représenter une tonne de travail pour les développeurs. Il peut donc être plus rentable de s’en passer. Par exemple, permettre d’annuler la suppression d’un document est assez simple. En revanche, si l’élément à supprimer est relié à d’autres éléments, tout se complique.

CSS3 en bref

CSS3 permet la création d’effets visuels qui ne pouvaient pas être réalisés auparavant, ou qui nécessitaient du marquage en plus et/ou du Javascript.

En bref, CSS3 simplifie le job de l’intégrateur et met plus d’outils à sa disposition.

Parmi les nouveautées inclues dans les specifications CSS3, on trouve :

• text-shadow : en une ligne on peut ajouter une ombre portée à du texte, et bien plus encore car on peut ajouter autant d’ombres qu’on le souhaite. Pour chaque ombre on définit les distances par rapport au texte d’origine sur les axes x et y, ainsi qu’une valeur de flou. Voici un exemple.
• RGBA : avant on avait la propriété « opacity » qui permettait de rendre des objets translucides. L’inconvénient c’est que tout ce qui est contenu dans cet objet devient translucide, ce qui peut rendre les textes moins lisibles. Avec RGBA on peut définir des couleurs de fond et leur degré d’opacité avec la propriété « background », donc pas de problème de texte illisible.
• Images de fond multiples : avec CSS3 on n’est plus limité à une image de fond par objet ; le nombre est a priori illimité.
• box-sizing : cette propriété permet de changer le « box model ». On a la possibilité d’inclure le padding dans la taille de l’objet, ou le padding + la bordure.

Cette liste n’est pas exhaustive ; Il existe bien d’autres propriétés : dégradés, animations, rotations et autres.

Le problème

Toutes ne sont pas compatibles avec les mêmes navigateurs et à ma connaissance, aucune n’est compatible avec les versions 7 et 8 d’Internet Explorer. Il faudra attendre IE9 pour voir du CSS3 chez Microsoft. (Voir ce tableau de compatibilité des navigateurs avec CSS3.)

Comment utiliser CSS3 dès aujourd’hui alors que Internet Explorer concerne plus du tiers des internautes ?

Cela va dépendre du projet, car si vous créez un site pour un public en particulier qui utilise à 80% IE7, ce n’est peut-être pas très intéressant d’utiliser CSS3. En revanche si votre public se situe dans la moyenne avec 35% de IE, ou mieux, si vous vous adressez à un public assez « geek », vous pouvez dès maintenant utiliser CSS3 tout en travaillant sur des vues alternatives pour les navigateurs moins évolués.

Par ailleurs, il faut savoir que certaines propriétés CSS3 peuvent être reproduites à l’aide de filtres pour IE (ombres, transparence, rotations). Ces filtres sont un peu pénibles à utiliser et ne produisent pas exactement les mêmes effets que CSS3 mais ça peut dépanner. Ne pas oublier de les mettre dans des feuilles de style séparées.

Solution : la dégradation gracieuse

Il est tout a fait possible de concevoir un site utilisant CSS3 pour des effets d’ombres, de rotations, de dégradés ou autre, et d’offrir une version alternative, plus simple, aux navigateurs moins évolués.

Cas pratique : CannyBill.com

Le site CannyBill.com a été réalisé par Andy Clarke. Si vous visualisez ce site sur plusieurs navigateurs vous verrez quelques petites différences. Cet article écrit par Andy Clarke explique sa démarche et présente des aperçus des différents navigateurs.

Selon Andy Clarke, star du Design Web et défenseur des standards Web, il ne faut pas chercher à obtenir exactement le même design dans tous les navigateurs ; il faut produire la meilleure version du site pour le meilleur navigateur (sa référence à lui est Safari 4), puis on descend la chaîne des navigateurs jusqu’à IE en adaptant le design.

Au final, l’utilisateur ne se rendra compte à aucun moment qu’il ne voit pas certains effets du fait du navigateur qu’il utilise. On parle donc de « dégradation gracieuse » car quel que soit le navigateur utilisé, l’internaute est face à un site cohérent visuellement.

Cas pratique : For a beautiful web

Sur la page d’accueil il y a 3 jaquettes de DVD en vente. Sur Safari 4, quand on passe la souris sur une jaquette, le DVD sort vers la droite avec un effet de rotation. Sur Firefox 3.6 le DVD sort sans effet de rotation, et sur IE 7 et 8, le DVD ne bouge pas.
Dans aucun de ces cas l’internaute se demande-t-il si c’est normal ou « cassé » – car peu de gens regardent un même site sur 5 navigateurs différents – donc il s’agit d’un petit plus pour les utilisateurs de Safari et Firefox.

CSS3 en 2010

Donc, pourquoi ne pas utiliser CSS3 dès aujourd’hui ? Il existe un outil qui permet de styler les éléments d’une page différemment selon qu’un navigateur supporte telle ou telle propriété CSS3 en incluant un simple fichier Javascript. Il s’agit de Modernizr. Par exemple, si le navigateur utilisé ne supporte pas le RGBA, Modernizr ajoute la classe « no-rgba » sur le tag HTML, ce qui permet de définir d’autres couleurs pour tous les navigateurs qui ne supportent pas RGBA.

Dans cette expérience, j’ai utilisé du RGBA, des images de fond multiples, et la propriété box-sizing pour inclure le padding et la bordure dans les tailles que j’ai défini.

Quelques liens

J’ai trouvé plusieurs outils qui génèrent les styles en donnant les versions des différents navigateurs. Chacun de ces outils ne propose pas les mêmes propriétés donc il faut en utiliser plusieurs.

• CSS3 please
• CSS3 generator
• Plusieurs outils par Western Civilisation :
  • pour les transformations 2D et 3D
  • pour les dégradés
  • pour les ombres de texte
  • pour les contours de texte
• CSS3 gradient generator pour générer des dégradés
• Border radius pour générer des coins arrondis

Toujours à la recherche de nouveaux process, outils et pratiques, je me suis penchée sur l’idée de ne plus passer par Photoshop pour la création graphique de sites, mais de passer tout de suite à l’intégration. Francis Chouquet (fran6art) parle de « maquettes interactives« .

Le sujet fait un peu de bruit depuis quelques mois, certains voient les avantages de cette manière de travailler, d’autres ne sont pas prêt d’abandonner Photoshop de ci-tôt. Et bien sûr il y a ceux qui se situent au milieu.

Pourquoi une idée aussi farfelue ?

Tout Designer Web soucieux des meilleures pratiques en matière d’ergonomie, de référencement et d’accessibilité, saura que le contenu d’un site est primordial. Alors pourquoi ne pas structurer le contenu d’une page avant de passer à la couche design ? Voilà d’où est née l’idée du « designing in the browser », ou en français, du design dans le navigateur.

Cette manière de travailler n’est pas nouvelle, mais la naissance de CSS3 lui donne un intérêt nouveau. En effet, il est maintenant possible de créer de nombreux effet tels que des ombres, des rotations, des transparences et des dégradés, avec CSS3.

Vous me direz, CSS3 ne marchera pas dans de nombreux navigateurs populaires, alors pourquoi compter dessus ? Il y a plusieurs réponses possibles à cette question ;

1. On pourrait dire que justement, cette méthode va permettre de concevoir un site avec les principes de « dégradation gracieuse » en tête. Peut-être que IE n’aura pas de coins arrondis ni d’ombre, mais on peut faire en sorte que la page reste visuellement intéressante et ergonomique sans ces éléments de design.
2. Travailler dans le navigateur dès le début peut permettre d’éduquer son client de manière plus efficace : il verra tout de suite les différences d’un navigateur à l’autre au lieu de s’étonner qu’au final, son site n’est pas tout à fait le même que la maquette sous Photoshop.
3. On peut choisir cet outil de travail comme point de départ, mais rien ne nous empêche d’altérer le code et de rajouter des images par la suite pour que certains effets soient visibles sur tous les navigateurs. Avant tout l’intérêt est de ne pas travailler dans un format statique. On peut même faire des captures écran et les envoyer au client si on veut mais ça perd un peu de son intérêt.

Photoshop vs. le navigateur

Alors bien entendu chaque méthode a ses avantages et ses inconvénients. Dans Photoshop il sera sans doute plus rapide d’arriver à un design satisfaisant. D’après Dan (Wuup), qui a testé le design dans le navigateur pour ses clients, la phase du design initial est plus longue que dans Photoshop mais au final on gagne du temps sur le développement et donc sur la totalité du projet.

Je pense que les deux méthodes sont valables ; qu’on travaille dans Photoshop ou dans le navigateur, il s’agit de choisir un outil de création graphique qui sera le plus adapté à un projet et à un Designer Web.

Dan coupe la poire en deux en suggérant que le design d’une ou deux pages soit fait dans Photoshop, et le reste du site dans le navigateur. Ça me parait assez raisonnable comme approche, mais je ne suis pas sûre que ce soit très novateur.

Au moins, si on est le genre de Designer Web qui sait coder, on a le choix des outils. Mais ça c’est un autre débat qui fait du bruit depuis plusieurs années…

Quelques liens

• sxsw.beercamp.com : voici un site qui a été réalisé non seulement dans le navigateur, mais surtout avec aucune image – que du code !
• 24ways.org (en anglais) : Meagan Fisher exprime son dégoût pour Photoshop et son approche du design qui consiste à commencer par le contenu.
• Design Shack (en anglais) : voici une liste d’astuces et d’outils pour aider à concevoir un site dans le navigateur.

Récemment, alors que j’étais en phase d’intégration d’un site dont je venais de réaliser la maquette graphique, je me suis heurtée à quelques problèmes de rendu de typographie.

Il faut savoir que le site en question a un fond très foncé avec du texte clair, et que j’ai plus souvent conçu des sites clairs au texte foncé (meilleure lisibilité).

1er problème : rendu du texte plus gras sur mac

A ma grande surprise, mes titres en Palatino italisés apparaissaient en gras sur Mac. Je savais que sur Mac le texte était plus gras que sur Windows, ce que je ne savais pas c’est que l’écart est encore plus élevé quand le fond est foncé et le texte clair. En plus de ça chaque navigateur a un rendu un peu différent. Je n’étais pas prête à accepter une telle injustice donc je me suis lancée en quête d’une solution.

Je n’en ai pas trouvé à ce jour. Les différentes valeurs de font-weight (100, 200, … 900) ne servent à rien si la famille de police d’écriture ne contient pas suffisamment de variations, ce qui est souvent le cas. J’espérais trouver un moyen de tricher un peu avec de Javascript, sans succès.

Pour éviter ce genre de surprise, je vais peut-être essayer TypeKit sur le prochain projet. C’est une bibliothèque de polices d’écritures qui ne coûte pas cher (gratuit jusqu’à 2 polices pour un site) et qui est censée avoir un impact négligeable sur la performance du site. Cela me permettra de jouer sur les différentes variations d’une même police (extra light, light, roman, etc.).

2ème problème : rendu du letter-spacing

Dans Photoshop j’avais choisi de réduire l’espacement entre les lettres par -5 pour les titres. Dans ma feuille de style j’ai donc joué avec différentes valeurs de letter-spacing afin d’arriver à un résultat similaire. J’étais plutôt satisfaite de la valeur -0.02em. Sauf que ça ne marchait ni dans IE6 ni dans IE7, mais ce qui me dérangeait le plus était que ça ne marchait pas bien dans Chrome alors que le rendu devrait être le même que sur Safari (en théorie).

Je n’ai pas trouvé d’explication valable mais sur un forum on m’a proposé d’utiliser la valeur -1px au lieu d’une valeur relative en EMs et c’est l’option que j’ai choisie. J’utilise toujours des valeurs relatives pour le texte mais dans ce cas particulier j’estime que ça n’enlève rien à l’accessibilité du site.

Par contre sur la dernière version de Firefox pour Mac (3.6), les lettres de mes titres sont un peu trop serrées. A propos de Firefox, voici un article qui révèle quelques bugs qui varient d’une version de Firefox à l’autre. Mon problème pourrait en être un de plus.

Au final j’ai donc choisi la valeur -1px car elle rend bien sur la plupart des navigateurs. Après tout, peu de gens sont sur Firefox pour Mac et quand bien même ils utiliseraient ce navigateur, c’est tout à fait lisible.

Conclusion

Il faut accepter que les rendus seront un peu différents d’un navigateur à l’autre et que ça fait partie du jeu. En tant que designer web avec des qualités d’intégrateur, j’ai toujours envie que le site soit la réplique exacte de mon PSD, puisque c’est ce que le client a validé, cependant certains détails échapperont toujours à notre contrôle.

Quand on pense au temps que le designer passe à rendre son site « joli » dans tous les navigateurs, l’idée de travailler directement dans celui-ci fait sens. Nous explorerons cette idée dans le prochain article.

Ca y est, notre dernier projet est dans les starting-blocks. Pour nous aider à le développer, nous recherchons un(e) Développeur Web PHP, ambitieux(se) et motivé(e). Le projet concerne le développement d’une Application Web innovante en mode SaaS. A partir de fin mars 2010.

Vous travaillerez principalement sur le développement d’un projet interne, une Application Web qui sera lancée en beta test fin Avril. Vous pourrez également être amené(e) à travailler sur d’autres projets clients (Sites Internet, Intranet, Applications Métiers) de l’agence.

Nous vous proposons une expérience enrichissante, au sein d’une petite équipe agile encadrée par un Développeur confirmé (anglais impératif) et pourquoi pas de nous rejoindre à la fin du stage. Ah oui, vous pourrez également vous faire le pied marin car nous sommes … sur une péniche. Indemnité de stage à négocier.

Au menu

• développement d’applications fiables, sécurisées et testées
• intégration avec des APIs tierces
• intégration du Web Social à l’application (LinkedIn, Twitter, Facebook, …)
• optimisations et améliorations itératives
• un produit opérationel qui sera lancé avant la fin de votre stage
• l’apprentissage et la mise en application des meilleures pratiques de développement

Profil

Vous êtes :

• passionné(e) par le développement d’Applications Web
• force de proposition, à l’écoute, en veille permanente
• curieux(se) et dynamique
• autonome et communiquant(e) dans votre façon de travailler
• motivé(e) à participer au développement d’une startup

Vous avez :

• une réelle envie de vous investir dans un projet ambitieux
• de très bonnes connaissances en PHP5/MySql, la connaissance d’un ou plusieurs frameworks PHP
• l’habitude de la Programmation Orientée Objet, de l’écriture de Tests Unitaires, des Méthodes Agiles
• de bonnes connaissances en administration système

Vous aimez :

• trouver de nouvelles solutions
• être autonome dans votre travail
• travailler en petite équipe
• parler anglais / écrire anglais (le responsable technique est anglophone)

Si vous vous reconnaissez dans cette description de poste, écrivez-nous à recrutement*_at_*soluo.fr, en précisant la référence webdev1003, et parlez-nous d’un projet que vous avez réalisé dans le cadre de vos études et dont vous êtes fier, d’un challenge que vous avez relevé. Nous ne manquerons pas de vous répondre.

Soluo is looking for an intern in PHP Web Programming to join the development team in Paris. The focus of this internship will be the core developement of a SaaS Web Application. The intern should start at the end of March 2010.

You will be involved in Web Application design and development, third-party integrations (Social Networks such as Twitter, LinkedIn, Facebook) via Web Services / API / XML, development and integration of reporting tools, design and implementation of SQL databases.

We are offering an enriching experience, within a small and agile team, mentored by a senior architect. And hey, maybe you could end up joining the team? Forgot to ask how good is your sea-legs as you will be working in an amazing boat on the Seine. But don’t worry, you should get used to it within 2 weeks.

In this internship you will:

• develop sclalable, secure and reliable Web Applications
• integrate third-party applications
• use Social Web platforms to enhance the App (LinkedIn, Twitter, Facebook, …)
• learn to optimise and enhance through iterations
• get satisfaction in seeing the product launch before the end of your internship
• learn and implement development best practices

Profile

You are:

• passionate about Web Application Development
• curious and proactive
• constantly reseraching innovative solutions
• enthusiastic about getting involved in a startup

You have:

• strong skills in PHP5 and MySQL and experience developing in one of the main php5 mvc frameworks
• experience in OOP, Test Driven Development and Agile Methods
• good system administration skills
• a good level of English

You like:

• being autonomous in your work
• working in small teams
• speaking and writing in English, obviously

If you think this is you, just drop us an email at recrutement*_at_*soluo.fr, specifying the reference webdev1003. Tell us about a challenging project you are proud of which you have realised in the framework of your studies. We will get back to you.

Je vous propose quelques astuces qui peuvent aider le Designer Web à retrouver sa muse. Si vous en avez d’autres n’hésitez pas à les partager dans les commentaires.

1) Consulter des galeries de sites

Ces galeries n’arrêtent pas de se multiplier sur le web.. Elles sont très utiles car elles offrent souvent une sélection de très bons designs dans l’air du temps. Il est inutile de les consulter toutes car on finit par retrouver les mêmes liens et on risque de se disperser. Mieux vaut en choisir quelques unes qui vous conviennent.

Certaines permettent de filtrer les résultats par catégories (charte graphique, style, type de site, éléments de design) :

• Site Inspire
• Design Shack
• Dossier Design

D’autres galeries ne permettent pas de filtrer les résultats par catégorie mais sont tout de même intéressantes :

• Best Web Gallery
• CSS Evo

2) Consulter des collections d’éléments

Il s’agit d’un concept un peu différent des galeries de sites. Patterntap est composé de 45 collections d’éléments web. Admettons que vous souhaitiez trouver des idées de style de navigation, il vous suffit de consulter la collection de capture écrans de navigations. Parmi les 45 collections on trouve : header, footer, boutons, icônes, titres, typographie, listes, 404…

Je ne connais que Patterntap dans ce genre. Si vous en trouvez d’autre n’hésitez pas à les partager dans les commentaires.

3) Jeter un œil sur la concurrence

Allez voir à quoi ressemblent les sites des concurrents de votre client et d’autres sites du même domaine. S’il s’agit d’un restaurant, regardez des sites de restaurants à travers le monde. Cela vous donnera des idées de ce que vous aimeriez faire ou au contraire de ce que vous voulez à tout prix éviter.

4) L’auto-inspiration

Si vous travaillez comme designer web depuis quelques années, vous avez probablement réalisé quelques bon designs dont vous avez momentanément oublié l’existence. Les consulter peut vous aider à reprendre confiance et trouver de nouvelles idées. Le mieux est d’avoir votre propre site portfolio que vous gardez à jour.

5) Utiliser un site de bookmarking

J’utilise Delicious depuis plusieurs années mais il y en a d’autres (Digg, StumbleUpon…). L’essentiel est d’en choisir un et de l’utiliser activement.

Quand vous surfez sur le web et que vous voyez un site dont le design vous plait, ajoutez-le à vos favoris et choisissez bien les mots-clef que vous lui associez. Si c’est un site très sombre n’hésitez pas à ajouter le mot « sombre » ou « dark ». Si vous aimez particulièrement le logo, et la typographie, ajoutez donc les mots « logo » et « typographie ». Peut-être est-ce un site de ecommerce? Ajoutez donc le mot « ecommerce ». Vous serez bien content de retrouver ces sites plus tard quand vous manquez d’inspiration.

Vous pouvez aussi faire une recherche parmi les favoris des autres utilisateurs. C’est souvent plus utile que de passer par un moteur de recherche classique.

6) S’éloigner de l’ordinateur

C’est sans doute le conseil que j’applique le moins ; beaucoup vous le diront, prendre une pause et regarder le paysage ou un livre de design (pas forcément web) peut aider à trouver de l’inspiration.

Et vous, qu’est ce qui vous inspire ?

Mise à jour : the Smashing Magazine vient de publier un article avec d’autres conseils pour trouver de l’inspiration (en anglais).

Cet article n’a pas pour but d’entrer dans la polémique « Flash contre Javascript ». Personnellement je suis une fervente défenseuse des formats ouverts et des contenus accessibles pour tous. Il est vrai que Flash a toujours sa place sur le web pour certains types de projets nécessitant de la vidéo et des animations complexes.

Cependant j’aimerais casser l’idée reçue qu’il y a systématiquement besoin de Flash pour créer des expériences riches. Il est temps de réaliser que HTML + CSS + Javascript peuvent produire des interfaces très riches en terme d’expérience utilisateur, tout en offrant beaucoup plus d’avantages que Flash.

Un prochain article traitera des éléments d’interfaces pour lesquels Javascript peut être utilisé au lieu de Flash. En attendant, voici une collection de 5 sites hauts en couleurs qui n’utilisent pas Flash.

World of Merix

Il s’agit du site d’une agence polonaise qui produit des sites internet. Ils expliquent qu’ils produisent des sites en HTML et qu’ils s’attachent à respecter les standards W3C.

Le site se charge rapidement et l’expérience est agréable On aimerait un peu plus d’interaction avec la carte. Le site est contenu dans une seule page dont le HTML est bien structuré.
Voir le site World of Merix

Tori’s eye

Visuellement c’est assez charmant. On a envie de faire au moins une recherche pour voir ce qui se passe. C’est le genre de petite expérimentation qu’on aime partager et consulter à l’occasion. Par contre ce site demande beaucoup de ressources et son temps de chargement est assez long. On aimerait voir une barre de chargement afin d’avoir une idée du temps d’attente.
Voir le site Tori’s eye

The Show 09

A part le petit effet d’animation interactive sur la page d’accueil lorsque l’on descend la page, et quand on clique sur “Try it”, il ne se passe pas grand chose. Et pourtant, ce site n’est-il pas superbe? Le design en lui même est très actuel et fait une utilisation remarquable de sIFR et de PNG transparents. Si ça ne vous suffit pas, vous pouvez faire l’expérience d’un peu de réalité augmentée: cliquez sur “Try it”, imprimez le PDF puis cliquez sur “get started”.
Voir le site The Show 09

FormFiftyFive

FFF c’est un groupe “d’artistes vagabons“ qui présentent leur travaux divers. Le site est assez minimaliste et ça lui va bien. Pour moi, c’est assez représentatif de ce qu’un site en HTML (avec Javascript) peut apporter : la simplicité, la classe, et des fonctionnalités très actuelles. Je pense à la possibilité de filtrer par tag et les commentaires des internautes façon Twitter feed. A condition d’avoir créé son compte, on peut sélectionner nos travaux préférés et le garder en mémoire sur le site.
Voir le site FormFiftyFive

Tennessee trails & byways

Ceci est un site dédié à la promotion de l’état du Tennessee (USA) et de ses trésors culturels cachés. On reproche à ce site un temps de chargement assez long mais l’expérience en vaut la peine ; c’est charmant et on a assez envie de faire un tour dans cette région.
Voir le site Tennessee trails & byways

Si vous connaissez d’autres sites sympas qui n’utilisent pas Flash, n’hésitez pas à les partager. Encore une fois, cela n’enlève rien à Flash mais il faut savoir choisir la technologie la plus adaptée à un projet donné.

Note sur l’avenir de Flash avec l’arrivée de HTML5 et CSS3

La donne va encore changer avec la naissance de HTML5 et de CSS3 ; beaucoup plus d’effets visuels seront possible avec seulement quelques lignes de code. Surtout, Flash risque de perdre le terrain de la vidéo car HTML5 contient un lecteur natif. Déjà, des sites comme YouTube utilisent HTML5 pour la vidéo. Cependant il y a un conflit entre les principaux acteurs du web (Apple, Mozilla, Google etc) quant au codec à utiliser : l’un est un format ouvert, l’autre est non libre et payant. Une affaire à suivre.

Quelques liens

Pour en apprendre plus sur ce qu’offrent HTML5 et CSS3, lisez l’article de Raphaël Goetter sur Alsa Créations.

Pour en savoir plus sur le conflit des codecs video avec HTML5, voici un article des Echos du Net.

La fin de l’année approche à grands pas, vous auriez aimé envoyer une carte de vœux à vos clients et partenaires mais vous n’avez pas le temps de vous en occuper?

Nous mettons à votre disposition une e-carte de voeux HTML gratuite que vous pouvez personnaliser avant de l’envoyer à autant de contacts que vous le souhaitez.

Deux e-cartes au choix

Cette e-carte se décline en deux versions: une version générique et une version Paris.

Prévisualiser la version générique.
Télécharger (zip 2Ko)

Prévisualiser la version Paris.
Télécharger (zip 2Ko)

Pour customiser le message de votre e-carte, il suffit d’avoir quelques notions de HTML. Vous pourrez ainsi remplacer le texte qui figure sous le titre « Joyeuses fêtes » par votre message. Mettez votre logo (préalablement sauvegardé sur un serveur) à la place de l’image logo.gif et le tour est joué !

Pour l’envoi de l’e-carte, vous aurez besoin d’Outlook ou d’une application telle que MailChimp ou Campaign Monitor.

MAJ 10/11/09 – Le poste a été pourvu

Dans le cadre de son développement, Soluo recherche un/e Webdesigner Integrateur HTML/CSS expérimenté(e).

Vous travaillerez sur l’ensemble des projets de la société : conception d’interfaces pour des applications Web, création et refonte de sites, design de blogs.

Profil

Vous êtes :

- expérimenté(e) et passionné(e) par le webdesign, capable d’intégrer vos réalisations
- force de proposition dans la conception de nouvelles interfaces
- curieux(se) et à la recherche de nouvelles idées pour vos projets
- autonome et communiquant(e) dans votre façon de travailler
- motivé(e) à participer au développement d’une entreprise
- dynamique

Vous avez :

- une expérience solide dans la conception d’interfaces Web
- la maîtrise des outils Photoshop, Illustrator, …
- une très bonne connaissance des langages HTML et CSS de manière à réaliser des intégrations cross-browser
- une connaissance de php suffisante pour intégrer les designs dans des templates php
- une connaissance de javascript pour être autonome dans l’animation de vos interfaces est un plus

Vous aimez :

- trouver de nouvelles solutions (ergonomie et interfaces)
- être autonome dans votre travail
- travailler en petite équipe

Si vous vous reconnaissez dans cette description de poste, écrivez-nous à recrutement*_at_*soluo.fr, en précisant la référence webdesigner0909, et faites-nous parvenir quelques réalisations de qualité, même personnelles. Nous ne manquerons pas de vous répondre.

Vous connaissez sûrement WordPress, le meilleur outil de blog à ce jour. WordPress est un produit (ou logiciel) Open Source, c’est à dire qu’il a été développé par la communauté de développeurs web à travers la planète. Il a connu de multiples évolutions et améliorations, et en est aujourd’hui à la version 2.8.3. Mais vous ne connaissiez peut-être pas encore WordPress MU, son grand frère.

Pourquoi WordPress MU ?

WordPress permet de mettre en place un blog ou un site web simplement et très rapidement. La plupart des bloggers utilisent aujourd’hui cet outil né en 2003. WordPress répond donc parfaitement au besoin de la mise en place d’un blog.

Dans dans certains cas, lorsqu’un blogger gère plusieurs blogs par exemple, ou lorsqu’une entreprise ou une administration souhaite animer une communauté en proposant à ses membres d’ouvrir un blog, les tâches d’administration et de maintenance seraient trop lourdes si elles devaient être effectuées pour chaque blog un à un. WordPress MU est né du besoin de mutualiser ces tâches. Voyons maintenant les grandes caractéristiques de WordPress MU.

L’interface d’administration de WordPress MU

L’interface de WordPress MU est la même que celle de WordPress. Elle est donc très ergonomique, d’une prise en main simple et rapide. La copie d’écran parle d’elle même :

Tout comme WordPress, WordPress MU bénéficie d’un système d’extensions (ou plugins)

Une des grandes forces de WordPress est son système de plugins permettant d’étendre ses fonctionnalités afin d’obtenir une solution spécifique à chaque besoin. on trouve ainsi des plugins pour le référencement, pour gérer les formulaires de contact, pour analyser le trafic du blog ou bien pour optimiser des performances.

L’interface d’administration du super administrateur

D’un point de vue super administrateur, c’est à dire administrateur de la plateforme, l’interface est identique, au détail près qu’elle ajoute un onglet supplémentaire, l’onglet « Admin. du site », regroupant divers options de configuration de la plateforme.

Sur WordPress MU, la question du design n’est pas laissée de côté, et la personnalisation de chaque blog est gérée.

La gestion du design sur WordPress MU

D’un point de vue blogger, WordPress MU permet tout comme WordPress d’habiller son blog avec n’importe quel thème compatible (Voici notre classement des meilleurs thèmes WordPress). Le super admin, lui, peut autoriser les bloggers à ajouter tel ou tel thème installé sur la plateforme, de même qu’il peut décider d’autoriser blog par blog le thème qui sera utilisable. Ce qui est particulièrement pratique dans le cas où la plateforme héberge des blogs de différentes entités.

La conclusion sur WordPress MU

WordPress MU est donc un logiciel extensible, robuste et répondant parfaitement à la problématique multiblogs. Son interface sobre et efficace permet une prise en main rapide. Son système de plugin permet de le personnaliser en fonction de chaque besoin!

Pour les plus techniques de nos lecteurs, n’hésitez pas à consulter notre tutoriel sur l’installation de WordPress MU. Sinon, n’hésitez pas à nous contacter pour étudier ensemble votre projet.