Il était une fois, à environ une heure de chez moi, un web designer qui adorait ses compositions Photoshop et ses mises en page à largeur fixe. Et bien, je ne veux pas gâcher la fin, mais ce designer était moi.
Puis, alors que je travaillais pour moi-même, la communauté créative basée sur le Web était furieuse à propos de ce nouveau concept appelé «responsive design». Comme le ferait tout jeune professionnel aux yeux brillants et à la queue touffue, j'ai enquêté. Après tout, la dernière nouveauté doit toujours avoir au moins un regard passager.
Ce que j'ai découvert, cependant, m'a laissé consterné. Un méchant cerveau nommé Ethan Marcotte avait déchaîné un plan ignoble pour que les concepteurs Web travaillent plus fort! Son livre laissait les gens se vanter de la façon dont nous devions "considérer les utilisateurs mobiles" et "faire fonctionner nos sites Web sur autant de plates-formes que possible" ... les païens.
Bien sûr, j'ai résisté aussi longtemps que possible. Je me suis battu avec acharnement contre cette vague de bon sens et d’affaires intelligentes; mais c'était tout pour rien. Ensuite, je suis tombé sur des excuses: "Mais je n’ai pas d’appareil mobile à tester avec!" Il s'avère que vous n'en avez pas absolument besoin.
Au fil du temps, je propose quelques directives de base qui, si vous vous retrouvez sans téléphone portable ou tablette, vous aideront à concevoir des sites Web qui, de toute façon, rendront les choses plus agréables sur la plupart des navigateurs mobiles.
... vous construisez quelque chose de plus grand qu'un petit site Web axé sur le contenu. Les grands sites Web et les sites pilotés par les applications doivent absolument être testés sur des plates-formes mobiles réelles. Je veux dire, bien sûr, vous pourriez probablement faire semblant, mais je ne le conseillerais pas.
Lorsque vous travaillez avec des variables inconnues, votre meilleure option est de garder les choses simplement simples. Oui, j'invoque la règle presque clichée de KISS, parce que ça marche.
Sans rack plein de smartphones, etc., vous devez vous fier à ce que les autres savent. Heureusement, beaucoup de temps et d’énergie ont été consacrés à l’examen des capacités des navigateurs mobiles les plus populaires et de leurs comparaisons.
Découvrez quel est votre public cible, puis découvrez quel type de navigateur ils utilisent. Comme toujours, Google est votre ami. Il ne vous reste plus qu'à concevoir des statistiques.
Si la plupart de vos marchés cibles utilisent Android / iOS sous une forme ou une autre, vous avez de la chance! Leurs navigateurs par défaut (et les alternatives les plus populaires, telles que Firefox) sont pour la plupart modernes. Des techniques de mise en page avancées, des effets de base CSS3, jQuery ... tout cela sera probablement rendu raisonnablement bien.
Si votre public cible utilise d'autres plates-formes, vous devrez toutefois effectuer des recherches plus spécifiques à leur sujet et découvrir ce qu'elles peuvent et ne peuvent pas faire.
Maintenant, que faites-vous si vous avez peu ou pas d'informations sur vos utilisateurs? Essayez au moins de savoir où ils sont. La plupart des sites Web constituent, à tout le moins, une région dont la plupart des utilisateurs sont originaires. Obtenez les statistiques pour cette région.
À défaut de tout cela, concevez pour le pire des scénarios.
Pour vous faciliter la tâche, j'ai trouvé un site Web présentant une comparaison assez détaillée de ce que les navigateurs mobiles les plus populaires font et ne supportent pas. Vérifiez-le à mobilehtml5.org .
Et bien sûr, il y a le toujours populaire caniuse.com
Je sais que certains concepteurs jurent en créant un code personnalisé spécifique à chaque projet, mais lorsque vous travaillez en aveugle, pour ainsi dire, réinventer la roue n'est pas une option pratique. Les frameworks qui ont déjà été testés sur des plates-formes mobiles éliminent une grande partie des incertitudes du processus.
Les devinettes sont mauvaises. L'éviter.
Maintenant, je n'ai évidemment pas personnellement essayé ou testé tous les frameworks, vous devrez donc en trouver un qui fasse ce que vous voulez, et le rechercher, en le comparant aux capacités de votre plate-forme mobile prévue. Cependant, il y en a quelques-uns avec lesquels vous pourriez commencer:
Ce sont ceux que vous pouvez probablement nommer du haut de votre tête. Ils se caractérisent par leur complexité. Ils regroupent les systèmes de mise en page, les éléments d'interface utilisateur et les plug-ins jQuery dans un seul package puissant.
Les plus célèbres sont Bootstrap et Fondation . Je ne prendrai pas la peine de les comparer ici, alors allez-y et Google "Bootstrap vs Foundation" si vous avez besoin de plus de détails. Tout ce que vous devez savoir pour le moment, c'est que dans chaque infrastructure, chaque composant a été testé de manière approfondie par une base de fans assez importante et est prêt pour le mobile.
Celles-ci n'essayent pas de tout faire pour vous, mais vous donnent juste assez pour vous lancer. Cela rend la personnalisation un peu plus facile, mais vous devez créer et / ou styliser des éléments d'interface utilisateur plus complexes.
Cette catégorie comprend Squelette , MOINS de cadre 4 etc…
C'est en fait ma catégorie préférée. Je préfère commencer avec un écran vide et un système de mise en page prêt, ce qui me permet de créer le type de site Web que je souhaite sans avoir à écraser beaucoup de CSS, ou d’essayer d’extraire des parties spécifiques d’un cadre donné.
Ces frameworks, pour la plupart, ne semblent pas se préoccuper de la mise en page ou de la structure des pages. Ils sont conçus pour fournir un moyen simple d’ajouter des éléments d’interface de fantaisie compatibles avec les appareils mobiles (lire: widgets).
Je n'en ai testé qu'un, mais d'après mes recherches, les trois meilleurs (ou du moins les plus populaires) frameworks de cette catégorie sont: jQuery Mobile , KendoUI , et Wijmo .
Il s’avère que l’accessibilité n’est pas réservée aux aveugles ou aux aveugles. Un grand nombre des navigateurs mobiles les plus anciens ont des capacités tellement limitées que cela ressemble beaucoup à la navigation avec tous les CSS et Javascript désactivés.
Votre meilleur pari, dans ce cas, est de vous assurer que votre site Web est utilisable dans ces conditions. Désactivez toutes ces jolies choses et assurez-vous qu'il est toujours possible pour les utilisateurs d'atteindre les objectifs du site Web sans eux.
Les émulateurs de périphériques ne sont généralement pas précis à cent pour cent, mais vous pouvez tester les éléments les plus importants, comme la mise en page, etc. Les bugs que j'ai rencontrés sont souvent plus petits, comme les polices Web qui ne sont pas rendues. Ne vous inquiétez pas, ils devraient fonctionner correctement sur le matériel réel.
Mais quels émulateurs devriez-vous utiliser?
Celui-là travaille un peu lentement, mais cela fonctionne comme un charme. Vous devez télécharger l'intégralité du kit de développement, mais cela vaut la peine d'avoir un programme qui imite de près non seulement le navigateur par défaut d'Android, mais tout le système d'exploitation. De plus, vous pouvez tester votre site sur une variété de «périphériques» virtuels.
Un autre cela fonctionne essentiellement comme annoncé. Vous le téléchargez, choisissez votre "appareil" et partez.
Firefox dispose de plusieurs options pour tester votre contenu mobile. Le premier est un émulateur simple qui imite la fonctionnalité de rendu du projet Firefox de Mozilla, nom de code: Fennec.
Ce n'est pas trop compliqué, vous fournissant une fenêtre simple et redimensionnable, il vous incombe donc de définir manuellement la taille d'écran que vous souhaitez tester.
le deuxième option est un add-on pour la version de bureau de Firefox. Surnommé le simulateur Firefox OS, il vous offre une plate-forme complète avec laquelle jouer, pas seulement le navigateur (un peu comme le SDK Android).
Je n'ai pas pu tester cet émulateur , car il faut installer un très grand SDK, et l'installation a été bogue, du moins pour moi. Pourtant, il est à votre disposition pour tester à votre guise.
Blackberry propose un certain nombre de simulateurs pour BB10. Peut-être que c’est moi, mais je n’ai pas eu beaucoup de succès avec aucun d’entre eux. J'adorerais avoir des nouvelles de tous ceux qui parviennent à les faire fonctionner.
Last but not least, Apple fournit un Simulateur iOS gratuit qui peut être utilisé pour tester les appareils Apple dans le cadre de Xcode. Malheureusement, parce qu’il fait partie de Xcode, ce n’est que Mac.
Si vous avez le budget (ou pouvez tester très rapidement, car leur temps libre est limité dans le temps), vous ne pouvez pas aller trop loin avec BrowserStack . Ils vous permettront de tester sur de nombreux ordinateurs de bureau et une grande variété de mobiles. Pas aussi réactif que le vrai, ils vous montreront des problèmes avec des choses comme la mise en page.
Les navigateurs mobiles ont tendance à jouer avec les paramètres de zoom, ou alors mon expérience a été. Si vous souhaitez que votre site Web se présente comme vous le faites lorsque vous réduisez la fenêtre de votre navigateur à des tailles mobiles, utilisez ce bel élément HTML dans l’en-tête de votre document:
Laissez-moi reformuler ceci: le minimalisme bascule sur le mobile. L'esthétique minimaliste s'adapte bien à de plus petites tailles d'écran avec moins de réglages et d'ajustements, ce qui me permet d'économiser beaucoup de temps. Peut-être que cela semble être une évidence pour certains d'entre vous, mais je ne saurais trop le souligner.
Ce collage d’informations n’est que la pointe de l’iceberg, bien sûr, et ne permet pas vraiment de tester vos sites Web sur du matériel mobile réel, mais il devrait vous permettre de commencer si richement mérite.
Image / vignette en vedette, image de l'appareil mobile via Shutterstock.