Quelles techniques puis-je utiliser pour câbler des sites avec des dispositions réactives / fluides?
Comment créer des wireframes pour des mises en page réactives ou fluides? Les techniques typiques de wireframing sont statiques et ne sont pas bien adaptées pour montrer comment les conceptions évoluent. Quelles techniques existent pour saisir la nature dynamique de la conception réactive/fluide?
Les points spécifiques à considérer montrent les changements de disposition sur différents types d'appareils et résolutions, et indiquent si le texte, les images et la structure sont flexibles (et dans quelles limites).
Vous ne pouvez pas vraiment faire de filaire pour quelque chose comme ça.
La meilleure façon de montrer une preuve de concept de la mise en page/interface utilisateur que vous avez l'intention de créer serait avec un prototype HTML léger. De cette façon, vous pouvez implémenter certaines fonctionnalités réactives de base telles que la disposition liquide et les conceptions alternatives pour différentes tailles d'écran simplement en utilisant CSS de base. Si vous êtes compétent en HTML/CSS, cela ne vous prendra pas plus de temps que si vous faisiez un tas de wireframes différents, et l'avantage est que vous pouvez démontrer directement aux parties prenantes quels sont les effets d'une conception réactive sur différents appareils ( par exemple, demandez-leur de visiter le prototype HTML dans le navigateur de leur appareil pour voir à quoi il ressemble).
Si vous créez un site réactif qui a quelques largeurs de déclenchement (une version de la page à 1028px, une à 700px et une à 320px (avec des largeurs flexibles entre ces points de déclenchement bien sûr), je vous suggère de travailler avec deux versions des wireframes . Celui qui est aussi détaillé que d'habitude et celui qui ne contient que les blocs de mise en page. De cette façon, vous pouvez rapidement esquisser les changements majeurs de mise en page sans utiliser html/css. Comme rapide cet exemple: 
Je peux penser à deux ressources qui pourraient vous donner une voie à suivre:
Le blog Wireframe Magazine a récemment publié un article montrant un traitement de boîte grise pour une mise en page réactive.
Le site Web Media Queries présente des exemples de changements de disposition basés sur des requêtes multimédias qui pourraient vous donner une inspiration pour le problème sur lequel vous travaillez.
Je fais habituellement des wireframes 1 de 3 manières
Conceptions photoshop basse fidélité. Faites-leur des lignes et des boutons simples gris et blanc. Dans ce cas, vous devrez modéliser tous vos scénarios
balsamiq - peut être plus rapide au filaire mais même situation.
Maquettes HTML. Utilisez quelque chose comme Bootstrap http://Twitter.github.com/bootstrap/ pour rapidement HTML vos scénarios en utilisant leur conteneur de liquide. Et faites-les en HTML afin que vous puissiez en fait, utilisez-les sur différents appareils. Mieux si vous avez le temps/le budget. Pas vraiment si lent une fois que vous en avez quelques-uns sous votre ceinture. Il existe différentes options de prototypage HTML. http://net.tutsplus.com/ tutoriels/html-css-techniques/prototyping-with-the-grid-960-css-framework /
Vous devrez peut-être y mettre un peu de logique pour différents types de supports.
En plus de l'étape de filaire, un bon moyen de montrer comment votre conception va se comporter est de dessiner un graphique linéaire avec la largeur de l'écran sur l'axe des x et la largeur de votre contenu sur l'axe des y. De cette façon, vous pouvez afficher les tailles de contenu que vous aurez pour chaque largeur d'écran du mobile au bureau, et même tracer une ligne oblique lorsque vous prévoyez que votre conception soit fluide.
Cela m'a beaucoup aidé sur un site réactif sur lequel j'ai travaillé.
Pour mon dernier client indépendant, j'ai utilisé le Skeleton Framework et jeté un œil aux requêtes des médias de la fenêtre d'affichage. En utilisant ces tailles (elles sont très clairement définies; mobile, mobile-paysage, tablette, grand écran, etc.), j'ai créé des maquettes pour quelques pages différentes. Il ne serait pas rentable de câbler plus de quelques-uns - il vous suffit de leur donner une idée de la façon dont le contenu va réagir lorsqu'il s'effondrera.
J'ai assisté à la conférence d'Alexandre. Mon résumé est & avis: Développer un site Web réactif qui évolue en fonction de la taille de l'écran, est beaucoup plus rentable que des sites Web distincts. Il est logique de créer également des wireframes réactifs.
Façons de créer des wireframes réactifs:
1/Code it (HTML/CSS): d'après mon expérience, cela peut prendre beaucoup de temps si vous n'êtes pas un spécialiste.
2/Post-it: idéal pour les premiers prototypes, mais rugueux et peu flexible à mon avis.
3/Dreamweaver: Alexander a mentionné qu'il permet de créer des wireframes réactifs. Je ne l'ai pas encore essayé.
Je pense que vous devriez essayer Axure si vous ne l'avez pas déjà fait. Cependant, pour différents appareils et tailles, vous devez concevoir des dispositions distinctes. Quelque chose dans le sens de Tony dit. Mais plus en détail que pour votre scénario, vous devez expliquer et démontrer comment les tailles de police, les images et autres éléments de ce type peuvent changer et redimensionner.
Vous pouvez essayer JIM (Just in Mind) qui vous donnera une idée des dispositions fluides sur les appareils.
Nous avons récemment eu beaucoup de succès dans la construction d'un prototype interactif à cliquer en utilisant le responsive Foundation UI gridwork .
Il comprend de nombreux styles simples et prêts à l'emploi qui facilitent le prototypage rapide. Bonne chance!