Mises en page Web réactives pour écrans mobiles Intro, astuces et exemples
Les concepteurs ont plus dur maintenant qu'avant. Nous devons non seulement concevoir des appareils fixes, mais également des appareils mobiles tels que la tablette et les smartphones. Étant donné que nous parlons ici de tailles d'écran et de résolutions différentes, la tâche qui nous attend est énorme. À la lumière de cela, site Web adaptatif pourrait être la meilleure solution. Il offre plus qu'un simple modèle mobile. à la place, la mise en page de votre site est conçue pour être suffisamment flexible pour s’adapter à n’importe quelle résolution d’écran..
Un tel schéma de conception fluide présente des avantages et des inconvénients évidents. Mes exemples ci-dessous montrent comment une conception Web réactive peut faciliter la transition vers les appareils mobiles..
Comment fonctionne le design réactif
Quand j'utilise le mot “sensible” en termes de conception Web, je veux dire que la mise en page entière répond en fonction de la résolution de l'écran de l'utilisateur. Imaginez ce scénario: vous lisez un site Web sur une tablette, puis vous passez à un autre appareil pour une raison ou une autre. La fenêtre du navigateur est maintenant redimensionnée. Une disposition de conception Web réactive comportera des caractéristiques et une disposition qui se décompose et se réinvente avec élégance. Du point de vue de la convivialité, il s'agit d'une technique brillante..
La conception réactive consiste à créer une expérience homogène, quelle que soit la taille de l'écran du navigateur ou de l'appareil. J'ai trouvé l'exemple parfait de 'A List Apart' pour illustrer mon propos, qui inclut également des images dynamiques. La largeur est définie en CSS en utilisant des pourcentages pour la plupart des éléments de conteneur internes. Les sites Web plus grands répondent également bien à la suppression de contenu dynamique tel que JavaScript lorsqu'il n'est pas pris en charge..
Pourquoi concevoir pour mobile?
Il est devenu évident que de plus en plus d'utilisateurs se tournent vers le mobile, et pas seulement pour la navigation Web mobile. Les tablettes PC ont commencé à changer de contexte lorsque les utilisateurs sont en ligne dans la salle de classe. Concevoir pour le mobile est certainement une exigence dans les normes Web modernes. Le seul problème est de choisir votre méthode de développement et de cibler votre public de manière appropriée..
Lorsque vous commencez à coder pour des résolutions d'écran spécifiques, vous vous retrouvez avec trop de feuilles de style à traiter. Les requêtes multimédias en CSS3 peuvent être utilisées pour créer des mises en page spécifiques à l'iPhone pour les vues portrait et paysage. Comme vous pouvez prédéterminer la densité de pixels, il est facile de réorganiser n’importe quel modèle HTML pour mobile..
(Source de l'image: bradfrostweb)
Mais lorsque vous codez une présentation pour une conception réactive, les aspects mobiles sont pris en charge par défaut. Une expérience similaire sera offerte aux utilisateurs de bureau et mobiles, sans que vous ayez à vous soucier des propriétés CSS externes. La seule recherche à effectuer est de planifier le plus petit écran possible. Les données de trafic de Google Analytics peuvent être très utiles pour cela..
Votre site Web ne fonctionnera probablement pas à 100% sur tous les appareils exécutant tous les navigateurs. Mais vous pouvez cibler une majorité en fonction de la largeur moyenne de l'écran. Les anciens modèles d'iPhone utilisent une résolution d'affichage de 320 × 480, ce qui n'est pas si incroyable. Je tirerais pour une largeur minimum de 240px, ou même plus petit si vous pouvez l’adapter.
Supprimer le zoom par défaut
Si vous avez déjà passé du temps à naviguer sur le Web sur un smartphone, vous remarquerez que les sites Web sont progressivement redimensionnés pour s'afficher pleinement à l'écran. Ceci est pratique pour l'utilisateur car la plupart des sites Web n'ont pas de contrepartie mobile, la mise en page complète est donc le pari le plus sûr..
Mais lorsque vous commencez à créer un design mobile réactif, le zoom automatique peut vraiment gâcher vos éléments de mise en page. Plus précisément, les images et le contenu de navigation peuvent apparaître petits ou trop grands dans votre mise en page. Il existe une balise méta spéciale que vous pouvez ajouter à l'en-tête du document, ce qui réinitialise cette fonction sur la plupart des appareils Android et iPhone..
Ceci est connu comme le balise méta viewport qui configure certaines variables personnalisées dans le contenu. Apple propose une page de documentation concernant quelques autres méta-tags sur lesquels vous devriez vous pencher, bien que ceux-ci s’adressent spécifiquement aux sites Web sur iOS. le échelle initiale la valeur est importante car cela donne à votre site Web une valeur de 100% par défaut.
La dernière valeur pour évolutif supprime complètement cette fonctionnalité de zoom, empêchant ainsi l'utilisateur de redimensionner la mise en page. Cela verrouillera la conception dans une taille basée sur la largeur totale du périphérique. Notez que même si vous désactivez la fonctionnalité de zoom, une bonne conception réactive s’adapte quand vous passez de portrait en paysage sur n’importe quel appareil! Mais il est judicieux de verrouiller une conception réactive et de supprimer les options de redimensionnement génériques..
Mise à l'échelle dynamique de l'image
Les images sont une autre facette importante de pratiquement tous les sites Web. Les utilisateurs mobiles ne cherchent peut-être pas à diffuser des vidéos, mais les photos sont une toute autre histoire. Ce sont également les principaux coupables lorsqu'il s'agit de schémas sortant du modèle de boîte.
img max-width: 100%;
La règle standard pour CSS consiste à appliquer une propriété max-width à toutes les images. Comme ils seront toujours fixés à 100%, vous ne remarquerez jamais de distorsion. Lorsque l'utilisateur redimensionne la fenêtre de son navigateur pour que sa taille soit inférieure à celle que votre image peut gérer, elle est automatiquement ajustée à une largeur de 100%. Le problème est qu’Internet Explorer ne peut pas comprendre cette propriété. Vous devrez donc créer une feuille de style spécifique à IE à l’aide de largeur: 100%;.
Des images flexibles sont également possibles si vous utilisez des plugins JavaScript ou jQuery. Certains développeurs vraiment intelligents ont pris le temps de créer un contenu d'image extrêmement réactif. Ce fil de discussion n’est que l’un des nombreux éléments de Stack Overflow, qui propose une approche à la fois étrange et pratique pour résoudre les bugs IE6 / 7..
Personnellement, je vous recommande de vous en tenir au redimensionnement naturel des images CSS. Si votre site Web est exécuté dans un navigateur mobile avec JavaScript activé, il peut très probablement également prendre en charge CSS. Si vous voulez vraiment aller plus loin, consultez cet article 24 façons Images pour les conceptions adaptatives…
Dessins touchants
Les développeurs Web peuvent oublier que les utilisateurs mobiles ne sont plus sur les téléphones à clavier comme les BlackBerry. De nos jours, la majorité des smartphones utilisent des interfaces à écran tactile, ce qui rend les scénarios différents des configurations avec clavier et souris..
En tant que tel, vous devrez envisager d'autres solutions pour les éléments mobiles. Les menus déroulants peuvent mieux fonctionner lorsqu'ils sont affichés sous la forme d'un menu unique à droite. La plupart des utilisateurs peuvent exploiter les liens situés à droite plus facilement que ceux à gauche, mais l’une ou l’autre des colonnes permet de réduire l’espace disponible. En utilisant les retraits de marge, il est simple d'identifier la hiérarchie des liens sans nécessiter de code jQuery.
Il est également judicieux d'augmenter la taille de ces liens de navigation. Les utilisateurs mobiles n'ont pas le luxe d'avoir un grand écran sur leurs ordinateurs de bureau ou même leurs ordinateurs portables. Vous devez garder le texte volumineux, initial, insérable et lisible à tout prix. Vous voudrez peut-être même redimensionner si l'utilisateur bascule entre les modes portrait et paysage - une récurrence assez courante lors de la navigation sur le Web mobile..
Mises en page CSS personnalisées
En général, il est préférable d'adapter votre mise en page et de permettre une dégradation naturelle de votre contenu. Si vous avez une barre latérale et une zone de contenu, vous devez les définir en largeur, en pourcent ou en em, tout ce qui sera redimensionné avec la fenêtre du navigateur. Si vous appliquez un largeur min cela finira par casser une partie de la mise en page; alors maintenant, le contenu de votre barre latérale s'affiche au-dessus du contenu de la page.
(Source de l'image: Pepperson)
Lorsque vous considérez comment cela affecte la conception globale, il est beaucoup plus facile de développer des feuilles de style externes. Cependant, vous risquez de vous heurter à des résolutions d'écran trop petites pour pouvoir être restituées par votre mise en page. C'est le scénario idéal pour ajouter des propriétés CSS personnalisées afin de supprimer des parties de la page ou de reformater le contenu..
Activer / désactiver le contenu supplémentaire
Les exemples de blocs de contenu volumineux incluent les formulaires Web, les menus dynamiques, les curseurs d’image et d’autres idées similaires. Au lieu de supprimer complètement ces éléments à mesure que la mise en page se réduit, pourquoi ne pas simplement les cacher dans un “minimisé” contenu div? Vous pouvez utiliser CSS ou JavaScript pour effectuer les modifications, mais vous aurez probablement besoin de code JS pour créer un bouton bascule..
Cette alternative est parfaite pour que votre page d’accueil reste dynamique et regorge de médias riches. Au lieu de supprimer complètement votre navigation déroulante ou de réorganiser la structure de la page, vous pouvez la masquer dans une div de contenu. Si l'utilisateur veut afficher vos liens, il suffit d'appuyer sur un bouton-poussoir pour ouvrir / fermer le menu..
Ce formatage est simple, intuitif et facile à utiliser avec les appareils à écran tactile. Dans le div, vous pouvez placer chacun des menus déroulants côte à côte dans un format de colonne. Au fur et à mesure que la fenêtre se redimensionne encore plus petite, elles vont naturellement se placer l'une en dessous de l'autre et augmenter la hauteur de la page. Pourtant, l'option permettant de réduire tout le menu est facilement accessible en un seul clic. Cette bascule est également parfaite pour les curseurs d’image en coopération avec le redimensionnement dynamique des photos..
Utilisation de requêtes multimédia
Si un écran de mobile venait à casser votre mise en page à 2 ou 3 colonnes, chacune des zones de contenu serait empilée les unes sur les autres. L’ensemble du site semblerait saigner et pourrait s’avérer très déroutant sans zones de bloc distinguées. Une meilleure idée consiste à ajouter une bordure inférieure sur chaque colonne, uniquement pour les appareils mobiles, à l'aide d'une feuille de style externe telle que mobile.css.
Avec ces nouveaux styles, votre contenu est divisé en sections divisibles. L'attribut multimédia ci-dessus est spécialement conçu pour cibler les anciens appareils iPhone en mode paysage. Mais cela s'appliquera également aux appareils avec des écrans de moins de 480 pixels. Utilisez-le à votre avantage pour pouvoir déterminer à quel moment la mise en page “se sépare”.
Il existe quelques options supplémentaires que vous pouvez utiliser pour détecter l'orientation du périphérique. Ce guide fantastique sur les médias CSS peut vous donner quelques idées. De plus, le nouveau projet mobile 320 et plus propose un passe-partout pour CSS CSS @médias modes. Ceux-ci peuvent être inclus directement dans le même fichier mobile.css et appliquer des règles pour de nombreux appareils différents.
/ * Smartphones (portrait et paysage) ----------- * / @ Écran uniquement multimédia et (largeur de périphérique minimale: 320px) et (largeur de périphérique maximale: 480px) / * Styles * / / * Smartphones (paysage) ----------- * / @Écran uniquement multimédia et (largeur minimale: 321 pixels) / * Styles * / / * Smartphones (portrait) ---- ------- * / @média uniquement écran et (largeur maximale: 320px) / * Styles * / / * iPads (portrait et paysage) ----------- * / @ écran réservé aux supports et (largeur de périphérique minimale: 768px) et (largeur de périphérique maximale: 1024px) / * Styles * /
(Source: Requêtes sur les médias CSS3 en dur)
Outils utiles
- Skeleton - Un magnifique plateau de cuisson pour une conception mobile réactive
- Passer de adaptatif à totalement réactif
Vitrine: beaux designs réactifs
J'espère que ces astuces et techniques de conception vous inciteront à créer de superbes mises en page réactives, non seulement pour les écrans mobiles, mais pour tous les appareils courants dotés d'une navigation sur le Web. Pour garder le sens de la créativité, j'ai rassemblé une petite vitrine de conceptions Web mobiles réactives. Veillez à consulter certaines des caractéristiques les plus uniques et à donner votre opinion sur le design ou le sujet abordé dans la zone de discussion..
raccrocher la lune
Macdonald Hôtels
Astuces CSS
Heureux Cog
Teixido
CSS Wizardry
Architectes d'information
ART = TRAVAIL
Web design dur
Sony USA
Future Friendly
Nous ne pouvons pas arrêter de penser
Emplois authentiques
Colbow Design
320 et plus
Fourche CMS
Le peu heureux
Pâte électrique
Props Foster
Plexique
Gâteaux Preeti
Plus de dangers
Centre d'information dentaire
ribot - conception de l'interface
Bonjour Fisher
Sommet du marketing social
William Csete
Robot laineux
Meltmedia
Restez à l'écoute!
Dans le post de demain, nous présenterons quelques thèmes WordPress réactifs gratuits vous pouvez télécharger pour utilisation. Assurez-vous d'accorder pour cela.
