Etat de l’art des interfaces riches

Voilà plus de 6 ans que je parle des interfaces riches sur ce blog (en fait depuis la première année). Au cours de cette période, il s’est passé beaucoup de choses et les usages se sont fortement diversifiés et intensifiés. Je souhaiterais aujourd’hui faire un tour d’horizon des interfaces riches pour plusieurs raisons :

  1. Parce que les interfaces riches existent depuis plus de 10 ans et sont indissociables de l’internet ;
  2. Parce qu’il y a toujours ce très désagréable débat de fond sur HTML5 qui va remplacer Flash (une belle ineptie : Pourquoi HTML5 et Flash ne peuvent être comparés) ;
  3. Parce que l’on en parle trop peu et que le sujet est néanmoins délicat à traiter ;
  4. Parce que je suis en train de finaliser une formation sur ce sujet : Interfaces riches, quelles opportunités pour votre marque ou votre activité.

Bref, j’ai envie de mettre les interfaces riches à l’honneur. Mais commençons par le commencement…

Définition et historique

Lancé en 1996 par Macromedia, Flash est la technologie la plus emblématique des interfaces riches. Cela fait donc 15 ans que les interfaces riches existent. Le terme « Rich Internet Application » est par contre plus jeune puisqu’il a été introduit pour la première fois en mars 2002 (on utilisait également les termes « client riche« , « client léger« , « client web« …).

Pour bien comprendre ce que sont les interfaces riches, intéressons-nous d’abord à ce qu’elles ne sont pas. Les interfaces pauvres désignent ainsi les pages web statiques composées de textes ou d’images. N’y voyez pas un quelconque jugement de valeur, des sociétés comme Amazon ou Ebay ont gagné des milliards de dollars avec des pages web composées exclusivement de textes, images, tableaux et formulaires.

Il est également important de ne pas opposer interfaces riches et pages HTML : les interfaces riches sont un complément du HTML, pas un substitut. Les interfaces riches sont ainsi des modules encapsulés dans des pages HTML. Donc dans tous les cas de figure, les interfaces riches ne remplacent pas le HTML, elles le complètent, l’enrichissent.

La définition communément admise est que ce sont des interfaces web qui proposent les mêmes fonctionnalités et la même expérience qu’une application traditionnelle, mais je trouve cette vision trop restrictive, car elle se limite à l’aspect applicatif. Nous en venons donc à ma définition : Les interfaces riches sont des interfaces web offrant plus de possibilités d’affichage et de manipulation que les pages web traditionnelles. Cette définition englobe donc des usages plus vastes dont le rich media. Mais cela n’empêche pas les éditeurs de solutions de présenter les interfaces riches comme une alternative très intéressante aux applications classiques.

Vous noterez également que ma définition ne mentionne pas explicitement les navigateurs web. Et pour cause, les interfaces riches se scindent en deux grandes familles :

  • Les Rich Internet Applications (RIA) qui sont exécutées dans le navigateur ;
  • Les Rich Desktop Application (RDA) qui sont lancées depuis le bureau.

Autant les RIAs restent confinées dans votre navigateur, autant les RDAs sont indépendantes de ce dernier et sont lancées depuis le menu « Démarrer » ou un raccourci. Elles se comportent donc comme des applications natives et ne sont pas installées sur le système d’exploitation mais sur une couche intermédiaire (la machine virtuelle). Cette différence entre RIA et RDA est subtile, mais peut parfois être confusante à l’image de logiciels qui peuvent être exécutés indifféremment dans votre navigateur ou sur votre bureau comme Balsamiq ou le Project Rome.

Il y a quelques années j’avais rédigé un article pour expliquer ces différences types d’interfaces riches: 10 ans d’évolution des interfaces web au service de l’expérience utilisateur. Même si certaines technologies ont disparu ou évolué, le schéma d’ensemble est toujours valide :

Comparaison des différents types d'interfaces riches

Nous en venons donc à la grande question : les interfaces riches sont-elles mieux que les interfaces pauvres ?

Pourquoi utiliser les interfaces riches ?

En fait la question de la supériorité des interfaces riches est subjective : mieux par rapport à quoi ? Comme avec toute technologie informatique, tout est une question de contexte et de contraintes. Les interfaces riches sont plus sophistiquées, mais plus lourdes qu’une page HTML. Elles sont plus puissantes, mais plus complexes. Elles sont plus performantes, mais plus risquées.

Il existe de nombreux avantages et inconvénients à utiliser les interfaces riches, mais nous pouvons néanmoins isoler 3 motivations principales :

  • Afficher des contenus multimédia (vidéos, musiques, animations…) ;
  • Offrir une expérience utilisateur plus sophistiquée ;
  • Proposer un outil de travail plus performant.

Autant il ya quelques années la question avait son importance, autant maintenant les interfaces riches sont partout, sous la forme de modules enrichis exploitant différentes technologies (javascript, Flash…). Les sites de commerce en ligne font ainsi un usage quasi-systématique des interfaces riches : Différentes interfaces riches pour différentes fonctions.

Les interfaces riches appliquées au commerce en ligne

La question à laquelle vous devez donc répondre est plus de savoir si telle interface ou tel module mérite un enrichissement en fonction du contexte (vos cibles, vos contraintes…). Il n’existe pas de méthode universelle pour savoir quand une interface riche est plus appropriée qu’une page HTML classique, encore une fois tout est question de contexte, il n’y a pas de bon ou mauvais choix.

Nous pouvons cependant isoler quatre grandes familles d’usages où les interfaces riches sont particulièrement bien adaptées :

Les quatre grandes familles d'usages des RIAs

Ce panorama des usages n’est pas forcément exhaustif, mais il dresse un tableau assez complet de ce pour quoi les interfaces riches sont conçues. Il vous est toujours possible de faire ce que vous voulez avec les RIAs (pourquoi pas un site textuel en Flash) mais il est toujours préférable de choisir la bonne technologie pour le bon usage. Ce qui me fait une parfaite transition avec la suite…

Quelles technologies pour quels usages ?

Le moins que l’on puisse dire est que les gros éditeurs sont particulièrement actifs pour promouvoir leurs technologies. Les grands acteurs ainsi présent sont les suivants :

  • Adobe avec Flash/Flex mais aussi AIR et l’OpenScreen Project ;
  • Microsoft avec Silverlight et WindowsClient (WPF et Windows Forms) ;
  • Google avec GWTNaClO3D et différents sites d’évangélisation de javascript comme Chrome Experiments ou 20ThingsILearned ;
  • Sun, Oracle et IBM qui sont les grands promoteurs de Java et des technologies qui vont avec ;
  • Apple qui se fait très discret mais exploite son format Quicktime ainsi qu’un framework javascript (Gianduia) ;
  • Le W3C qui oeuvre à standardiser tout ça et à faire évoluer les spécifications au travers des ses groupes de travail.

Je ne rentrerais pas dans une explication laborieuse sur les intérêts croisés de ces différents éditeurs, mais je pense ne pas me tromper en disant que les enjeux sont de taille et qu’aucun des acteurs cités plus haut ne sont à considérer comme bienfaiteur ou néfaste (la réalité est plus contrastée).

Toujours est-il qu’il existe un sacré nombre de technologies et qu’il est parfois difficile de s’y retrouver. Je vous propose donc cette classification des différentes familles technologiques liées aux interfaces riches :

Les familles technologiques des interfaces riches

Deux précisions importantes : ce panorama n’est pas exhaustif ; il existe des subtilités qui empêchent le rattachement de certaines technologies à telle ou telle famille (notamment XUL, OpenLaszlo, NativeClient, XForms) mais j’ai fait le choix de la simplification pour ne pas compliquer le travail d’évangélisation. Si vous avez une meilleure classification, n’hésitez pas à la mentionner dans les commentaires.

Le choix d’une technologie par rapport à une autre est encore une fois question de contexte : en fonction des ressources disponibles, de l’historique du projet et de son héritage, des contraintes, du budget et des délais… Il existe une infinité de critères, mais souvenez-vous qu’il n’y a pas de mauvais choix, juste des compromis.

Les nouveaux facteurs à prendre en compte

Autant il y a trois ans le choix se résumait à choisir entre Flash et Ajax, autant la situation est nettement plus compliquée aujourd’hui. Et ceci pour plusieurs raisons :

  • Les navigateurs récents sont de plus en plus performants (Chrome, Opera et Firefox se battent à coup de benchmarks) et permettent aux interfaces riches et applications réalisées en javascript de rivaliser avec les RIAs plus « lourdes » (réalisées en Flash, Silverlight…) en terme de stabilité et de rapidité d’exécution. De même, le W3C et les industriels du web (Google, Apple…) ont fait de gros efforts pour promouvoir HTML5 ainsi que CSS3 et inciter les éditeurs à mieux exploiter les opportunités offertes (cf. CSS3 et javascript seront-elles les technologies RIA du future ?). Les technologies standards du web rentrent maintenant en concurrence avec les technologies propriétaires pour la réalisation d’enrichissements de premier niveau (transitions, petites animations, effets graphiques…). Et ne pensez pas qu’Internet Explorer va se laisser facilement distancer par ses concurrents, car Microsoft s’apprête à lancer IE9 qui devrait leur permettre de rattraper une bonne partie de leur retard (avec notamment un bien meilleur support de HTML5 et CSS3).
  • Les smartphones et terminaux alternatifs prennent une place toujours plus importante dans nos usages quotidiens et notre consommation des services et contenus en ligne (cf. 2011, l’année du point de bascule). Il convient donc d’intégrer cette contrainte dans votre choix dès le départ et de réfléchir aux meilleurs moyens d’exploiter les opportunités offertes par ces terminaux.
  • Une très grosse bataille est en cours sur les codecs utilisés pour diffuser de la vidéo avec HTML5. Ce point rejoint les deux précédents, ou plutôt cristallise les tensions liées à l’exploitation de la vidéo en ligne (énorme marché) sur les terminaux alternatifs (smartphones, tablettes, TV connectées…). En fait, les enjeux de cet affrontement sont tellement importants que ce sujet mérite d’être isolé.

Rajouter à cela les contraintes d’accessibilité, de référencement, d’utilisabilité, de ROI, de performances, de disponibilité des ressources… et vous aurez un contexte extrêmement complexe à maitriser. Est-ce une mauvaise nouvelle ? Non pas du tout, car si ce sujet est aussi complexe, c’est qu’il est au coeur de l’internet et du quotidien des utilisateurs. En d’autres termes : Bien appréhender les enjeux liés aux interfaces riches conditionne le succès de votre présence sur le web.

La mode des clips vidéos en HTML5 ?

Tout a commencé avec House of Cards de Raiodhead, une expérimentation de visualisation artistique de données réalisée par les équipes de Google. L’idée était de mélanger création artistique et programmation pointue. Puis il y a eu The Wilderness Downtown qui a bénéficié d’une plus grande couverture médiatique. Là nous étions à mi-chemin entre expérience vidéoludique et démonstration de force pour Google (cf. Google à l’assaut d’iTunes et d’iOS avec Chrome et HTML5 ?).

Dernièrement j’ai découvert l’incroyable travail du groupe japonais SOUR avec le titre Mirror qui mélange multi-fenêtrage, HTML5, Flash et réseaux sociaux :

SOUR_MIRROR

Le résultat est divertissant et surtout très surprenant pour ceux qui laissés un minimum de traces sur le web :

Cette semaine j’ai également découvert le travail de No Eleven qui propose avec High une vidéo HTML5 qui utilise les paroles de la chanson pour rapatrier en temps réel les résultats de recherche de Google Images :

NoEleven

J’ai donc bien l’impression que nous sommes en présence d’un nouveau meme qui consiste à exploiter les interfaces riches pour mettre en scène un morceau musical. Sur la papier, nous pouvons craindre le pire, mais il faut bien admettre que les exemples cités plus haut sont des authentiques réussites, à la fois sur le plan artistique que d’un point de vue technique. Certes, parfois c’est un peu long à charger (ou ça sollicite un peu trop le processeur), mais ces différentes expérimentations ouvrent la voie d’une nouvelle forme de création artistico-technologique.

Cette idée est d’ailleurs reprise avec brio par Intel dans sa campagne récente The Chase :

Je ne sais pas trop quelle est la limite de cet exercice de style, en tout cas il remplit parfaitement sa mission : attirer l’attention. N’hésitez pas à publier les URLs d’autres exemples dans les commentaires.

(via @ksandre)

Pourquoi Google a deux ans de retard avec Native Client

Annoncé de façon très discrète en 2009, Native Client fait à nouveau parlé de lui avec l’annonce d’un lancement imminent : Native Client: Getting Ready for Takeoff. Il a fallu visiblement 2 ans aux équipes de Google pour finaliser la technologie et surtout blinder les aspects sécurité. J’avais à l’époque de l’annonce exprimé mon scepticisme dans un article qui critiquait la façon dont cette technologie à été présentée : Native Client, la technologie RIA de Google qui risque de faire long feu.

NaCl n’est pas une technologie de RIA, donc n’est pas concurrent de Flash

Pour résumer une longue et laborieuse explication, Native Client est un module de Chrome qui permet d’exécuter du code natif. L’enjeu de cette technologie est d’améliorer les performances des applications en ligne. Quand une application traditionnelle sollicite le processeur de votre machine, il le fait au travers du système d’exploitation (1 intermédiaire). Quand une application en Flash sollicite le processeur, elle le fait au travers du plug-in, du navigateur et du système d’exploitation (3 intermédiaires). L’empilement de ces différentes couches logiciel pèse sur les performances de votre application. NaCl apporte dans ce contexte une solution en proposant un accès direct au processeur via des instructions en C ou C++.

Mais la promesse de NaCl ne s’arrête pas là, puisque ce module vous assure également une parfaite portabilité de vos applications : puisqu’elles sont écrites en C/C++ et sollicitent directement le processeur, elles fonctionnent indifféremment sous Windows, Mac ou Linux (des systèmes d’exploitation qui reposent tous sur l’architecture x86 d’Intel). Donc si l’on résume : meilleures performances, portabilité et souplesse sont les 3 atouts de NaCl. OK, mais tout ceci n’est pas sans vous rappeler les applets Java ou ActiveX ? Je  n’ai pas les compétences pour vous faire une comparaison formelle et argumentée, mais la promesse est très proche.

Ceci nous amène donc à une première observation : NaCl n’est résolument pas une technologie d’interface riche, plutôt un environnement d’exécution d’applications. Espérons que Google profitera de l’annonce officielle pour communiquer de façon moins ambiguë sur ce qu’est NaCl et surtout sur ce que cette technologie n’est pas (un concurrent de Flash ou Silverlight). Précisons au passage que l’idée n’est pas de créer des applications exclusivement avec NaCl, mais plutôt de créer des applications en ligne avec javascript ET des instructions en C/C++ qui seront directement exécutées par le processeur via NaCl.

Flash et Silverlight sont ainsi devenus au fil des évolutions bien plus que des environnements d’exécution, ce sont des canaux de distribution pour contenus à valeur ajoutée. Ces canaux s’appuient sur un écosystème très dense de producteurs, annonceurs, distributeurs… qui ne vont pas changer de technologie du jour au lendemain sous prétexte que les performances sont meilleures.

Pas de NaCl sans Chrome ou x86

NaCl se présente donc sous la forme d’un plug-in pour Chrome. OK, mais Chrome ne représente que 10% du marché. Certes, la progression du navigateur de Google sur l’année 2010 est spectaculaire, mais ces deux principaux concurrents (Microsoft et Mozila) vont faire un retour en force dans les prochaines semaines avec la sortie de Firefox 4 et Internet Explorer 9. Il y a ainsi très peu de chances pour que NaCl soit disponible pour ces derniers navigateurs avant leur sortie officielle.

Est-ce un problème pour Google ? Non pas réellement, car ils ont d’énormes ambitions à ce sujet. Par contre le marché risque d’être refroidi par cette limitation : Google’s Native Client updates to Pepper API, looks set to fragment the Web. D’autant plus que nous avons déjà connu ça avec les technologies citées plus haut (notamment ActiveX).

Autre limitation de taille : NaCl ne fonctionne qu’avec les processeurs à architecture x86. Ce qui veut dire que NaCl ne fonctionnera pour le moment pas sur les terminaux alternatifs qui sont tous basés sur l’architecture ARM. Cette limitation est due au fait que NaCl permet de solliciter directement le processeur, changez de processeur et il faut tout revoir. Une version compatible avec les processeurs de la famille ARM serait en cours d’étude, mais cela revient à reprendre le travail depuis le début (et donc à gérer deux projets avec deux cycles de développement / évolution).

De nombreuses alternatives pour les jeux 3D

Les gains de performances promis par NaCl seraient très appréciables pour les applications qui sollicitent le plus le processeur ou la puce graphique. Outre les logiciels de montage vidéo, les jeux seraient donc les premiers bénéficiaires de ces gains de performances. L’idée étant de pouvoir proposer des jeux 3D dans le navigateur avec le même rendu (résolution, taux de rafraichissement) que les jeux installés sur votre machine. OK, mais Google va être confronté à deux problèmes de taille :

  1. Les jeux récents sont gourmands en puissance de calcul mais également en stockage (ils dépassent tous le Go une fois installés). Il va donc falloir une sacrée bonne bande passante pour télécharger tout ça à la volée !
  2. Il existe de nombreuses alternatives très crédibles pour avoir de la 3D de bonne qualité dans le navigateur : Et on reparle des Rich Internet Games.

En deux ans (l’annonce initiale de NaCl remonte à 2009), les autres technologies de RIA ont ainsi fait des progrès considérables :

À ces technologies-là, il va également falloir rajouter la concurrence des offres de cloud gaming qui sont parfaitement au point : OnLive, Gaikai, Playcast… Donc pour résumer : Google arrive avec deux ans de retard sur le marché du jeu en ligne. Ou du moins : la promesse de performances accrues dans un contexte de jeu 3D n’est plus aussi pertinente qu’il y a deux ans.

L’architecture à 4 couches de Chrome

Malgré tout ce qui a été dit plus haut, NaCl n’en reste pas moins une petite révolution. Le fait de pouvoir exécuter du code natif n’est pas en soi une exclusivité propre à Google (il me semble que Flash permet également de faire ça, mais dans une moindre mesure), mais cette possibilité s’insère dans un contexte beaucoup plus large.

Pour simplifier, « l’architecture Chrome » est composée des couches suivantes :

  • Chrome OS, la couche d’abstraction matérielle qui permet de gérer les périphériques ;
  • Chrome Browser, la couche de gestion des ressources, et accessoirement la couche de distribution des contenus, services et applications ;
  • Native Client, l’environnement d’exécution (pour les processus les plus gourmands en ressource) ;
  • Chrome Web Store, la place de marché d’applications.

NaCl est donc la touche finale d’un plan d’ensemble sacrément bien ficelé. Par « bien ficelé« , comprenez « bien verrouillé« , car sous couvert de projects open source, l’objectif pour Google est de capter et sécuriser des parts de marché. Une fois qu’un utilisateur ou qu’une entreprise met le doigt dans l’engrenage Chrome, il est très difficile d’en sortir, surtout avec l’avantage compétitif que NaCl représente par rapport aux autres navigateurs.

Le marché a-t-il encore besoin de puissance ?

Nous venons donc de voir que NaCl est une technologie révolutionnaire, mais dont la portée est maintenant limitée par les progrès des technologies concurrentes et par ses restrictions intrinsèques. Reste maintenant à aborder une question de fond : les utilisateurs sont-ils réellement en demande de puissance ? Les ordinateurs reposant sur l’architecture x86 sont ainsi en fin de cycle, l’informatique de demain sera ainsi dominée par les terminaux alternatifs qui répondent mieux aux attentes du marché : mobilité et autonomie (cf. 2011, l’année du point de bascule).

Dans ce contexte-là, NaCl n’a pas sa place car le rythme d’innovation est très élevé (Hummingbird vs. Snapdragon vs. OMAP vs. Tegra 2: ARM Chips Explained) et car les préoccupations des industrielles et éditeurs sont ailleurs. Nous nous dirigeons ainsi vers une configuration de marché où les utilisateurs valoriseront avant tout la portabilité et la sociabilisation des contenus liés au divertissement (musique, film, jeux) et où les collaborateurs d’une entreprise seront à la recherche d’outils de travail légers, souples et surtout collaboratifs.

Encore une fois, Google a les compétences et les capacités techniques pour réussir là où d’autres ont échoué (Microsoft avec ActiveX, Sun avec les applets Java), mais le défi relevé par NaCl ne va pas réellement révolutionner l’industrie. Je serais par contre très curieux de savoir comment ils souhaitent intégrer NaCl à Android, là nous aurons potentiellement quelque chose de beaucoup plus disruptif. En attendant, voyons déjà s’ils réussissent à accoucher correctement d’une première version de NaCl. Réponse dans quelques semaines…

2011, l’année du point de bascule

Il existe de nombreuses théories sur le point de bascule (« tipping point » en anglais), et le secteur de la mobilité a également droit à sa théorie sur l’année du point de basculement. « Bascule de quoi ? » pourriez-vous me demander, et je vous répondrais : « basculement entre les usages sédentaires et les usages mobiles« . Plus concrètement, différents analystes s’accordent sur le fait que 2011 va être l’année où le nombre de terminaux mobiles va dépasser celui des ordinateurs. Par terminaux mobiles, nous entendons tout type de terminaux mobiles (téléphone, smartphones, tablettes…).

Déjà l’année dernière a été très riche en innovation et autres statistiques affriolantes sur les taux de croissance des usages mobiles, 2011 sera l’année de la consécration. Et le pire, c’est que la situation va s’améliorer d’année en année. Je vous recommande ainsi fortement la lecture du dernier rapport de la société d’investissement KPCB : Top 10 Mobile Internet Trends.

Croissance du nombre de smartphones et tablettes vis-à-vis des ordinateurs

Des données et statistiques très intéressantes sont ainsi décortiquées dans ce rapport dont voici quelques extraits :

  • La combinaison des usages sociaux, locaux et mobiles (« SoLoMo« ) ouvrira d’innombrables possibilités
  • Le trafic mobile multiplié par 26 d’ici à 2015 (je me demande bien comment les opérateurs vont s’y prendre pour assumer ça)

    Augmentation du besoin en bande passante mobile
  • Les gros acteurs de la révolution mobile sont les plateformes sociales (Facebook, Twitter…) et musicales (Spotify, Shazam, Pandora…)
  • Les budgets de communication vont migrer vers les plateformes mobiles car l’efficacité y sera bien meilleure que sur les autres supports

    Comparaison de l’efficacité des différents supports de communication
  • Explosion des ventes de biens virtuels mobiles (cf. Les mobiles sont-ils l’eldorado des vendeurs d’objets virtuels ?)
  • Certaines plateformes performeront mieux que d’autres à l’image d’iOS et Android qui génèrent plus de revenues que les autres OS mobiles

    Comparaison de nombre de téléchargements d’applications par plateforme mobile
  • « Gamification » des applications et services (cf. Le gameplay comme élément clé de l’expérience utilisateur)
  • Montée en puissance des terminaux alternatifs

    Explosion du nombre de terminaux mobiles

Des statistiques peut-être un peu trop « macro » à mon goût, mais néanmoins très encourageantes

De son côté le cabinet Forrester a également publié un rapport sur les tendances du marché mobile : 2011 Mobile Trends. Morceaux choisis :

  • La combinaison mobile + social + local générera de nombreuses opportunités, mais assez peu de revenus ;
  • Les smartphones vont se généraliser grâce à des machines moins chers et des subventions plus fortes des opérateurs ;
  • La question de la fragmentation va devenir de plus en plus inquiétante avec un marché qui va s’atomiser autour des différentes plateformes (iOS, Android, WebOS, Windows Phone…) ;
  • Le débat entre applications natives et sites mobiles sera de plus en plus caduc (idéalement il faut faire plusieurs applications natives et plusieurs versions du site mobile) ;
  • Les budgets de communication et de marketing en situation de mobilité vont exploser (mais les annonceurs resteront tout de même exigeants quand aux performances des campagnes) ;
  • La technologie Near Field Communication va faire son apparition sur les marchés occidentaux (déjà utilisée depuis de nombreuses années en Asie) ;
  • Très peu de terminaux compatibles 4G ou LTE seront disponibles (dû au très faible ratio bande passante / autonomie) ;
  • Les jeux mobiles vont continuer de générer de gros revenus ;
  • La mobilité ne s’appliquera pas qu’aux téléphones mobiles ou aux smartphones.

Ce dernier point (tout comme celui du rapport cité plus haut) me ravit, car il confirme ma vision du marché : une multiplication des terminaux alternatifs. 2011 va être une sacrée année, de même que les suivantes, autant vous y préparer dès maintenant !

HTML5 et minimalisme pour Nike Skateboard

Comment faire quand vous êtes une très grande marque internationale pour exister dans un secteur où personne ne vous attend ? C’est tout le défi que devait relever Nike avec sa ligne Skateboarding. Ils ont donc opté pour la sobriété (tout comme les autres grandes marques : Minimalisme de rigueur pour Converse Skateboarding) avec un site qui laisse la part belle aux produits et contenus.

Ça commence donc dès la page d’accueil avec un visuel en pleine page et un bandeau de navigation minimaliste :

NikeSB_Home

Cette page propose un défilement vertical assez classique avec une structuration en grille qui permet de faire défiler les contenus de façon horizontale. Toute l’ingéniosité de cette page est de gérer de façon efficace la surface d’affichage et surtout le positionnement dans la hauteur de page pour ne pas couper les blocs.

Au niveau des pages produit, le minimalisme est poussé à son paroxysme puisque les fiches produit ne sont composées que d’une seule photo :

NikeSB_Shoes

La navigation dans le catalogue n’est pas très simple (aucune option de tri) car le site privilégie l’approche du style guide mensuel. La logique de grille est respectée sur l’ensemble du site et tout particulièrement dans la section News :

NikeSB_News

Petit détail qui peut vous intéresser : ce site est réalisé en HTML5 à partir du template Boilerplate. Pour faire simple, l’intérêt d’utiliser un framework de développement comme Boilerplate est d’optimiser la compatibilité du site avec les vieux navigateurs, mais également de faciliter la maintenance avec une organisation très rigoureuse du code source et des fichiers (plus d’explications ici : HTML5 Boilerplate, A Default HTML/CSS/JS Template For Any Project). Mais ce n’est pas pour autant que le site n’exploite pas Flash, car on en retrouve pour les vidéos ou pour les zooms XL sur les produits.

Au final nous avons donc un site graphiquement très abouti avec une manipulation agréable et de beaux effets de transition.