Si vous avez ignoré les plateformes mobiles par le passé, il peut être intimidant de faire le saut et de commencer à prendre en charge la navigation mobile sur vos sites existants. Il y a tellement à apprendre, un million de techniques à choisir et une quantité de travail illimitée que vous pourriez potentiellement mettre dans des projets existants.
Une question que les concepteurs et les propriétaires de sites veulent toujours savoir est: "Comment puis-je ajouter rapidement un support mobile?" Parfois, vous n'avez pas le budget pour commencer à partir de zéro et pourtant vous désirez toujours un minimum de bienfaits pour la téléphonie mobile. Aujourd'hui, je vais vous expliquer cinq choses que vous pouvez faire pour rendre votre site plus convivial pour les mobiles.
Cet article fait partie de notre série intitulée "Au-delà de la conception de bureau", qui vous est proposée en partenariat avec Heart Internet VPS.
Utiliser une mise en page fluide
Les schémas fluides existent depuis des années. Bien avant que le responsive design tel que nous le connaissons aujourd'hui ne vienne, plusieurs concepteurs et développeurs Web ont envisagé cette technique comme la solution au problème de la taille de plusieurs fenêtres d'affichage.
Créer des mises en page fluides est assez facile, tout ce que vous avez à faire est de supprimer les largeurs statiques au profit des largeurs basées sur le pourcentage dans votre CSS. Ainsi, au lieu de la colonne avec une largeur exprimée de 350px, vous pouvez la définir à 30%. Ce paramètre de largeur prendra automatiquement en compte la taille de la fenêtre et définira la largeur à 30% de ce total. Donc, si la fenêtre de votre navigateur a une largeur de 900 pixels, la largeur de la colonne sera de 270 pixels.
Alors, comment vous en sortez dans la nature? L'astuce consiste à comprendre le calcul requis. Vous savez que vous commencez avec 100%, alors pour tirer, disons, une mise en page à cinq colonnes, vous pourriez être tenté de définir chaque colonne à 20% de largeur (20 * 5 = 100). Toutefois, vos colonnes rempliraient toute la largeur disponible, sans espace entre elles. Vous voudrez généralement ajouter des marges, ce qui réduira votre largeur.
Ce que vous devez faire est de déterminer la marge que vous souhaitez appliquer à chaque colonne, puis de le multiplier par le nombre de colonnes permettant de connaître la marge totale. Enfin, vous divisez les colonnes en ce qui reste. J'ai l'habitude de mettre en place quelque chose sur Instacalc pour trouver tous les chiffres pour moi.
Ici, vous pouvez voir que j'ai mis en place une disposition de 5 colonnes avec 4% de marges sur chaque colonne (deux à gauche, deux à droite). Cliquez sur l'image ci-dessus pour accéder à cette calculatrice où vous pouvez modifier vous-même ces chiffres. Une fois ces deux valeurs saisies, le reste est calculé pour nous.
Une marge de quatre pour cent fois cinq colonnes équivaut à vingt pour cent de notre largeur pour les marges, ce qui laisse quatre-vingts pour cent restantes pour les colonnes. Quatre vingt pour cent de largeur divisée par cinq colonnes correspond à une largeur de seize pour cent par colonne.
Quelle que soit la taille de la fenêtre du navigateur, ces proportions seront conservées.
Fais le avec sass
Si vous voulez un moyen de configurer cela facilement dans votre CSS, vous pouvez utiliser Sass pour résoudre tous les problèmes mathématiques qui se présentent à vous. Voici un mix qui effectue toutes les opérations nécessaires, il vous suffit de lui indiquer le nombre de colonnes et la marge pour chaque colonne.
Pour implémenter ce mixin, vous utilisez une instruction include suivie du nom du mixin et des paramètres que nous venons de mentionner. Voici un exemple qui distribue automatiquement quatre colonnes avec une marge de 4% sur chaque colonne.
Le CSS compilé place une largeur de 21% sur chaque colonne avec une marge de 2% sur les côtés gauche et droit. Cela montre vraiment l'utilité de pré-processeurs comme Sass et LESS.
Utiliser un cadre
Si vous souhaitez créer votre propre mise en page fluide à partir de zéro, de nombreux frameworks CSS disponibles font tout le travail à votre place. Examinez chacune des options suivantes, dont certaines traitent même les requêtes des médias.
- Le système de grille CSS de 1140px
- Fluide 960.gs
- Minuscule grille fluide
- NegativeGrid
- Système Golden Grid
- Grille de référence de fluide
Mélanger dans une requête multimédia à colonne unique
Ces jours-ci, ma recommandation pour les sites conviviaux pour mobiles est d’être totalement réactive. Cela vous permet de créer une conception unique qui s'adapte et s'adapte à différentes fenêtres, ce qui garantit que votre site a une belle apparence sur presque tous les appareils. Cette solution est élégante et plus simple à mettre en œuvre que vous ne pouvez l’imaginer.
Cela étant dit, vous allez toujours rencontrer plusieurs défis lorsque vous tentez une conception entièrement réactive. Vous devez penser à une toute nouvelle façon de concevoir le Web et d'optimiser votre site à plusieurs niveaux.
Dans le monde réel, vous n'avez pas toujours le temps et le budget nécessaires pour vous concentrer sur une refonte complète. Même à long terme, vous envisagez peut-être un tout nouveau design réactif, mais vous souhaitez au moins donner un coup de pouce rapide à votre site actuel afin de le rendre meilleur sur des fenêtres plus petites.
Une solution consiste à diffuser une requête multimédia unique qui attribue essentiellement une largeur de 100% à vos colonnes et à vos conteneurs. Réduisez la taille de la fenêtre de votre navigateur et trouvez le point où votre conception n’est plus très utile, puis ajoutez quelques styles de base pour y remédier:
Comme je l'ai fait ici, vous devrez probablement ajuster quelques autres paramètres en plus de régler la largeur des colonnes à 100% pour vous assurer que tout a l'air bien avec cette nouvelle présentation.En utilisant cette technique, votre mise en page par défaut sera diffusée sur des écrans plus grands et sera redistribuée dans une seule colonne lorsque la fenêtre d'affichage deviendra trop petite pour s'adapter à la conception d'origine (700px dans notre exemple ci-dessus).
J'ai récemment démontré cette technique dans un article précédent avec la disposition simple suivante. Voici le design en grande taille:
Sur des appareils plus petits, nous ne nous occupons pas de tonnes de modifications, mais utilisons simplement l'extrait de code ci-dessus pour créer une seule colonne de contenu.
Ajouter les icônes Apple Touch
Celui-ci est un peu centré sur iOS mais il n’est jamais inutile de personnaliser les plates-formes personnalisées lorsque cela est possible. Cela nécessite un minimum d'effort et rend votre site beaucoup plus susceptible d'être conservé sur l'écran d'accueil d'un utilisateur d'iPhone / iPad (particulièrement utile pour les applications Web).
Safari sur iOS permet aux utilisateurs non seulement de marquer une page dans un sens traditionnel, mais également de la placer à côté de toutes les autres icônes de la grille de l'écran d'accueil. Pour que l’icône saisie par Safari soit correctement formatée, il est préférable de créer la vôtre.
Comment implémenter les icônes
Il existe actuellement trois écrans différents à prendre en compte avec les appareils Apple: iPad, iPhone 4 et autres iPhones plus anciens. Les tailles appropriées pour ces formats sont: 57px carrés pour les anciens iPhones, 72px carrés pour les iPads (versions un et deux) et 114px carrés pour les iPhone 4 et plus récents. Gardez à l'esprit que l'iPad 3 nécessitera probablement une icône carrée de 144 pixels si les rumeurs sur le fait de doubler la résolution s'avèrent vraies.
Voici le code que vous devrez inclure dans la section head de votre fichier HTML.
Vous pouvez ajouter un écran de démarrage à votre application Web en utilisant une méthode très similaire. Consultez la documentation officielle pour plus d'informations.
Effets spéciaux
Nous avons déjà passé en revue les tailles pour chaque image, mais il y a plus à considérer. Chaque icône que vous créez doit être carrée avec des angles rigides à 90 degrés et ne pas contenir de transparence ni d’ombre. L'iPhone arrondira automatiquement les angles au rayon approprié et appliquera l'effet de brillance par défaut.
Pointe: Ajouter? Précomposé? au nom du fichier pour ignorer l’effet brillant. Exemple: apple-touch-icon-precomposed.png.
Surveillez vos survols
C’est un conseil assez générique, mais j’encourage toujours les débutants à en tenir compte lors de la conception de sites Web mobiles. Pour la conception de sites Web, j’ai tendance à utiliser des survols de manière assez fréquente et, au-delà des simples indications visuelles, je les utilise pour déclencher un événement fonctionnel.
Réfléchissez à la manière dont cet événement sera transféré sur des plates-formes mobiles à écran tactile. Du coup, il n'y a plus de vol stationnaire. Vous appuyez sur un élément ou non, il n'y a pas d'intermédiaire comme il en existe avec une souris. Cela signifie-t-il que vous ne devriez pas utiliser la fonctionnalité de survol? Pas du tout, n'oubliez pas de vous assurer que votre site fonctionne toujours parfaitement sur un appareil mobile.
Cela ne nécessite pas toujours beaucoup de travail. En fin de compte, je vous encourage à effectuer des tests chaque fois que possible pour bien comprendre le fonctionnement de votre site. Par exemple, j'ai récemment publié un tutoriel sur la création d'un menu de navigation en expansion qui s'ouvre en mode survol. J'ai instinctivement pensé que le menu serait inutile sur un appareil iOS puisqu'il n'y a pas d'événement de survol, mais il s'avère que l'iPhone et l'iPad le traduisent automatiquement en événement tactile, laissant le menu parfaitement fonctionnel.
Ne comptez jamais sur cela, car il se peut que vos survols ne se traduisent pas toujours bien sur les plates-formes mobiles. Lorsqu'ils ne le font pas, essayez de proposer une requête multimédia personnalisée ou du code JavaScript uniquement mobile pour compenser.
Utiliser la technologie mobile conviviale
Le Web mobile a présenté un certain nombre de problèmes de compatibilité pour les concepteurs et les développeurs. L'élément principal qui attire le plus l'attention est qu'iOS refuse tout simplement de prendre en charge Flash, mais cela ne s'arrête pas là. Le Web regorge de plugins propriétaires, tels que Silverlight de Microsoft, qui ne peuvent pas non plus être installés sur certaines plates-formes mobiles.
Pour en tenir compte, assurez-vous que votre site ne dépend pas de ces technologies pour fonctionner. Si tel est le cas, vous devrez proposer une version mobile spéciale pour compenser. Par exemple, YouTube (un ancien site exclusivement Flash) utilise désormais un lecteur vidéo spécial HTML5 qui fonctionne extrêmement bien sur les plates-formes mobiles.
Assurez-vous également de tirer parti des bibliothèques prédéfinies qui vous permettent d'ajouter facilement la prise en charge de plusieurs plates-formes mobiles. JQuery Mobile, un kit de travail basé sur HTML5 basé sur jQuery et jQuery UI, en est un exemple qui plaît beaucoup aux fans de JavaScript.
Conclusion
De toute évidence, cette liste n’est nullement exhaustive, mais sert simplement à vous permettre de vous immerger dans le monde des sites Web qui ont fière allure et fonctionnent parfaitement sur n’importe quelle plate-forme. Une fois que vous vous êtes plongé dans ces cinq techniques, je vous promets que vous vous sentirez mieux à l’approche de la conception Web mobile et que vous vous retrouverez en un rien de temps en dehors de conceptions multi-plateformes entièrement réactives.
Laissez un commentaire ci-dessous et dites-nous comment vous modifieriez cette liste. Si je vous demandais cinq manières simples et rapides de rendre un site plus convivial pour les mobiles, quel conseil donneriez-vous?