Foundation est un framework front-end très apprécié dans le milieu du web. Pour les personnes qui aimeraient connaître les différences avec Bootstrap vous pouvez voir un comparatif en suivant ce lien. Pour ma part je m’étais intéressé à Foundation il y a maintenant environ un an car il permettait d’appréhender le préprocesseur SASS que j’utilise dans la plupart de mes projets encore aujourd’hui.
Je me suis donc penché sur un constructeur de template utilisant Foundation créé par CoffeeCup Software (créateur de solution payante et gratuite dans le domaine du web) qui s’intitule Responsive Foundation Framer. En clair avec cet outil vous pourrez créer un site à l’aide d’une interface simple en WYSIWYG (What You See Is What You Get) et le framework Foundation dans sa version 6.0.

L’installation

Comme la plupart des software, rien de plus simple que de cliquer sur un lien et suivre les instructions (compatible MAC et PC). Donc le lien pour pouvoir le télécharger c’est sur coffeeCup.com.
Vous verrez qu’il existe en version gratuite, pour tester le produit, et en version payante. Et celui-ci ne coûte pas moins de $79.
Vous aurez aussi droit à un message comme quoi votre ordinateur à besoin de Microsoft Visual C++ 2015. Oui encore et toujours, mais ça n’est pas le seul à en avoir besoin alors j’imagine que ça ne fait pas de mal.
L’ouverture du logiciel par la suite est assez lente, ce qui est quelque peu pénible mais les loaders sont là pour signaler qu’il faut être patient.

L’ouverture

Évidemment je m’attendais beaucoup à ce type d’interface. Le gris foncé que l’on retrouve dans la plupart des logiciels de création qu’ils soient web ou autre (exemple chez Webflow ou Macaw).
Donc première ouverture et voilà ce que nous avons :

interface starter

Donc nous avons un premier choix à faire qui déjà est fort intéressant. Nous ne partons pas de rien, tout du moins nous n’y sommes pas obligé. Vu que le but est de créer ses propres pages à l’aide d’un framework, il est donc utile de pouvoir choisir entre différents templates ou bien si nous voulons juste partir de zéro et créer la structure de nos pages tout seul.
Pour le test j’ai donc choisi de partir du template nommé Agency.

Ouverture d’un template

Là encore le chargement est assez long. Ce que je commençais à détester. Ce logiciel ne met pas trop en avant l’efficacité du framework jusque là et c’est vraiment dommage.
Ensuite nous avons donc notre plan de travail, ou la fenêtre d’aperçu si vous préférez et pour un framework qui se veut mobile-first je suis content que CoffeeCup ai pensé à afficher le template en mode mobile dès le début (mobile-first donc) :
mobile-first

En regardant un peu les outils à disposition je remarque avec joie aussi que nous avons des break-points déjà en place (ce sont les disques présents juste au dessus de la fenêtre d’aperçu). À ce stade je commence à donner des points à la bête.
Voici un aperçu au clic sur les différents breakpoints :

Rappelons que les breakpoints de Foundation côté SASS sont géré grâce aux variables suivantes :

$small-breakpoint:  em-calc(640)  !default;
$medium-breakpoint: em-calc(1024) !default;
$large-breakpoint:  em-calc(1440) !default;
$xlarge-breakpoint: em-calc(1920) !default;

Donc là encore CoffeeCup a respecté le framework. Ceci dit je ne m’explique toujours pas le breakpoint à 501px si nous avons un max-width à 640px.

Panneau latéral

À droite de la fenêtre vous avez sûrement remarqué un panneau avec des informations et des icônes amenant sur différents onglets. C’est dans cette section que nous allons voir à quoi on peut s’attendre niveau personnalisation.
Tout d’abord nous avons l’onglet Layout qui permet de travailler directement sur la grille du framework. C’est à dire si vous voulez que votre grille soit basé sur 12 colonne ou moins, si vous voulez diviser certaines colonnes déjà présente ou les fusionner, si vous voulez en ajouter, en supprimer… etc
layout-panel

Le deuxième nommé Content est divisé en 3 parties : Elements, Components et Symbols.
La première Elements va permettre de gérer les différents éléments de la page et de pouvoir les insérer en drag and drop dans la fenêtre d’aperçu. Ce qui me parait étrange c’est de l’avoir séparé de l’onglet components puisque ces éléments sont effectivement des composants de la page.
content-elements-panel

La deuxième partie de Content donc concerne les Components et cette fois il y a un aperçu (vraiment petit l’aperçu) du composant. Il est possible d’en créer de nouveaux d’en supprimer et pour les ajouter à la page il faut cliquer sur le « + », et non pas de drag and drop sur cette partie (c’était pourtant partie pour être logique).
content-components-panel

La troisième et dernière partie de l’onglet Content s’appelle Symbols. Alors tout d’abord je n’ai pas du tout compris à quoi il pouvait servir, mais au final pour ceux qui connaissent Flash ou Illustrator de la suite Adobe vous verrez qu’il s’agit en fait du même fonctionnement. Il s’agit de créer des objets indépendants avec leur propre fonctionnement ou aspect pouvant être réutilisé (là encore il s’agit aussi de la définition d’un composant web et je ne sais pas pourquoi ce panneau n’est pas fusionné avec les deux autres). En revanche à part sélectionner la page sur laquelle nous voulons le symbole je ne sais pas trop ce que l’on peut faire d’autre. Donc selectionnons des éléments sur la page et créons des symboles avec un aperçu pour chacun :
content-symbols-panel

NOTE : Petit retour sur la partie Symbols. Suzanne Nicole qui a contribuer à l’élaboration de cet outil m’a laissé un message sur Twitter qui peut répondre à la question de l’utilité des symboles. Merci encore Suzanne.
Voici ce tweet :

Ensuite à côté de Content nous avons l’onglet Design qui portera sur la définition des propriétés de chaque élément que l’on sélectionnera dans l’aperçu. Selon les éléments bien sûr les propriétés changeront mais il s’agit en fait des propriétés CSS qui seront appliqué (par exemple le padding ou le background) et les class ou l’id que l’on veut lui ajouter.
design-panel

L’avant dernier onglet nommé Settings concerne les informations de la page comme les metas ou les ressources externes à ajouter.
settings-panel

Et enfin le dernier onglet Inspector va réjouir les développeurs. Enfin du code !!! Oui il s’agit de l’onglet permettant de voir la structure de la page et les différents styles appliqués aux éléments (vous remarquerez la coloration syntaxique à la SublimeText). Attention ne cherchez pas le HTML, il n’y en a pas. Tout du moins pas dans l’interface.
inspector-panel

Une interface sans code. Je pense que l’on a perdu les développeurs et les webdesigners sont toujours là. Et je pense que cet outil est évidemment fait pour eux, mais pas que, car en fait il s’agirait plutôt de la passerelle entre ces deux univers. Et dans vous allez bientôt comprendre pourquoi voyons d’abord les outils qu’il reste.

Les outils supplémentaires

Tout en haut de notre fenêtre nous avons un menu avec des icônes. C’est ici qu’il est possible d’ajouter des pages au projet et de sélectionner la page que l’on veut modifier.
C’est là aussi que se trouve l’aperçu dans le navigateur :
aperçu navigateurs
Le choix est restreint. J’imagine que sur MAC il existe le choix « Safari ». Sur PC il n’y est pas et c’est vraiment dommage. Il faut savoir qu’il est possible d’installer Safari sous Windows, et pour les tests de compatibilité navigateur c’est plutôt pas mal.
Dans ce menu nous avons aussi la possibilité de publier notre travail (alors il faut créer un compte chez CoffeeCup, et je dois avouer que je ne l’ai pas fait, à vous de voir si vous voulez essayer).
Non je me suis plus intéressé aux liens suivants. L’exportation j’y viendrais après et cela me permettra de conclure. Alors voyons plutôt les ressources :
ressources
Voilà donc une fenêtre qui va répertorier les ressources utilisé par projet. Ci-contre il s’agit des pictos des réseaux sociaux par exemple.
Ensuite Settings permet de gérer quelques paramètres du projet comme son nom ou encore les différents composants à intégrer au projet.
project-settings
Le lien Show Guides permet tout comme dans un Illustrator ou Photoshop de gérer le design à l’aide de repère, de grille et autre outil permettant de construire une page.
show-guides
Et tout à droite permet tout simplement de switcher entre les breakpoints ou de tous les supprimer.
La barre d’outil que nous connaissons tous quant à elle va juste reprendre la plupart des outils énoncés précédemment.

Responsive Foundation Frame au Final

Alors oui maintenant passons au grand final L’Exportation. Vous l’aurez deviné il s’agit de la fonction d’exportation du site en HTML et CSS avec bien sûr toutes les ressources défini au curs de la création.
export directory
Pour faire le lien avec ce que je disais sur la fameuse passerelle entre les developpeurs et les webdesigners voyons comment fonctionne la liaison entre un webdesigner et un intégrateur ou un développeur front-end :

  • Tout d’abord le webdesigner va utiliser des outils statiques de création comme Photoshop ou Illustrator et il les transmettra une fois fini.
  • Ensuite prenons un intégrateur qui lui va devoir découper les éléments comme les images, ou d’autres éléments qui ne seront pas faisable en CSS. Et il devra produire par la suite un code qui reproduira la structure défini dans le design de la maquette transmise par le webdesigner.
  • C’est seulement à ce moment qu’un aspect fonctionnel peut être défini (évènements javascript par exemple)

Maintenant imaginons qu’après le prototypage et les wireframes le projet est pensé pour être fait sous Foundation (bien évidemment il s’agit du sujet de l’article) car l’équipe de développeurs considèrent qu’il s’agit de la meilleur solution. À ce moment là le webdesigner peut définir le design de la page dans un outil tel que Responsive Foundation Frame et sans coder tout comme il le faisait dans son logiciel de création. C’est bien pour ça que je pense qu’il s’agit d’un outil pour webdesigner.
Un autre avantage indéniable est la cohérence responsive qui est parfois compliqué à définir dans un logiciel comme Photoshop. Il faut définir les tailles en pixels à la main et il faut savoir que le responsive fonctionne sur des plages entière de pixel (de 0 à 640px pour reprendre l’exemple du max-width de Foundation).
Donc dans un logiciel comme celui de CoffeeCup, le webdesigner peut s’en soucier sans avoir à définir le design comme s’il s’agissait d’un design différent.
Bon ce dernier paragraphe ne tarit pas d’éloge mais au final je suis mitigé sur Responsive Foundation Frame. J’ai relevé quelques points faible, comme le temps de chargement ou les difficultés à définir des éléments au niveau de l’interface, mais sans ça l’idée est bonne et mérite d’être creusé.
Vous trouverez un récapitulatif et une note ci-dessous, n’hésitez pas noter l’outil si vous l’avez tester vous aussi et bien sûr vous pouvez toujours commenter l’article.

Responsive Foundation Framer by CoffeeCup Software
EN RÉSUMÉ :
Points positifs
  • L'idée est bonne
  • Le code généré est propre
  • Cohérence du responsive
Points négatifs
  • Les temps de chargement trop long
  • On est un peu perdu dans les outils (notamment l'onglet Content)
  • Le tarif est un peu élevé pour une spécialisation Foundation
3.0Note Finale
Note des lecteurs: (1 Vote)
Partager sur :
Share on Facebook2Share on Google+2Tweet about this on Twitter0Pin on Pinterest0Share on LinkedIn0Email this to someone