L'optimisation des sites web est à l'ordre du jour. Si nous voulons améliorer l'expérience utilisateur, en particulier sur les mobiles, nous devons comprendre le fonctionnement des navigateurs. Par Sanjay Purswani.
C'est l'avant-dernière partie de notre série au long cours sur les images responsives, et c'est la plus redoutable. Mais comme toujours avec l'excellent Jason Grigsby, très complète et très claire.
Ça n'est pas évident à première vue, mais les éléments HTML sont générés en 3D. La propriété CSS z-index spécifie le niveau et le contexte d'empilement. Confus? Suivez Ire Aderinokun!
Les dernières fonctionnalités HTML, CSS ou JavaScript ne sont pas toujours supportées par les navigateurs, ou seulement partiellement. Les shims, shivs et polyfills sont une solution, présentée par Dudley Storey.
Le web est plus fort lorsqu'il est divers : plus il est accessible, meilleur il est. Dudley Storey fait le point sur les règles à connaître concernant l'attribut alt d'alternative textuelle.
Quand on parle d'images responsives, on ne pense généralement pas aux images CSS. Pourtant il existe des solutions spécifiques, dont les nouvelles media queries résolution et image-set(). Par Jason Grigsby.
Si vous déplorez la limitation des formats d'images, si vous voulez expérimenter sans abandonner vos utilisateurs, vous allez adorer l’attribut type. Un grand moment de détente avec Jason Grigsby!
Nous nous sommes concentrés jusqu'à présent sur les questions liées au changement de résolution. Il est temps maintenant de passer à l’autre apport des nouveaux standards, la direction artistique.
Nous avons bien avancé dans notre feuilleton de l'été. Il est temps maintenant de faire connaissance avec le véritable héros de notre histoire, l’attribut `sizes`. Par Jason "Great" Grigsby.
Les descripteurs de densité d’affichage sont parfaits pour les images de largeur fixe mais insuffisants pour les images flexibles. C'est ici qu'interviennent les descripteurs de largeur! Par Jason Grisgsby.
Depuis qu'Apple a lancé son affichage retina sur l'iPhone4, les designers doivent gérer le traitement de l'affichage en haute résolution. C'est ici que `srcset` et ses descripteurs entrent en scène.
Suite de notre série de l'été consacrée aux images responsives. L'élément img est insuffisant, mais il est indispensable. Améliorons-le progessivement avec les nouveaux standards des images responsives. Par Jason Grigsby.
Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby. Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide!
C'est incroyable ce qu'on peut faire avec un élément aussi modeste que les cases à cocher... du moins lorsqu'on s'appelle Will Boyd et qu'on a de la créativité à revendre!
Dans ce bref article, nous allons voir comment mettre en oeuvre une zone de saisie avec auto-complétion, sans recourir à jQuery ni à JavaScript, en pur HTML5. Par Steve Pear.
Les effets vidéos sont habituellement appliqués au montage et ne peuvent être manipulés une fois la vidéo exportée. Dudley Storey montre comment utiliser les nouveaux effets CSS dans vos vidéos.
Notre prototype de player audio HTML5 est encore assez brut. Nous allons lui donner son look définitif et ajouter quelques microdonnées pour aider les moteurs de recherche. Par Dudley Storey.
Bon allez, on se lance dans la création de notre player audio personnalisé ! Dudley Storey utilise une approche par petits pas — ou plutôt par petits tests — pour construire un prototype.
Aujourd'hui, nous pouvons créer nos propres player media avec HTML5 et JavaScript, et personnaliser leur apparence avec CSS. Dudley Storey nous entraîne par étapes dans la construction d'un super player.
L'amélioration progressive n'est pas une technologie, c'est une façon de penser. Jeremy Keith montre ici comment cette idée est non seulement respectueuse des utilisateurs mais également incroyablement libératrice de créativité.
Avez-vous déjà entendu parler des éléments HTML remplacés ? Vous les utilisez pourtant tous les jours sans le savoir, et connaître leur nature peut vous éviter quelques soucis. Par Dudley Storey.
Armez-vous de courage, voi ch'entrate... Voici le fameux guide de Sara Soueidan, pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS.
Il n'est pas possible d'intégrer une vidéo avec les propriétés CSS background ou background-image, mais Dudley Storey nous montre comment forcer l'apparition d'une vidéo responsive fullscreen derrière les éléments HTML.
HTML 5 est moins strict que XHTML en ce qui concerne le respect des règles de balisage et autorise un certain nombre de raccourcis que nous présente rapidement Dudley Storey.
Emmet est un plugin pour éditeurs de textes qui vous aide à créer HTML et CSS à la vitesse de l'éclair. Rappel des raccourcis principaux et quelques fonctionnalités moins connues.
Jeremy Keith, dans la continuité du célèbre Tao du Webdesign, défend l'idée du web comme un continuum - un espace ouvert à l'expérimentation, soucieux d'accessibilité au contenu. Engagé, constructif, définitif.
Dans son article précédent, Joni Trythall décrivait les dégradés SVG. Passons maintenant à l'étape suivante, leur animation ! Une bonne introduction aux notions les plus basiques, à partir d'exemples simples.
Dégradés CSS ou dégradés SVG ? C'est une longue discussion, les deux ont leurs avantages, leurs utilisations particulières. Joni Trythall présente les dégradés SVG, en se concentrant sur leur utilisation
Chris Coyier s'est intéressé aux animations SVG qu'on trouve un peu partout et il a voulu comprendre la base de cette technique. Il nous livre ses observations, c'est évidemment passionnant.
Charger les images en fonction de la résolution d'écran de l'utilisateur, avoir des images responsives, faire de la direction artistique... la révolution est en marche ! Belle présentation par Eric Portis.
Vous avez certainement perçu le vacarme qu'on fait autour des composants web et ce qu'ils vont apporter. Peter Gasston présente ici les éléments personnalisés, un petit guide pour mieux comprendre.
On sait assez bien ce qu'est le design responsif, mais comment le mettre en place, surtout lorsque votre site est déjà ancien ? Brad Frost fait le tour des principales stratégies.
Saviez-vous que vous n'aviez pas besoin d'utiliser un lien externe vers une image, vous pouvez embarquer les données de l'image directement dans votre document avec le format codé Data URI.
Dans cet article complet et clair, Chris Coyier s'intéresse à la mise en oeuvre concrète de SVG pour votre design. Pas de théorie, cercles, rectangles, non, rien que du concret.
Un article court et simple pour une première introduction au DOM, le Document Object Model, par Chris Coyier. Ce qu'il est, et ce qu'il n'est pas, dans un langage clair.
Emmet, anciennement connu comme Zen Coding, est le plugin d'éditeur de texte qui vous fera gagner le plus de temps. Une introduction claire, illustrée, complète et passionnante par Zeno Rocha.
La création de systèmes de design a été au coeur de nombreux débats passionnés. Brad Frost propose ici sa vision, basée sur une comparaison avec les atomes et les molécules.