CSS

Centrer une div à width variable

Ah le centrage en CSS, toute une histoire ! Quand la largeur d’une div est fixe – par exemple width: 400px – aucun problème, un petit coup de margin: auto et le tour est joué ; mais quand la div prend la largeur de son contenu, c’est une toute autre histoire… Chers amis, ne désespérez pas, à tout problème une (des ?!) solutions. Allez, à l’aventure !

(suite…)

CSS : div qui prend la taille de son contenu

J’ai récemment été confronté à un problème de CSS, lequel m’a mine de rien pris un petit bout de temps à résoudre. Comment faire prendre à un élément de type bloc la taille de son contenu (lequel pouvant varier). Il y a plusieurs solutions à cela, mais pour corser un peu le défis, j’utilisais Bootstrap, et certaines solutions n’étaient pas compatibles avec ce que je voulais. Bref, passons tout ça en revue.

(suite…)

3 outils HTML5 qui vous feront oublier powerpoint

On a toujours besoin, à un moment ou à un autre, de faire une présentation : un exposé, un brief, une conférence, bref à tous les niveaux et a tous les âges. Pour cela, on pense immédiatement à PowerPoint, les adeptes de la firme à la pomme utiliserons parfois Keynote et certains d’entre vous connaissent peut être Prezi.

Il existe cependant bien d’autres solutions, disponibles gratuitement, en open source et full html5. Alors pourquoi se priver et continuer à payer des licences pour des logiciels qui, au final, brident quelque peu notre créativité ?

(suite…)

Customiser le input file

Chaque navigateur possède son propre champ de type file, ce dernier n’est pratiquement pas modifiable en CSS. C’est fort dommage car d’une part, chaque navigateur possède son propre « design » de ce type de input, ce qui ne permet pas d’avoir une homogénéité entre les navigateurs, et d’autre part, cette impossibilité de le modifier via CSS, ne permet pas d’adapter ce dernier au design de notre site. Notre objectif est donc de palier à cette lacune, nous aurons recourt à CSS (quand même) et à jQuery.

(suite…)

Webdesign pour écrans Retina

La « technologie » Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevé pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité de pixels, pour ne pas que tout paraisse minuscule sur ces écrans, Apple a décidé de tout simplement doubler la valeur en pixel de chaque élément. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width: 100px; fera en réalité 200px. Tout est multiplié par deux.

Les proportions sont conservées et dans l’ensemble ça ne défigurera pas votre site, à l’exception des images, qui risquent de paraître d’une bien piètre qualité. Autant s’adapter à cet usage, d’autant plus que de plus en plus de devices (tablettes smartphones et ordinateur) vont adopter des écrans de haute résolution.

Voici donc un article (en anglais), qui explore les différente manière de faire un design compatible Retina, sans pour autant pénaliser les écrans « normaux ».

Insight sur les filtres CSS3

Exposons un cas concret : vous avez un site dynamique, et vous avez besoin de deux versions de la même image, l’originale, et une version floutée, plus sombre… que vous appliquerez par exemple au survol de la souris. Premièrement, ceci est une affaire de client-side ! Et celà a de multiples avantages :

  • Si les images sont ajoutées dynamiquement, on évite un traitement supplémentaire gourmand en ressource (flou, sépia…)
  • On évite de prendre plus de place sur le disque dur avec deux images alors qu’une seule peut suffire
  • On évite aussi la consommation de plus de bande passante et un temps de chargement supplémentaire pour le client

Enfin, vous comprenez qu’il n’y a que des avantages à déporter le traitement des images côté client. On pense évidemment à JavaScript pour faire ce boulot. Oui… pourquoi pas… Mais sachez que les filtres de CSS permettent d’en faire autant, le tout dans une extrême simplicité. Pour vous mettre l’eau à la bouche, voici les effets qu’il est possible d’appliquer :

  • flou,
  • luminosité,
  • saturation,
  • contraste,
  • teinte,
  • inversion,
  • nuances de gris,
  • sépia

Ça ouvre quand même pas mal de possibilités ! Pour en savoir plus, je vous invites à aller jetez un œil à la traduction de l’article de Johnny Simpson sur Développez.com.

HTML coder pour l’e-mailing

L’emailing est un sujet assez vaste. Je l’avais déjà abordé au travers d’un article plutôt axé marketing, qui traitait des meilleurs jours et plages horaires pour l’envoi de mailing. Dans un autre article, toujours orienté webmarketing, j’avais expliqué les différentes notions à bien appréhender pour construire une landing page efficace.

Ce post-ci sera un peu plus technique. En effet, on va passer en revue les bonnes pratiques à mettre en oeuvre pour créer un template HTML dédié à l’envoi par mail. Qu’il s’agisse donc d’un emailing de prospection, d’une newsletter ou encore d’une notification automatique d’un site internet (confirmation d’inscription, confirmation de commande etc.) si vous désirez envoyer autre chose que du texte brut, il va falloir adapter vos pratiques au media email. Sans quoi vos destinataires ne recevront rien d’autre qu’une bouillie de mise en page, s’ils reçoivent quelque chose tout court d’ailleurs. Allez, c’est parti !

(suite…)

Une histoire de polices

Choisir une police pour le web, c’est tout un cheminement. Du choix de la bonne typo, en passant par son intégration en CSS ou le réglage de l’interligne et des marges. Beaucoup de question se posent au webdesigner. Voici de bonnes pistes pour y répondre.

(suite…)