Pas terrible ; mais presque

Durant les phases de déve­lop­pe­ment ou pour la pro­duc­tion, il peut être inté­res­sant de pla­cer sur un CDN vos styles afin d’alléger la charge du ser­veur ; mais voi­là, qui dit, nou­veau ser­veur dit aus­si frais sup­plé­men­taires…

Voi­là pour­quoi voi­ci deux adresses inté­res­santes pour aller cher­cher sur des CDN (gra­tuits) les prin­ci­paux fra­me­works du mar­ché :

Les deux sont rapides mal­gré leur loca­li­sa­tion amé­ri­caine et très pra­tiques en atten­dant de pou­voir se payer ses propres cdn 😉

Ecrit par Sébastien Degliame
Pas de commentaires »

Cet article est libre­ment ins­pi­ré et tra­duit d’un article de net.tutsplus.com.

Quel que soit notre niveau de maî­trise, nous avons tous été débu­tants. Com­met­tant des erreurs de débu­tants. Cet article ne fera pas de vous un expert infaillible (si cela existe quelque part). Il fait juste un petit tour d’horizon des erreurs à évi­ter ou des mau­vaises habi­tudes qu’il est décon­seillé de prendre lorsqu’on débute.
Lire le reste »

Ecrit par Sébastien Degliame
Pas de commentaires »

Pour avoir le fond d’un élé­ment dans une page qui soit par­tiel­le­ment trans­pa­rent sans que le conte­nu de l’élément soit lui-même trans­pa­rent néces­site d’utiliser une image (com­plète) qui pos­sède intrin­sè­que­ment de la trans­pa­rence, typi­que­ment un png. Si l’on applique la pro­prié­té opa­ci­ty alors non seule­ment le back­ground sera semi-transparent mais aus­si le conte­nu de l’élément…

Il existe cepen­dant une solu­tion : le conte­nu géné­ré comme le sug­gère très jus­te­ment Chris Coyier sur son site et dont voi­ci le code.

Ecrit par Sébastien Degliame
Rangé dans developpement, web
Pas de commentaires »

Com­bien d’entre-nous se sont un jour frot­té à un client qui à la pré­sen­ta­tion d’une maquette nous inter­pelle avec insis­tance sur la cou­leur de tel ou tel élé­ment minus­cule de l’interface alors que tout de dont on attend de lui, c’est qu’il nous valide le concept de la maquette ?

Afin de sim­pli­fier à la fois le tra­vail du web-designer dans sa phase de recherche et ses rela­tions avec le client dans les pre­mières phases de vali­da­tion, il n’est pas inin­té­res­sant de mettre en place un «gaba­rit gris».

Lire le reste »

Ecrit par Sébastien Degliame
Pas de commentaires »

Ça fait déjà quelques temps que les ténors en parlent ; mais la ten­dance est là, les uti­li­sa­teurs sur­fant sur leur smart­phones sont de plus en plus nom­breux. La faute aux navi­ga­teurs uti­li­sés dans ces pla­te­formes qui sont de plus en plus per­for­mants. Il faut donc abso­lu­ment les prendre en consi­dé­ra­tion dans la concep­tion de sites qui sont sus­cep­tibles d’être mas­si­ve­ment uti­li­sés via des pla­te­formes mobiles.

Dans cette optique, Paul Irish à bien syn­thé­ti­sé la démarche dans un post sur Google+. Je vous en livre ici une tra­duc­tion faites par votre ser­vi­teur (donc à prendre avec les réserve d’usage, hum).

  • Pen­ser mobile en pre­mier : com­men­cez par la réso­lu­tion la plus faible
  • Gar­dez en mémoire que beau­coup de mobiles ont une réso­lu­tion infé­rieure à 320px
  • L’absence de media-query est la pre­mière media-query (Bryan Sie­ger)
  • Lais­ser la grille fluide faire le plus gros du tra­vail. Ne cher­chez pas à faire autant de mq qu’il y a de pixels à l’écran…
  • Uti­li­sez plu­tôt min-width que max-width (tou­jours dans l’optique mobile en pre­mier)
  • Soyez éco­nomes en médias, com­men­cez par de petites images, et changez-les pour des réso­lu­tion plus impor­tantes, cf. http://www.cloudfour.com/responsive-imgs-part-2/
  • Ne jouez pas trop avec le DOM. La vitesse doit être votre objec­tif prin­ci­pal et (trop) mani­pu­ler les choses avec JS risque de plom­ber vos temps de réponses.
  • Ne faites pas 100 gali­pettes pour ten­ter d’améliorer un tas de merde. Votre desi­gn doit être suf­fi­sam­ment intel­li­gent pour gran­dir sans avoir à faire des ver­sions alter­na­tives du site.
  • Ne mas­quez pas de conte­nu pour les mobiles, tout autant que les autres ils aiment avoir accès à l’info.
  • Gar­dez les zones d’action grandes, conce­vez pour les méthodes de sai­sie mobile car les uti­li­sa­teur de navi­ga­teur de bureau pour­ront aus­si en pro­fi­ter. Uti­li­sez les pro­prié­tés des for­mu­laires du HTML5 plu­tôt que des arti­fices JS.
Ecrit par Sébastien Degliame
Pas de commentaires »

© 2018 Sébastien DEGLIAME, Creative Commons License