#HTML/CSS

Laisser un commentaire

10 règles d'UX design spécifiques au e-commerce

L’UX design (design de l’expérience utilisateur) est depuis quelques années dans toutes les bouches, le terme est à la mode. En contrepartie, nombre de sites ont encore beaucoup de progrès à faire. Tout site tire profit d’une bonne UX, cependant il y a quelques règles qui sont spécifiques au e-commerce.

Quand on connait l’impact spectaculaire qu’elles peuvent engendrer sur le taux de conversion et donc le chiffre d’affaire, mieux vaut ne pas passer à côté ! Voyons donc les quelques règles à absolument avoir en tête lors du design et du développement d’un site e-commerce. Il s’agit de conseils concrets, cet article est donc aussi bien destiné aux designers qu’aux développeurs, let’s go!

Laisser un commentaire

Ciao WordPress, Hello JAMstack

Pour ceux qui l’ignorent, JAMstack est l’acronyme de JavaScript, APIs et Markup. Cela veut dire que contrairement à un CMS comme WordPress, le serveur web ne fait que livrer des fichiers statiques pré-compilés. Cependant, cela ne veut pas forcement dire que le site est statique, il y a du JavaScript et ce dernier est en mesure d’interagir avec des API (donc récupérer des données etc). Voyons les raisons de mon choix et le dessous des cartes techniques !

Laisser un commentaire

L'après jQuery: API DOM native et alternatives

Ça ne vous a surement pas échappé, on utilise aujourd’hui de moins en moins jQuery dans les nouveaux projets. Les navigateurs récents supportent en effet très bien les nouvelles API du DOM. Il est ainsi possible d’avoir un code qui fonctionne pour tous les navigateurs en se conformant aux standards. On se libère d’une dépendance mais on hérite d’une API native pas toujours super sexy… Voyons ce que l’on peut faire.

Laisser un commentaire

Guide ultime des images responsives & retina ready

La “technologie” Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevée pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité, pour ne pas que tout paraisse minuscule, la valeur en pixel de chaque élément est démultipliée. 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.

À de telles résolutions, autant dire que vos images peuvent vite paraître pour le moins pixelisées. Il faut donc penser aux différentes tailles d’écrans, mais aussi aux différentes densités d’écans. Un 22” HD (1920x1080) n’aura pas besoin de la même qualité d’image qu’un 22” en 4k (4096x2016). Voyons comment penser nos images pour qu’elles soient éclatantes en toute situation.

Laisser un commentaire

Utilisation des pseudo-classes CSS :valid et :invalid

Le HTML5 a permis d’assortir ses formulaires de contraintes. Elles permettent de valider le contenu directement en HTML, sans avoir forcement recourt au JavaScript. C’est supporté par la majorité des navigateurs depuis un bon moment.

Dans le même temps, deux nouvelles pseudo-classes CSS ont fait leur apparition. Elles offrent la possibilité d’appliquer des styles en fonction de la validation (ou non validation) du champ de formulaire. Voyons comment tout cela fonctionne !

Laisser un commentaire

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 !

Laisser un commentaire

101 balises HTML5 + exemples

Le HTML5 c’est plein de bonnes choses, des APIs Javascript, du CSS3, mais aussi et surtout des balises HTML ! Cette version du langage met en avant la sémantique, ainsi, de nombreuses balises permettent de remplacer les balises génériques div et span. Du layout à la citation, faisons le tour de tout ça, exemples à l’appui voulez-vous ?

Laisser un commentaire

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.

Laisser un commentaire

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é ?

Laisser un commentaire

Des icônes sans images avec unicode !

Dans une certaine mesure, il est possible de totalement éviter les images pour vos icônes ! Certaines icônes sont tout simplement disponible en Unicode et HTML. C’est à dire que c’est du “texte-icône”. Certains caractères “spéciaux” tels que “ç, €, à, é, è, ê…” possèdent bien en html des codes ressemblant à ça : “&ccedil”. Il ne vous viendrait pas à l’esprit de mettre une image à la place du texte… Pourquoi ferions-nous différemment pour les icônes ?