Responsive Design, c’est facile

Pourquoi afficher une page à une largeur fixe ? Il faut présumer que le visiteur a une fenêtre qui lui convient.

Et si on affichait la page à la taille de la fenêtre ?

Si on fait une page de référence à 1000 px de large, c’est très facile de faire en sorte que la page remplisse parfaitement n’importe quelle fenêtre.

Il suffit de faire deux choses :

1. Dans la balise <head>, un peu de javascript

<script>
  // 1 rem = 1/100 de la largeur de la fenêtre
  var monRem = window.innerWidth/100;
  document.documentElement.style.fontSize = monRem+'px';
</script>

2. Partout ailleurs on utilise l’unité REM au lieux de PX, et on met 1/10 la quantité voulue :

font: normal 1.0/1.2REM verdana, sans serif;

Voici une exemple d’un page qui a été construite en moins d’une heure en utilisant cette technique. La page s’affiche correctement dans tous les navigateurs, sur toutes les plates-formes.

Il faut savoir que si le visiteur modifie sa fenêtre, la page n’est plus à la bonne échelle.

La solution (expliquée ici) est de redessiner la fenêtre quand le visiteur la modifie.

N.B. On ne peut pas faire en sorte que 1 REM = 1 PX parce qu’Internet Explorer arrondit trop les valeurs. Le calcul ci-dessus donnerait monRem = 1.1321, ce que IE arrondit à 1.13. Ce n’est pas assez précis pour bien aligner les éléments de la page.

Redessiner une fenêtre lorsque l’utilisateur la déplace

Ce serait bien de redessiner une fenêtre lorsque l’utilisateur déplace les bords, pour pas qu’on ne voie le fond de la page, sans contenu.

J’ai donc mis du Javascript pour ce faire, mais un problème est survenu :

Lorsque l’utilisateur zoome la page, cela déclenche un évènement onresize et la page est redessinée, ce qui annule le fait de zoomer.

Il n’est plus possible alors de zoomer la fenêtre.

La solution

On enregistre le ratio de largeur/hauteur lorsque la page est chargée.

Quand un évènement resize est déclaré, on vérifie si le ratio a changé.

Si le ratio a changé, c’est que l’utilisateur a bougé les bords de la fenêtre et on la redessine.

Si le ratio reste inchangé, c’est que l’utilisateur a zoomé la page, et on ne la redessine pas.

NOTE : il ne faut pas redessiner une fenêtre sur la version mobile parce que Safari, en enlevant la barre d’adresse, modifie le format de la fenêtre. Le résultat est un cycle de chargements de page à l’infini.

La transparence ne s’affiche pas correctement dans Firefox/PC

Si on est en mode texte (on est en train d’entrer du texte) dans Illustrator, et que l’on modifie la transparence des caractères, ils ne s’afficheront pas correctement dans Firefox/PC :

image

La solution est de sélectionner le texte avec l’une des flèches puis de modifier la transparence à ce niveau-là.

Préparer les images d’une page SVG pour un site web, toutes à la fois

Le plus facile est de faire le design d’une page sans se soucier de la taille/poids des images.

On se sert des images d’origine, de bonne qualité et très lourdes pour faire une jolie page sans se prendre la tête.

Mais, quand la page est prête à être publiée, comment faire pour redimensionner toutes les images ?

La règle de base (pour moi) est qu’une image qui remplit l’écran devrait faire 3000px de large.

Ceci est vrai si l’image est de bonne qualité. Si l’image est de moindre qualité, je la mets à 4000px.

Cela fait un joli effet, même zoomé, sur l’écran retina d’un iMac sans pour autant être très lourd.

Par défaut, je crée des pages à 1000px de large, et cette explication y dépend.

Pour convertir toutes les images d’une page à la fois à la bonne résolution :

1. Sauvegarder le document comme PDF sans rien cocher dans les options.

image

2. Dans les options de compression, choisir les options suivantes :

Color bitmap images: Bicubic downsampling à 288 ppi pour images au dessus de 288ppi

Compression : Automatic (JPEG)

Qualité d’image : Maximum

image

Si vous avez des images grayscale, mettre les mêmes options etc.

3. Fermer le PDF

4. Ouvrir le PDF

5. Sauvegarder le PDF en tant que SVG avec l’option “Emplacement de l’image : Lier

image

Il vaut mieux le faire dans un nouveau dossier.

6. Donner les noms corrects aux images créées.

On trouvera dans le dossier avec le SVG (qu’on peut supprimer), toutes les images de la page converties à l’échelle voulue.

Seulement, les noms ne seront pas corrects, et il faudra les renommer.

NOTE : Comme la qualité de l’image est dégradé en créant le SVG, j’ai choisi de sauvegarder le PDF à 288 ppp. Cela fait qu’une image de 1000px de large dans le fichier Illustrator fera 4000px de large à la fin du processus.

Les navigateurs ne respectent pas l’approche d’un texte dans un fichier SVG

Si, dans Illustrator, on met un texte sur un courbe avec une approche modifiée (le texte est espacé), l’approche est respectée dans le fichier SVG.

C’est à dire que le chiffre trouvé dans le SVG correspond au chiffre qu’on voit dans la palette Illustrator).

Mais les navigateurs ne calculent pas l’espace de la même manière qu’Illustrator.

Firefox ne met pas d’espace du tout.

Safari met le chiffre précisé, mais l’interprète différemment. Il y a beaucoup trop d’espace.

Résultat : on ne peut pas rajouter d’espace entre les lettres dans Illustrator.

Ombres en AI/SVG

Le but est de dupliquer cette ombre, créée sur Photoshop, avec une ombre exclusivement en SVG :

image

En évitant de charger un fichier de plus (ombre.png), la page sera moins lourde.

Voici comment faire :

1. Dessinez une forme (ovale, horizontale)

2. Dans le panneau « Apparence » sélectionner le FILL qu’on va flouter

3. Cliquer sur le logo fx en bas du panneau « Apparence » puis « Filtres SVG » puis « Appliquer Filtre SVG »

4. Dans le panneau « Appliquer Filtre SVG » qui apparaît, cliquer sur l’icône de la page en bas (pour en créer un nouveau)

5. Coller le texte suivant :

<filter  height=“150%” width=“150%” id=“Drop-Shadow” filterUnits=“objectBoundingBox” y=“50%” x=“-5%”>

<feMorphology operator=“dilate” radius=“3” in=“SourceAlpha” result=“BEVEL_10” />
<feGaussianBlur  stdDeviation=“15”></feGaussianBlur>

</filter>

Pour finir, faire un masque pour ne voir que la partie voulue.

Important :

Lorsqu’on importe un document dans un autre, ce sont les données PDF qui sont utilisées.

Dans ce cas, c’est une image qui va remplacer l’ombre qu’on vient de créer.

Il ne faut donc utiliser cette technique que dans le document principal, et non pas dans documents placés.

Plus d’information sur smashingmagazine.com.

Lorsqu’un document AI est placé dans un autre, c’est le PDF qui est placé

Lorsqu’on place un document AI dans un autre, ce sont les données PDF (sauvegardées avec l’AI par défaut) qui sont placées, et non pas le document AI d’origine.

Il vaut mieux utiliser des PDF plutôt que des AI pour placer dans un deuxième document, pour éviter cette confusion.

C’est pour cette raison que les Actions SVG ne sont pas utilisables dans un fichier placé.

Images dans des .ai placés ne seront pas incluses

Si on utilise un document Adobe Illustrator placé (un bas de page commun à tout le site, par exemple), et qu’il y a une image dans ce document :

  • L’image ne sera pas incluse correctement dans le SVG final

Illustrator va exporter l’image avec un nom tel que « D5C175AC803E038B.png » dans le même répertoire que le SVG exporté.

Le problème vient du fait que lorsqu’on place un document AI dans un autre, ce sont les données PDF qui sont placées, et non pas le document d’origine.

Il vaut mieux utiliser des PDF plutôt que des AI pour cette utilisation.

C’est pour cette raison que les Actions SVG ne sont pas utilisables dans un fichier placé.

Polices Web Optimisées

Voici comment créer une police WOFF optimisée pour le web, à partir d’une police TrueType. WOFF = Web Open Font Format.

Pour utiliser les programmes proposés :

  • TTFautoHint
  • Fontforge

Il faudra une connaissance de Terminal (Mac) ou Console (PC).

Il existe des outils gratuits en ligne mais le processus décrit ici résultera dans des fichiers moins lourds et mieux dessinés sur Windows.

1. Créer une copie de la police originale pour ne pas l’abîmer.

2. Corriger le Hinting avec TTFautoHint [facultatif]

[mise-à-jour] sous Safari, cette étape peut agrandir les espaces intra-lettre d’une manière imprévisible.

Cet étape vise à corriger des fautes d’affichage sur les plates-formes Windows.

Télécharger l’application sur freetype.org, puis l’installer (existe pour Mac & Windows).

Dans l’application Terminal (Mac) ou Console (PC), naviguer dans le dossier de la police, puis taper le texte suivant :

ttfautohint nomAvant.ttf nomApres.ttf

3. Supprimer tous les caractères dont on n’a pas besoin en Fontforge

Si on n’a besoin que des majuscules sans accent (pour les titres des paragraphes, par exemple), je peux transformer une police à 30 ko en une police a 4 ko.

Si j’ai 6-10 polices à charger, ça peut faire une grande différence dans la vitesse de chargement de la page.

Dans Fontforge :

  1. Sélectionner les lettres nécessaires (dans ce cas, les majuscules sans accent)
  2. Appuyer sur ctrl-esc pour inverser la sélection
  3. Encoding » Detach & Remove Glyphs pour supprimer les lettres sans utilité

4. Exporter en format WOFF (Web Open Font) depuis Fontforge

Dans Fontforge :

  1. Appuyer ctrl-maj-G
  2. Sélectionner Web Open Font
  3. Sauvegarder

5. Relier le fichier SVG avec la police

Dans votre fichier CSS :

font-face {
    font-family:‘nomDansLeSVGt’;
    src:url(’/fonts/nomDeLaPolice.woff’) format(‘woff’);
    font-weight:normal; font-style:normal;
}

Cet article est basé sur un excellent article en anglais sur pixelsvsbytes.com.

Noms des styles CSS en SVG

Lorsqu’on sauvegarde un fichier Illustrator en SVG avec CSS Properties: Style Elements, chaque SVG aura ces noms de style :

  • .st0{fill:#11E700;}
  • .st1{opacity:0.4;fill:#FFFFFF;}
  • .st2{display:none;fill:#697C7E;}

Un problème survient donc si on n’a plus qu’un seul SVG intégré dans un même document.

Il est nécessaire de traiter chaque SVG du côté serveur, pour modifier les noms de style afin qu’ils deviennent uniques.