Des super e-mails et les bugs de fonts web : les liens de la semaine 28

Voici les liens pour la semaine du 7 au 13 juillet 2014 :

Exemples de code avancé, guide d'utilisation des marques sur Internet et images retina : les liens de la semaine 27

Voici les liens pour la semaine du 30 juin au 6 juillet 2014 :

  • simpl.info

    Des exemples très simples pour comprendre et appliquer les fonctionnalités les plus avancées en HTML, CSS et JavaScript.

    http://www.simpl.info/

  • Find Guidelines on the web

    Ce site recense les recommandations des principaux réseaux sociaux et autres entreprises du web (Facebook, Twitter, LinkedIn, etc) pour représenter leur marque.

    http://findguidelin.es/

  • Retinize It

    Un script Photoshop très pratique pour exporter vos images pour les écrans HDPI.

    A partir de vos calques de formes vectorielles ou Smart Objects, le script crée une image augmentée à 200% que vous n'avez plus qu'à appeler dans une media query adaptée.

    http://retinize.it/

Réduire son CSS et vue adaptative dans Chrome 38 : les liens de la semaine 26

Voici les liens pour la semaine du 23 au 29 juin 2014 :

CSS critique, idées pour l'UI et conventions de nommage : les liens de la semaine 25

Voici les liens pour la semaine du 16 au 22 juin 2014 :

  • Critical Path CSS Generator

    Les ressources CSS externes bloquent le rendu de la page le temps d'être téléchargées. Pour accélérer l'affichage du contenu de votre page, une des solutions est d'extraire le contenu CSS dit « critique ».

    Ce n'est pas une mince affaire quand votre fichier CSS fait plusieurs milliers de lignes. Ce script peut réaliser ce travail pour vous !

    http://jonassebastianohlsson.com/criticalpathcssgenerator/

  • Call to idea

    Pleins d'idées pour réaliser des composants d'UI, classées par catégories.

    http://calltoidea.com/

  • CSS Naming Conventions: Less Rules, more Fun

    Un article sur les conventions de nommage en CSS. Un de plus ? Oui et non.

    Sans prendre parti pour BEM, SMACSS ou autres, l'idée est de réduire un peu le nombre de règles pour donner plus de flexibilité.

    https://medium.com/@drublic/css-naming-conventions-less-rules-more-fun-12af220e949b

Animations, dégradés et mise à jour navigateur : les liens de la semaine 24

Voici les liens pour la semaine du 9 au 15 juin 2014 :

  • bounce.js

    Un outil interactif pour créer facilement des animations en CSS. Tout est dit.

    http://bouncejs.com/

  • Outdate Browser

    Ce script détecte si un navigateur obsolète est utilisé et conseille à l'utlisateur une mise à jour, au choix parmis les 5 grands navigateurs.

    Le design est pour une fois très plaisant!

    http://outdatedbrowser.com/

  • A Single Div

    Un projet de dessin assez particulier : toutes les oeuvres sont réalisées en CSS avec une seule div.

    http://lynnandtonic.github.io/a-single-div/

  • CSS Gradients with background-blend-mode

    Des exemples de fond en dégradé utilisant la propriété background-blend-mode.

    A noter que cette propriété n'est supportée que sur les dernières versions de Firefox, Chrome et Opéra.

    http://bennettfeely.com/gradients/

Hauteurs égales et hiérarchie visuelle : les liens de la semaine 23

Voici le lien pour la semaine du 2 au 8 juin 2014 :

CSS et chemin critique : le lien de la semaine 22

Voici le lien pour la semaine du 26 mai au 1er juin 2014 :

Image responsive, boite à outils web et transformations CSS 2D : les liens de la semaine 21

Voici les liens pour la semaine du 19 au 25 mai 2014 :

  • Responsive Images Done Right: A Guide To <picture> And srcset

    Si vous êtes à la ramasse sur la nouvelle balise picture et sur l'attribut srcset qui permettent de gérer des images responsive, c'est le moment de vous y mettre avec cet article !

    Et pour rappel, la nouvelle version de Picturefill est sortie. Ce polyfill vous permettra d'utiliser l'élément picture sans risques d'incompatibilité avec les vieux navigateurs.

    http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/

  • Oozled - Curated resources for everything design related

    Des ressources pour le web rangées par catégories. Vous pouvez vous abonner aux catégories de votre choix pour créer un flux personnalisé.

    Pratique pour suivre votre discipline de prédilection ou pour vous améliorer dans un domaine que vous ne maîtrisez pas (encore).

    http://oozled.com/

  • Fixing Typography Inside of 2-D CSS Transforms

    Voici les différentes méthodes pour régler le problème du texte qui devient « flou » lorsque l'on anime un élément avec la propriété CSS transform.

    http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

De beaux formulaires, du SVG fluide et des redesigns : les liens de la semaine 20

Voici les liens pour la semaine du 12 au 18 mai 2014 :

  • WTF, forms?

    Améliorer proprement le design des éléments de formulaires sans utiliser de JavaScript.

    Ces astuces ne concernent que les input[type="checkbox"], input[type="radio"], input[type="file"] et select, mais c'est probablement ceux qui en ont le plus besoin.

    Et puisqu'on est dans les formulaires, petit rappel utile sur la manière de bien présenter les label.

    http://wtfforms.com/

  • How to embed SVG for liquid layout or Responsive Web Design

    Voici une solution très complète pour intégrer les SVG de manière fluide dans vos pages.

    http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

  • Redsgned

    Les redesigns non sollicités d'applications ou de sites peuvent être très intéressants, même si ils ne restent que des fantasmes de designers.

    Voici un site qui compile les meilleurs :

    http://redsgned.com/

Passez au SVG, améliorez vos carousels et devenez un meilleur développeur : les liens de la semaine 19

Voici les liens pour la semaine du 5 au 11 mai 2014 :