Comment créer un site Web mobile convivial
L’utilisation d’appareils mobiles est à la hausse depuis le lancement du téléphone Iphone par Apple, qui annonce une nouvelle génération de «téléphones modernes».
Les appareils mobiles sont devenus un élément tellement normal de la vie quotidienne que nous nous attendons tous à voir des gens regarder leur téléphone quitter la maison.
Pour les propriétaires de sites web, ce changement dans la manière dont les gens interagissent avec Internet n’est pas surprenant, mais il augmentera l’urgence dont vous aurez besoin pour rendre votre site compatible avec les mobiles.
Au cas où vos visiteurs mobiles ne vivraient pas une expérience fantastique lorsqu’ils atterriraient sur votre site, vous fuiriez une grande partie de votre trafic potentiel (et endommageriez ainsi les positions de votre moteur de recherche).
Vous l'avez entendu maintenant, mais nous le répétons. Vous devez activer votre site mobile. Mais comprendre ce que vous devez faire et comprendre comment le faire sont deux choses distinctes.
6 étapes pour créer votre site Web Mobile-Friendly
Voici quelques mesures que vous pouvez prendre aujourd'hui pour vous assurer que votre site fonctionne aussi bien pour vos visiteurs mobiles que pour vos propres utilisateurs de bureau.
1.Créez un site Web convivial / réactif sur mobile
Un site responsive inclut un contenu et des données identiques sur tous les appareils sur lesquels vous l'avez, mais il modifie son affichage et son organisation en fonction de la taille de l'affichage de l'appareil.Il s'agit de la meilleure solution pour créer votre site compatible avec les appareils mobiles, car vous ne limitez pas les informations que vos visiteurs de téléphones cellulaires peuvent obtenir.
Ils obtiennent toujours le même contenu que le reste de vos visiteurs.
Et le design réactif est également idéal pour le référencement.
Google a indiqué qu'il s'agissait de leur format favori pour les sites mobiles. Mais le site Web Mobile Friendly et Mobile Friendly n'est pas identique.
La mise à jour de Mobile Friendly Index considère le site Web mobile comme le premier facteur de référencement SEO.
Construire un site Web réactif n'est pas pour les débutants cependant.
Vous devrez soit engager un expert pour vous aider, soit essayer de trouver un constructeur de site incluant des modèles conviviaux pour mobile.
Si la chose la plus importante qui vous empêche de gagner votre site mobile friendly ne comprend pas comment le faire vous-même, écartez cette excuse et faites-le. Rendez l'information plus facile à trouver.
Certaines personnes qui naviguent sur Internet avec leur appareil mobile ne voient pas d'inconvénient à prendre un peu de temps pour parcourir ou lire le contenu exactement au même rythme que sur un ordinateur, mais d'autres recherchent les informations dont elles ont besoin aussi rapidement et aussi facilement que possible.
Prenez en compte les conseils que les personnes sur les appareils mobiles sont susceptibles de rechercher lorsqu'elles visitent votre site et placent un endroit évident et facile à trouver sur la page d'accueil de la cellule.
Pensez également à la FAQ que les gens recherchent le plus souvent lorsqu'ils visitent votre site.
Il n’est peut-être pas judicieux de placer toutes les réponses au premier plan sur la page d’accueil de votre mobile, mais vous devez les rendre simples à localiser et à naviguer sur un appareil mobile.
2.N'utilisez jamais Flash.
Flash Cela peut ralentir le temps de chargement d'une page et de nombreux navigateurs et appareils ne fonctionnent tout simplement pas.Ni l'un ni l'autre des appareils Android iOS ne prend en charge la technologie Flash. Par conséquent, si vous créez un site Web qui dépend de l'expérience d'une animation Flash, vos utilisateurs mobiles seront laissés de côté.
À ce stade, il est idéal de supprimer entièrement la technologie sur votre site et de découvrir une conception Web solide qui fonctionne sans.
3.Implémenter la balise méta de vue correcte
La balise méta de la fenêtre d'affichage est une méthode simple pour contrôler la façon dont votre site s'affiche sur mobile. Si votre page Web affiche exactement le même diamètre sur le petit écran de votre téléphone que sur votre bureau, il vous faudra faire un défilement peu commode d’un côté à l’autre pour lire chaque ligne de texte et voir les différents visages. la page. La balise méta de la fenêtre d'affichage indique aux navigateurs de faire correspondre la largeur de votre page à l'affichage de ce type d'appareil d'où provient le visiteur.L'ajouter à votre html est très simple. Il suffit de coller ceci sur le HTML pour chaque page:
4.Tourner la correction automatique pour les types.
Il est facile de ne pas penser aux petites façons dont la correction automatique peut rendre l'interaction du consommateur avec votre site plus gênante.Pour ceux qui ont des formulaires sur votre site qui demandent des informations de nom ou d’adresse, un moyen simple de faciliter la fourniture de ces informations à vos visiteurs mobiles consiste à désactiver la correction automatique pour chaque champ de formulaire, sinon leur téléphone tentera de changer de nom ou de rue. nommer à des phrases plus courantes ralentit le processus de remplissage de votre formulaire.
Dans le champ Entrée, assurez-vous d'inclure autocorrect = off à partir du code HTML.
Il est facile de cliquer sur un bouton de toute taille avec une souris, mais si vous essayez de "cliquer" = "" avec = "" votre = "" doigts = "" sur = "" a = "" petit = "" smartphone = "" display, = "" les petits boutons sont difficiles à gérer. Et cela est particulièrement vrai s’il ya un certain nombre de petits boutons proches les uns des autres. Si vous appuyez sur un bouton tout en essayant d’appuyer sur un autre, vos clients en seront réellement gênés.
Lorsque vous ajoutez un bouton à votre site Web (et pour ceux qui y sont déjà), prenez le temps de les vérifier sur de nombreux appareils mobiles que vous pourrez retrouver parmi vos employés et leurs proches.
Assurez-vous que le choix de chaque bouton est assez simple sur l’ensemble des appareils et, si ce n’est pas le cas, mettez-le à niveau.
5.Choisissez les polices Web correctes
Lire sur un petit écran est d'autant plus difficile si la police est petite. Il est idéal d’utiliser une taille de police de 14 pixels sur vos pages, mais essayez-le à l’avance pour voir si son agrandissement pourrait être meilleur.Il est également préférable de s'en tenir à des polices régulières.
6.Compressez vos images et CSS.
Cependant, ce taux est plus important sur le mobile. Cela signifie qu'une autre mesure fantastique pour rendre votre site compatible avec les appareils mobiles serait de compresser tout ce qui prend beaucoup de place aujourd'hui et ralentit le temps de chargement.Cela inclut probablement vos images haute résolution et votre CSS.
En les compressant, il est possible d’être certain qu’ils se chargent plus rapidement sans nuire à la qualité de ce que les gens voient sur le site Web.
Certains de vos visiteurs mobiles pourraient en fait préférer voir la version de bureau de votre site (en particulier si vous choisissez une version mobile de votre site plutôt qu'un site Web réactif).
Assurez-vous de leur donner un moyen de le faire si c'est leur goût.
Vous souhaitez que vos visiteurs puissent interagir avec votre site de la manière qui leur convient le mieux.
La meilleure chose à faire pour vous assurer que l'expérience mobile de votre site est fantastique est de placer votre site sur votre téléphone et votre tablette et de passer du temps à naviguer pour voir si quelque chose est difficile à voir ou à faire.
Et songez à engager des utilisateurs pour effectuer des tests également (car ils verront tout cela avec de nouveaux yeux).
Mobile Friendly vs Mobile Responsive vs Mobile Optimisé.
Que souhaitez-vous savoir?
La création d’un site mobile préparé figure assez haut dans la liste des demandes des entreprises et des organisations créant un nouveau site.Mais, il y a une multitude de conditions entourant cellulaire. Mobile friendly, portable optimisé, et un terme plus récent: conception réactive.
Quelle est la différence entre ceux-ci?
Pourquoi est-ce important?
À l’automne 2012, Peter Sondergaard, vice-président directeur de Gartner, une entreprise internationale d’enquêtes et de recherches en informatique, a estimé qu’en 2014, la navigation sur Internet à partir d’appareils mobiles serait plus importante que celle des ordinateurs de bureau ou des ordinateurs portables classiques.
Nous avons vu les analyses de site de nos propres clients pour les utilisateurs mobiles passer d'une moyenne de 5 à 8% en 2010 à 16-20% en 2011. Il ne fait absolument aucun doute que le mobile ne peut être ignoré.
Avec des appareils mobiles allant des ordinateurs de poche aux tablettes, il est crucial de savoir comment votre site s'affichera dans le choix des formats.
Lorsque des termes tels que respectueux du cellulaire, optimisé portable et réactif apparaissent dans les entretiens de développement, vous saurez faire la différence.
Même s'il paraîtra plus petit sur un téléphone et ne fonctionnera peut-être pas parfaitement sur une tablette à écran tactile, un site convivial pour mobile sera parfaitement fonctionnel.
S'assurer que votre site est compatible avec les appareils mobiles est crucial.
Comme nous l'avons vu précédemment, la proportion d'utilisateurs mobiles augmente rapidement. Quelles sont les qualités essentielles d'un site convivial pour mobile?
- Numéros de téléphone, adresses physiques ou adresses électroniques à base de texte pouvant activer un appel, des instructions ou un message électronique à partir de votre appareil mobile
- Diaporamas ou rotateurs d'images qui fonctionnent sans assistance Flash (Adobe Flash n'est pas pris en charge par Apple ni aucun autre appareil mobile)
- Petites images pour permettre un chargement rapide sur des connexions cellulaires - ne comptez pas sur une liaison 3G.
Voici quelques exemples de sites conviviaux pour mobiles:
Un site Web optimisé pour les mobiles est un site beaucoup plus avancé. Optimisé pour les mobiles signifie que le site Web se reformatera pour obtenir une liste des appareils de poche ou tablettes.
Des boutons de navigation plus volumineux, un contenu reformaté et des images optimisées sont également visibles si l'utilisateur se trouve sur un iPhone ou un autre appareil.
Pourquoi reformater?
Le reformatage permet au site d’engager facilement un vaste auditoire mobile lorsque des décisions d’achat essentielles sont prises.
Un nombre croissant de clients se tournent vers leur appareil mobile dès le magasin.
Avoir un site développé qui permet à l'utilisateur de naviguer facilement et de participer à partir des petits affichages de l'ordinateur de poche signifie prendre une décision plus rapidement.
Quels sont les composants de mise en forme fantastiques qui vont dans un site Web optimisé pour les mobiles?
- Navigation simplifiée, conviviale avec de grands points de contact, en particulier pour les informations de contact critiques
- Des images réduites qui ne perturbent pas la recherche d'informations critiques telles que des listes de produits ou des articles standardisés
Alors que la conception du site continue d'évoluer, un type de développement fantastique est venu jouer.
La conception réactive permet de développer un site totalement flexible, quel que soit l'appareil. Contrairement à la détection d'un type de navigateur ou d'un appareil particulier, le site s'oriente automatiquement en fonction de la taille de l'écran de l'appareil.
Un mélange de reformatage et de ré-optimisation du site Web dans son ensemble offre une flexibilité raisonnable au-delà de l'imagination.
Découvrez ce cas simplement en redimensionnant la fenêtre de votre navigateur.
Le design réactif, bien que plus coûteux à développer, est l’investissement le plus sage pour la croissance, si vous gérez un groupe de consommateurs ou d’audience occupé sur des appareils mobiles ou si vous devez effectuer des achats en déplacement.
Les achats impulsifs sont évidents, mais cela est tout aussi crucial pour le contenu de base tel que les blogs ou les médias.
Le surf mobile - des tablettes aux smartphones - se développe à un rythme sans précédent. L'enthousiasme du client pour la satisfaction immédiate des besoins en information nécessite la livraison efficace de votre produit (physique ou)
Qu'en est-il des petites entreprises ou des organisations à but non lucratif?
Le cellulaire est-il assez bon?
Une organisation doit-elle parler d'une version optimisée pour les mobiles?
L'investissement dans un site Web à conception réactive apportera-t-il un retour mesurable?
Chaque situation sera différente, mais donnez-vous une idée précise du pourcentage de visiteurs de votre site Web utilisant des appareils mobiles. Google Analytics vous en informera.
Si vos yeux clignotent sur votre smartphone et que vous ne connaissez pas la réponse ... cela pourrait déjà être votre solution.
