C’est le cas de “The Icon Handbook” de Jon Hicks.

Les icônes ne datent pas d’internet, on les utilise déjà comme pictogrammes ou comme références visuelles dans les imprimée. Mais il est vrai que sur le web et avec la montée en puissance du web mobile, les icônes sont maintenant incontournables.

Du favicon de 16×16 pixels à l’icône d’application de 1024 pixels de côté,The Icon Handbook nous aide à mieux comprendre ce qu’est un icône mais aussi comment mieux les utiliser. On comprend l’importance de les travailler comme objet en tant que tel et non pas comme de simples déclinaisons d’un logo.

Réalisé comme un ouvrage explicatif plutôt que comme un tutoriel géant, ce livre s’adresse à tous les designers, même s’il intéressera plus les créateurs d’interfaces web ou mobiles.
En partant à chaque fois de la solution la plus simple et en nous expliquant comment complexifier nos icônes, le ton est pédagogique, simple mais jamais ennuyeux.

Le tout est agrémenté d’interviews de professionnels célèbres (quand on sait que c’est l’auteur qui a dessiné le logo de Firefox ça impose déjà le respect) qui parlent de leur travail, donnent leurs astuces et expliquent comment ils abordent les projet sur lesquels ils interviennent.

Chaque fin de chapitre st clôturée par un exercice pratique simple à mettre en place et le livre est illustré avec des dizaines si ce n’est des centaines d’exemples alléchants avec, quand ils sont disponibles, les liens vers les références.

The Icon Handbook est décomposé en sept chapitres traitant des icônes, de la manière dont les utiliser et de la manière de les créer. L’ouvrage se clôture sur un annexe fort intéressant puisqu’il réunit tous les aspects techniques sous forme de tableaux: tailles, nombre de couleurs, résolutions pour un très grand nombre d’OS et d’appareils.

Bonne nouvelle, un grand nombre de ressources est présent gratuitement sur le site de The Icon Handbook, inclus des modèles à télécharger ainsi que les précieux tableaux de référence.

Si vous aimez le web ainsi que les icônes, et ceci même si vous ne vous êtes pas encore lancé dans leur création, ce livre est pour vous!

Il est disponible (en anglais) chez Five Simple Steps en version électronique (16£) papier (32£) ou en bundle ebook+papier (38£).

Introduction

Je suis rentré de mon dernier voyage au Japon avec une passion pour les trains (oui, comme Sheldon), je suis inscrit sur un forum spécialisé mais j’avais envie d’un lieu ou partager mes projets et mes photos sur l’univers des trains japonais et le modélisme ferroviaire. C’était donc le prétexte rêvé pour un projet comme je les aime: logo, identité et site web!

Le briefing

La publication d’articles ne devait pas être compliquée et la gestion devait être facile. J’ai longtemps hésité entre un Tumblr ou un WordPress. La flexibilité de WordPress contre la simplicité d’un Tumblr. Ce qui m’a finalement décidé à choisir WordPress est sa réelle force en tant que plate forme de blog: commentaires, catégories, pages, etc.

Le design du blog

Comme je voulais lancer le site rapidement, j’ai commencé par chercher un thème WordPress servant de base pour pouvoir le modifier. J’ai trouvé Zexee de Design Superhero qui m’a beaucoup plu: textures, rubans, effets de profondeur et de matières. Il correspondait bien à mes attentes. Elles étaient simples: partage de photos, de vidéos et articles.

Je l’ai alors récupéré et j’ai commencé à le modifier. Après quelques heures à bricoler dans le code, je me suis trouvé frustré: je devais faire pas mal de compromis sans arriver à un résultat qui me plaisait réellement. Au final, je passais beaucoup de temps sur des détails qui n’étaient pas satisfaisants une fois finis. J’ai donc décidé de reprendre tout à zéro et de créer un thème de A à Z comme j’en avais envie.

J’ai donc ressorti mon carnet de croquis et mon stylo en composant une structure selon ce qui m’avait plu dans Zexee: une composition en colonnes.

Conception et design

J’avais vraiment envie de jouer avec des détails de textures et de volumes afin de composer un design qui soit très fort, à l’oposé totale de la tendance minimaliste actuelle. J’ai souhaité conserver les éléments qui me plaisaient dans Zexee et les adapter à ma sauce selon mes besoins (rubans, dispositon du menu et des articles, etc.)

Typographie

Ayant travaillé sur la typographie de manière approfondie pour le logo, je souhaitais pousser la réflexion typographique aussi loin sur le site. L’Egyptienne F n’étant pas utilisable sur le web, il m’a fallu lui trouver une alternative. Google propose une jolie bibliothèque de typographies libres et donc utilisables sur le web.

La Merriweather de Eben Sorkin est proche de l’Egyptienne F et est proposée dans un grand nombre de graisses. C’est une typographie que je trouve très harmonieuse et délicate pour une mécane.

Pour le corps de texte, une typographie serif ne me plaisait pas pour une lecture à l’écran. Je ne voulais pas non plus utiliser une typo “standard” du web (Helvetica, Arial, Verdana, etc.) et ai cherché une fonte avec plus de caractère et une excellente lisibilité à l’écran. J’ai donc choisi la Droid Sans, une humaniste sans sérif travaillée dans l’optique d’une utilisation sur écrans dans des interfaces web ou mobiles. C’est l’une des fontes de base des OS mobiles Android et son usage est donc parfait à l’écran.

Le site utilise donc un mélange de Droid Sans et Merryweather, deux typo dans la même harmonie:

• La Merryweather est utilisée dans les titres, les meta données (date, catégorie, affichage des commentaires, etc.) ainsi que dans la navigation.
• La Droid Sans est utilisée pour le corps de texte et la sidebar. Elle est donc travaillée de manière à rendre la lecture la plus aisée possible. Sa couleur est un gris foncé plutôt qu’un noir afin d’adoucir les contrastes et l’interlignage a été pensé dans le but d’apporter un plus grand confort de lecture.

Navigation

Toujours dans la même idée que Zexee, l’intention était d’une navigation de côté et fixe. La barre latérale de gauche (qui est en fait le header du site puisqu’elle contient le logo et la navigation principale) est en effet fixe même si l’on scroll en bas de page.
Le menu avait la volonté de rappeler les panneaux d’affichages à volets que l’on trouvait dans les gares ou les aéroports. Là aussi, le détail a été porté sur la sensation de textures. Dans la partie inférieure du menu, les liens Twitter et Facebook deviennent lumineux au survol.

Articles

L’idée de ruban, particulièrement à la mode sur le web en ce moment, a été gardée et revue d’une manière plus sobre que celle de Zexee. Je voulais conserver aussi l’idée que chaque article ait son propre périmètre posé sur le fond et non pas une liste d’articles dans un seul conteneur.

De cette manière, que l’article soit composé d’une simple photo ou de longs contenus, il est mis en exergue sans se perdre dans le reste de la masse.

Un élément qui me tenait particulièrement à cœur était la disposition du contenu avec une grande marge gauche. Le texte est bien plus étroit que son conteneur mais les images horizontales dépassent sur toute la largeur. Cette disposition a été conçue pour s’éloigner d’un modèle web et se rapprocher d’un imprimé ou l’on est moins confiné dans des blocs et ou il ne subsiste aucune limitation technique.

Il a fallu organiser mes CSS d’une manière très propre de manière à ce que ce système ne pose pas de problèmes une fois intégrés dans WordPress mais une fois le processus terminé, le résultat est transparent pour l’utilisateur comme pour la rédaction de nouveaux articles.

Liens

Il y a plusieurs manières de mettre en exergue les liens sur une page web. Ici c’est une option sobre qui a été choisie: les liens sont signalés dans une couleur plus foncée. Au survol, un soulignement apparaît et au clic, le lien descend de 1 pixel de hauteur afin de simuler une sensation de clic.

De cette manière ce sont bien trois étapes qui sont rendues: affichage, survol et clic.  C’est une manière efficace pour aider le visiteur à savoir ou il il est et lui permettre d’avoir un retour d’interaction.

Sidebar

La sidebar fait la particularité de ce blog et est là totalement ancrée dans le sujet: une liste de trains de ma collection personnelle avec, pour chacun, un article, une sorte de revue, associé. Cette idée vient d’un autre blog de modélisme qui m’a beaucoup inspiré dans la structure de son contenu: Quinntopia. Pour chaque modèle de train que je possède, un article détaillé est associé. Ces articles apparaissent dans le blog comme n’importe quel autre mais ils ont un accès privilégié dans la sidebar.

Afin de donner plus d’interactivité ainsi que de mettre une image sur des noms de trains parfois abstraits (même pour moi…), j’ai joué avec les images des trains et… les ai mis en mouvement. Au passage de la souris, le texte disparait pour laisser place aux trains. Détail de geek: chaque train apparait à une vitesse proportionnelle à sa vitesse réelle; les trains les plus rapides arrivent en place plus vite que les modèles plus lents.

Le menu est réalisé en CSS3, pas de Javascript ni de plugin. Il est donc parfaitement respectueux des standards.

Evolutions dans la navigation

Le blog ayant bien grandi depuis sa mise en ligne, je me rend compte qu’il faudra ajouter un menu de catégories. La communauté dont fait partie Tecchan étant petite, je souhaitais aussi afficher un blogroll des blogs “cousins”. Cela fait partie des nouvelles modifications à ajouter au fil du temps. C’est aussi ce qui fait le charme du web par rapport au print: un site web n’est jamais 100% terminé et on le met à jour quand on le souhaite.

Développement web et WordPress

Il était clair dès le début que le site utiliserait des technologies modernes: HTML5 et CSS3 sans trop se soucier du rendu sur les navigateurs les plus anciens. C’est une volonté claire et nette pour ce blog perso mais j’utilise le même principe pour les autres sites que je réalise: se focuser sur les technologies récentes et simplement vérifier que le site n’ait pas l’air “cassé” sur les vieux navigateurs. A notre époque, il s’agit de pousser le web en avant. La compatibilité doit être assurée mais le nivellement doit se faire par le haut et non pas en fonction de technologies obsolètes.

L’utilisation du CSS3 dans Tecchan est simple: tout ce qui pouvait être construit avec du CSS au lieu d’images a été fait. Cela vaut pour les effets simples comme des ombres ou des angles arrondis, mais aussi pour des doubles filets ou les animations. De cette manière la page est plus légère, plus simple et la dégradation ne nuit pas au contenu pour les utilisateurs de navigateurs plus anciens.

Le menu des trains est un exemple typique de ce que l’on peut créer en CSS3. Tous les effets sont gérés en animation CSS. Voici ce que ça donne pour une élément du menu par exemple:

#shinkansen0{
background: url(img/trains.png) no-repeat 250px 0;
transition: background .45s ease-out, color .3s ease-in-out; /*standard CSS3*/
-webkit-transition: background .45s ease-out, color .3s ease-in-out; /*pour Webkit (Safari et Chrome)*/
-moz-transition: background .45s ease-out, color .3s ease-in-out; /*pour FireFox*/
-o-transition: background .45s ease-out, color .3s ease-in-out; /*pour Opera*/
}

#shinkansen0:hover{
color: transparent;
background: url(img/trains.png) no-repeat 60px 0;
}

En ce qui concerne Internet Explorer 6, plutôt que de passer de longues heures à corriger les erreurs d’affichage, j’ai employé la technique de feuille de style universelle qui consiste à servir une feuille de style simplifiée au maximum pour IE6 afin de se concentrer sur la lecture uniquement. Le rendu est minimaliste, mais le visiteur accèdera au contenu sans souci avec le conteneur.

A vrai dire, j’hésite même à pousser cette technique pour Internet Explorer 7 qui est pire que la version 6 sur certains aspects.

Sprites

J’avais fait un article sur les sprites CSS il y a quelques temps, voici à quoi ressemblent les sprites sur Tecchan. Il y en a plusieurs mais les trois principaux sont les suivants:

Eléments principaux d’interface

Menu trains

Background des menus

De cette manière je limite le nombre de fichiers chargés (améliorant la vitesse de chargement des pages) et supprime le délai de chargement pour les rollover. Pour plus de détails sur les sprites CSS, je vous invite à lire mon article.

Responsive

La dernière mise à jour de Tecchan lui a valu ni plus ni moins qu’un design adaptatif. Le site étant très large, dès l’origine le site s’adaptait à un écran jusqu’à 1024 pixels de large mais la disposition du header de côté rendait la navigation un peu complexe sur un iPad et carrément impossible sur un smartphone. La réflexion a alors été posée sur les tailles “étapes” à concevoir ainsi que la navigation et lisibilité, en particulier sur les terminaux mobiles.

Ce sont donc pas moins de 6 tailles étapes qui ont été prévues afin de servir le design le plus adapté à chaque taille d’écran et d’appareils:

1. Format d’écran de bureau large (1150px et plus)
2. Ecran de laptop (1149px à 1125px)
3. Netbook et iPad format horizontal (1024px à 800px)
4. Netbook, tablettes et iPad format vertical ( 799px à 720px)
5. Tablettes et smartphones (719px à 500px)
6. Smartphones, iPhone vertical et horizontal, grille fluide (moins de 500px)

Entretien et évolution

Lancé en mai 2011, le site fait son petit bonhomme de chemin. Sur les sujets qu’il traite, le ranking est plutôt satisfaisant sur Google et les visiteurs sont fidèles. Avec une moyenne de plus de deux commentaires par article, je dois bien avouer que le site engendre une interraction assez surprenante pour le sujet dont il traite. C’est un petit milieu, les gens visitent les blogs cousins et le tout rend ce petit univers assez convial.

Alors le site n’explose pas le plafond avec ses visites mais le lectorat est fidèle et commente volontiers, tant sur le blog que sur Facebook. Il n’avait aucun objectif à son lancement et de savoir qu’aujourd’hui je navigue entre 20 et 30 visiteurs quotidiens (même les jours ou il n’y a pas de publications) est quelque chose de plutôt… cool!

Ils sont disponibles à la vente sur moviecarposters.com pour 10$, découvrez là-bas aussi l’intégralité de ces chouettes réalisations.

Ghostbusters Ecto-1

Akira Motorcycle

1966-series Batmobile

Aston Martin DB5

The A-Team Van

The General Lee

Knight Industries Two-Thousand - K.I.T.T.

Korben Dallas's Taxi

Jurassic Park Jeep Wrangler

Magnum's Ferrari 308 GTS

The Mystery Machine

The Tumbler

X-Wing Starfighter

N’hésitez pas à découvrir l’intégralité de ce projet sur moviecarposters.com!

Introduction

Je suis rentré de mon dernier voyage au Japon avec une passion pour les trains (oui, comme Sheldon), je suis inscrit sur un forum spécialisé mais j’avais envie d’un lieu ou partager mes projets et mes photos sur l’univers des trains japonais et le modélisme ferroviaire. C’était donc le prétexte rêvé pour un projet comme je les aime: logo, identité et site web!

Le briefing

L’identité devait être marquée et le blog simple. Les sites de ce type sont souvent poussiéreux ou trop chargés, même si ils sont réalisés avec toute la meilleure volonté du monde par leurs auteurs amateurs. Je voulais donc m’orienter vers la meilleure qualité possible en termes de lecture comme d’identité.

Le nom: Tecchan

Première étape, trouver un titre, un nom pour ce blog.  Tecchan est une compression du mot “tetsudo” qui signifie chemin de fer et du suffixe “chan” utilisé à titre affectif pour des amis proches ou des enfants. Ce nom vient d’une petite anecdote de mon voyage au Japon: après une longue journée à Tokyo, nous avions rendez-vous avec des amis japonais. Quand il m’a vu avec un cabas contenant un set de trains que je venais d’acheter, il a ri et a dit “tecchan”. Tecchan se définirait littéralement par “le garçon du rail” et c’est un terme utilisé, plutôt pour de jeunes garçons, qui sont, comme moi, passionnés par le chemin de fer.

Le nom est donc venu très naturellement même s’il m’a fallu confirmer avec mon ami japonais l’orthographe exacte et l’étymologie complète du mot. Pour ceux qui se posent la question: tecchan se prononce: tetchanne et s’écrit テッチャン en japonais.

Le logo

La question était ici de savoir si j’utilisais ou non du texte en japonais pour le logo. J’ai effectué plusieurs essais dans plusieurs alphabets différents afin de tester ce qui rend le mieux. Le but était de trouver quelque chose de mécanique, industriel, en accord avec le sujet.

Puis est venu l’idée de la mascotte. Je trouvais l’exercice de créer une mascotte pour ce blog intéressant car le Japon a une culture des mascottes et autres personnages assez imprésionante. Chaque région du Japon a sa mascotte dédiée, le plus souvent représentée par un animal, l’idée d’avoir un tel symbole pour un blog orienté Japon me semblait particulièrement appropriée. Même si j’ai réfléchi à l’idée d’un mini-Godzilla, j’ai très vite adopté l’idée du cochon. Sans entrer dans les détails, le cochon est un animal qui m’est un peu fétiche, le logo allait donc être très personnel. La casquette de mécanicien est arrivée ensuite pour lier la mascotte avec le sujet.

J’ai réalisé plusieurs croquis sur papier avant de trouver les bonne formes et le bon esprit. Je l’ai ensuite repris et vectorisé dans Illustrator pour arriver au dessin définitif. J’ai beaucoup joué avec les épaisseurs de lignes pour donner du volume au dessin.

Typographie

Au niveau typographique, il m’a été assez clair que je souhaitais une fonte mécanique, plus solide. Même si j’ai effectué quelques essais, c’est l’Egyptienne F de Adrian Frutiger qui a conservé toute mon attention par son dessin a la fois solide et souple. Afin de lui donner un aspect encore plus industriel, j’ai opté pour sa variante bold. Le choix de l’absence de capitale a été fait pour aider l’équilibre du mot et simplifier la lecture. Le fait de ne pas utiliser de majuscules dans un logo permet aussi de donner une image plus humble.

Composition

Il était venu le temps d’associer la mascotte au texte et c’est la partie qui m’a donné le plus de soucis. J’étais au départ parti vers une optique plus traditionnelle du logo: des aplats et peu de couleurs ainsi qu’une conception plus graphique du logo. Le texte mordait une partie du cochon et l’ensemble était associé d’une seule pièce.

Mais le résultat n’était pas très convainquant et sachant que le logo allait avoir une utilisation exclusive pour le web, je trouvais domage de limiter autant les couleurs et de ne pas mettre plus en valeur le personnage. J’ai donc pris le parti de rendre ce logo très coloré en utilisant des dégradés et des ombres ainsi que donner une meilleure place à la mascotte. Je n’avais pas besoin de considérer des cartes de visites ou des petits imprimés comme plus souvent le cas lors de la création d’un logo.

Le gris anthracite du texte a été choisi afin de donner une teinte neutre en contraste au pictogramme très coloré. Le gris foncé aide aussi à renforcer l’intention mécanique qui a été reprise plus loin dans le design du site.

Je savais aussi que le design du site web serait sur trois colonnes et que la place horizontale serait limitée. J’ai donc décidé de pousser l’idée encore plus loin et d’assumer alors totalement la mascotte en lui donnant beaucoup plus d’importance. C’est ce qui sera conservé comme idée finale.

Cela donc été réellement une création agile en revenant en arrière, en reprenant en amont pour arriver non seulement à un résultat esthétique et plaisant mais aussi adapté à son utilisation.

Rendez-vous bientôt pour la suite de cette étude de cas avec la création du blog.

Nous les intégrons donc régulièrement dans nos designs et avons besoin de les avoir sous la main souvent. Plutôt que de les découper au cas par cas, voici un petit fichier PSD qui recense les différentes tailles de la “sainte trinité sociale”: Facebook, Google+ et Twitter.

Récupérés bien entendu sur leurs sites respectifs, utilisez-les pour vos designs en essayant néanmoins d’éviter le style sapin de Noël que l’on trouve de plus en plus sur les gros blogs tech ou les sites d’info!

Télécharger le PSD

Voici une petite sélection des meilleures articles des dernières années:

• Everything You Wanted To Know About Gradients (And a Few Things You Didn’t) par Ethan Marcotte
• Speed Up Your Site with Delayed Content par Paul Hammond
• Optimize Your Web Design Workflow par Veerle Pieters
• Going Nuts with CSS Transitions par Natalie Downe
• A Pet Project is For Life, Not Just for Christmas par Elliot Jay Stocks
• CSS Animations par Tim Van Damme

Alors si vous ne connaissez pas encore 24 ways, filez le visiter et retournez-y tous les jours jusqu’à la fin du mois!

→ 24ways.org

Responsive Web Design de Ethan Marcotte

Merci A Book Apart pour l’image

L’ouvrage parfait si ce n’est indispensable pour débuter. 143 pages qui vous introduiront le sujet, puis vous aideront à débuter. Le tout dans un ton agréable et facile à lire. Si vous ne l’avez pas déjà, jetez-vous dessus, ça en faut vraiment la peine d’autant que le ebook ne coûte que 9$ et qu’il contient des vidéos qui permettent de mieux se rendre compte des résultats. Je préfère les livres papier en général mais dans ce cas on a une réelle valeur ajoutée.

Disponible directement chez A Book Apart →

Screenfly

Un moyen simple de tester les tailles d’écrans. Si l’on peut facilement redimensionner la fenêtre de son browser pour voir ce qu’il se passe en réduction, il est assez agréable de savoir quel sera le rendu sur telle ou telle taille d’écran. Le site propose pas mal de tailles différentes et a déjà enregistré les dimensions exactes des tablettes et smartphones les plus populaires: iPad, Samsung Galaxy, Motorola Xoom, iPhone, Google Nexus S et j’en passe.

Screenfly par QuirkTools→

Adaptive Images

On a beau prévoir une mise en page mobile, si l’utilisateur doit charger en 3G des images prévues à la base pour un grand écran d’ordinateur en WiFi, son expérience peut s’en trouver gâchée. Adaptive Images crée à la volée des images adaptées à la taille de l’écran qu’il range dans le cache. Cet petit script permet donc de servir des images aussi bien adaptées que votre design à la taille de l’écran de votre visiteur.

Adaptives Images →

CSS Elastic Videos chez Web Designer Wall

Si l’on peut aisément avoir des images fluides dans notre design adaptatif, il en est autre chose pour les vidéos. En HTML5, la balise <video> est interprétée de la même manière que <img> cela ne pose donc pas de problèmes. En revanche, il faut bien avouer que Flash a encore le monopole en ce qui concerne les sites de vidéos (comme YouTube, Vimeo ou Dailymotion) et les intégrations dans les pages web se font aussi bien souvent en utilisant un lecteur Flash.

Ce tutoriel de chez WDW vous apporte toutes les solutions pour intégrer des vidéos dans votre site, qu’elles soient directement intégrées en HTML5 ou avec intégration Flash. La bonne nouvelle: pas de JavaScript ni d’ajout de code complexe: c’est tout en CSS! J’ai utilisé cette technique sur Tecchan si vous voulez tester le rendu.

CSS: Elastic Videos →

Ma petite collection

Je tiens ma petite collection de ressources responsive bien au chaud dans un Pearltrees. N’hésitez pas à y jeter un œil et pourquoi pas à me rejoindre pour construire une boite à outils ultime!

Mon Pearltrees: Responsive →

Un dernier conseil

Lancez-vous, il n’y a qu’en mettant la main dans le cambouis que l’on apprend. Et si vous avez encore un peu d’appréhension, lisez Responsive Web Design de Ethan Marcotte, je vous parie que vous ne pourrez pas vous empêcher de vous y essayer avant même d’avoir fini le livre.

Voici donc quelques règles de base de typographie à garder sous la main pour vos créations et vos rédactions. Sans logiciel professionnel, il est parfois impossible de faire des réglages fins, je vous oppose néanmoins l’alternative la plus adaptée pour chaque chapitre.

Sachez qu’il s’agit de règles de typographie suisses romandes mais elles s’appliquent dans la plupart des cas à la typographie française (mentionné dans l’article quand c’est le cas). En revanche, elles ne s’appliquent pas forcément pour les autres langues.

Ponctuation et espaces fines

Avant chacun de ces caractères (? ! ; : ) on doit placer une espace fine. Pas d’espace avant un point (.) ou une virgule(,). On place une espace normale après.

• shift + alt + cmd/ctrl + M dans InDesign
• &#8239; pour une espace fine insécable dans votre code HTML (insécable de manière à ce que le caractère qui la suit ne passe pas à la ligne) (merci à fredchat). &thinsp; pour une espace fine normale.

Autres langues

En anglais ou en allemand, on n’utilise pas d’espace fine avant ces caractères.

Usage courant (hors des logiciels d’édition graphique)

En l’absence de la possibilité de placer une espace fine (dans un traitement de texte standard ou sur le web) on colle le caractère à la fin du mot sans laisser d’espaces.

Guillemets

Les «guillemets français» sont souvent oubliés au profit des “guillemets anglais”, mais plus souvent par de “doubles primes” sur le web.
On place toujours une espace fine après le guillemet d’ouverture et une autre avant le guillemet de fermeture.

• Configurez la bonne langue dans vos logiciels pour avoir les guillemets correspondants.
• &laquo; et &raquo; en html

Autres langues

Les guillemets peuvent changer selon chaque langue, renseignez-vous. Il faut utiliser “ et ” en anglais. (alt+2 et alt+shift+2)

Usage courant

Utiliser des guillemets français pouvant être une vraie plaie avec des logiciels non professionnels, l’usage des guillemets anglais ou même de simples primes est admis. On colle les guillemets à la première et la dernière lettre sans laisser d’espace.

Parenthèses

Jamais d’espace après la parenthèse d’ouverture ni avant la parenthèse de fermeture.

Autres langues

Pas d’espace non plus an anglais ou en allemand.

Usage courant

Ici non plus. Ajouter une espace peut faire passer une parenthèse à la ligne et nuire à la compréhension du contenu.

Chiffres et numérotation

Là encore, nous sommes souvent influencés par la typographie anglaise. En typographie française, on ne place pas de prime entre les groupes de 3 chiffres (1’000’000) mais une espace fine. De plus, on ne place les espaces fines qu’à partir de 5 chiffres (l’espace fin étant une aide à la lecture, on part du principe qu’il est aisé de lire jusqu’à 4 chiffres).

Autres langues

En anglais on place une virgule entre chaque série de trois chiffres à partir de 4 chiffres(2,500£, 1,350,578 people) sauf pour les dates (I was born in 1986).
En allemand on place une espace standard entre les séries de trois chiffres (2 458 500).

EDIT: Je n’ai pas trouvé d’infos sur l’usage de la prime (12’345) dans aucune langue, j’imagine qu’il doit s’agir d’un abus d’usage (probablement aussi dû à internet) ou d’une utilisation comptable. Mais si quelqu’un à des infos là dessus, je suis intéressé.

Les primes sont surtout utilisées en mathématiques ainsi qu’en anglais pour indiquer les pieds (2′) et les pouces (12”). (merci @lqd)

Usage courant

Là aussi je pense que l’usage de la prime est admise pour aider la lecture des longs chiffres. La virgule ne doit en tout cas pas être utilisée en français.

Devises

Franc Suisse

On indique une somme de la manière suivante: 12.50 fr. ou alors Fr. 12.50 dans des tableaux comptables par exemple. L’utilisation de CHF est réservée uniquement si l’on parle de différentes devises: 20 CHF valent aujourd’hui 16.14EUR. SFr ne s’utilise, en principe, pas.

Lorsqu’il n’y a pas de chiffre après la virgule on indique le double zéro par un point et un long tiret (12.–). Il n’est pas question d’utiliser le long tiret après les centimes: 12.50.–

• alt + tiret pour le long tiret
• &ndash; en html

Euro

Le symbole € peut être utilisé dans la plupart des documents, mais lorsqu’il s’agit de documents officiels ou financiers, il faut utiliser la notation EUR. Qu’on utilise € ou EUR, il faut toujours le placer après la valeur. Il faut placer une espace entre la somme et le symbole (25 €, 127 EUR).

• alt +E sur votre clavier (mais vous le saviez déjà…)
• &euro; en HTML

Autres langues

En anglais notamment, on place la notation avant la somme (EUR 25).

Majuscule et capitales accentuées

Attention, ici typographie française et suisse romande se confrontent et les règles divèrgent.

En Suisse Romande

Une majuscule est la première lettre d’une phrase et doit toujours être en capitale.

On n’accentue pas une majuscule, en revanche, un mot en capitale doit être accentué.

En France

La première lettre d’une phrase est aussi toujours accentuée. En revanche, contrairement à la Suisse Romande, en France, selon le lexique des règles typographiques de l’imprimerie nationale, les accents sont systématiques, peu importe la présence ou non de capitales.

• alt + ^ pour un accent grave et alt + maj + ^ pour l’accent aigu avant de tapper votre lettre en majuscule.

Merci infiniment à Charles pour son commentaire. Je ne connaissait en effet pas cette règle car elle diffère de la Suisse.

Autres langues

En allemand, comme en français, on place le tréma sur les mots en capitales (ÖSTERREICH). En revanche, si la première lettre d’un mot est accentuée, on tolère l’écriture suivante: Oesterreich. Attention, en allemand, tous les noms communs prennent une majuscule…

Usage de l’esperluette (&)

Connue aussi sous le nom de “et commercial” ou ampersand en anglais, l’esperluette subit aussi les abus d’usages. La faute à sa grande valeur esthétique probablement… En français il n’est pas correct de l’utiliser pour une liste (Je vais acheter du pain, des œufs & de la farine). L’esperluette s’utilise (en principe) uniquement dans les raisons sociale (Favre & fils SA). On place une espace normale avant et après.

Libre à vous de l’utiliser comme vous le souhaitez, tachez juste d’éviter d’en abuser…

Quelques ressources pour terminer

Le Guide du Typographe

Le Guide du Typographe Romand est sans conteste la référence ultime. Plus de 200 pages de règles typographiques avec des pages sur les orthographes particulières et même les langues étrangères. Un must-have pour tous les graphistes et honte sur tout graphiste suisse qui ne le possède pas déjà!

CopyPasteCharacter

Pour avoir sous la main tous les symboles complexe qu’il est parfois un peu coton de retrouver sur son clavier. Le site permet de copier dans son presse papier le caractère ou son code HTML: copypastecharacter.com

Symbol Caddy

Un petit widget MacOSX pour avoir accès aux caractères complexes depuis son Dashboard. Tout comme CopyPasteCharacter, on peu copier en texte ou en HTML. Télécharger le widget gratuitement.

Voilà pour ce guide, n’hésitez pas à ajouter vos commentaires ou vos précisions. J’espère que cet article vous aura été utile!

Voici ici un rapide topo de ce qui est la tendance à la mode sur le web et incontestablement l’avenir du webdesign!

Un design pour les gouverner tous

Les résolutions d’écran ont toujours été un souci pour le webdesign. Il y a bien des années on voyait des annonces du genre “site optimisé pour un écran de 800px par 600px. Ensuite les standards ont grandi avec les écrans, 960px puis 1200px. Mais en même temps, les smartphones et les tablettes nous ont pondu des résolutions plus fines: 320px de large pour l’iPhone .

Je prend mon cas, à la maison j’ai un écran 24 pouces, en déplacement j’utilise celui de mon MacBook 13′, depuis mon canapé j’ai mon iPad et dans le bus mon iPhone… 4 machines avec des tailles et des contraintes (souris/doigt) radicalement différentes.

A ce stade, on ne peut plus simplement prendre une taille standard puisqu’il n’existe justement plus de standards…

Réaliser un design pour chacune: impossible?! Oui mais non.

Les design fluides utilisant des tailles en pourcentages ne sont pas nouveaux, au contraire, ce sont des dinosaures du web. S’ils sont parfaits pour s’adapter entre un écran 15′ ou 17′, ils ont un peu plus de mal à gérer un iPhone et leur lisibilité devient complexe si on les étale tout le long d’un écran 27′.

C’est là que le concept du “Responsive Webdesign” s’applique:

Servir à chaque appareil le design qui lui est le plus adapté.

Et pour se faire, notre outil sera les CSS: les Media Queries. Les Media Queries n’ont rien de neuf sur le web. On les utilisait déjà pour créer des feuilles de style spécifiques à l’impression d’une page web.

Maintenant c’est exactement le même concept sauf qu’au lieu de préciser “print” ou “screen”, on peut spécifier une multitude d’éléments. Entre autres: le nombre de couleurs de l’écran, l’orientation (portrait ou paysage, bien pratique pour les mobiles) et bien entendu, la largeur de la fenêtre!

En termes de technique, dans notre CSS ça n’est pas plus compliqué que ça:

#header
{ width: 280px;
background-color: red;}

@media screen and (max-width: 800px) {

#header
{ width: 140px;}

}

Ici je définis la largeur et la couleur de mon header: un fond rouge et 280 pixels de large. Ensuite je décris tout bêtement que si ma page fait moins de 800 pixels de large, le header ne doit faire que 140px de large. Les styles en cascade permettent de modifier uniquement les éléments que l’on souhaite. Dans ce cas, j’ai changé la largeur de mon header mais il restera rouge.

Ça n’est pas plus compliqué que ça!

Vous avez maintenant tout ce qu’il vous faut (ou presque)! Ça n’est pas plus complexe que de définir la taille de l’écran et de changer/ajouter ce que l’on souhaite pour adapter son site comme on le souhaite. Par exemple, on peut donc définir l’affichage su site de cette manière:

• Sur un très grand écran: deux sidebar, une page très large.
• Sur un plus petit: une seule sidebar et un site plus étroit.
• Sur un format tablette: une navigation plus adaptée au tactile.
• Sur le format mobile: une vraie mise en page mobile étroite et une navigation adaptée.

En utilisant un design fluide (c’est à dire en spécifiant des pourcentages au lieu de dimensions en pixels précis) on peut donc arriver à un site qui s’adapte parfaitement à n’importe quelle taille d’écran. Un vrai site adaptatif dans les règles de l’art et le respect des standards CSS3. A vous de jouer désormais!

Un peu de pratique

Rien de tel que quelques images pour se faire une idée du fonctionnement du concept. Je vais utiliser des captures de l’excellent site Mediaqueri.es qui fait une galerie des meilleurs sites adaptatifs du moment. N’hésitez pas non plus à visiter les sites et redimensionner la fenêtre de votre browser pour voir le résultat.

New Adventure Conf

Ici le site est surtout composé d’un design fluide mais on remarque aussi que la taille des textes s’adapte à la taille de la fenêtre. Et arrivé à une certaine limite, on passe à un design purement mobile.

Forefathers

Le design s’adapte réellement en fonction de l’espace disponible. Le designer a choisi de repositionner les différents éléments en fonction de l’espace disponible. On est face à un vrai design adaptatif avec des media queries et une grille fluide.

D’autres exemples sur Mediaqueri.es

Un peu de lecture…

Ici je n’ai pas la prétention de vous apprendre le webdesign adaptatif mais seulement de vous le présenter. Si vous voulez en savoir plus et vous lancer voici quelques excellentes bases:

Responsive Web Design (en anglais) de Ethan Marcotte
Bien écrit, vite lu et disponible aussi bien en Ebook qu’en version papier. (la version Epub contient des vidéos, un vrai livre interactif sur iPad) C’est un must-read absolu pour toute personne qui se considère comme webdesigner!

Les Media Queries chez Alsacreations
Si vous faites du web et que vous êtes francophone, il n’est certainement pas nécessaire de présenter Alsacreations. Leur article est très complet et très détaillé si vous souhaitez commencer à mettre les mains dans le cambouis.

Les recommendations W3C sur les Media Queries
Un peu indigeste, mais ça a le mérite d’être exhaustif!

Mediaqueri.es
Une belle galerie de sites adaptatifs.

A vous de jouer!

En ce qui me concerne, j’ai commencé à utiliser les Media Queries pour mon blog Tecchan mais pour le moment il ne gère que deux tailles d’écrans (large et étroit). Il va de soit qu’à l’avenir j’aimerais le rendre complêtement adaptatif, de même pour mon portfolio.

N’hésitez pas à faire part de vos expériences ou à partager des sites qui vous plaisent!

PS: merci à @Twenster et aux gens du #wdfr pour m’avoir aidé à trouver une bonne traduction française au terme “Responsive Web Design”.

EDIT 11 octobre 2011: une version revue et améliorée est paru sur le blog de Enigma. J’ai remplacé la partie technique par une étude plus poussée sur les avantages stratégiques de ce concept. Jetez y un œil!

Je vous propose donc ici de recréer cet icône dans Photoshop en quelques étapes simples en utilisant deux petits filtres et surtout des styles de calques. Un fichier source est aussi disponible au téléchargement.

Le fond de l’icône

Commencez par créer un nouveau document au format carré dans Photoshop. Ici j’ai un format de 363 pixels de côté ce qui est précisément le format de l’icône su la homepage d’Apple.

Remplissez votre premier calque d’un fond blanc qui va servir de base à l’effet de métal brossé. Dans le menu Flitre > Bruit > Ajout de bruit… Entrez les valeurs suivantes: 25%, répartition Gaussienne et cochez la case Monochromatique.

Si tout va bien, vous aurez le rendu suivant:

Ensuite, nous allons créer l’effet de métal brossé grâce au menu Filtre > Atténuation > Flou radial… Entrez la valeur 70, puis cochez les cases Mode rotation et qualité supérieure.

Nous voici avec un brossage circulaire mais toujours un peu fade.

Nous allons maintenant arrondir un peu les angles. Soit avec l’outil sélection, soit avec la plume (que je préfère) créez un rectangle arrondi avec des angles de 65 pixels. Masquez votre calque avec ce rectangle arrondi et on a une forme d’icône.

Ajoutons un dégradé afin de donner l’effet métallique. Pour ce faire, nous allons utiliser les styles de calques. Il nous faut donc un dégradé angle afin de pouvoir jouer sur les valeurs à 360° autour du centre. Plaçeons-le directement en mode Densité linéaire + de manière à avoir l’effet métal brossé en arrière plan.

Ensuite il nous faut des valeurs de gris pour tout le tour. Vous pouvez soit les créer vous-même ou simplement les copier à la pipette depuis l’image ci-dessous. La seule chose importante est d’avoir la même valeur au début et à la fin pour ne pas “casser” le dégradé.

Ça commence à prendre forme, il manque juste le contour. Ajoutez donc un nouveau style de calque contour de 3px de large sur l’intérieur. Le type de remplissage se fait en dégradé (vertical) avec un gris clair en haut et un gris foncé en bas.

Voilà, notre fond d’icône est maintenant terminé!

L’intérieur de l’icône: le nuage

On s’attaque maintenant à ce qu’on va placer à l’intérieur. Je prend un nuage, pour rester dans le thème tiens! J’importe mon image depuis Illutsrator en tant qu’objet dynamique, ça me laissera plus de libertés pour le redimensionner.

Afin de ne pas voir la couleur d’origine, n’oubliez pas de changer l’opacité du fond à 0% dans les options de fusion ou tout en haut de votre palette de calque (Fond, juste en dessous du contrôle de l’opacité).

Maintenant appliquez un beau gris foncé en mode produit.

Maintenant, appliquons l’effet enfoncé dans le métal grâce au style de calque Biseautage et estampage. Entrez les valeurs suivantes: biseau externe, lisse, 150%, dirigé vers le bas, une taille de 3px et aucun flou. L’ombrage se fait à la verticale à 90° et modifiez la forme du contour brillant. Passez les tons clairs en Densité couleur -, la couleur blanche à 50% d’opacité et les tons foncés en gris produit.

Voilà à quoi cela ressemble. Courage, on est presque au bout!!

Dernier petit détail, appliquer une petite ombre interne à notre nuage. En noir, mode produit et 75% d’opacité. Distante de 1px seulement et pour une taille de 5px.

Voilà, c’est terminé! Une icône digne d’un designer de chez Apple chez vous en quelques minutes.

TELECHARGER LE FICHIER SOURCE (ZIP, 2.9 Mo)

Vous pouvez utiliser le fichier (PSD + TIFF + PNG) pour vos créations personnelles ou professionnelles. Si vous en avez l’occasion, balancez un petit lien sur cet article, ça mange pas de pain et ça serait sympa!

J’espère que ce tuto dans les nuages vous aura plu!