Une landing pages ou page d’atterrissage, est une page d’entrée de votre site, sachant que les internautes ne vont pas forcément arriver par la page d’accueil. L’internaute peut venir d’une campagne pub, d’un lien de référencement naturel, d’un email, d’un lien donné via un autre support (presse, radio, brochure, etc.) En voici un exemple :

Auteur : Damien > www.behindthewebdesign.com

La typographie est un élément essentiel du webdesign. En effet, c’est le premier vecteur d’information d’un site web : il doit donc être traité avec le plus grand soin. Cet article va traiter des différentes techniques d’affichage et de mise en forme typographique des éléments textuels dans un webdesign. Attention, on ne parle ici que des textes de contenus voire de navigation qui peuvent d’ailleurs être amenés à être traités dynamiquement par un CMS, et non pas des éléments textuels intégrés au graphisme du site, ni des choix esthétiques et/ou ergonomiques de typos.

1. Gestion de la typographie en XHTML/CSS

La plupart des éléments textuels contenus dans un document XHTML peuvent être mis en forme grâce aux feuilles de style CSS de façon convenable. Les attributs CSS d’un élément de type texte sont assez nombreux et permettent pas mal de choses.

1.1. La taille

Le premier attribut est celui gérant la taille : font-size. La taille d’une typo est définie selon des unités relatives ou absolues.

• Le pixel px
  Unité de mesure absolue.
• Le point pt
  Unité de mesure absolue.
• L’«em» em
  Unité relative se basant sur la taille de police par défaut de la page.
• Le pourcent %
  Unité relative se basant sur la taille de typo définie pour l’élément parent.
• Les valeurs smaller et larger
  Valeurs relatives augmentant ou diminuant la taille de typo par rapport à celle définie pour l’élément parent.
• Les valeurs xx-small, x-small, small, medium, large, x-large, xx-large

  Valeurs absolues ayant un rapport de 1.2 entre elles.

Pour plus de détails, voici quelques articles traitant des tailles de typo :

• Typographie web : gérer la taille du texte avec les «em»
• Définir des tailles de police

1.2. La casse

La casse de la typo peut être modifiée par deux propriétés CSS : font-variant et text-transform. Ceci permet d’afficher un texte en majuscule alors qu’il est en minuscule dans le code HTML, par exemple. Cette technique est à préférer à l’entrée directe en majuscule dans le contenu de la page.

• text-transform:uppercase;
  Tout le texte est passé en majuscule.
• text-transform:lowercase;
  Tout le texte est passé en minuscule.
• text-transform:capitalize;
  La première lettre de chaque mot est passé en majuscule.
• font-variant:small-caps;
  Les lettres minuscules sont affichées en petites majuscules.

1.3. La graisse et l’italique

Plus classiquement, la graisse et l’inclinaison peuvent-être gérées grâce aux propriétés CSS suivantes :

• La graisse font-weight
  Permet de passer la graisse en gras (bold) ou nono-gras (normal). A noter qu’un système de valeurs absolues (100 → 900) et relatif (bolder, lighter) existe, mais qu’il ne fonctionne pas. Attention ! Si le but est de mettre du texte en avant dans un paragraphe, par exemple, ne pas utiliser le mise en forme CSS mais l’élément <strong> : en effet, dans ce cas, la graisse a une valeur sémantique.
• Le style font-style
  Permet d’afficher la typo en Italique (italic). De même que pour la graisse, s’il s’agit d’afficher une portion de texte en italique au sein d’un texte, utiliser l’élément <em> puisque le passage en italique a une valeur sémantique.

1.4. Les espacements

Moins utilisées, les propriétés CSS portant sur les espacements entre les caractères, entre les mots et entre les lignes permettent un réel enrichissement de l’effet typographique. Les différents espacements sont gérés par les propriétés CSS suivantes :

• Espacement de caractères letter-spacing

  Permet de régler l’espacement entre les caractères. Les unités utilisées sont les mêmes que pour les tailles de typo (px, pt, em et %) et peuvent être négatives.

• Espacement des mots word-spacing
  Permet de régler l’espacement entre les mots. Les unités utilisées sont les mêmes que pour les tailles de typo (px, pt, em et %) et peuvent être négatives.
• Hauteur de ligne line-height
  Permet de régler la hauteur de ligne. Les unités utilisées sont les mêmes que pour les tailles de typo (px, pt, em et %) et peuvent être négatives.

1.5. Les familles de fontes

Enfin voici la dernière propriété sur laquelle influer en CSS : la famille de fonte (font-family). L’utilisation de cette propriété se fait par priorité en fonction des fontes installées dans l’OS du poste client : on spécifie une suite de famille de fonte, la première est affichée si elle est présente, sinon, on passe à la seconde, etc.

• Famille de fonte font-family:Georgia, ‘Times New Roman’, Times, serifCete configuration affichera le texte en Georgia, sinon en Times New Roman, enfin, si aucune des deux polices n’est installée sur le poste client, c’est la polie de type ’serif’ par défaut qui sera utilisée.

Seules quelques famille de police sont installées par défaut dans les principaux OS. On retrouve pour chaque OS les polices suivantes :

Pour plus de détails, voici quelques articles reprenant des résultats de tests plus complets :

• Guide to CSS Font Stacks [en]
• Font Matrix [en]
• Complete guide to pre-installed fonts [en]

Liste des différents métiers représentés dans le monde de l’internet et du multimédia.
Le détail complet de chaque métier sur le site Source : www.metiers.internet.gouv.fr
Télécharger en pdf le référentiel des métiers internet

Graphisme et Webdesign

Designer Flash

Le métier de Designer Flash ou flasheur, repose sur la technologie graphique Flash. Véritable standard du Web, celle-ci permet de générer des animations dynamiques et adaptables, inhérentes aux « rich média ».

Game designer

Au sein d’une société éditrice de jeux vidéo ou d’une agence de conseil en jeux vidéo, le Game Designer est chargé du développement graphique d’un jeu vidéo (sur pc ou sur console).

Illustrateur 3D

Expert de la palette graphique, l’illustrateur 3D est un professionnel spécialisé dans la traduction des messages en images.

Webdesigner

Le web designer intervient dès le début du projet, il élabore la maquette et produit les différents éléments graphiques du site. A la fois artiste et informaticien, il conçoit l’identité visuelle et la charte graphique des sites sur lesquels il travaille, tout en tenant compte des spécificités techniques du web.

Programmation & développement

Développeur

Le développeur web est un informaticien chargé de réaliser l’ensemble des fonctionnalités d’un site internet.

Flasheur

Polyvalent, le flasheur possède à la fois des compétences en création graphique et en développement. Il doit maîtriser Flash ActionScript qui est un langage de programmation orienté graphisme : il gère les objets, les applications XML…

Intégrateur

L’intégrateur est chargé de mettre en page les choix graphiques et éditoriaux décidés par le chef de projet. Son rôle consiste à monter les pages d’un site web en y assemblant tous les éléments des maquettes graphiques dans le respect des normes et des standards.

Marketing et commerce

Média planner

Le média planner prévoit et coordonne les passages des campagnes publicitaires dans les différents médias traditionnels et web via l’élaboration d’un plan média.

Référenceur

Le métier de référenceur a pour objectif d’accroître la visibilité et l’audience des sites Internet tout en rendant plus accessibles les différentes informations aux internautes.

Administration

Animateur de réseau de contributeurs

L’animateur de réseau de contributeurs coordonne les activités des responsables de publication. Il fédère et dynamise la communauté composée des différents acteurs (contributeurs, valideurs) du site internet.

Expert en sécurité informatique

L’expert en sécurité internet contribue à la mise en œuvre de la politique de sécurité de l’entreprise. Il doit faire remonter les risques en matière de sécurité informatique.

Smashing Magazine a publié une superbe compilation des tendances du Web design en 2009. En voici quelques extraits :

Cette excellent étude a été réalisé par le site designersinteractifs. Cette étude est unique en France, car elle n’a pas d’autre équivalent.