Archive pour le mot-clef ‘contenu’

Maquettes interactives : le design dans le navigateur

Par raphaelle, publié dans Design le 23 mars 2010

Tags : contenu, css3, Design, process

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.

Comment optimiser le référencement de son site Internet

Par Thibaut, publié dans Référencement le 25 février 2009

Tags : circulation, contenu, contextuel, hiérarchisation, mots-clé, pertinence, positionnement, Référencement, site, url rewriting

Avoir un bon référencement dans les moteurs de recherche est devenu une problématique centrale dans la gestion de son site Internet. Être contextuel, avoir des pages de contenu de qualité et une bonne répartition de ses mots clés est essentiel. Voici un récapitulatif, fait à partir d’un audit d’un site de vente en ligne de chaussures, des points qui vous aideront à bien positionner votre site. (Lire la suite…)