Sobriété et coins carrés sont de rigueur en 2010

Après plusieurs annĂ©es de surenchère graphique (coins arrondis, dĂ©gradĂ©s, reflets, typographies en image…) il semblerait que nous soyons rentrĂ© dans une phase de “retour aux fondamentaux” pour les sites web Ă  forte audience. Illustration avec trois sites rĂ©cemment rĂ©novĂ©s qui ont optĂ© pour une mise en page anguleuse (pour une isolation plus rigoureuse des unitĂ©s d’information) et des couleurs bien tranchĂ©es (pour un meilleur contraste) : Castorama, Voyages SNCF et CrĂ©dit Agricole.

Le nouveau site de Castorama
Le nouveau site de Castorama
Le nouveau site de Voyages SNCF
Le nouveau site de Voyages SNCF
Le nouveau site du Crédit Agricole
Le nouveau site du Crédit Agricole

Dans les trois cas, nous retrouvons les mĂŞmes codes graphiques : boĂ®tes carrĂ©s et recours massif aux aplats de couleur. Je ne peux que me rĂ©jouir de cette tendance Ă  la simplification visuelle car le repĂ©rage et la lisibilitĂ© n’en sont que bien meilleurs.

Ce qui m’Ă©tonne par contre c’est pourquoi maintenant ? Pourquoi maintenant alors que la bande passante est de plus en plus large (grâce Ă  l’ADSL et aux tarifs très compĂ©titifs des fournisseurs d’accès), alors que nous sommes passĂ©s par le pire (“Skip intro“)… Ces choix graphiques auraient dĂ» ĂŞtre adoptĂ©s il y a bien longtemps.

Le pite dans cette histoire est que nous commençons seulement Ă  voir le bout du tunnel avec l’arrivĂ©e de navigateur qui supportent HTML5 et CSS3, donc peuvent nativement afficher les raffinements graphiques qui nous ont donnĂ© tant de mal par le passĂ© (coins arrondis, dĂ©gradĂ©s, ombres portĂ©es, transitions, effets typographiques…). Serions-nous rentrĂ© dans une Ă©poque du design raisonnĂ© ? Peut-ĂŞtre. En tout cas je croise les doigts pour que cette tendance perdure et que nous ne nous perdions plus dans la surenchère visuelle.

Evolutions des modes graphiques depuis 5 et 10 ans

Aujourd’hui je vous propose un voyage dans le temps pour comparer l’Ă©volution des pages d’accueil des gros sites web sur ces 10 dernières annĂ©es. En fait c’est l’article suivant qui m’a inspirĂ© : The Evolution of Websites: How 10 Popular Websites Have (And Have Not) Changed. L’idĂ©e n’Ă©tant pas de se moquer mais plutĂ´t d’analyser ces Ă©volutions et d’en dĂ©duire des courants ou tendances.

Commençons dans l’ordre alphabĂ©tique avec Adobe :

La page d'accueil d'Adobe.com en 2000
La page d'accueil d'Adobe.com en 2000
La page d'accueil d'Adobe.com en 2005
La page d'accueil d'Adobe.com en 2005
La page d'accueil d'Adobe.com en 2010
La page d'accueil d'Adobe.com en 2010

Vous noterez que le look & feel n’a pas beaucoup bougĂ© en 10 ans : Toujours ce bandeau noir en haut de page, toujours les mĂŞmes couleurs (rouge, noir, blanc et gris foncĂ©), une mise en page carrĂ©e et une forte concentration de liens sur la bas de la page.

Poursuivons avec Amazon :

La page d'accueil d'Amazon.com en 2000
La page d'accueil d'Amazon.com en 2000
La page d'accueil d'Amazon.com en 2006
La page d'accueil d'Amazon.com en 2006
La page d'accueil d'Amazon.com en 2010
La page d'accueil d'Amazon.com en 2010

Outre l’abandon de la navigation par onglets en 2007 (au profit d’un bloc dĂ©pliable), le look & feel est d’une constance exemplaire avec une palette de couleurs et un logo quasi identiques, des blocs et un coeur de page toujours très Ă©purĂ©s pour bien faire ressortir les produits. Notez que c’est quasiment le seul “gros” site web au monde Ă  ne pas modifier le traitement graphique des liens.

Intéressons-nous à Apple :

La page d'accueil d'Apple.com en 2000
La page d'accueil d'Apple.com en 2000
La page d'accueil d'Apple.com en 2005
La page d'accueil d'Apple.com en 2005
La page d'accueil d'Apple.com en 2010
La page d'accueil d'Apple.com en 2010

LĂ  encore je ne peux qu’ĂŞtre admiratif devant la cohĂ©rence de la mise en page qui n’a pas bougĂ©e depuis 10 ans : Une barre de navigation, un visuel en pleine largeur, un bandeau pour les news et 3 ou 4 blocs de mise en avant. Vous noterez Ă©galement l’absence du nom de la marque Ă©crit en toutes lettres (juste le logo dans le premier item de navigation). Je trouve personnellement que les visuels dĂ©tourĂ©s avec un lĂ©ger ombrage n’ont pas pris une seule ride.

Voyons maintenant le site de Microsoft :

La page d'accueil de Microsoft.com en 2000
La page d'accueil de Microsoft.com en 2000
La page d'accueil de Microsoft.com en 2005
La page d'accueil de Microsoft.com en 2005
La page d'accueil de Microsoft.com en 2010
La page d'accueil de Microsoft.com en 2010

Alors que ce site a longtemps conservĂ© son aspect très sobre qui fonctionnait plutĂ´t bien (beaucoup de liens, très peu d’illustrations), ils ont rĂ©cemment dĂ©cidĂ© d’adopter une intention graphique plus soignĂ©e et une navigation locale par onglets verticaux dans la moitiĂ© infĂ©rieure de la page (la mise en page est très dĂ©routante). Vous pouvez nĂ©anmoins constater qu’ils conservent toujours une forte densitĂ© de liens pour faciliter l’accès aux contenus importants.

Finissons avec Yahoo! :

La page d'accueil de Yahoo.com en 2000
La page d'accueil de Yahoo.com en 2000
La page d'accueil de Yahoo.com en 2006
La page d'accueil de Yahoo.com en 2006
La page d'accueil de Yahoo.com en 2010
La page d'accueil de Yahoo.com en 2010

Tout comme Microsoft, Yahoo a longtemps Ă©tĂ© fidèle Ă  sa mise en page : Le logo entourĂ© de raccourcis vers les services principaux, la barre de recherche, la colonne centrale rĂ©servĂ©e aux liens et la colonne de droite un peu plus Ă©ditorialisĂ©e. Depuis peu cette mise en page a Ă©tĂ© complètement revue avec un système de navigation latĂ©rale dĂ©pliable et une zone centrale façon “Une”. MĂŞme si cette dernière version prĂ©sente une bonne lisibilitĂ© et une densitĂ© d’information bien rĂ©partie, je ne peux que regretter les anciennes versions qui symbolisait l’attachement de Yahoo! Ă  son hĂ©ritage historique (l’annuaire).

MĂŞme s’il n’est pas rĂ©ellement possible d’en tirer des tendances, cette belle collection de pages d’accueil permet de mettre en valeur un Ă©lĂ©ment essentiel : la constance. Adobe, Amazon et Apple ont ainsi su capitaliser sur leur propre signature graphique (jeu de couleurs, mise en page…) alors que Microsoft et Yahoo! semblent avoir rompu avec le passĂ© en opĂ©rant une rĂ©orientation dans leur univers graphique / ergonomique.

Notez que ces rĂ©orientations graphiques coĂŻncide avec un changement de stratĂ©gie pour ces deux derniers qui souhaitent changer d’image. Dommage car les internautes y perdent leurs habitudes. Faut-il en dĂ©duire qu’une refonte est une opĂ©ration dĂ©licate ? Oui et non : Oui car une refonte n’est pas une opĂ©ration anodine (perte de repères) mais permet de corriger d’un coup de nombreuses faiblesses ergonomiques ; Non car il est tout Ă  fait possible de conserver des couleurs, formes ou tonalitĂ©s de l’ancienne version.

Pour finir je conclurais lĂ -dessus : Changer n’est pas un problème (surtout si c’est pour amĂ©liorer) mais changer en douceur est encore mieux car cela Ă©vite de perturber les utilisateurs (et par la mĂŞme Google qui pĂ©nalise durement les modifications dans l’arborescence). Je ne rĂ©pèterais jamais assez qu’un site web n’est pas une application informatique, il ne faut donc pas raisonner en Ă©volutions majeures (une nouvelle version tous les 2 ou 3 ans) mais plutĂ´t en micro-Ă©volution permanentes.

Le blanc est la couleur la plus importante

Bon OK je sais le blanc n’est pas une couleur, mais pour ne pas nous perdre dans des querelles d’experts nous allons appelez ça une couleur. “Ça” ? Oui “ça“, ce non-Ă©lĂ©ment graphique qui est l’Ă©lĂ©ment le plus utilisĂ© sur votre page web et Ă  qui l’on peut faire dire de nombreuses choses. Je rebondis sur un article rĂ©cemment publiĂ© chez WDL (Whitespace: The Underutilized Design Element) et qui m’a fait redĂ©couvrir celui publiĂ© sur A List Appart (Whitespace).

Le blanc (“whitespace” en anglais) est en effet indispensable pour faire respirer une mise en page et Ă©viter de saturer l’interface.

Exemple de mise en page saturée sans espaces blancs
Exemple de mise en page saturée sans espaces blancs

Le blanc est essentiel à la fois pour structurer la grille de lecture (en mettant en évidence les colonnes verticales mais également les lignes verticales) et rythmer la page dans sa verticalité.

Le mĂŞme texte avec un bon usage des espaces blancs
Le mĂŞme texte avec un bon usage des espaces blancs

Les espaces blancs sont essentiels pour amĂ©liorer la lisibilitĂ© et pour concentrer l’attention. D’une part car ils facilitent le dĂ©cryptage de la page (et son survol par l’oeil) et d’autre part car ils mettent en Ă©vidence les contenus qu’ils cĂ´toient. FormulĂ© autrement : si vous voulez mettre en Ă©vidence un bloc de contenus, oubliez les couleurs qui flashent et privilĂ©giez plutĂ´t de larges espaces blancs autours.

Dans l’exemple qui suit (Rikcat Industries), les espaces blancs permettent de faire ressortir les titres sans avoir recours Ă  de la couleur :

Très belle mise en page minimaliste chez Rikcat
Très belle mise en page minimaliste chez Rikcat

Les espaces blanc sont aussi très intĂ©ressants pou faire des regroupements comme ici sur le site d’Astheria ou le blanc permet d’associer les titres avec les chapĂ´ des articles :

Utilisation du blanc pour grouper des éléments sur le site d'Astheria
Utilisation du blanc pour grouper des éléments sur le site d'Astheria

Enfin le blanc peut donner, s’il est bien utiliser, une impression d’Ă©lĂ©gance et de sophistication comme sur le site de Urban Outfitters :

Elégance et sophistication chez Urban Outfitters
Elégance et sophistication chez Urban Outfitters

Notez que lorsque l’on parle de blanc il peut Ă©galement s’agir d’espaces vides, comme sur ce blog oĂą le header est vide mais avec un lĂ©ger dĂ©gradĂ©.

Bref, le blanc est une couleur très puissante et un Ă©lĂ©ment essentiel de l’architecture graphique de vos pages web. Je suis Ă  la recherche d’Ă©crits de rĂ©fĂ©rence sur ce sujet, si vous avez des suggestions, merci de les mettre dans les commentaires.

En finir avec le mythe de la limite de visibilité

Connaissez-vous la limite de visibilitĂ© ? Il s’agit de la ligne horizontale d’une page au-dessous de laquelle le contenu n’est plus affichĂ© Ă  cause de la rĂ©solution de l’Ă©cran. Cette notion est directement hĂ©ritĂ©e de la presse ou les gros titres devaient ĂŞtre imprimĂ©s sur la partie haute de la page, juste avant la pliure (d’oĂą le “page fold” en anglais).

Jusqu’ici rien de problĂ©matique, si ce n’est une fausse interprĂ©tation de cette notion qui laisse entendre que les contenus sous cette fameuse limite de visibilitĂ© ne sont pas lus. Grave erreur d’interprĂ©tation car les utilisateurs savent scroller, encore faut-il leur en donner envie.

Il y  dĂ©jĂ  eu ainsi de nombreux articles Ă©crits sur le sujet : Blasting the Myth of the Fold, Worried about content “below the fold”? Don’t be, Debunking the Myth of the Page Fold in Web Design… et je pense qu’il y en aura encore de nombreux autres…

Mais reprenons depuis le dĂ©but : la limite de visibilitĂ©. Grâce Ă  la très complète Ă©tude publiĂ©e par le blog ClickTale (ClickTale Scrolling Research Report – Visibility and Scroll Reach), nous savons maintenant qu’en moyenne la limite de visibilitĂ© se situe entre 560 et 600 pixels :

Statistiques sur la limite de visibilité
Statistiques sur la limite de visibilité

OK très bien, mais j’attire nĂ©anmoins votre attention sur le fait que cet article a Ă©tĂ© publiĂ© en 2007 (date Ă  laquelle la rĂ©solution 1024*768 Ă©tait majoritaire) et que depuis le parc informatique a Ă©voluĂ© et que nous comptons un peu plus d’Ă©crans avec une rĂ©solution de 1280*800 et 1280*1024 (cf. W3counter). Mais bon ça ne change pas grand chose, pour le moment…

IntĂ©ressons-nous maintenant Ă  une Ă©tude plus rĂ©cente publiĂ©e par le cabinet CX Partners : The myth of the page fold: evidence from user testing. Ces derniers nous font ainsi partager les rĂ©sultats d’une vaste Ă©tude de eye-tracking qui rĂ©vèle grosso-modo la mĂŞme chose : les utilisateurs savent scroller. Il suffit de regarder la longueur des pages de sites Ă  très grosse audience pour s’en convaincre :

Les limites de visibilité de sites à fortes audiences
Les limites de visibilité de sites à fortes audiences

En fait l’astuce est de bien surveiller l’endroit oĂą la page est coupĂ©e : si elle s’arrĂŞte dans une zone vierge, aucun repère visuel (si ce n’est la barre de dĂ©filement horizontale) ne vous indique qu’il y a du contenu en dessous. Illustration avec cette page produit :

Comment savoir qu'il y a du contenu en dessous ?
Comment savoir qu'il y a du contenu en dessous ?

Par contre, si la limite de visibilitĂ© tombe en plein milieu d’un paragraphe ou d’une photo, cela crĂ©Ă© une invite visuelle pour l’utilisateur :

Ici il est évident qu'il y a du contenu sous la limite de visibilité
Ici il est évident qu'il y a du contenu sous la limite de visibilité

Conclusion : La limite de visibilité ne pose problème que si vous ne fournissez pas de bonnes raisons (ou une invitation visuelle) pour inciter les utilisateur à scroller.

Dans la mesure oĂą les avis concordent, il semblerait que ce point soit dĂ©finitivement rĂ©glĂ©… jusqu’Ă  ce que les statistiques Ă©voluent de façon significative ! Je vous donne donc rendez-vous dans deux ans pour en reparler.

Vers des sites adaptés aux netbooks ?

Les netbooks sont devenus en moins de deux ans un authentique phĂ©nomène : vendus Ă  11 millions d’exemplaires l’annĂ©e dernière, il pourrait s’en Ă©couler près de 35 millions d’unitĂ©s en 2009 (Netbook Sales Expected To Take Off). D’après les estimations, les ventes de netbooks devraient se stabiliser d’ici Ă  2010 avec 18 % de parts de marchĂ© (Netbook Market Forecast & Business Strategy).

Avec un tel volume de vente, les netbooks vont avoir un impact non-nĂ©gligeable sur les services en ligne. J’ai dĂ©jĂ  eu l’occasion de m’exprimer sur les changements Ă  prĂ©voir sur les habitudes d’utilisation de l’internet (Les netbooks vont-ils amorcer la rĂ©volution du web 3.0 ?) et sur l’utilisabilitĂ© des systèmes d’exploitation (Intel et Jolicloud Ă  la recherche de l’interface parfaite pour les netbooks). Je m’interroge aujourdh’ui sur l’impact que les netbooks peuvent avoir sur notre façon de concevoir un site web.

Ces petites machines rĂ©-introduisent ainsi des contraintes que l’on croyait rĂ©solues, Ă  commencer par la rĂ©solution de l’Ă©cran (sources = W3 Schools) :

ScreenResolution.jpg

Évolution des rĂ©solutions d’Ă©cran sur les 10 dernières annĂ©es

En moins de 10 ans, les petites rĂ©solutions d’Ă©cran (800*600 px) avaient presque complètement disparues. Avec plus de 90% de part de marchĂ©, la rĂ©solution 1024*768 Ă©tait devenu la rĂ©fĂ©rence incontestĂ©e. “Était” puisque l’on commence Ă  voir apparaitre des rĂ©solutions exotiques dans les statistiques :

ScreenResolutions.jpg

Apparition de rĂ©solutions “exotiques” dans les statistiques

Nous retrouvons ainsi en 13ème position la rĂ©solution caractĂ©ristique des netbooks (1024*600 px) juste au dessus de celle des iPhones (320*396 px). Puisqu’il existe des versions spĂ©cifiques aux iPhones, pourquoi pas pour les netbooks ?

Oui je sais, vous pourriez me dire que cela ne serait pas très rentable de dĂ©velopper une version spĂ©cifique pour “seulement” 168 pixels de diffĂ©rence, mais cette diffĂ©rence peut ĂŞtre Ă©norme lorsque cela concerne un bouton d’action. Illustration avec le site de Voyages SNCF :

VSC_netbook_3.jpg

La page d’accueil de Voyages-SNCF avec les deux limites de visibilitĂ©

Comme vous pouvez le constater sur cette capture, la page d’accueil fonctionne parfaitement en rĂ©solution 1024*768 mais tout se complique avec le 1024*600 car les boutons d’action sont sous la limite de visibilitĂ©.

Rassurez-vous, la situation n’est pas très dramatique car nous savons maintenant que la limite de visibilitĂ© n’est plus rĂ©ellement un problème (cf. les articles Unfolding the Fold, et ClickTale Scrolling Research Report V2.0 Blasting the Myth of the Fold), mais ceci concerne surtout les sites de contenu, qu’en est-il des sites marchands ?

Peut-ĂŞtre pourrions-nous envisager des formulaires oĂą le bouton d’action serait doublonnĂ© (comme sur Amazon) pour palier Ă  ce dĂ©ficit de visibilitĂ© en hauteur :

amazon_checkout.jpg

OK, mais ce n’est pas tout car les netbooks induisent d’autres contraintes :

  • La saisie qui est rendu plus difficile par des claviers plus petits (surtout au niveau de la touche “Shift” qui est indispensable pour saisir des chiffres) ;
  • La manipulation qui est Ă©galement très difficile avec les minuscules pavĂ©s tactiles et les boutons qui sont parfois bizarrement positionnĂ©s (par exemple sur les cĂ´tĂ©s pour certains modèles) ;
  • La lisibilitĂ© avec des Ă©crans brillants (dalle “glossy” qui capte tous les reflets)…

Bref, je suis persuadĂ© que les spĂ©cificitĂ©s des netbooks devraient ĂŞtre prises en compte dans notre façon de concevoir les sites web et plus prĂ©cisĂ©ment les fonctions marchandes. Je n’ai pas la prĂ©tention de trouver une solution pour toutes ces contraintes dans cet article, mais juste d’attirer votre attention sur le “phĂ©nomène”.

Avez-vous Ă©galement constatĂ© l’apparition des netbooks dans vos statistiques de frĂ©quentation ?

Vers une structure générique pour les sites corporate ?

Aviez-vous dĂ©jĂ  remarquĂ© que les sites corporate des grands groupes US se ressemblent tous ? Nous savions dĂ©jĂ  que le public amĂ©ricain est très friand de mises en page sobres (fond blanc, grille de lecture symĂ©trique, typo unifiĂ©e…) mais de lĂ  Ă  adopter une structure quasi identique… Jugez plutĂ´t :

  • Cisco

    La page d'accueil de Cisco
    La page d'accueil de Cisco
  • IBM

    La page d'accueil d'IBM
    La page d'accueil d'IBM
  • Chevron

    La page d'accueil de Chevron
    La page d'accueil de Chevron
  • General Electrics

    La page d'accueil de General Electrics
    La page d'accueil de General Electrics
  • Ford

    La page d'accueil de Ford
    La page d'accueil de Ford

Dans cette sĂ©rie nous retrouvons ainsi une structure Ă  5 niveaux qui facilite grandement le dĂ©cryptage de la page et permet de bien exploiter la largeur de la page pour laisser un maximum de place Ă  l’image centrale.

Nous avons donc une structure qui ressemble à ça :

La structure générique des sites corporate US
La structure générique des sites corporate US

Cette uniformitĂ© est-elle due Ă  un processus Darwinien ? Possible car je ne peux que reconnaitre l’efficacitĂ© de cette structure qui privilĂ©gie l’Ă©motion (très large bandeau identitaire) tout en proposant un contrat de lecture limpide.

Est-ce cela que nous pouvons appeler une convention ? Peut-être : cette structure conviendra au plus grand nombre sans toutefois être une figure de style imposée.

Voyez-vous d’autres exemples ? Zurich ?

8 astuces pour gagner de la place

Avec les annĂ©es la taille des Ă©crans augmente, mais pas nĂ©cessairement celle de la surface d’affichage utile. Comprenez par lĂ  que si les rĂ©solutions d’Ă©crans supĂ©rieures Ă  1024 px sont majoritaires (plus de 55% d’après le W3 Counter), les utilisateurs n’exploitent pas forcĂ©ment la totalitĂ© de l’espace disponible. RĂ©sultat : la norme est indiscutablement de faire des mises en page de 1024 px de large (en fait 1005 px quand on tient compte de la barre de dĂ©filement verticale).

Problème : Comment faire pour afficher un maximum de choses dans la limite de visibilité (sans scroll de la page) ?

Solutions : 8 Layout Solutions To Improve Your Designs.

Dans ce très bon article, l’auteur nous livre ainsi diffĂ©rentes techniques pour virtuellement gagner de la place en jouant notamment sur les couches (layers en anglais) et sur une interface plus dynamique (entre autre) :

  • Les carrousels et bandeaux dĂ©filants (ex. : Coda)

    Un exemple de carrousel
    Un exemple de carrousel
  • Les onglets intĂ©rieurs (ex. : Fontecase)

    Un exemple d'onglets intérieurs
    Un exemple d'onglets intérieurs
  • Les fenĂŞtres modales (ex. : KissMetrics)
    kissmetrics
  • Le roll-over qui affiche un panneau de contenu (ex. : Miro)

    Un exemple de panneau affiché en roll-over
    Un exemple de panneau affiché en roll-over
  • La mise en page progressive qui fait apparaĂ®tre le contenu au fur et Ă  mesure des clics (ex. : Sursly)

    Un exemple de mise en page progressive
    Un exemple de mise en page progressive
  • Les grilles de lecture marquĂ©e qui autorisent une très grande densitĂ© d’information sur une seule page tout en assurant une bonne lisibilitĂ© (ex. : Neutron Creations)

    Un exemple de grille de lecture très marquée
    Un exemple de grille de lecture très marquée
  • Les accordĂ©ons (ex. : Alex Cohaniuc)

    Un exemple d'accordéon
    Un exemple d'accordéon
  • Les menus sur-dimensionnĂ©s (ex. Porsche)

    Un exemple de menu sur-dimensioné
    Un exemple de menu sur-dimensioné

Voici donc une très belle collection d’exemples de ces diffĂ©rentes techniques permettant d’augmenter virtuellement le nombre de pixels.

Du bon usage du haut de page

Le haut de page est par dĂ©finition la partie la plus visible d’une page web. Normal puisque vous n’avez pas d’autre choix que de consulter une page en commençant par le haut. Il est donc normal de soigner cette partie de l’Ă©cran.

Avoir un header efficace est un art bien maĂ®trisĂ© par un grand nombre de sites web, mais quand est-il du sub-header ? Mais si enfin, ce bandeau horizontal qui vient se glisser au-dessus du header. Nous parlons bien d’un bandeau de quelques pixels de haut (entre 15 et 20) mais qui peut se rĂ©vĂ©ler particulièrement efficace.

Illustration avec le New York Times qui s’en sert pour faire la promotion des nouvelles fonctionnalitĂ©s :

Le sub-header du NY Times

Pour Twitter cette zone peut servir Ă  faire de l’animation saisonnière :

Le sub-header de Twitter

Ce bandeau peut également être exploité pour diffuser des liens sponsorisés comme sur le blog du Capitaine Commerce :

Le sub-header du Capitaine Commerce

Les groupes peuvent Ă©galement s’en servir pour faciliter le basculement d’une marque Ă  une autre comme chez Land’s End :

Le sub-header de Land's End
Le sub-header de Land

Les plus audacieux enfin s’en servent mĂŞme pour faire panier commun comme GAP :

Le sub-header de GAP
Le sub-header de GAP

Avec ces diffĂ©rents exemples vous avez donc une panoplie assez large des possibilitĂ©s offertes par le haut de page. J’espère surtout que ces exemples vous aurons convaincus du potentiel de cette zone de l’Ă©cran.

(via Blink)

La largeur d’écran de votre site n’est pas rédibitoire

Le blog UIE Brain Sparks vient de publier un billet des plus pertinent : The Question that Won’t Die: Optimal Screen Resolution?. Il y est question de la largeur d’écran idéale. Ça tombe bien puisque que l’on en parlait récemment (voir à ce sujet le billet précédent : Osez le 1024 pixels de largeur).

A la question quelle est la largeur d’écran idéale ? (800 ou 1024 pixels) la réponse de Jared Spool est sans ambiguïté : Il est bien plus important d’avoir du contenu pertinent. On n’a jamais vu une société faire faillite parce qu’elle avait une mauvaise largeur d’écran sur son site web, par contre l’inverse n’est pas vrai. Le plus pertinent est dans un premier temps de se concentrer sur le contenu et dans un deuxième temps de passer du temps avec les utilisateurs finaux pour savoir quelle largeur d’écran leur correspond le mieux.

Et toc, voilà qui clôt le débat ! En plus, cela fait écho avec un précédent billet : De l’art de se différentier par le contenu et l’usabilité.

/!\ Article initialement publié sur FredCavazza.net.