Updated

FR Tutoriel 1.10 · REM

Mis à jour le 2 avril, 2020

< 1.9 · animation — retour — 1.11 · pièges potentiels >

Tutoriel 1.10 · REM (root em)

À partir de cette page, le tutoriel vous propose des informations pour mieux comprendre le fonctionnement de Svija. Il n’y a pas d’intervention nécessaire.

Svija est unique parmi les outils de création de sites web du fait qu’une page Svija s’adapte toujours et parfaitement à la fenêtre du navigateur.

Les éléments de la page ne sont pas décalés ou repositionnés quand la fenêtre change de taille, mais le contenu de la page change de taille avec la fenêtre.

Cet effet est rendu possible grâce au fait d’utiliser l’unité REM pour le positionnement de tous les éléments de la page.

Au contraire du pixel, d’une taille fixe quelle que soit la taille de la fenêtre, le REM varie en fonction de la largeur de la fenêtre.

Pixels dans Illustrator · REM dans Svija Admin

Dans Illustrator, Svija utilise des pixels ; les documents Illustrator sont tout à fait typiques.

Par défaut les pages sont de largeur* :

  • 1200 px + 2 marges de 240 px = 1680 px pour la version ordinateur
  • 300 px + 2 marges de 60 px = 420 px pour la version mobile

Dans Admin, Svija utilise les unités REM : tout ce qui se fait en CSS ou Javascript se fait en REM.

Par exemple, pour animer un déplacement d’un élément de votre page de 25 pixels dans le fichier Illustrator, il faut le déplacer de 2.5 rem via Javascript ou CSS.

À retenir : 10 pixels dans Illustrator = 1 REM dans Svija Admin.

*Vous pouvez modifier les catégories ou en ajouter d’autres dans Svija Admin.

Le REM : root em

Dans la typographie, on mesure les distances avec l’unité em : la largeur de la lettre M. On peut ainsi décrire les divers aspects d’un texte d’une manière fixe, quelle que soit la taille de la police.

Sur internet, l’unité em est utilisée de la même manière : elle mesure les aspects d’un texte sans prendre en compte la taille de la police.

Mais, comme la taille de la police varie à l’intérieur d’un document, le « root em » a été créé pour décrire la taille par défaut d’un document.

En langage internet, le « root em » décrit la taille de la police de l’élément racine : la balise HTML.

Svija profite de l’existence de cette unité pour préciser les contenus de la page en unités REM. Dès que la fenêtre change de taille, le REM change en même temps. Le contenu convient toujours parfaitement à la fenêtre.


Responsive web design selon Svija

En général, quand on parle d’un site web « responsive », on parle des contenus qui changent de place et de forme selon le format de l’appareil utilisé pour les visionner.

C’est-à-dire : une quantité infinie de combinaisons possibles.

Cette philosophie, intégrée dans la plupart des outils de construction de sites web, mène à un système assez compliqué. Ces outils essaient de faciliter la conception graphique tout en prenant en compte le fait que les contenus changent de place en permanence.

Le but, c’est de prendre en compte tous les utilisateurs, comme si il y avait une quantité infinie d’appareils différents.

La vérité, ce n’est pas ça

En réalité, les visiteurs de sites web tombent dans des catégories assez bien définies :

  • ordinateur
  • téléphone
  • tablette

Les outils de construction de sites web classiques sacrifient la qualité graphique pour satisfaire des besoins fictifs.


Deux versions et demi d’un site, ça suffit

Plutôt que de créer une gamme infinie de tailles possibles, nous pouvons satisfaire 99,9% des visites avec deux versions et demi d’un site :

  • version ordinateur + trackpad/souris
  • version mobile + doigt
  • version tablette + doigt = contenus ordi + menus mobile

À retenir : Svija n’exige pas que vous adhériez à cette philosophie ; elle est reflétée dans les paramètres par défaut mais vous êtes libre de poursuivre la stratégie de votre choix.


Poursuivre le tutoriel : pièges potentiels.

Leave a Reply

Your email address will not be published.