css 4 design » Photoshop

Notes de lecture : « Responsive Web Design »

Bruno Bichet — Tue, 01 Nov 2011 19:21:07 +0000

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed».

Les Medias Queries n’arrivent qu’au chapitre 4, une fois les fondamentaux mis en place. Rien à dire sur cette partie, si ce n’est qu’elle est concise et que les exemples sont clairs. Le meilleur est pour la fin avec la description d’un Workflow pour faire des sites web «responsive» dans une optique d’amélioration progressive, avec comme mot d’ordre : pensez mobile !

En effet, dans cette dernière partie, l’auteur explique comment mettre en place une stratégie pour utiliser les Medias Queries au plus près des besoins des utilisateurs. Il en profite pour exposer une méthode de travail qui me plait tout particulièrement : le design dans le navigateur. Bien sûr, il ne s’agit pas de remplacer Photoshop, mais de lui demander ce qu’il sait faire de mieux : produire une maquette fixe qu’il faudra adapter selon les contraintes d’affichages des différents agents utilisateurs disponibles sur le marché. Je ne peux m’empêcher de ressortir pour l’occasion cette phrase issue de l’article Et si Photoshop permettait de tester des maquettes fluides ? qui résonne bien ici :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Le sommaire

Principes du responsive design
- Attachez vos ceintures
- Responsive architecture
- La voie à suivre
La grille flexible
- Composition flexible
- Créer une grille flexible
- Marges et espacement flexibles
Les images flexibles
- Retour aux (codes) sources
- Images fluides
- Mosaïque d’arrière-plan flexible
- Apprenez à aimer overflow
- Négociez votre contenu
- Images et grilles flexibles, tenez-vous bien
Les media queries
- Cicatrisation douloureuse
- Le problème en question
- Traînasser vers plus de réactivité
- Un robot plus « responsive »
- Les media queries en action
- Au sujet de la compatibilité
- Pourquoi la flexibilité ?
Passer au responsive, design
- Une question de contexte
- Mobile first
- Vers un responsive workflow
- Être « responsive » et responsable
- L’amélioration progressive revisitée
- Va et sois « responsive »

Acheter le livre

Responsive web design

Auteur(s) : Ethan Marcotte
Editeur : Eyrolles
Nombre de pages : 160 pages
Date de parution : 15/09/2011

Articles sur le même sujet

Astuce CSS3 et RGBA avec les outils de développement de Google Chrome

Bruno Bichet — Wed, 18 May 2011 14:59:01 +0000

J’utilise de plus en plus Google Chrome pour tester mes pages web. J’ai trouvé dernièrement une petite astuce qui m’évite d’ouvrir Photoshop pour connaitre la correspondance des couleurs hexadécimales dans les formats RGB ou HSL. Dans une optique de dégradation gracieuse, je prends l’habitude de préciser une couleur au format «hexa» suivie de la même couleur au format RGBa pour profiter des effets de transparence.

Pour cela, je lance les outils de développement de Google Chrome (Ctrl + Maj + i ou Clic droit et «Inspecter l’élément»). Je clique ensuite plusieurs fois sur le carré de couleur jusqu’à ce que le mode rgb() apparaisse. Il suffit ensuite de copier-coller les valeurs dans lafeuille de style CSS.

Exemple visible sur la nouvelle version de WordPress & Webdesign :

#menu-download-basics a {
    background: #807666;
    background: rgba(128,118,102,0.8);
}

Le premier background précise une couleur au format hexadécimal pour les anciens navigateurs, tandis que le deuxième s’adresse aux navigateurs capables d’afficher une couleur en transparence avec la propriégé RGBa indiquée dans le 4ème paramètre (ici, 0.8).

Finie, l’ouverture de Photoshop pour connaitre les valeurs RGB d’une couleur au format Hexadécimal !

Fonction "Inspecter l'élément" de Google Chrome

Parmi les modes colorimétriques disponibles, on trouve :

Hexadécimal (Rouge, Vert, Bleu) : #807666,
RGB (Rouge, Vert, Bleu) : rgb(128, 118, 102),
HSL (Teinte, Saturation et luminance) : hsl(37, 11%, 45%).

Le dernier mode (TSL en français) est très intéressant car il permet de modifier, pour une couleur donnée, uniquement la teinte (en gardant les informations de saturation et de luminosité intactes), la saturation (en gardant les deux autres) ou la luminosité (idem).

Je ne dis pas que ces outils de développement remplaceront l’extension ColorZilla de Firefox, mais ils peuvent ponctuellement rendre des services.

Articles sur le même sujet

L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Bruno Bichet — Tue, 26 Apr 2011 11:53:45 +0000

Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement.

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de 80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

Intégration HTML & CSS des maquettes Photoshop au pixel près

Bruno Bichet — Fri, 22 Apr 2011 14:36:42 +0000

Je reviens rapidement sur la question du rendu identique des maquettes quelque soit le navigateur. Je pense que tout le monde est d’accord pour reconnaitre que les standards ont encore une marge de progression et que les spécifications CSS3 et HTML5 prendront du temps avant d’être validées et implémentées correctement dans au moins deux navigateurs. En attendant, il faut bien faire avec l’existant. Est-ce à dire qu’il faut faire son deuil du rendu unique dans tous les navigateurs ?

Avec CSS3…

Pas forcément. En ce qui concerne CSS3, il faut s’en tenir aux conseils donnés dans CSS3 pour les web designers par Dan Cederholm :

Utiliser CSS3 «ici et maintenant» à condition de s’en tenir aux éléments de présentation ou d’interactivité en ciblant la couche d’expérience non critique (interaction, récompense visuelle, réactivité et mouvement) sans toucher à l’identité visuelle, l’utilisabilité, l’accessibilité ou la mise en page.

… ou à l’ancienne ?

Pour tout le reste, il faut se débrouiller avec des images de fond, en limitant les dégâts au maximum : marquage HTML réduit au minimum, utilisation de sprites pour les images, tenter de se passer de Javascript pour des effets visuels, éviter les hacks, etc. J’irais plus loin en conseillant d’éviter même les balises sémantiques HTML5 en raison de leur accessibilité perfectible.

Bref, dans ces conditions — si le temps et l’argent le permettent — rien ne s’oppose à ce que la maquette du graphiste soit rendue au pixel près. C’est même souhaitable. L’intégrateur pourra prévoir des fallbacks pour l’affichage sur les tablettes tactiles comme l’iPad, les téléphones tels que l’iPhones ou Android. Ou alors, c’est le graphiste qui pourra dessiner comme bon lui semble la version iPhone, etc. s’il veut garder le contrôle.

C’est quoi un intégrateur web ?

Comme le dit STPo (@stpo) suite à l’article de Julien sur le rendu Pixel Perfect et les standards du web :

Le boulot d’un inté, c’est de placer intelligemment le curseur entre respect de la DA, performances, accessibilité, maintenabilité, etc. afin d’obtenir le meilleur produit final possible. Le graphisme n’est QU’UN de ces paramètres : parfois c’est le plus important, et on négligera les autres davantage. Et parfois, non.

Soyons agiles

S’il faut faire le deuil de quelque chose — que ça soit à cause de bugs ou de contraintes techniques indépassables — ce n’est pas sur cette question du rendu parfait, puisqu’il est accessible dès maintenant. Il faut faire le deuil de la méthode de travail unique. Il faut adapter ses méthodes et être agile. Et ce n’est pas facile.

Nous sommes tous à la recherche de trucs et d’astuces réutilisables. On n’aime pas réinventer la roue toutes les semaines. On préférerait que les clients comprennent nos contraintes (en même temps, si votre boss ne vous comprend pas, il n’y a pas grand chose à attendre du client qui n’y est pour rien…).

Intégrateurs web, prenez des risques !

Il faut comprendre le projet sur lequel on travaille et force est de constater que certaines organisations ne favorisent pas la prise de risque de la part de l’intégrateur web qui est rarement consulté en amont. Pourtant, avec un bref brief, l’intégrateur pourrait prendre de l’assurance et éviter de se prendre la tête pour aboutir systématiquement à un rendu parfait lorsque les projets ne le nécessitent pas.

Articles sur le même sujet

Standards du Web vs. Standards du Print

Bruno Bichet — Fri, 22 Apr 2011 00:36:02 +0000

Julien Dubedout @mariejulien vient d’écrire un article très intéressant sur le rendu au pixel près des maquettes dans les différents navigateurs. Il explique son point de vue sur certaines différences de rendu de certaines propriétés qui ne sont pas { acceptables | logiques | normales } ; elles proviennent d’un standard qui — par définition — devrait garantir un affichage identique d’une même propriété sous tous les navigateurs. L’argumentation est rigoureuse et l’analyse est fine ; je partage une grande partie des points abordés par Julien que je résume rapidement ainsi :

On peut dire que certaines prises de position sur le «lâcher-prise» concernant le design web sont parfois l’expression de l’impuissance travestie en abstinence. On ne peut pas le faire, donc c’est mal.

Toutefois, pour en revenir à l’exemple des ombres portées, j’ignore s’il existe une norme qui définit comment elles doivent s’afficher. Leur rendu à l’écran (quels écrans ?) dépend surtout des logiciels qui permettent de les créer. Une ombre portée n’est probablement pas strictement identique dans Photoshop, Gimp ou Paint. Pourquoi serait-ce différent pour les navigateurs web qui sont des logiciels comme les autres ?

Lorsque j’imprime une ombre portée réalisée dans Photoshop, son rendu diffère selon la nature du papier : offset, couché, non couché, bouffant ou bible ! Sans parler des différences d’une même plaquette imprimée sur le même papier chez deux imprimeurs différents (avec pourtant strictement les mêmes valeurs CMJN)…

Juste une petite pique, donc, en lisant que :

L’industrie de l’imprimerie a, de son coté, pas mal réussi à relever ce défi de standardisation, il faudrait donc s’en inspirer sur ce point et ne pas laisser tomber en route la standardisation de l’affichage.

Je ne peux m’empêcher de penser aux plus de deux millions de personnes qui se demandent pourquoi il y a encore, en 2011, cette satanée différence entre écran et résultat imprimé ;-)

Articles sur le même sujet

Et si Photoshop permettait de tester des maquettes fluides ?

Bruno Bichet — Thu, 21 Apr 2011 12:23:54 +0000

Si c’était possible techniquement, est-ce qu’on s’amuserait à faire des rendus différents pour le plaisir ? Réponse : NON. Cette interrogation de @mariejulien suite à la publication de l’article Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur ? et cette réponse lapidaire se poursuivent par la réflexion suivante : la norme est donc bien d’avoir un contenu identique, et le reste n’est qu’argument fallacieux à une impossibilité technique. Question à laquelle j’ai répondu en bottant un peu en touche en disant que le monde de l’imprimé et du web ne répondaient pas aux même lois de la physique.

Un question d’entonnoir

On peut voir la conception pour l’imprimé comme un entonnoir avec la grande ouverture vers le haut : qu’importe les techniques utilisées pourvu qu’elles passent sous les fourches caudines des systèmes d’impression qui aboutissent — si tout ce passe bien — à un rendu unique. En effet, qu’importe la manière dont vous faites vos ombres portées : seul le résultat imprimé compte !

Pour le web, l’entonnoir est dans l’autre sens. Il existe un nombre de techniques relativement limitées pour que ça fonctionne, en revanche — si tout ce passse bien — le nombre de périphériques de sortie est inconnu et chacun est susceptible d’avoir son propre système de fonctionnement. D’autant plus que les spécifications des groupes de travail du W3C ne sont pas toutes univoques. Pour enfoncer le clou, il faut savoir que les agents utilisateurs n’ont aucune obligation d’implémenter toutes les fonctionnalités prévues ! Cette modularité et cette liberté face aux standards est justement ce qui permet au web d’être ce qu’il est aujourd’hui… Sur le web, le résultat seul ne compte pas ; la manière d’y arriver est tout aussi importante !

Je reformulerais donc la question initiale de Julien de la manière suivante :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Gutenberg n’est pas mort (ou pas)

Et encore, c’est en gardant un flux de production plusieurs fois centenaire qui date des années Gutenberg. Dans bien des cas, il n’est pas totalement farfelu de faire l’impasse sur le lancement de Photoshop : après un rapide crayonné — et si la créativité se limite à quelques dégradés, des bords arrondis, des ombres portées, etc. — il est tout à fait légitime de travailler directement dans le navigateur ET CE N’EST PAS MAL ;)

Faire le design dans le navigateur ne signifie pas pour autant absence de graphisme ou d’illustration. Si le croquis fait référence à des éléments dessinés, je lance plutôt Illustrator pour faire mes éléments de design à la demande. Il m’arrive aussi souvent de faire des maquettes entières dans Illustrator sans idée de découpe. Je prélève chaque élément dont j’ai besoin pour l’intégrer dans mon fichier HTML et CSS, sans jamais (ou presque) passer par les outils de découpe proprement dit.

Il est parfois nécessaire d’effectuer des copier-collés dans Photoshop depuis Illustrator pour certains éléments. L’avantage, c’est de conserver tous les éléments au format vectoriel, ce qui permet de moduler la taille des éléments directement dans Photoshop en les collant lors de la création d’un nouveau document.

A la relecture, je sens bien que cette méthode en semble pas en être une, mais elle fonctionne pour moi, c’est le principal ;-)

← Pssst : l’origine de cet article sur Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur?

Articles sur le même sujet

Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Bruno Bichet — Wed, 23 Feb 2011 14:53:06 +0000

Au menu de ce petit journal, je vous propose un pot-pourri de ce qui a retenu mon attention ces 30 derniers jours. La typographie sur le web avec Font-face et les différents formats de polices de caractère. Apprendre les bonnes pratiques en matière d’intégration HTML & CSS avec HTML5 Boilerplate. Choisir de mettre un reset CSS dans votre moteur ou une simple (mais complète) feuille de style de base. Approfondir CSS3 avec un tutoriel concret et utiliser les pseudo-classes :before et :after pour créer des ombres portées du plus bel effet. Mettre en place une feuille de style pour les périphériques mobiles et autres smartphones (iPad, iPhone ou Android). Avoir une liste d’outils pour vous aider à développer avec Internet Explorer (et IE6 en particulier). Et pour finir, reprendre les bases de Photoshop avec un tutoriel en 5 parties distinctes mais complémentaires.

1. Typographie sur le web

Déclarer vos polices de caractères avec Font-Face

Modification de la méthode de déclaration Font-Face et mise à jour du billet concernant les Bonnes pratiques pour les déclarations font-face. Pas de problème si vous utilisez les kits de FontSquirrel, ils sont à jour ! Sinon, voici la bonne méthode pour inclure vos polices localement :

@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot?iefix=') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

Museo Slab is robust slab serif with Museo’s friendliness. It is a perfect match for Museo Sans. By Exljbris.

Museo Slab : police de qualité accompagnée de son kit fonte-face

→ FontSquirrel propose un convertisseur de polices de caractères qui permet d’obtenir l’ensemble des formats web pour l’ensemble des navigateurs (.eot, .woff, .ttf, .svg).

Maitrisez l’affichage des Webfonts

[ typographisme ] Maîtriser le délai d’affichage des fontes – Internet Explorer et les navigateurs qui utilisent Webkit (Safari, Chrome) affiche le texte lorsque la police est téléchargée. Quant à Firefox et Opera, ils commencent à afficher le texte avec la police de substitution en attendant que la police soit complètement chargée. Cet article fait le point sur ces deux approches et fournit des astuces pour limiter les dégâts : choix des polices de substitution pour limiter le clignotement ou utilisation de Web Font Loader pour contrôler le chargement et l’affichage des polices.

Unicode et typographie

Unicode et typographie : un amour impossible – Tout ce que vous avez toujours voulu savoir sur les rapport entre Unicode et la typographie10.3166/dn.6.3-4.105-137.)

→ Voir aussi Tableaux de caractères Unicode – Écritures,
→ Lire aussi Le petit journal permanent de la TypOgrApHiE !

Les fontes disponibles selon les plate-formes

→ iOS Fonts — 40 familles de polices de caractères pour iPhone 4.2 et 57 pour iPad 4.2
→ CSS font sampler and survey — The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.

2. HTML5 Boilerplate

[ 1stwebdesigner ] 20 bouts de code et bonnes pratiques issus de HTML5 Boilerplate — Comme beaucoup, j’ai entendu parler de HTML5 Boilerplate, un modèle de site HTML/CSS/JS/.htaccess de «tueurs» créé par Paul Irish et Divya Manian qui permet de développer des sites rapides, robustes et prêts pour le futur. HTML5 Boilerplate nous appporte les dernières avancées en matière d’intégration web sur un plateau sous la forme de plusieurs fichiers HTML, CSS, Javascript et .htaccess prêts pour HTM5 et CSS3 (mais pas seulement). Le fichier .htaccess regroupe les bonnes pratiques en matière de compression des différents formats utilisés sur le web, de dates d’expiration pour la mise en cache des éléments, de redirection sur le domaine sans les 3W, etc.

HTML5 Boilerplate existe en deux versions : une pour l’étude avec les explications sous forme de commentaires, et l’autre pour la production. Il y a beaucoup à apprendre en lisant les différents fichiers et en écoutant Paul Irish présenter HTML5 Boilerplate :

→ Lire la documentation de HTML5 Boilerplate sur GitHub,
→ Lire la documentation en mode Boilerplate (cf. HTML5 Boilerplate Documentation… en mode Boilerplate !),
→ Lire Script Loading Techniques.

3. Base.css ou Reset.css ?

[ thinkvitamin ] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base dans ses pages web est un peu le serpent de mer de l’intégration web. Thierry Koblentz présente les défauts inhérents au reset.css et défend l’approche de la feuille de style de «base» avec base.css qui a inspirée en partie HTML5 Boilerplate !

4. Clearfix reloaded ?

[ Yahoo! User Interface Blog ] Clearfix Reloaded + overflow:hidden Demystified – Tant que la propriété float servira pour bâtir les fondations de nos pages web, nous continuerons à utiliser une méthode pour rétablir le flux après l’utilisation d’éléments «floatants». Il existe plusieurs méthodes que j’avais compilées dans l’article Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

Une variante utilisée dans HTML5 Boilerplate. Notez le remplacement de la propriété overflow: hidden par visibility: hidden :

.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

L’absence de la propriété overflow: hidden peut entrainer des problèmes d’espaces au-dessus de certains éléments. Pour y remédier, il est possible d’utiliser le clearfix suivant (notez que l’utilisation de overflow: hidden sur le container en question dans votre feuille de style suffit généralement à régler le problème) :

.clearfix2:before,
.clearfix2:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

5. Apprendre CSS3

[ onextrapixel ] The No-Pressure Introduction to CSS3 — Utiliser CSS3 dès maintenant est possible. Cet article fait le point sur les différentes propriétés CSS3 avec des exemples concrets, tout en précisant leur niveau de prise en charge par les différents navigateurs, avec ou sans préfixe vendeur. L’auteur n’a pas oublié les nouveaux sélecteurs — tout aussi intéressants, sinon plus, que les «effets» — ni les Medias Queries ou Font-Face. Il nous donne en prime quelques liens vers des sites qui brossent CSS3 dans le sens du poil.

6. Box-Shadow sexy sans image

[ Nicolas Gallagher ] CSS drop-shadows without images — L’article explique comment appliquer simplement des ombres portées originales en utilisant les pseudo-classe :before et :after. Voir la démonstration.

Par exemple :

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

7. Feuille de style spécialisées pour les mobiles

[ Alsacréations ] Une feuille de styles de base pour le Web mobile — Raphaël nous propose un exemple de feuille de style CSS pour les médias mobiles qui condense les bonnes pratiques à respecter :

Fixer le Viewport,
Passer tous les éléments de largeur fixe en largeur automatique,
Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques,
Gérer les mots longs,
Passer à une seule colonne,
Masquer les éléments superflus,
Afficher un message personnalisé.

8. «Faire avec» Internet Explorer

[ Design your way ] Internet Explorer In A Web Designer’s Life – Problems And Solutions –De plus en plus de développeurs et d’intégrateurs web déclarent ne plus prendre en charge IE6 dans leur projet de développement. Si ce n’est pas votre cas, sachez qu’il existe des outils pour se faciliter la vie avec le dernier de la classe (IE6) en particulier et Internet Explorer d’une manière générale. Via @_jiann.

Outils d’aide au développement

Scripts

Outils CSS3 /HTML5

Tester votre site

Articles et discussions

→ Lire aussi les articles tagués Internet Explorer, IE6 et commentaires conditionnels.

9. Compatibilité CSS et Internet Explorer

[ msdn ] Compatibilité CSS et Internet Explorer — Si votre site Web est destiné à être utilisé avec certaines anciennes versions d’Internet Explorer, vous devez connaître leur niveau de conformité à la spécification CSS. Cette article contient une vue synthétique des spécifications CSS prises en charge dans les versions récentes d’Internet Explorer et dans Internet Explorer 8.

10. Apprendre Photoshop en vidéo

[ Lifehacker ] Learn The Basics Of Photoshop: The Complete Guide — Un dossier composé de textes et de vidéos sur l’apprentissage des bases de Photoshop en cinq parties distinctes et complémentaires :

Articles sur le même sujet

Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Bruno Bichet — Fri, 28 Jan 2011 14:02:10 +0000

Après quelques journaux permanent (HTML5, typographie et CSS3) et des revues de presse multi-thématiques, voici une nouvelle série de liens triés sur le volet qui vous permettra d’occuper le Weekend qui arrive à grand renfort de typographie et d’intégration HTML & CSS. Ces ressources vous donneront également l’occasion de dégainer Photoshop et de sortir votre éditeur HTML préféré. Enjoy!

TypOgrApHiE !

Beautiful Type — Un blog créé par les deux webdesigners. Francis Chouquet (@fran6) et Aurélien Foutoyet (@allfordesign) partagent une passion commune pour la typographie et le prouve en présentant un patchwork de photographies et d’illustrations «typographiques». N’hésitez pas à jeter un oeil sur le design soigné de ce blog qui vaut le détour !

→ Jetez également un oeil sur le petit journal de la TypOgrApHiE qui le vaut bien !

Css Sans Stress !

Reset CSS V2.0 — On ne présente plus le reset CSS d’Eric Meyer, mais vous pouvez toujours lire Eric Meyer fait encore risette avec Resetting Again et 5 Reset CSS à la loupe pour vous rafraichir la mémoire ! Au menu de cette V2.0 : suppression de la suppression de l’outline sur l’ensemble des balises HTML et sur la pseudo-classe `:focus` (l’accessibilité devrait s’en trouver mieux) et prise en compte des nouvelles balises HTML5 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.

Banque de liens d’Ergolab — Ressources commentées dans les domaines de l’ergonomie, de l’architecture de l’information, du design d’interaction… Plus de 200 liens classés par thèmes, dans l’ordre alphabétique ou sur une seule page.
cssdesk — Sorte de JSFiddle pour CSS et CSS3 : une fenêtre pour le marquage HTML, une deuxième pour les CSS et enfin, le résultat de vos manipulations dans une troisième fenêtre.
Spritebox — Facilite la création de Sprites CSS en se basant sur la position du background. Il suffit de télécharger votre image et de sélectionner chaque composante du Sprite et de générer le code CSS.
ProCSSor — Formatez vos feuilles de style à votre convenance : indentation, placement des Curly Braces et d’autres options à découvrir. Pratique lorsqu’on doit reprendre des CSS que l’on a pas codées soi-même.
Multiple Class / ID and Class Selectors — L’utilisation des sélecteurs multiples a longtemps été sous-utilisée en raison certainement d’une prise en charge déficiente par IE6. A l’heure où le parc des navigateurs fait peau neuve, il est bon de se pencher sur l’utilisation de `.classe1.classe2.classe3` ou de `#id1.classe1`.
Bonnes pratiques pour les déclarations font-face — Incorporer des polices de caractères dans nos pages Web est devenu plus simple avec la propriété Font Face. Toutefois, les incompatibilités entre les navigateurs — notamment dues à Internet Explorer — rendent l’opération assez complexe. Cet article fait le point sur les problèmes à résoudre.

Inspiration, création

SearchPSD — Un moteur de recherche spécialisé dans les fichiers Photoshop. Plus de 1 500 fichiers .psd gratuits classés par catégories. Il suffit d’effectuer une rechercher sur «Logo» pour trouver une palanquée de logo issus des stars du Web comme Facebook, Google, Twitter, Yahoo. Le nombre de fichiers est encore faible, mais SearchPSD peut s’avérer utile dans l’avenir : à suivre ! Via Cyril Lopez.

139 Impressive Typography Design Inspiration — Foultitude d’exemples et de liens vers des créations qui font la part belle à la typographie.
1000+ Brushes Photoshop — 40 sites proposant des brosses Photoshop issues du domaine de la technologie pour donner un look futuriste ou techno à vos créations.

Développement web

Exemple d’AJAX en PHP + XML + jQuery — Tutoriel pour réaliser des appels Ajax de la création du fichier XML avec PHP à la gestion d’Internet Explorer et de la navigation dans l’historique.
UI kits et stencilpack — Une bonne liste d’outils pour vous faciliter la conception d’interface, pour un wireframing efficace.
Fillerati — Le faux-texte à base de Lorem Ipsum n’est pas forcément une bonne idée, l’idéal étant de travailler avec les contenus définitif. Si toutefois vous n’aviez pas le choix, essayez-donc Fillerati qui offre des vrais textes issus de la littérature (disponibles dans plusieurs langues, faut scroller pour trouver) pré-remplis dans des balises `p`, `h1`, `li` et du texte de longueur variable.
Spritzer — Ce script PHP permet de générer des images Sprites pour vos CSS à l’aide d’un simple fichier texte de configuration. Disponible sur Github.
Internet Explorer 9 Beta Guide for Developers — The Internet Explorer 9 Beta Guide for Developers provides a look at the features and improvements in Internet Explorer 9 Beta.
Coding A HTML 5 Layout From Scratch — As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
Android : introdution aux styles et aux thèmes — Cet article vous présente une particularité assez plaisante d’Android vis-à-vis des autres systèmes d’exploitation mobiles : la possibilité de créer des interfaces graphiques à l’aide de simples fichiers XML.

C’est dans les vieux po(s)ts qu’on fait la meilleure soupe

CSS Differences in Internet Explorer 6, 7 and 8 — On devrait y être habitué, mais il est parfois difficile de se souvenir des propriétés et sélecteurs CSS pris en charge ou non par les différentes versions d’Internet Explorer (IE6, IE7 et IE8). Voici un récapitulatif clair et concis avec des tables de compatibilité à garder sous la souris.
60 Questions to Consider When Designing a Website — 60 questions à se poser avant de lancer votre site dans le grand bain du web : gestion de projet, code HTML, CSS & Javascript, Webdesign et expérience utilisateur.

Miscellanées

101 sites Web très utiles — Une mine d’or pour ceux qui sont à la recherche de sites web utilitaires.
TABLEIZER! — Créez des tableaux HTML à partir des données issues de vos feuille de calcul et autres tableurs !

Articles sur le même sujet

23 listes pour Webdesigners

Bruno Bichet — Tue, 02 Nov 2010 18:43:55 +0000

Quoi de mieux (ou de pire) qu’une liste de liens résultant d’une veille technique et stratégique triée sur le volet ? Une liste de listes de liens, pardi ! Voici donc devant vos yeux ébahis, plus de 20 listes thématiques dans le domaine du Webdesign, de l’intégration Web (HTML, CSS et Javascript) et de WordPress.

390 ressources Javascript & jQuery – Cette liste reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows.
100+ Polyfills et Fallbacks pour HTML5 – Guide tout-en-un des solutions de repli pour HTML5. Liste garantie entièrement non-alphabétique et sans grumeau pour utiliser les dernières technnologies à la mode, même dans Internet Explorer !
Le petit journal permanent de CSS3 — 100+ ressources pour commencer à comprendre et utiliser CSS3 dès aujourd’hui sans douleur grâce à des générateurs en ligne pour créer vos coins arrondis, vos ombres portées, vos dégradés, etc. Vous trouverez des expérimentations pour utiliser tout le potentiel de CSS3 sans utiliser Javascript.
Le petit journal permanent de HTML5 — Des sites web consacrés à HTML5, des tutoriels, des trucs et des astuces, sans oublier les liens vers les ressources officielles !
Le petit journal permanent de la TypOgrApHiE — plus de 60 ressources commentées et actualisés dans le domaine de la typographie : liens généralistes en français et en anglais, outils et techniques pour le Web, conseils tutoriels et astuces, trouver des polices de caractères, bibliographie.
15 « Photoshop-like » en ligne testés et commentés — Liste d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix pour l’édition de vos images en ligne.
14 outils en ligne pour créer des palettes de couleur — Choisir une bonne palette de couleur est une décision importante qui impacte la réussite d’un site internet. Jetez un oeil sur ces outils en ligne pour faire des ensembles de couleurs harmonieux.
30+ frameworks CSS — Mettez une grille dans votre design — Votre framework CSS préféré se trouve peut-être parmi cette sélection de ressources commentées de frameworks CSS et de générateurs de grilles de mise en page fixes ou fluides.
30+ éditeurs HTML — Sélection de plus de 30 éditeurs HTML plus ou moins WYSIWYG.
139 Ressources Javascript et jQuery — Liste de liens pour le développeur web front-end issue de la veille documentée que j’effectue sur Javascript & Webdesign.
5 CMS rapides et légers pour votre blog et votre site vitrine — CMS : à côté des poids lourds du secteur comme WordPress, SPIP, Joomla!, Drupal ou Typo3, des solutions légères n’attendent que vous !
7 outils en ligne pour l’intégration HTML & CSS — Réduisez le temps passé à l’intégration Web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc.
21 fonctions Javascript pour l’intégrateur web — Parce qu’il est parfois nécessaire de se passer des frameworks Javascript, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser !
Liens utiles pour l’intégrateur HTML / CSS et le développeur web — Concevoir des emails, dénicher des feuilles de style pour vos tableaux, ajouter des menus déroulants intelligents ou encore faire le point sur les templates tags WordPress.
11 ressources pour mieux bloguer en français — Ressources sur la grammaire, la conjugaison et l’orthographe.
13 outils pour l’intégrateur web — Des liens utiles en toutes circonstances !
10 bons liens WordPress — Trucs et d’astuces pour améliorer votre blog ou votre site web avec WordPress.
10 liens pour faire plaisir à votre intégrateur web — Générateur de miniatures pour WordPress, valider votre site, gérer votre base de données, des plugins jQuery.
23+ ressources pour webdesigner — Nouveaux blogs à découvrir, techniques utiles pour l’intégrateur HTML et CSS, astuces WordPress, outils de mesure d’audience.
100+ comptes Twitter pour webdesigner — Comptes Twitter anglo-saxon : Webdesign, WordPress, Standards du Web, Javascript & jQuery, Photoshop & Illustrator, HTML & CSS, PHP, architecture de l’information.
200+ garçons à suivre sur Twitter — Développeurs Web, intégrateurs HTML & CSS, spécialistes jQuery, poètes sur WordPress, graphistes, blogueurs amateurs ou professionnels.
Top 100+ des filles à suivre sur Twitter — Webdesigneuses, graphistes, spécialistes en SEO ou e-marketing, rédactrices freelance ou pour des grands journaux, blogueuses amatrices, étudiantes en communication.
1000 ressources pour le développement web et WordPress — Last but not least, voici la grosse grosse liste qui en a encore sous la botte : gardez le maximum de ressources à portée de souris sur jQuery, WordPress, le Webdesign, etc.

Vous en voulez encore ? Voici la liste des listes qui rassemble des liens vers des pages qui consistent en une liste ou qui comportent une liste.

Articles sur le même sujet

#WDFR — Imprimez votre grille pour dessiner vos croquis

Bruno Bichet — Fri, 22 Oct 2010 16:47:10 +0000

Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise une grille dans Illustrator bien au chaud dans un calque « grille » verrouillé, je me suis dit qu’il serait intéressant de l’imprimer en plusieurs exemplaires pour m’en servir de support. Pour les croquis, je me contente d’imprimer cette grille à 50% de sa taille réelle pour ne pas gâcher inutilement l’encre et le papier (petit geste écolo). Je réserve l’impression en taille réelle pour les maquettes grandeur nature (Mockup) sur lesquelles je peux utiliser des post-it pour placer et déplacer mes éléments à volonté.

942.css : ma grille de mise en page

J’utilise souvent la grille de mise en page créée à l’occasion du redesign de ce blog : 16 colonnes de 42 pixels, gouttières de 18 pixels, largeur totale de 942 pixels. L’interlignage de 21 pixels représente 1,6 fois la taille du caractère de base (13 pixels) arrondi à l’unité supérieure. Le nombre d’Or est basé sur des rapports de 1,618 et bien que l’on considère souvent que 1,5 est le nombre d’Or typographique, j’ai gardé le ratio 1,6 car l’interlignage de 21 pixels représente exactement la moitié de mon module de base de 42px de côté. Hasard, je ne pense pas ^__^

Pour vous inspirer pendant les longues soirées d’hiver pourquoi ne pas lire 500 grilles et feuilles de style pour l’imprimé et le Web de Graham Davis ou imprimer l’un des 10 modèles pour Wireframe ?

Adapter votre grille pour l’impression

Après la phase du croquis, il peut être utile de marquer les regroupements de colonnes pour faciliter la création des maquettes (page d’accueil, pages «intérieures», etc.). On peut tout aussi bien imprimer des blocs de couleurs différentes à la tailles des colonnes pour les placer sur la grille. En ce qui concerne les couleurs, lors de l’impression, j’utilise des couleurs plus légères pour dessiner par dessus.

Avec Illustrator, la création d’un gabarit de mise en page pour faire des croquis ou des maquettes est très simple : Objet >Transformation > Déplacement (ou Maj + Ctrl + M).

Cliquez sur l'image pour voir la grille en taille réelle (1024x1024)

Le « fold » ou la partie émergée de l’iceberg

En plus des colonnes et de l’interlignage, j’ai ajouté quelques éléments à cette grille de base : l’indication de la hauteur du viewport vu de mon Netbook de 10.2 pouces et de mon écran 19 pouces. Pour les visualiser, j’ai placé des repères de chaque côté de la grille, à 420 pixels et à 714 pixels.

Cette matérialisation du fold est utile pour voir les éléments qui seront visibles sans nécessiter de scroll, même s’il faut garder à l’esprit qu’il y a de la vie en dessous de 600px ! La zone des 300px à partir du haut de la page est la plus regardée. Les éléments les plus importants devraient se situer au-dessus du fold mais sans sacrifier le bas de la page qui doit rester attrayant. Il est utile de placer des éléments à cheval sur deux zones pour inciter l’utilisateur à descendre jusqu’au pied de page.

En bref

J’espère que vous n’aurez pas perdu votre temps à la lecture de cette astuce simple mais terriblement efficace qui évite de passer trop de temps à faire des ajustements techniques dans les logiciels de création graphique. J’ai par exemple des difficultés à ne pas aligner parfaitement mes éléments sur Illustrator, alors qu’un placement approximatif serait suffisant dans la phase de recherche.

N’hésitez pas à partager les trucs que vous utilisez au quotidien pour vous faciliter la vie de webdesigner !