Les défis de la conception Web réactive, avec Ethan Marcotte

Cet épisode de l'émission de versioning présente une conversation avec Ethan Marcotte, le concepteur qui a inventé le terme «conception Web réactive». David et Tim explorent les origines de la conception réactive, les défis de l'adaptation du contenu pour divers utilisateurs et les avantages des prototypes réactifs sur des maquettes statiques. Ils discutent également de surmonter le doute de soi dans le processus de conception.

Abonnez-vous via iTunes | Abonnez-vous via Stitcher

Points de discussion clés:

• Marcotte met en évidence la création de dispositions d'agnostiques de l'appareil s'adaptant à n'importe quelle taille d'écran pour une expérience utilisateur cohérente.
• Le passage des maquettes statiques aux prototypes réactifs interactifs dans les présentations des clients est discuté, mettant l'accent sur les ajustements et les commentaires en temps réel.
• L'impact de la conception réactive sur les dispositions traditionnelles à largeur fixe, l'utilisation de grilles flexibles et de requêtes médiatiques pour une amélioration de l'accessibilité et des approches mobiles, est examinée.
• Les avantages commerciaux importants de la conception réactive sont explorés, citant des exemples comme l'engagement accru des utilisateurs et l'efficacité opérationnelle du Boston Globe.
• L'importance des processus intégrés de conception et de développement, favorisant la communication et le prototypage collaboratif, est souligné.
• La stratégie de contenu et l'adaptation de la livraison de contenu en fonction du contexte de l'utilisateur, pas seulement de la taille de l'écran, sont des thèmes clés.
• Les possibilités futures des requêtes d'élément pour affiner la conception sensible sont explorées, réduisant potentiellement la dépendance à des requêtes médiatiques étendues.

Afficher les notes:

• Ethan Marcotte sur Twitter: @beep
• Le compte Twitter RWD d'Ethan
• Ethanmarcotte.com
• Karen McGrane (collègue)
• requêtes multimédias
• requêtes d'élément
• "A Dao of Web Design"
• Article séminal de "conception Web réactive" de Marcotte pour Une liste à part
• Le Boston Globe
• groupe de filament
• Marcotte et McGrane Reactive Web Design Podcast
• BBC News on the Reactive Web Design Podcast
• Book de Marcotte Conception Web réactive
• Book de Marcotte Conception réactive: motifs et principes
• Brad Frost sur les carrousels
• Boba Fett
• Twitter: @mdavidgreen | @tevko | @versioningsHow | @SitePointDotCom

(extraits de transcription - Une sélection de points forts de conversation clés est inclus ci-dessous, mais la transcription complète est disponible dans l'entrée d'origine.)

"Fondamentalement, en fin Votre écran se trouve que nous pouvons créer ces très belles dispositions d'agnostiques de l'appareil pour le Web. "

"J'ai commencé à obtenir plus de demandes dans les contrats clients pour créer un site Web d'iPhone, qui était un peu bizarre. Cela a juste commencé à me faire réfléchir, eh bien, quel est le prochain site Web que nous allons devoir construire? À un moment donné , une autre nouvelle chose cool va émerger sur le Web mobile.

"Ils ont commencé à parler de tous les avantages commerciaux qu'ils ont vus de cela, et de publier ces mesures et ces données. Voir. "

"Le partenaire de conception n'a jamais montré à son client chez Virgin America une composition statique. Les navigateurs, sur différents appareils.

"Plutôt que de construire tous ces nids de requêtes médiatiques de Rats qui traitent de tous ces différents cas de condition de mise en page que je dois planifier de manière réactive, si je pouvais juste avoir quelque chose qui ressemble, ok, étant donné la largeur de ce conteneur, Je veux appliquer ces règles de conception à ce module particulier, ce serait énorme, et je pense qu'il remplacerait probablement une bonne partie des questions médiatiques que j'écris aujourd'hui. "

Cette sortie révisée maintient les emplacements et formats d'image d'origine tout en paraphrasant le texte pour obtenir une version unique mais sémantiquement équivalente de l'article original.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!