blog

Vestiges d’un CSS Guru

Catégorie : Avis

Billet

Un h1 pour le logo ou pas ?

A la question “Est-ce que je mets un <h1> pour mon logo ?”, je répondais oui avant. Maintenant, je réponds non.

Le débat

Il existe un débat assez récurrent sur l’élément de la page qui portera le h1. Que ce soit dans un post ou deux, ou dans des commentaires, la question reste ouverte. Il y a 2 écoles :

  • h1 pour le logo
    Etant donné que le logo porte le nom du site, c’est l’élément le plus important. Il doit donc être dans un <h1>, sur toutes les pages.
    Exemple : http://wordpress.org/
  • h1 différent par page, un lien pour le logo
    Le h1 doit représenter le contenu de la page. Ce dernier étant différent pour chaque page, il faut que le h1 change aussi.
    Exemple : http://simplebits.com/

Cas particulier : il arrive d’avoir un h1 pour le logo uniquement sur la page d’accueil, les autres pages ayant un h1 différent. Je classe ces sites dans la deuxième catégorie.

Le h1, le plus important et l’unique (?)

C’est quoi un h1 d’abord ? Selon le W3C, ça donne :

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Le h1 est le titre de premier niveau et doit introduire la section qui le suit.

Paradoxal le h1 ?

Si le h1 est sur le logo, alors il est tout en haut. Il doit donc décrire tout ce qui le suit, c’est à dire, le reste de la page. Il ne faut pas le mettre sur le logo alors ?

Title et h1 : amis intimes

Le titre de la page (balise <title>) est défini ainsi par le W3C :

The TITLE element is not considered part of the flow of text. It should be displayed, for example as the page header or window title. Exactly one title is required per document.

Le titre est unique et doit décrire le contenu de la page. C’est à peu près de cette façon que j’utilise mon h1 : il est unique et décrit la page. Il est pour moi différent pour chaque page, comme l’est le titre.

Par contre, le titre doit être davantage fourni que le h1. L’idéal pour ce post serait :

  • <title>Un h1 pour le logo ou pas ? < Blog < bbxdesign</title>
  • <h1>Un h1 pour le logo ou pas ?</h1>

Mon titre décrit le contenu du document et d’où il provient.
Mon h1 décrit la section qu’il introduit : mon post.

Les deux sont complémentaires parce que l’un fait partie du flux du document, l’autre non. Ils ont donc un rôle légèrement différent.

Un h1 est-il unique ?

Je viens de remarquer que Digg et A List Apart ont deux h1 dans la même page (lorsque l’on va dans les commentaires ou sur un article). Ca m’a surpris parce que j’ai toujours cru que le h1 était unique, comme l’est la balise title. Le W3C ne spécifie rien sur l’unicité des headings (h1,h2,h3…) mais étant donné qu’elle préconise d’utiliser une partie de la balise title pour son contenu, je présume qu’il faut que le h1 soit unique.

La solution optimale : un h1 différent par page, un lien pour le logo

Si je résume, le h1 :

  • décrit la section qui le suit
  • reprend une partie du title, qui lui-même décrit la page
  • est unique (selon moi)

Cette équation a une seule solution : il y a un h1 différent par page, un lien pour le logo (à part éventuellement pour la page d’accueil, qui est un cas particulier).

Si le h1 doit décrire ce qui le suit et que je le mets sur le logo “bbxdesign” sur toutes les pages (il l’est actuellement uniquement sur ma page d’accueil), alors toutes mes pages auront comme contenu “bbxdesign” ? C’est très léger comme description de ma page, et très redondant, surtout pour les moteurs de recherche. Toutes mes pages ne parlent pas de “bbxdesign”. C’est juste le nom du site (qui est par ailleurs dans l’url). Mes pages ont toutes un contenu différent et je veux que mon h1 reflète ceci. C’est pour ça que ma page d’accueil a le logo comme h1, mais tous mes posts ont leur titre comme h1 (et le logo devient h2).

Le logo décrit le site, pas la page que l’on consulte actuellement. Après, il est possible de mettre deux h1, un pour le logo, un pour le titre du post par exemple. Mais cela voudrait dire que le premier h1 (celui du logo) affiche “bbxdesign”, et l’autre affiche “Un h1 pour le logo ou pas ?”. Pourquoi pas, mais je trouve que le second a davantage de poids et de légitimité que le premier. Et étant donné que l’on jusqu’à 6 niveaux hiérarchiques, pourquoi ne pas en tirer profit ?

Les titres : une question d’ordre ou de poids ?

Si le h1 n’est pas le logo, il se peut (et c’est mon cas) que le h1 ne soit pas le premier élément de la page, mais arrive après le header et la navigation. Est-ce que c’est problématique ? Je ne pense pas. Le W3C ne précise rien à ce sujet. Il faudrait plutôt se poser la question si les titres (h1,h2,h3…) sont davantage une question d’ordre ou de poids ?

A première vue, c’est surtout une question d’ordre. On a d’abord un h1, puis un h2, puis un ou plusieurs h3, puis peut-être un autre h2 suivi d’autres h3… A ce propos, il est interdit de “sauter” un niveau hiérarchique. On ne passe pas d’un h1 à un h3 sans avoir de h2. Il faut voir les h1-h6 comme des chapitres d’un livre.

Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

Pour le W3C c’est une question d’ordre. Mais il m’arrive de ne pas suivre cette règle à la lettre. Par exemple, dans une sidebar structurée, je mets des <h3> et des <ul> parce que c’est le poids que je leur donne par rapport au contenu de la page. Et mon post a lui aussi des h3-h6. Par conséquent, l’ordre de mes titres dans mon code peut passer du h6 au h3. Et ce n’est pas spécifique à la sidebar. Ca peut arriver lorsqu’il y a plusieurs zones dans la page avec un contenu différent.

Les titres h1-h6 restent des éléments assez mal utilisés (par moi d’abord), sans doute par manque de précisions de la part du W3C. En même temps, c’est peut-être têtu de s’obstiner autant. Parce qu’en ayant d’un côté le W3C (avec les soucis de standardisation et d’accessibilité) et de l’autre les moteurs de recherche (qui analysent minitieusement notre code), couplés à un flou autour de la définition de l’utilisation des titres, on se demande parfois si la solution est unique.

Billet

Le temps d’intégration

Je me suis posé la question de savoir combien était divisé mon temps pendant que j’intégrais. J’ai divisé en 5 parties ce temps (peut-être en oubliant des parties) et évalué grossièrement leur répartition. Je suis arrivé à ce graphique :

bbx-temps-d-integration

HTML : vers davantage de modularité

Je code toujours en XHTML 1.0 Strict, et ça m’a évité pas mal de problème de Quirksmode je me rends compte. J’utilise au maximum les balises sémantiques <p>,<ul>,<label>,<hn>,<strong>… mais je suis de moins en moins réticent à multiplier les <div> et <span>. D’un côté, c’est cool d’éviter la divite, c’est joli, c’est léger. Mais en pratique, et surtout pour les gros sites, il faut être très spécifique quant aux styles à appliquer à certains éléments. Donc je rajoute une ou deux div par ci par là pour améliorer ma productivité et surtout la flexibilité du code. Ca facilite grandement la différenciation. Et ça permet surtout de prévoir d’eventuelles évolutions de fonctionnalités, et avoir une approche plus modulaire.

A force de prôner la séparation HTML (contenu) / CSS (mise en page), on a peur de modifier le HTML, comme si c’était devenu interdit voire impossible. Je me dis que les développeurs ne sont pas bien méchants et que l’on peut leur demander des modifs HTML, avoir plusieurs classes sur un même élément au lieu de répéter son code CSS pour pas grand chose (voir plus bas).

CSS : une seule css, un reset et de moins en moins de contextualisation

C’est évidemment très lié au HTML utilisé. Depuis quelques temps, je me suis fait un fichier reset.css qui utilise le Reset CSS de Yahoo! . Par contre, ce n’est pas un fichier que j’importe à chaque fois mais un code que je copie-colle en créant ma CSS. Parce que oui, je préfère garder une seule CSS pour tout le site. Niveau lisibilité, je n’ai pas trop de problème à utiliser un seul fichier parce que j’écris chaque sélecteur CSS sur une seule ligne. Niveau productivité, répartir des propriétés sur plusieurs CSS c’est passer beaucoup de temps de l’une à l’autre, trouver où se trouve ce sélecteur, éviter les conflits… J’évite. Et le seul vrai avantage d’avoir plusieurs CSS, c’est d’en appeler certaines dans certains cas, et d’autres dans les autres cas. Je préfère mettre une class au body pour différencier les pages, c’est beaucoup mieux.

Les exceptions pour utiliser plusieurs CSS sont : un fichier pour ie6, un fichier par couleur (si il y a des thèmes par couleur) et un fichier pour le print.

Je fais encore pas mal de contextualisation (ex: .bloc table tbody td.direction ) parce que ça permet d’éviter les conflits. + de contextualisation = – de classes à créer

Appliquer le même style à des éléments HTML différents

Il y aussi le cas où vous voulez que plusieurs éléments HTML aient les mêmes propriétés CSS Dans ce cas, il y 3 choix :

  • copier-coller les mêmes propriétés pour la nouvelle classe (bouh, pas bien!)
    .maclasse { propriétés identiques }
    .monautrelement { propriétés identiques }
    .montroisieme { propriétés identiques }
  • mettre les éléments qui ont les mêmes propriétés à la suite
    .maclasse, .monautreelement, .montroisieme { propriétés identiques }
  • créer une nouvelle classe et rajouter cette classe dans le HTML
    .manouvelleclasse { propriétés identiques }

La première méthode est à éviter : si on veut changer une propriété (ex: la couleur d’une bordure), il faut le changer autant de fois que l’on a copié-collé.
La deuxième méthode est la plus propre : le HTML reste relativement léger (= non alourdi de classes) mais la CSS est plus longue à maintenir. C’est ce que je faisais avant.
La troisième méthode est plus “modulaire” je dirais. Un élément HTML aura par exemple : class=”.maclasse .manouvelleclasse”. On rajoute donc une classe aux éléments qui ont le même style. Mmmh. Est-ce que c’est bien ? Est-ce que l’on sépare bien la mise en page du contenu ? Plus ou moins je dirais. En fait, dans le HTML, on ajoute la classe à tous les éléments qui doivent appraître de la même façon. Et si on veut plus qu’un élément n’aie plus ces propriétés ? Il faut supprimer la classe dans le code HTML. Ah. C’est pas bien. On ne devrait plus avoir à toucher au code HTML. En théorie, c’est vrai. Mais en pratique, c’est, d’une part, très rare de vouloir changer le style d’un seul élément, et d’autre part, pourquoi n’aurait pas-t-on le droit de modifier le HTML ? Une fois livré, on ne peut plus rien faire (voir § sur le HTML) ?

Je dois préciser une chose importante : cette méthode modulaire, je l’utilise surtout pour les blocs et les gros éléments, pour les éléments qui structurent et divisent l’affichage. Il faudrait que j’envisage de faire un article avec des exemples plus éloquents. 🙂

IE6 : 40% de perte de temps

J’ai déjà parlé de ce que l’on pourrait faire si IE6 n’existait plus. En fait, rendre un site compatible IE6, c’est du débuggage pur et simple. On doit utiliser des overflow:hidden, position:relative, display:inline… pour aucune raison valable si ce n’est faire plaisir aux internautes du siècle dernier (ou presque). Sans compter tout ce que l’on est privé de faire. Bref, une calamité.

Nommer les class/id

Dans mon souci d’avoir un code lisible, pour moi et ceux qui retoucheront aux CSS, j’essaye d’avoir des noms de class/id simples mais efficaces. Simple, ça veut dire court. Avec 4 lettres, on peut faire pas mal de choses : .bloc, .nav, .main, .side… J’ai par exemple remplacé .pagination par .page. Ou mettre .srv au lieu de .service. C’est pas très méchant et ça permet d’avoir une CSS bien plus lisible (surtout si l’on contextualise ET que l’on met tout sur une ligne).

Et si je passe autant de temps, c’est aussi pour éviter d’appeler un élément “grillade” par exemple (alors que ça n’a rien à voir avec un barbecue). J’ai vérifié, elle y est encore.

Découper les images

Dernier point : découper le PSD. On voit directement si un PSD est fait par quelqu’un qui sait intégrer ou pas. J’ai de la chance, c’est souvent le cas. Mais lorsque ça ne l’est pas, il faut voir les effets de dégradés, les superpositions, les ombres qui dépassent… qui n’ont l’air de rien graphiquement, mais qui sont une calamité à intégrer. D’ailleurs, c’est une calamité à cause d’IE6! Parce que pour IE6, il faut tout aplatir! L’ombre doit aller avec l’élement qui la fait ET avec l’élément où elle se projette. N’est-ce pas logique ? Et bien non. Vive les PNG. C’est tout.

Conclusion

J’ai essayé de faire un rapide panorama de ce que doit faire un intégrateur. On se rend compte que le grand ennemi reste IE6. Les 40% cités correspondent au temps de débuggage, mais je suis sûr qu’on peut gagner du temps dans les autres domaines (découpage, css, html) si il n’y avait pas IE6. J’ai peut-être oublié des éléments, je ne sais pas. Vous avez des idées ? Des remarques ? Des critiques ?

Billet

Si IE6 n’existait plus…

J’avais lu un article sympa il y a quelques jours : “10 cool things we’ll be able to do once IE6 is dead“. Je me suis dit que j’allais me faire une petite liste perso.

Si IE6 n’existait plus :

  • les dégradés, ombres portées, arrondis… ne me prendraient plus la tête ! Je vous aime les PNG.
  • je n’aurais plus besoin de mettre des display:inline à mes float
  • j’utiliserais les pseudo-classes :first-child, :after, :lang…
  • les hacks du type * html ou _left iront aux oubliettes
  • j’arrêterais les <input class=”text” type=”text” /> parce que je pourrais mettre input[type=text]. Ah les sélecteurs d’attributs
  • les overflow:hidden seraient réduits de 95%
  • je mettrais des :hover sur ce que je veux
  • plus besoin de li{ display:inline;}
  • je pourrais sélectionner les enfants directs (p > a)
  • je n’aurais plus besoin de twitter mon score face à IE6 (actuellement IE6 mène 4 à 3 )
  • j’installerai IE8 sur mon PC à la maison
  • je passerais 50% de mon temps à faire autre chose
  • je devrais trouver un autre bouc-émissaire
  • je ne stresserais plus en appuyant sur F5

En attendant, je galère encore.

Billet

Le rôle de Twitter

Que l’on soit réticent à l’idée d’utiliser Twitter ou ignorant quant à son potentiel, on ne peut négliger l’importance qu’a pris ce service, surtout ces dernières semaines. Le pouvoir de l’instantané est réel, surtout dans un monde aussi vif et rapide que le web. Je pense que Twitter est moins un micro-blog qu’un nouveau mode de communication à part entière. A la différence d’un flux RSS qui n’est “qu’un” média entre l’internaute et les posts de blog, un “twit” peut se suffir à lui-même autant qu’il peut véhiculer des informations ou démarrer des conversations.

Twitter, c’est un peu la télé du web

Cela fait presque 2 ans que je ne regarde plus la télé. En arrivant à Paris, je m’étais refusé de prendre mon poste avec moi. Je me suis rendu compte que la télé se résumait à un flux incessant d’images, sans que l’on puisse en retenir quoique ce soit. Le divertissement se fait dans l’immédiat mais ne se pérennise pas. Je mets de côté les films, documentaires et évènement sportifs télévisés parce qu’ils ne sont pas spécifiques au support. Ils existent malgré la télévision.

Twitter hérite de ce côté perpétuel mais non tangible de la communication en temps réel. On ne sauvegarde pas les twits. On les lit, on y répond, on les utilise au moment où ils arrivent. Le passé est insignifiant par rapport au présent. Mais contrairement à la télévision qui est exclusivement unidirectionnelle, Twitter peut être autant uni- que bi- voire multi-directionnel. Il y a une suite aux twits, un résultat, parce qu’ils peuvent engendrer des intéractions entre utilisateurs.

Le nom de domaine ne suffit plus : il faut aussi son Twitter

La présence en ligne d’une entreprise ou d’un individu passe maintenant aussi par Twitter. Le site web est la carte d’identité, la vitrine, le produit. Le Twitter est l’actuel, le personnel, le mouvement. Il faut se jeter sur son pseudonyme Twitter parce que contrairement aux noms de domaines qui ont plusieurs extensions possibles, le pseudonyme n’a que des lettres/chiffres/underscore (le tout limité à 16 caractères). Il existe d’ailleurs un outil pour trouver des noms de domaine ET les comptes Twitters associés disponibles : Domain Pigeon. Il ne reste par exemple que 17 854 comptes Twitter à 3 caractères.

Autre particularité : Twitter mise tout sur son API. Il n’est pas possible d’installer une application Twitter sur son serveur (comme WordPress). Il faut toujours être relié au site Twitter et chercher/envoyer les twits via l’API. Le propriétaire de mondomaine.com est alors contraint de s’inscrire à twitter.com/mondomaine. Il est bien évidemment possible d’avoir un autre nom comme pseudo, mais c’est non seulement peu “glorieux” mais le choix des possibilités se restreint très vite.

Ma vision est encore assez floue de Twitter, et je ne dois pas être le seul. J’ai écrit en vrac ce qui me passait par la tête, sans trop prendre de recul. C’est un début d’avis, qui continuera sans doute, et sera éventuellement altéré au fil du temps. Si vous connaissez des posts qui essayent de faire la même chose, prévenez-moi!

Billet

Axa rate sa refonte de site

Je viens de découvrir sur 2803 que Axa avait fait une refonte de son site. Ce qui m’a le plus surpris dans le post de 2803, c’est que ce soit un post sponsorisé (traduisez par “post subjectif et honteusement élogieux”). Parce que la nouvelle version du site d’Axa ne manque pas de lacunes.

axa-menu

Un carrousel bien lourd

Malgré le fait que Flash gère le streaming, l’internaute doit attendre d’avoir bien chargé les 7 livres virtuels pour voir s’afficher quelque chose (presque 10 secondes d’attente). Même si l’effet “carrousel” est sympathique à voir, il est très loin d’être pratique. Et si les pages derrière ne suivent pas en terme de design et d’ergonomie, je ne vois pas l’intérêt d’inciter l’internaute à cliquer si ce n’est pour le perdre à la page suivante.

Pourquoi un menu en Flash ?

L’élément qui m’a surpris en premier est le menu de gauche, en Flash. Pourquoi en Flash? Pour le pivoter bizarrement et le rendre presque illisible (lisez-vous “Entrer vos mots clés” qui d’ailleurs devrait être “Entrez vos mots clés”)? Le fait qu’il soit pivoté suggère qu’il n’est pas intéractif, alors qu’il l’est.

Et le champ de recherche prédictif qui fait partie de ce que l’on peut considérer comme “l’état de l’art de ce qui peut se faire en terme d’interfaces riches” (si je reprend les mots du post de 2803) aurait facilement être réalisé en JS, et il en aurait été bien plus lisible.

Disposition bancale des éléments de navigation

Axa est à la fois banque et assurance. On peut accéder à l’un ou à l’autre en cliquant sur l’un des liens placés au-dessus du carrousel. Au lieu de dire “placés” je devrais dire “flottants” parce qu’ils semblent avoir été déposés là malencontreusement. Il faut d’ailleurs attendre que le carrousel ait été chargé en entier pour enfin voir ces liens qui a priori sont primordiaux. Et ne cliquez pas sur “Banque” car vous vous retrouverez sur un autre site (sans que cela soit indiqué…).

Et le reste…

Les pages intérieures du site mériteraient que l’on s’y penche très longuement. Les erreurs d’ergonomie sont multiples : checkboxes utilisées à mauvais escient, mauvaise présentation de l’information, incohérence du contenu…

Ce qui me choque le plus est qu’un bon blog comme 2803 ai décidé de jouer au jeu du post sponsorisé, qui n’est rien d’autre qu’une fenêtre de communication privilégiée, où la charte habituelle du blog s’efface devant les intérêts de l’entreprise commanditaire. Je continuerai bien sûr de lire 2803 qui regorge de très bons articles, mais j’espère vraiment ne plus voir ce genre de post.

PS: ne désactivez surtout pas JS pour aller sur le site d’Axa… Vous verrez ceci :

axa-sans-js

Billet

iPhone ≠ iPod Shuffle + PSP + eeePC

L’iPhone est à la base un téléphone mobile. Mais les raisons de son succès (médiatique et économique) réside dans tout ce qu’il sait faire d’autre : Internet, Jeux, Musique.

Ayant acquis un iPhone il y a 1 mois, mais possédant déjà un iPod Shuffle, une PSP et un “eeePC ” (Medion Akoya Mini E1210), je pensais me passer progressivement de ces 3 objets. Oui et non.

iPhone = iPod plus classe mais moins pratique

L’interface d’un iPhone (ou iPod Touch) est tactile : elle est donc visuelle. Il faut quasi obligatoirement regarder l’écran pour écouter de la musique. En tant que baladeur mp3, il devient laborieux de changer de morceau ou d’éteindre la musique (il reste cependant la possibilité d’augmenter/baisser le volume mais ça reste rudimentaire).

Au contraire, un iPod Shuffle, sans écran (et donc, avec uniquement de véritables boutons physiques), demeure parfait pour une utilisation en transport. On pilote à l’aveugle, uniquement avec ses doigts. Vous me direz qu’il manque un écran pour au moins savoir quel artiste on écoute. Mais à titre personnel, je mets maximum 4 albums sur mon Shuffle, et justement en mode non shuffle (donc, à la suite). Je sais quasiment toujours qui j’écoute. Si vous mettez toute votre bibliothèque musicale, ça peut devenir pénible pour certains. Dans ce cas, je préfère encore un iPod Nano qui garde encore de vrais boutons.

iPhone = PSP différente

L’iPhone est avant tout, autre chose qu’une console de jeu, a priori. Mais la prolifération de jeux sur cette plateforme et l’arrivée de gros éditeurs (Konami par exemple avec Metal Gear Solid, Frogger et Silent Hill) font de facto de l’iPhone une console portable, concurrente des DS et PSP.

Concurrente, vraiment ?

Performances

Incontournables même si parfois secondaires, les performances brutes d’une console sont un point important, notamment pour la qualité graphique et la fluidité des jeux. Selon le président de SEGA America, l’iPhone est aussi puissant qu’une Dreamcast. Mieux qu’une DS (= Nintendo 64), mais moins bien qu’une PSP (= Playstation 2).

Catalogue de jeux

Oui, il y a des tonnes de jeux qui sortent toutes les semaines sur iPhone. Mais combien de bons jeux ? Pour l’instant, j’ai constaté une part énorme de jeux du type casual gaming dont la plupart sont (heureusement) gratuits. L’iPhone ne serait qu’une plateforme où l’on transfèrerait tous les jeux Flash du web ? Le comble!

Certains éditeurs pensent différement et tant mieux pour nous! Je pense à Sim City, Rolando (quasi-remake de LocoRco), Tap Tap, Payback (GTA 2 like), Crash Bandicoot Nitro Kart

Interface

L’iPhone est une console sans bouton! Il reste possible d’en simuler virtuellement (sur Real Football par exemple). Mais il n’y a pas la précision d’un vrai bouton digital, binaire (appuyé/pas appuyé). Je m’imagine très mal jouer à PES 2009 autrement qu’avec ma PSP.

Quoiqu’il en soit, l’iPhone a ses attraits. Tous les jeux à base de clic de souris se portent très bien sur iPhone, où le tapotage se substitue au clic. Je pense par exemple aux jeux de stratégie au tour à tour : Lux Touch (Risk dans ta poche!) ou Reign Of Swords. N’oublions pas les jeux de cartes et de réflexion.

Un autre atout : l’accélèromètre. Ou une toute nouvelle manière de jouer! Ca donne des jeux assez sympas : Labyrinth ou Super Monkey Ball.

iPhone = eeePC de poche

Le web joue un rôle essentiel dans la popularité de l’iPhone. De plus en plus d’applications web possèdent leur version iPhone, que ce soit une version optimisée pour le navigateur (Google Reader) ou bien une application à part entière (Facebook, WordPress).

Si l’on rajoute les applications basiques de type mail, agenda, prises de notes, messagerie, photos… on peut éventuellement se passer d’un pc portable ou d’un netbook. J’utilise de moins en moins mon Medion pour surfer sur le net. Et puis l’iPhone, en marge de la connection Wi-Fi, peut utiliser le réseau Edge ou 3G.

Mais il manque encore à l’iPhone l’étendue d’un véritable système d’exploitation que peut apporter Windows/Linux/Mac OS. Il semble évident qu’il est difficile pour un OS aussi jeune de concurrencer une plate-forme déjà présente depuis des années (avec son catalogue infini de logiciels tiers). Et c’est sans doute en demander trop! Mais je suis exigeant :).

Il ne faut pas oublier l’inexistence d’un clavier physique pour l’iPhone. Entre le tapotage à deux pouces et le tapotage à 10 doigts, je pense que la vitesse de frappe diffère du simple au quadruple.

Conclusion

J’utilise toujours autant mon iPod Shuffle, je n’emporte plus ma PSP dans les transports (le casual gaming de l’iPhone me convient) et j’utilise mon netbook comme avant (c’est à dire, au bureau ou chez des amis).

Billet

L’art du management dans le monde du web

Le web est un domaine professionnel récent. Je ne songe pas aux entreprises qui utilisent le web au quotidien dans leur processus de production. Je pense plutôt aux entreprises qui existent (uniquement) grâce au web : les agences, les sites de e-commerce, les éditeurs d’applications web…

Parce que cet univers est jeune et en perpétuelle évolution, ses acteurs doivent s’entourer d’une population dynamique et innovante, qui a non seulement grandi avec cette révolution numérique, mais veut avant tout en faire partie. C’est une catégorie de salariés peu agée et peu expérimentée dans le monde de l’entreprise, mais à qui il faut faire confiance parce qu’elle déborde d’idées et possède un désir créatif très prolifique. Le web est loin d’avoir atteint son adolescence et son avenir est tellement gigantesque qu’il faut laisser libre cours à la recherche et aux expérimentations qui se révèleront être demain des standards. L’inspiration existe à tous les niveaux d’une hiérarchie.

Il faut éviter de se considérer comme ayant atteint un état de stabilité et de maturité invariable parce que la course à la première place est permanente. Il n’existe pas de risque à prendre mais uniquement des opportunités à saisir. Rien n’est déjà tracé : il faut dessiner sa propre route.

Cette quasi-obligation de progression est parfaitement compatible avec le monde du web, où les contraintes physiques (notamment logistiques) sont souvent insignifiantes. La scalabilité de la production est rudimentaire. L’exemple le plus évident qui me vient à l’esprit est 37signals qui a su exploser sur le marché sans pour autant décupler son effectif. La clé de la réussite d’une telle politique réside sans doute dans une organisation multi-latérale où aucune entité de l’entreprise ne voit son travail dévalorisé, mais au contraire se retrouve incité à s’impliquer activement (et au départ à titre individuel) à la réussite de l’ensemble de la société.

When you’re hiring, seek out people who are managers of one.

Billet

Skaaz, c’est fini

Le projet qui m’a amené à changer de boulot et qui m’a beaucoup tenu à coeur, touche à sa fin. Skaaz, c’est fini.

Pour ceux qui ne le savaient pas, Skaaz était un projet de VirtuOz (ma boite) où chacun pouvait gratuitement créer son avatar intelligent et lui apprendre à parler à sa place. C’était un produit b2c (business to consumer) qui utilisait notre technologie de dialogue. Mais dans le contexte actuel, la pérennité d’un tel produit a été remise en cause et c’est avec tristesse qu’il a été achevé.

Au-delà du projet, Skaaz était surtout un groupe de personnes qui travaillait ensemble, à longueur de journée, pour offrir ce service unique et passionant à un nombre incroyables de membres. Je me suis rendu compte que le facteur humain dans un univers professionnel occupait une place prépondérante et précieuse.

Dans mon article précédent, je parlais de ce triangle passion-croissance-argent et je dois dire que Skaaz était le moteur principal des axes passion et croissance. Passion parce que l’équipe dans laquelle je travaillais était géniale. Croissance parce que j’ai énormément appris à travers ce projet.

Pour l’entreprise, Skaaz représentait peut-être uniquement un produit et des chiffres. Mais pour moi, c’était une aventure fascinante et chaleureuse dont la fin si abrupte ne manquera pas de nourrir des regrets.

Billet

Le triangle passion-croissance-argent

Une question que l’on est amené à se poser de temps en temps : comment évaluer sa situation professionnelle ?

Difficile de répondre à une question qui fait rentrer en jeu d’innombrables critères. Jack Cheng a pourtant tenté le coup en apportant une approche graphique et synthétique du problème : Maxing out your Triangle. Il s’agit d’un triangle équilatéral où chaque médiane correspond à une échelle partant de zéro (au niveau du centre de gravité) pour aller au maximum (qui se trouve à chaque sommet). Et on obtient le love-growth-cash triangle. J’ai traduit ça par :

  • Passion : le plaisir de faire ce job
  • Croissance : l’opportunité d’apprendre de nouvelles choses
  • Argent : ce que ça nous rapporte financièrement

J’ai essayé d’analyser ma situation en utilisant cet outil, et j’ai obtenu :

Un job qui me passionne pas mal, j’apprends beaucoup de choses et le salaire est basique. Ce triangle peut varier au fil des mois mais c’est à peu près la moyenne. Je me rends compte qu’il y a encore beaucoup de zone à remplir, et que d’un côté c’est une bonne chose parce que ça permet de garder des objectifs et de rester motivé.

Je m’ennuie assez vite. C’est pour ça que j’aime démarrer de nouveaux projets (au travail et en dehors), même si je ne les termine pas tous au final. Je pense qu’en freelance on pourrait créer un tel triangle pour chaque travail auquel on s’affaire.

Entre autres, ce qui m’a plu dans cette approche, c’est qu’elle montre que d’avoir un job très bien payé (mais totalement inintéressant) avec des hobbies passionnants à côté est une solution peu fructueuse à terme. Il vaut mieux essayer de concilier les 3 aspects en un seul job : Love Growth Cash. N’est-ce pas là la problématique principale d’une carrière professionnelle, voire d’une vie ?

Billet

Netvibes I’m leaving you

J’ai toujours été fan de Netvibes. Ce fut ma première expérience Ajax. L’interface customizable m’avait bluffée. J’ai rapidement adopté Netvibes en tant que page d’accueil. Les widgets mails étaient un argument de poids : consulter ses boites mails en un seul endroit. Rapidement, j’ai intégré d’autres widgets, qu’ils proviennent de Netvibes (bloc-notes, météo, calendrier…) ou de tiers (Digg, del.icio.us, YouTube…). Mais j’ai surtout utilisé Netvibes comme lecteur de flux RSS, ce qui m’a amené à l’adorer, puis à le quitter.

Netvibes : méga lecteur de flux RSS

Par “méga”, je parle de quantité de flux. En effet, il est très facile d’ajouter des flux RSS : non seulement pas 1 par 1, mais groupes par groupes. Netvibes fonctionne par onglets et l’on pouvait (parce que je ne le retrouve plus) télécharger des onglets entiers remplis de flux RSS (onglets proposés par les utilisateurs). Je me retrouvais avec une douzaine d’onglets, parlant de Web Design, de E-Commerce, de Jeux Vidéo, de Sport, d’Interface, de Photo… C’était la quantité, et souvent la qualité.

Je me retrouvais avec des tonnes de flux RSS, répartis entre divers onglets. Beaucoup de contenu intéressant, peu de temps pour les lire. Netvibes n’offre par défaut que le titre d’un élément du flux (il faut cliquer pour obtenir le contenu). Je me fiais donc à ce titre pour savoir quel contenu lire.

Productivité décroissante

Au fil du temps, je perdais beaucoup de temps à lire mes flux RSS (alors que j’en avais supprimé une bonne moitié). Les 2 éléments qui causaient cette lenteur étaient :

  1. l’Interface
  2. le JavaScript

Naviguer à travers les onglets est devenu fastidieux : il n’y a pas de ligne directrice visuelle pour lire les flux sans perte de temps. On vérifie à l’oeil que chaque bloc n’a pas de nouvel élément, et si oui, on lie le titre, et éventuellement on lit le contenu. Cette non mise en avant du contenu est problématique parce qu’un titre en dit souvent très peu (et les titres racoleurs ne m’attirent guère). Résultat : je passais potentiellement à côté de contenu intéressant.

Autre point sensible : le temps de chargement. Et oui : Firefox + JavaScript = lenteur. Même si c’est moins vrai avec FF3, ça reste pénalisant pour un site qui utilise autant de JS que Netvibes. L’interface est très jolie mais est-ce bien ce que l’on demande d’un flux RSS ?

Vers Google Reader

On m’a initié à ce concurrent qui n’en est pas vraiment un puisque l’équivalent de Netvibes chez Google, c’est iGoogle. Tiens : Google a 2 lecteurs de flux RSS ? Oui, et c’est là d’où venait mon problème.

Google Reader est un vrai lecteur de flux RSS : l’emphase est mise sur le contenu. La mise en forme est basique, l’interface est très pratique (j’adore l’utilisation du scroll), le moteur est rapide.

iGoogle et Netvibes peuvent être utilisés comme lecteur de flux RSS, mais leur atout principal sont les widgets, la personnalisation, les fonctionnalités riches.

Alors me direz-vous, pourquoi est-ce que j’utilisais Netvibes comme lecteur de flux ? Tout simplement parce que tout s’y prête :

  • à chaque flux RSS disponible sur un site on trouve ce logo
  • Firefox propose lui même dans sa liste déroulante Netvibes comme lecteur de flux
  • lorsqu’on veut “Ajouter du contenu” sur Netvibes, un élément principal est l’ajout de flux (avec possibilité d’importer un fichier OPML)

C’était mon erreur : utiliser Netvibes pour une fonctionnalité non optimisée.

Que faire avec Netvibes ?

Si j’aimais assez les widgets, je l’utiliserais encore. Mais ils me sont trop peu utiles. C’est juste une préférence personnelle et je comprends que certains apprécient ces multiples widgets.

Je pense néanmoins que la fonctionnalité la plus intéressante (et une des plus récentes) est la page publique Netvibes. Je l’ai découvert par le biais du Vanksen Group : comparez la page Netvibes avec le site “normal”.

Non seulement le design est nettement plus intéressant sur Netvibes, mais le contenu l’est aussi! La page publique Netvibes permet pour une entreprise d’afficher très facilement son actualité, sa personnalité, ses préférences. Tout ceci est très facile à gérer étant donné la nature dynamique des widgets (par exemple, uploadez une photo sur Flickr, elle s’affichera sur votre page Netvibes).

Cette page publique permet d’apparaître “moderne” et ouvert, surtout si l’entreprise travaille dans le secteur du web. C’est facile, joli et intéressant.

Conclusion

La nature même de Netvibes m’a amené à ne plus l’utiliser. La beauté du site et l’expérience fournie m’éloignaient du contenu, seul élément important chez les flux RSS.

Netvibes est sans doute trop élaboré pour n’être qu’un “simple” lecteur. Il peut faire beaucoup plus et c’est dans ce domaine là qu’il excelle.