Les Pages

Les paramètres à la création de Page

Lors de la création d’une application, il vous est proposé une structure de base :

• Une zone externe[ze] aux dimensions maximum de 100% / 100%

Cette configuration vous indique que votre page va prendre toute la largeur et toute la hauteur de la page puisque la zone externe est le premier conteneur dans lequel il est possible de mettre d’autres objets.

Contrairement aux autres outils nocode, il n’est pas nécessaire dans UDo.tools de définir de structure de page avant de commencer à concevoir votre application. Le placement des objets graphiques dans une page ne se fait pas en glisser et déposer mais par intégration dans des zones. Ceci permet d’obtenir plus facilement et plus rapidement une application responsive propre tout en conservant la flexibilité nécessaire aux concepteurs expérimentés.

Les dimensions

Pour nous aider à traiter le responsive design des applications, 4 paramètres de dimensionnement sont disponibles dans le paramétrage des objets graphiques.

• %
  • Les dimensions en % (pourcentage) sont tout à fait adaptées à la gestion du responsive. Ce paramètre est à appliquer autant que faire se peut pour les zones, input etc. Si une zone (Z1) est paramétrée à 50%, elle prendra 50% du conteneur(A) du dessus. Si ce dernier (A) prend 50% de la page, alors Z1 prendra 25% de la page. Quelle que soit la résolution de votre écran, l’objet conservera les proportions indiquées.
• px
  • Le paramètre en px (pixel) permet quant à lui de faire varier la dimension de l’objet en fonction de la résolution de l’écran.
• ca
  • Le paramètre ca (calculé) permet de faire un mix des deux (% et px). C’est-à-dire qu’un objet paramétré en ca avec pour valeurs 100 ca + 30 px prendra 100% de la page moins 30 pixels

  

• Auto
  • Le paramètre Auto permet de dimensionner le composant en fonction des dimensions des objets qu’il contient. Par exemple, une zone paramétrée en largeur Auto qui contient un input qui fait 100 pixels de large, se calera sur les 100 pixels de l’input.

  Il est alors très simple et rapide de construire la structure de sa page en définissant qu’une zone est égale à 100%, que deux zones prendront 50% chacune, 3 zones 33% etc ….

L’affichage du contenu

Après avoir vu comment se paramètrent les objets pour créer la structure des pages, nous allons voir comment paramétrer l’affichage du contenu pour que les objets se placent soit en ligne soit en colonne.

Par défaut, lors de la création d’un objet, l’affichage du contenu est en disposition “colonne”. Cette définition peut-être contre intuitif. Il faut comprendre cela comme étant un affichage avec les objets qui sont les uns en dessous des autres, donc créant de ce fait une colonne.

La définition de l’affichage du contenu se paramètre sur le conteneur parent pour que la règle soit applicable sur ses enfants.

Affichage du contenu en colonne

Extraction des paramètres du studio	Exemple d’affichage en colonne

Affichage du contenu en ligne

Une autre disposition possible est celle en ligne avec l’exemple ci-dessous

Affichage du contenu en absolue

La dernière disposition possible est de type absolue. Le paramètre de type disposition absolue se règle sur l’objet parent et l’emplacement suivant les coordonnées X/Y se paramètre bien sûr sur chacun des objets concernés.

Il est possible de définir l’emplacement du X=0 / Y=0

Dans cet exemple, l’origine est en haut à gauche et les zones sont décalé de 235px en X et de 140 px en Y

Les marges

Dans UDo.tools, les marges sont plus à considérer comme du padding (ou des marges internes). Il faut considérer le padding comme étant l’espace à l’intérieur du groupe, séparant le contenu du bord du groupe. Par simplification, nous appèlerons ça les marges internes.

Le paramètre de base des marges est toujours de 0. Elles peuvent être définies tout autour de l’objet.

Seul le conteneur [ze]Zone Externe dispose de marges internes et de marges externes. Les autres objets ne disposent que de marges internes.

💡 Tip : Pensez à la mise en page de votre application en termes de grille divisée en lignes et en colonnes.

Dans l’exemple ci-dessous, le bord bleu représente la page et les bords gris sont les bords des zones, avec un espace de 20px entre le bord de la zone et le contenu. Tous les éléments de texte s’étendent sur toute la largeur de la zone.

Le responsive design

Maintenant que nous comprenons un peu mieux la structure de la page, la marge et le padding, nous pouvons passer à l’examen de la façon dont les conceptions fonctionnent de manière responsive. Au fil du temps, la conception d’un site et d’une application avec une approche “ mobile first “ deviendra naturelle. C’est-à-dire des designs qui se réduisent de 960px –> 320px et s’étendent de 960px à de très grands écrans.

Avec l’exemple ci-dessus, il y avait deux façon de concevoir la page :

• Les éléments sont définis en pixel. Ceci posera de sérieux problèmes pour une vue desktop qui devra s’adapter en fonction de la taille des écrans. Cependant, pour certains objets, nous ne pourrons nous exonérer de ce paramétrage. Par exemple, nous souhaitons qu’un bouton conserve la même taille quelle que soit la taille de l’écran.
• Les éléments sont définis en pourcentage. Cette option ne permettra pas d’avoir du responsive complet mais sera d’une grande efficacité pour une vue desktop qui devra s’adapter en fonction de la taille de l’écran.

L’internet étant de plus en plus accessible à partir d’appareils mobiles, il ne suffit plus d’avoir un site web statique dont la conception n’a d’intérêt que sur un écran d’ordinateur. Sans oublier qu’il faut aussi tenir compte des tablettes, des ordinateurs portables 2 en 1 et des différents modèles de smartphones avec des dimensions d’écran différentes lors de la conception d’un design. Donc, le fait de mettre votre contenu dans une seule colonne et en rester là ne va pas suffire. Grâce à un design web responsive, vous pouvez faire en sorte que votre site web soit le plus attrayant possible sur les téléphones portables, les tablettes, les ordinateurs portables et les écrans d’ordinateurs de bureau. Et l’amélioration de l’expérience utilisateur signifie des conversions plus élevées et une croissance de l’activité.

Qu’est-ce que le responsive web design ?

Le design responsive est une approche de la conception web qui permet d’adapter votre contenu web aux différentes tailles d’écran et de fenêtre d’une variété d’appareils.

Par exemple, votre contenu peut être séparé en différentes colonnes sur les grands écrans, car elles sont suffisamment larges pour s’adapter à ce design.

Si vous séparez votre contenu en plusieurs colonnes sur un appareil mobile, il sera difficile pour les utilisateurs de le lire et d’interagir avec lui.

Le design responsive permet de fournir à différents appareils plusieurs mises en page distinctes de votre contenu et de votre design en fonction de la taille de l’écran.

Design web responsive vs design adaptatif

La différence entre le design responsive et le design adaptatif est que le design responsive adapte le rendu d’une version d’une seule page. En revanche, le design adaptatif fournit plusieurs versions complètement différentes de la même page.

Ce sont deux tendances cruciales de la conception web qui aident les makers à contrôler l’apparence de leurs applications sur différents écrans, mais l’approche est différente.

Grâce à un design responsive, les utilisateurs accéderont à la même application de base par le biais de leur navigateur, quel que soit l’appareil, mais UDo contrôlera la mise en page et la rendra différemment en fonction de la taille de l’écran. Avec le design adaptatif, UDo proposera deux applications avec deux URL différentes afin de mettre à disposition une application web et une application mobile.

Pourquoi le design responsive est important

Si vous êtes novice, vous vous demandez peut-être pourquoi le design responsive est si important.

La réponse est simple. Il ne suffit plus de concevoir pour un seul appareil. Le trafic web mobile a dépassé celui des ordinateurs de bureau et représente désormais la majorité du trafic des sites web, soit plus de 51 % (Desktop vs Mobile vs Tablet Market Share Worldwide - August 2020).

Lorsque plus de la moitié de vos utilisateurs potentiels utilisent un appareil mobile pour naviguer sur l’internet, vous ne pouvez pas vous contenter de leur servir une page conçue pour un ordinateur. Elle serait difficile à lire et à utiliser, et conduirait à une mauvaise expérience utilisateur.

L’abstraction par UDo.tools du CSS et HTML

Le fondement du design web responsive est la combinaison de HTML et de CSS, deux langages qui contrôlent le contenu et la présentation d’une page dans un navigateur web donné.

Le HTML contrôle principalement la structure, les éléments et le contenu d’une page web. Par exemple, pour ajouter une image à un site web.

Le CSS est utilisé pour modifier la conception et la mise en page des éléments que vous incluez dans une page avec du HTML.

Dans UDo, nous avons tout fait pour vous faciliter la vie. En paramétrant vos objets, vous pilotez à la fois le CSS et le HTML

Vous pouvez également contrôler le design au-delà de la hauteur, de la largeur et de la couleur. C’est en utilisant le CSS de cette manière que vous rendez un design responsive  lorsque vous le combinez avec une technique appelée « media query ». Dans le studio UDo.tools, on retrouve une abstraction du media query au niveau des paramètres de chaque objet graphique.

Media queries = Attributs variables en fonction de la largeur du device en pixel

La gestion des attributs variables est une fonctionalité fondamentale vous permettant d’adapter le contenu à différents facteurs comme la taille de l’écran ou la résolution. Nous verrons aussi qu’ils permettent de modifier les caractéristiques d’un objet en fonction de valeurs, de variables etc…

Cela fonctionne de la même manière qu’une clause «if» dans certains langages de programmation, c’est-à-dire qu’il vérifie si la fenêtre de visualisation d’un écran est suffisamment ou trop large avant d’exécuter le code approprié.

Si l’écran fait au moins 478 pixels de large, la couleur de fond de la zone prendra les paramètres RGB 255,255,255,1 seront automatiquement centrées par des marges de même largeur.

Exemple de mise en page

Cette approche permettra d’augmenter ou de diminuer dynamiquement les différentes tailles des éléments du conteneur en fonction de la taille de l’écran.

Mise en page Flexbox

Si une mise en page basée sur un pourcentage est fluide, de nombreux concepteurs et développeurs web ont estimé qu’elle n’était pas assez dynamique ou flexible. Flexbox est un module CSS conçu comme un moyen plus efficace de disposer plusieurs éléments, même lorsque la taille du contenu à l’intérieur du conteneur est inconnue. Dans le studio UDo.tools, nous avons a nouveau fait en sorte d’abstraire ce concept pour vous rendre son utilisation toujours plus simple.

Un conteneur flexible permet d’agrandir les objets pour remplir l’espace libre disponible ou de les rétrécir pour éviter le débordement.

Dans le studio UDo.tools, la notion de flexbox est définit dans les paramètres d’alignements verticaux et horizontaux.

Propriétés du parent (conteneur flexible) / Propriétés pour les enfants (éléments flexibles)

	Conteneur flexible
	Eléments flexibles

Alignement vertical :

A gauche
A droite
Centré
Espacé
Espacé autour

Alignement vertical :

En haut
En bas
Centré
Stretch
Baseline

Dépassements des éléments

• Dans une disposition “ligne”, les éléments enfants qui dépassent du conteneur peuvent hériter des paramètres suivants (le paramétrage se fait toujours sur le conteneur parent) :
  • Afficher sur une ligne :
    • Rester sur une ligne avec l’apparition d’un scroll horizontal permettant de visualiser les objets dépassants
  • Afficher sur plusieurs lignes :
    • Renvoyer à la ligne les objets dépassants

    

  • Afficher sur plusieurs lignes (Inversé)
• Dans une disposition “colonne”, les éléments enfants qui dépasse du conteneur peuvent hériter des paramètres suivants (le paramétrage se fait toujours sur le contener parent) :
  • Afficher sur une colonne :
    • Rester sur une ligne avec l’apparition d’un scroll vertical permettant de visualiser les objets dépassants
  • Afficher sur plusieurs colonnes :
    • Renvoyer sur plusieurs colonnes les objets dépassants

    

Images responsive

L’itération la plus élémentaire des images responsive suit le même concept qu’une mise en page fluide, en utilisant une unité dynamique pour contrôler la largeur ou la hauteur.

L’unité % correspond à un pourcentage unique de la largeur ou de la hauteur de la fenêtre de visualisation et permet de s’assurer que l’image reste proportionnelle à l’écran.

Vous pouvez alors soit choisir le paramètre “Plein” qui occupera 100% du conteneur parent (quitte à rogner l’image pour garder les proportions) ou le paramètre “Adapté” qui affichera l’image dans son intégralité en la redimensionnant automatiquement.

Points de rupture responsive communs

Pour travailler avec les media queries, vous devez décider des « points de rupture responsive » ou des points d’arrêt de la taille de l’écran. Un point de rupture est la largeur de l’écran où vous utilisez une media query pour implémenter de nouveaux attributs variables.

Dans le studio UDo.tools, nous avons prédéterminé des points de ruptures responsive pour les largeurs d’écran inférieurs ou égales à :

• 991 pixels
• 767 pixels
• 478 pixels

Tailles d’écran communes donné à titre indicatif

• Mobile : 360 x 640
• Mobile: 375 x 667
• Mobile : 360 x 720
• iPhone X : 375 x 812
• Pixel 2 : 411 x 731
• Tablette : 768 x 1024
• Ordinateur portable : 1366 x 768
• Ordinateur portable ou de bureau haute résolution : 1920 x 1080

💡 Tip : Si vous choisissez une approche de design axée sur le mobile uniquement, nous vous conseillons de développer votre application directement avec le module “Mobile”.

Comment rendre votre application responsive

Maintenant que vous connaissez les éléments de base, il est temps de rendre votre application web responsive.

Définissez vos plages de media query (points de rupture responsive)

Définissez vos plages de media query en fonction des besoins uniques de votre design.

• 478px pour les téléphones en portrait
• 767px pour les tablettes
• 991px pour les ordinateurs portables
• configuration de base pour les écrans de tailles supérieurs

Taille des éléments de mise en page avec des pourcentages

La première étape, et la plus importante, consiste à définir différentes tailles pour différents éléments de mise en page en fonction de la media query ou du point de rupture de l’écran.

Le nombre de conteneurs de mise en page dont vous disposez dépendra du design, mais la plupart des sites/applications web se concentrent sur les éléments listés ci-dessous :

• Wrapper ou Container
• Header
• Content
• Sidebar
• Footer

Mise en page commune

En utilisant une approche mobile first, vous pouvez styliser les principaux éléments de la mise en page. Pour ce faire, il convient de définir des modèles dans la partie “style” qui vous pourrez ensuite appliquer sur vos différents objets graphiques que vous placerez pour concevoir votre application.

Une typographie responsive du texte

La conception de sites web responsive est principalement axée sur le fait que les blocs de mise en page, les éléments et les médias soient responsive. Le texte est souvent traité comme une réflexion secondaire.

Mais pour une conception vraiment responsive, vous devez également ajuster la taille de vos polices de caractères pour qu’elles correspondent à la taille de l’écran.

Le plus simple est de fixer une valeur statique pour la taille de la police, par exemple 22 px, et de l’adapter dans chaque attribut variable.

Taille de la police par rapport à la taille de la vue

Tester le responsive

Si vous avez suivi les étapes décrites dans cet article, cela devrait signifier que vous avez un site web adapté aux téléphones mobiles.

Appuyez sur CTRL + Shift + I sur les ordinateurs Windows, ou sur Commande + Option + I sur les Macs pour ouvrir la vue du périphérique concernée. À partir de là, vous pouvez sélectionner l’appareil mobile ou la tablette de votre choix pour tester si votre design est reponsive.

Ensuite, vous voulez tester votre site sur plusieurs tailles d’écran avec un outil comme les outils de développement Chrome

Tester des mises en page responsive et mobiles dans Chrome

Il y a quelques questions auxquelles vous devrez répondre lors de ce processus.

• La mise en page s’adapte-t-elle au nombre correct de colonnes ?
• Le contenu s’intègre-t-il bien dans les éléments de mise en page et les conteneurs des différents écrans?
• La taille des caractères est-elle adaptée à chaque écran ?

Les couleurs

Choisir la bonne couleur pour votre application est probablement plus important que vous ne le pensez car elle a un impact significatif sur nos émotions et notre comportement.

• Le bleu représente le calme, la confiance et l’intelligence ;
• Le rouge représente l’énergie, la passion mais aussi le danger ;
• Le orange représente la créativité, la jeunesse, l’enthousiasme ;
• Le jaune représente le bonheur, l’espoir et la spontanéité ;
• Le vert représente l’harmonie, la nature, la croissance, la richesse, la stabilité ;
• Le violet représente le luxe, le mystère, la spiritualité ;
• Le rose l’espoir, la féminité, l’espiéglerie, la romance ;
• Le marron la santé, la chaleur, l’honnêteté ;
• Le noir représente le pouvoir, l’élégance, le raffinement ;
• Le blanc représente la pureté, l’innocence, le minimalisme ;
• Le gris représente le professionnalisme, le formalisme et le conformisme.

Repensez aux couleurs de vos marques préférées et vous verrez qu’elles ont un sens ou en tout cas que la marque à un message à passer …. Nous pouvons donc en déduire que si votre application est construite autour de la confiance, par exemple une entreprise de technologie financière, le bleu pourrait renforcer cette confiance. Vous pouvez aussi choisir le noir pour la force.

Il est important de mentionner que la couleur doit être utilisée comme un outil. Où voit-on le plus souvent des boutons rouges ? Supprimer. C’est un exemple parfait. Les boutons CTA (call-to-action) sont souvent de la couleur de notre marque. Nous utilisons la couleur pour illustrer “se focaliser” sur une entrée ou un bouton au survol. Dans tous les cas, nous utilisons la couleur pour renforcer une action.

Regardez certains de vos sites Web ou applications préférés. Si nous prenons l’exemple d’Airbnb, ils utilisent une seule couleur pour la marque, le reste étant noir, gris et blanc. Uber n’a pas de couleur, juste du noir. Twitter, bleu, c’est tout. Parfois, une marque axée sur le design comme Webflow utilisera un éventail de couleurs, mais ils vendent à des designers, donc ça a du sens.

Cela dit, nous reconnaissons toujours le violet de leur marque. Je vous laisse analyser alors le message que veut faire passer UDo avec ses couleurs (noir, jaune, rouge et bleu) alors que la couleur omniprésente dans le studio est plutôt le bleu.

La couleur de la marque mise à part, vous devez sélectionner vos noirs, gris et rouges pour les éléments suivants erreurs ou à supprimer. Enregistrez-les dans votre palette de couleurs UDo.

Points à retenir

• Trouvez une couleur qui renforce l’objectif de votre entreprise (ou celle de votre client).
• Utilisez la couleur comme un outil.
• Utilisez la couleur de façon minimale.

Colors - The super fast color schemes generator!

Harmonie des couleurs

La police

A ce jour, nous ne disposons que d’une seul police dans UDo.tools. Cela changera dans les prochains mois. Il est seulement possible de jouer avec la dimension de la police.

Les paramètres de police sont :

• Le format : texte simple, texte multiligne, date… (Choisissez le bon format afin d’optimiser la génération du code CSS lors du build de l’application)
• L’alignement de texte horizontal ou vertical
• Couleur de la police
• Taille de la police
• Epaisseur de la police (Normal, gras, très gras)

Les bordures

Les cadres permettent de dessiner des bordures autour des objets. Il est possible de configurer la couleur du fond du cadre (qui peut être différent de la couleur du fond de l’objet), la taille et la couleur des traits mais aussi définir un rayon pour les angles (radius).

• Chaussures de rando : Bordures 1px, couleur orange, rayon 8px
• Matos de bivouac : rayon 50px
• Sac : rayon 50%

Les effets

• Curseur : Au survol de la souris, le curseur se transforme en main.
• Opacité : Par défaut elle est définie à 100%. Cet attribut est pilotable grâce aux attributs variables. Exemple : si mavariable = 1 alors opacité = 50%
• Transformation : Permet de translater (x,y,z), de changer d’échelle (x,y,z), de pivoter (x,y,z) et de distordre (x,y) une zone suivant les conditions définies dans les attributs variables de l’objet
• Ombre portée : Affichage d’une ombre portée autour et à l’intérieur de la zone en fonction ou non des conditions définies dans les attributs variables de l’objet

Transition :

• Utilisées avec parcimonie, les transitions peuvent rendre les interactions visuelles telles que les survols et les changements de couleur plus fluides et moins saccadés.