Techniques courantes dans la conception Web réactive

Cet article explore des techniques efficaces pour créer des dispositions de site Web réactives et des expériences utilisateur. Nous examinerons les méthodes de création de grilles de liquide qui s'adaptent à diverses tailles d'écran, garantissant des expériences utilisateur cohérentes entre les appareils. Nous allons également nous plonger dans l'optimisation des médias riches, en particulier des images, pour minimiser la consommation de bande passante sur les écrans plus petits.

Plusieurs méthodes pour tester la réactivité de votre site sur différents appareils sont décrites ci-dessous:

1. Utilisez un bookmarklet de conception Web réactif, facilement disponible en ligne, pour tester la disposition de votre site sur diverses résolutions.

2. Utilisez les modes Windows 8 Snap avec Internet Explorer 10 pour simuler différentes tailles d'écran, y compris les vues de smartphone et de tablette.

3. Effectuer des tests manuels sur une gamme de périphériques et de résolutions d'écran (comme le montre la figure 1).

Figure 1. Test de base pour la conception Web réactive

Considérations clés:

• Tirez parti des requêtes multimédias CSS3 Pour créer des règles de style dépendantes de la taille de l'écran, du type de support et d'autres caractéristiques de l'appareil.
• Comprendre la différence entre les pixels CSS et les pixels matériels, en particulier crucial pour les écrans de densité de pixels élevés.
• Adopter une approche de conception mobile d'abord, hiérarchiser l'expérience utilisateur mobile et améliorer progressivement pour les écrans plus grands.
• Implémentez des images réactives à l'aide de techniques ou de bibliothèques JavaScript pour adapter la qualité d'image en fonction des capacités de l'appareil.
• Utiliser les grilles de fluide et la mise à l'échelle basée sur le pourcentage dans les points d'arrêt pour maintenir l'affichage du contenu proportionnel.
• Optimiser la lisibilité du texte en ajustant la taille de la police, l'espacement des lignes et l'espacement des lettres via les requêtes multimédias CSS.
• Améliorer la forme de la forme sur les appareils mobiles à l'aide de types d'entrée HTML5 pour un comportement de clavier optimisé.

requêtes multimédias et au-delà:

Traditionnellement, le reniflement de l'agent utilisateur a été utilisé pour détecter le type d'appareil et rediriger les utilisateurs vers différentes versions de site. Les requêtes multimédias CSS3 offrent une approche supérieure, séparant la création de contenu de la présentation. Ils permettent aux développeurs de définir des styles conditionnels sur la taille de l'écran, le type de support et d'autres attributs de périphérique. Cependant, la simple création de dispositions de largeur fixe pour différentes tailles d'écran n'est pas une conception réactive. La mise à l'échelle proportionnelle est essentielle.

Comprendre les pixels:

La signification de "pixel" a évolué avec l'avènement des écrans de densité de pixels élevés. Le W3C définit un Pixel de référence de référence (ou CSS Pixel ), qui diffère du pixel matériel . Le rapport entre eux est le rapport pixel de l'appareil . Bien que le rapport Pixel de l'appareil soit important pour optimiser les téléchargements d'images, il ne devrait pas dicter la disposition de la page. Concentrez-vous sur la conception des pixels de référence pour assurer une taille visuelle cohérente sur les appareils. Vous pouvez utiliser des requêtes multimédias pour cibler des rapports de pixels de périphériques spécifiques si nécessaire:

/* Note that device-pixel-ratio might need vendor prefixes */
@media screen and (device-pixel-ratio: 1.5) {
  /* Adjust layout for 1.5 hardware pixels per reference pixel */
}
@media screen and (device-pixel-ratio: 2) {
  /* Adjust layout for 2 hardware pixels per reference pixel */
}

Les bibliothèques JavaScript comme GetDevicePixelratio peuvent également aider à calculer le rapport pixel du périphérique pour une optimisation d'image supplémentaire.

Techniques de mise en page réactives:

La disposition réactive implique deux techniques principales: identifier les points d'arrêt où des changements de disposition sont nécessaires et la mise à l'échelle proportionnelle du contenu entre ces points d'arrêt. Une approche Mobile-First est recommandée, de hiérarchiser les utilisateurs mobiles et d'améliorer progressivement les écrans plus grands. Le Microsoft.com redessiné sert d'étude de cas convaincante, démontrant comment un site peut s'adapter gracieusement à diverses tailles d'écran, maximisant toujours l'utilisation de l'espace disponible.

Les largeurs basées sur le pourcentage sont une méthode pratique pour obtenir des dispositions de grille fluide. La combinaison de cela avec les requêtes multimédias CSS3 permet des modifications de disposition à des points d'arrêt spécifiques, créant une expérience vraiment réactive. Des cadres comme Gumby, Skeleton et CSS Grid peuvent simplifier ce processus.

Optimisation d'image:

Les images sont souvent la partie la plus à forte intensité de bande passante d'un site Web. CSS3 offre plusieurs techniques pour réduire la dépendance à l'égard des images, notamment des polices personnalisées (@font-face), des gradients de fond, des coins arrondis (border-radius), des transformations 2D et des ombres en boîte / texte. Pour les images qui ne peuvent pas être remplacées, les techniques JavaScript et les bibliothèques peuvent charger dynamiquement les tailles d'image appropriées en fonction des capacités de l'appareil et de la résolution d'écran. Les auditeurs de requête multimédia permettent des ajustements à la volée à mesure que la taille de l'écran change. Des bibliothèques comme la technique du groupe Filament, AdaptiveImages.com et le polyfill de Tyson Matanich fournissent des outils utiles à cet effet.

Optimisation du texte et du formulaire:

La mise à l'échelle du texte réactive implique de régler la taille de la police, l'espacement des lignes et l'espacement des lettres en fonction de la largeur de l'écran pour maintenir la lisibilité. Les bibliothèques comme FitText peuvent y aider. Pour les formulaires, l'utilisation des types d'entrée HTML5 (tel, email, etc.) améliore la convivialité sur les appareils tactiles en fournissant des dispositions de clavier optimisées.

Conclusion:

La conception Web réactive est une évolution continue, mais les techniques décrites ici fournissent une base solide pour créer des sites Web qui offrent des expériences cohérentes et engageantes sur tous les appareils. N'oubliez pas de tester soigneusement et de hiérarchiser une approche mobile d'abord.

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!