Comment convertir un site Web pour un navigateur mobile

Les appareils mobiles, comme les smartphones et les tablettes, représentent plus de la moitié de tout le trafic Internet. Pourtant, selon une étude effectuée par BrightEdge en 2014, plus d'un quart des personnes visitent les sites Web ne sont pas configurés correctement pour ces appareils - leur coûte en moyenne une perte de 68 pour cent dans le trafic. Modifier correctement votre propre site web pour les navigateurs mobiles exige planification et des tests. Le codage lui-même, cependant, est généralement pas très difficile, en particulier si vous êtes déjà familier avec CSS. Si vous utilisez une plate-forme comme WordPress, vous ne devez pas connaître le code du tout.


Sommaire











Plates-formes communes

  • Depuis l'avènement de l'iPhone, les développeurs derrière les plates-formes du site Web comme WordPress, Joomla et Drupal ont intégré la conception mobile. Drupal, vient par exemple avec des thèmes mobile-friendly dans son installation d'origine. Chacune de ces plates-formes mobiles ont des thèmes qui sont conçus pour botter dès que votre site Web détecte il est accessible par un navigateur mobile. Autres thèmes sont déjà mobile-friendly et répondront à toucher des gestes comme ils répondent aux clics de souris, sans modifier significativement la conception ou la mise en page de votre site web à travers différents dispositifs.

L'utilisation de CSS et HTML

  • Pour les sites web HTML, utilisez une feuille de style en cascade, ou CSS, fichier de présenter la version mobile de vos pages quand ils sont accessibles par un navigateur mobile. Alors qu'il est possible de coder CSS pour détecter les périphériques spécifiques, une approche plus commune est de spécifier mises basée sur la taille de l'écran en pixels. Si vous le souhaitez, vous pouvez avoir un style pour les grands écrans, l'un pour les tablettes et un pour les téléphones mobiles. L'utilisation de CSS a l'avantage supplémentaire d'avoir seulement à écrire le code une seule fois - dans le fichier CSS. Chacune de vos pages alors besoin que d'une seule ligne de code pour tirer ses styles de CSS.

Touchez Caractéristiques écran interactif

  • Si vous avez configuré une page Web d'être une expérience interactive pour les visiteurs utilisant javascript ou HTML5, il est essentiel que vous savez comment votre site sera répondre au toucher événements, non seulement sur un navigateur mobile, mais sur un nombre croissant d'écran tactile desktops trop . Dans la plupart des cas, vous devriez envisager d'ajouter les événements tactiles et les gestes à votre code de conception. Dans JQuery, par exemple, l'équivalent d'un clic de souris sur un écran tactile est un événement du robinet, déclenchée lorsqu'un utilisateur touche et puis soulève un doigt de l'écran. En fonction de votre page, vous pouvez également désactiver les paramètres par défaut sur le navigateur mobile, comme le pincement pour zoomer ou faire glisser pour faire défiler, en utilisant "preventDefault" événements.

Essai et de vérification

  • La meilleure façon de tester votre nouveau site Web mobile est d'utiliser votre propre appareil mobile. Examiner la mise en page de style et à la page, naviguer avec des touches et des gestes, et examiner de près vos images pour veiller à ce qu'ils regardent croustillant. Vous pouvez également utiliser le navigateur Web de votre ordinateur pour émuler un écran mobile. Sur Google Chrome, par exemple, appuyez sur "F12" pour ouvrir la console du développeur. Cliquez sur le "Paramètres" icône, puis cliquez sur le "Émulation" onglet pour sélectionner un périphérique comme un Nexus Google ou Apple iPad.

» » » » Comment convertir un site Web pour un navigateur mobile