UX/CSS addict
star everlasting since 2000 star

Project

Caroline Notari


acrobat



Attrape ton mobile!
iphone 06 50 23 44 21


e-mail moi

 

 

 


map_pin Loving in Bordeaux - Fr
World citizen
bx-map
Doublecheese :
Digital creative
for a big smile

J'ai testé Adobe Edge Reflow Preview

j'ai testé Adobe Edge Reflow Preview

J'ai testé Adobe Edge Reflow Preview

~
Conception responsive
~

Adobe Edge Reflow est en téléchargement gratuit. Adobe est le premier éditeur à proposer un générateur de site responsive en temps réel.
Adobe Edge Reflow n’est pas un framework tel que le devenu culte boilerplate. C’est un logiciel, et nous allons voir s’il nous facilite réellement la partie.

Etape 1 : je délimite mes screen dans la top-barre.

Malgré quelques soucis de prise en main (il faut saisir l’ordre de procédure ou l'on fini par effacer ou modifier ses préférence), jusqu’ici tout va bien. Ceci étant j’aurai peut-être dû aller lire un tutoriel de premiers pas.

1ere Observation : je vais vraisemblablement devoir entrer tous ces réglages par défaut à la main à chaque nouveau projet. Ceci dit, si je gagne du temps, après tout pourquoi pas ? Ce n’est que la première version.

Etape 2 : je positionne mes éléments.

Comme je souhaite tester le soft, je fais tout ce qu’il ne faut pas faire et commence mes calages sur ma version mobile (480px de large) car c’est ce qui m’intéresse.
Au fur et à mesure que j’avance, je réalise que contrairement à une feuille de style que j’aurais monté moi-même, dans Adobe Edge Reflow, tout est interdépendant, dans le sens descendant. Ce qui signifie que si je déplace un élément sur l’aperçu le plus large, mon aperçu mobile et mon aperçu tablette seront impactés.
Cela ne m’arrange pas du tout mais je comprends qu’il faille une bonne méthodologie pour utiliser le logiciel de manière efficace ou cela peut vite devenir un vrai casse-tête.

Pendant que je construis cette page je me rends également compte qu’il m’est impossible de nommer mes sélecteurs. Leur nomenclature automatique devient vite indigeste avec des [text1], [text2], [text3] à n’en plus finir et idem pour les box.

Autre déconvenue, je ne peux déplacer l’ordre de mes éléments une fois posés sur le plan de travail. Ainsi, alors qu’en html je vais pouvoir finalement choisir de déplacer un texte dans une autre div ou section (html5), sous Adobe Edge Reflow, les imbriquements sont définitifs. Le seul moyen de repositionner les éléments entre eux est d’opérer par ctrl+Z et de perdre tout ce qui a été fait ultérieurement.

Etape 3 : L’export.

Adobe prend la précaution de prévenir l’utilisateur : le code n’est pas exploitable en temps que tel et Adobe Edge Reflow ne saurait qu’apporter une aide à la conception de site responsive.

J’ouvre alors mes fichiers sous mon éditeur de site habituel.
Me voici rendue à renommer tous mes sélecteurs. Dans ma page html, comme dans ma css, autant de fois qu’ils apparaissent en fonction des appels media queries. Je fais tout cela en espérant ne pas me tromper mais alors que je procède à mes fastidieuses corrections, avec toute la patience et la bonne volonté dont je suis capable, je découvre des résidus de codes plein ma css.
Ce sont toutes les annulations. Des lignes et des lignes de sélecteurs vides qui viennent polluer mon code.

Ajouté à cela qu’il n’est pas possible de créer plusieurs pages dans Edge Reflow et de les câbler entre-elles, j’ai abandonné là.

Conclusion : Adobe Edge Reflow est un très bon simulateur de responsive.

Il peut servir aux ergonommes - designers d’interface à faire des tests d’aperçu sans trop de prise de tête ; ou à une phase d’avant-vente pour créer une démo rapidement.
En aucun cas je ne recommande Adobe Edge Reflow Preview pour de la conception à ce stade de son développement.

Adobe Edge Reflow Home pageci-contre : Adobe Edge Reflow Preview Home Page.

 

pause
play
grayscale