Comment convertir un site web pour un navigateur mobile

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

Plates-formes communes

Depuis l`avènement de l`iPhone, les développeurs derrière les plates-formes de sites Web comme WordPress, Joomla et Drupal ont intégré dans le design mobile. Drupal, par exemple est livré avec des thèmes adaptés aux mobiles dans son installation d`origine. Chacune de ces plates-formes ont des thèmes mobiles qui sont conçus pour botter dès que votre site Web détecte une tentative d`accès par un navigateur mobile. D`autres thèmes sont déjà mobiles convivial et répondront à toucher des gestes comme ils répondent aux clics de souris, sans modifier de manière significative la conception ou la mise en page de votre site Web sur différents appareils.

L`utilisation de CSS et HTML

Pour les sites Web HTML, utilisez une feuille de style en cascade, ou CSS, fichier pour présenter la version mobile de vos pages quand ils sont accessibles par un navigateur mobile. Bien qu`il soit possible de coder CSS pour détecter les périphériques spécifiques, une approche plus commune est de spécifier des mises en page de la taille de l`écran en pixels. Si vous le souhaitez, vous pouvez avoir un style pour les grands écrans, un pour les tablettes et un pour les téléphones mobiles. L`utilisation de CSS a l`avantage de n`avoir à écrire le code une fois - dans le fichier CSS. Chacune de vos pages ont besoin alors une seule ligne de code pour dessiner ses styles de CSS.

Touchez l`écran Fonctions interactives

Si vous avez configuré une page Web pour une expérience interactive pour les visiteurs en utilisant javascript ou HTML5, il est vital que vous savez comment votre site Web répondra à toucher des événements, non seulement sur un navigateur mobile, mais sur un nombre croissant de postes de travail écran tactile trop . Dans la plupart des cas, vous devriez envisager d`ajouter des événements tactiles et des 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é lorsqu`un utilisateur touche, puis lè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 en faisant glisser pour faire défiler, en utilisant "preventDefault" événements.

Test et vérification

La meilleure façon de tester votre nouveau site Web mobile est d`utiliser votre propre appareil mobile. Examinez le style et la mise en page, naviguez avec des touches et des gestes, et regardez attentivement vos images pour vous assurer qu`ils sont nettes. 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. Clique le "Paramètres" icône, puis cliquez sur le "Émulation" onglet pour sélectionner un périphérique comme un Google Nexus ou iPad d`Apple.

Les références

• lien Unimity Solutions: Comprendre le Drupal 8 Mobile Initiative
• lien Extensions Joomla: Mobile Template
• lien WordPress Plugins: Tous Mobile Theme Switcher
• lien Corruptible Press: Le CSS 5-Minute Makeover mobile
• lien Smashing Magazine: Simple images réactives avec des images d`arrière-plan CSS
• lien Apple Safari Developer: Guide de contenu Web Safari
• lien Chrome Développeur: Emulation mobile
• lien CNN: Internet Applications mobiles Dépasser PC Utilisation dans le document US
• lien BrightEdge: 2014 Rapport mobile Partager

A propos de l`auteur

Un auteur publié et conférencier professionnel, David Weedmark a conseillé aux entreprises et aux gouvernements sur la technologie, les médias et le marketing depuis plus de 20 ans. Il a enseigné l`informatique au Collège Algonquin, a commencé trois entreprises prospères, et a écrit des centaines d`articles pour les journaux et magazines au Canada et aux États-Unis.