Avoir une version mobile de votre site web est un must de nos jours et le seul moyen infaillible de rendre votre projet web accessible depuis des appareils mobiles. Donc, si vous êtes sur le point de lancer un site Web, vous devez tenir compte de ce problème pour en faire un succès. Vous avez déjà un site Web et souhaitez le mettre à jour afin de le rendre compatible avec les mobiles? Les informations fournies ci-dessous vous seront également utiles.
Il existe plusieurs façons de démarrer un site Web mobile aujourd’hui. Le choix de la solution la plus appropriée dépend de plusieurs facteurs tels que le type de site Web, l’âge et les caractéristiques, vos propres objectifs de conception Web, vos compétences et vos exigences. Les solutions les plus répandues sont les suivantes:
- Création de conception réactive, lorsqu’un utilisateur visite le même site Web (qui s’affiche différemment en ce qui concerne les règles spéciales liées au CSS) à partir d’appareils de bureau et mobiles;
- Version de site Web mobile séparée basée sur l’approche mobile uniquement, lorsque vous disposez de deux interfaces qui fonctionnent de manière cohérente et peuvent même être hébergées sur différents domaines / sous-domaines;
- Application mobile à part entière, qui peut être soit un produit autonome avec une architecture prédéfinie développée pour une certaine plate-forme, soit un outil de prévisualisation séparé (comme un navigateur Web) applicable à un seul site Web.
L’une de ces options fonctionne très bien pour la création de sites Web mobiles. C’est au propriétaire de choisir la solution la plus appropriée. Jetons maintenant un coup d’œil aux moyens les plus répandus (et les plus pratiques) de développement de projets mobiles.
Comment créer une version mobile d’un site Web (Créateur de site Web)
Si vous n’avez pas encore de site Web, il est logique de choisir un service fourni avec un support de conception réactive et / ou doté d’un éditeur mobile intégré séparé. Un créateur de site Web fonctionnera mieux à cette fin car ces plates-formes sont principalement créées pour le développement de sites Web adaptés aux mobiles et, par conséquent, elles rendent initialement tous leurs blocs, widgets et éléments d’interface réactifs par défaut. En conséquence, les projets construits avec eux s’affichent parfaitement sur les écrans de bureau et mobiles sans avoir besoin de créer une version mobile séparée. Passons en revue cette option via l’utilisation de Wix website builder.
Wix est le constructeur de sites Web SaaS tout-en-un populaire dans le monde entier qui permet de démarrer / gérer tout type de projet web, qu’il s’agisse d’un blog, d’un portfolio, d’une page de destination, d’un site Web professionnel ou même d’une boutique en ligne. Tous les modèles disponibles dans sa vaste galerie (il y en a plus de 550 ici) ainsi que les pages Web que les utilisateurs créent à partir de zéro sont automatiquement adaptés à la navigation mobile.
Il est possible de configurer séparément une version de site Web de bureau et mobile ici, mais il n’y a pas encore d’option d’aperçu de la tablette. Ce que vous pouvez faire ici, c’est masquer les blocs et les éléments d’interface sélectionnés et modifier / configurer des arrière-plans uniques ici. De plus, Wix dispose de fonctionnalités spécifiques liées au mobile, telles que:
- Affichage du panneau de lancement rapide (vous pouvez ajouter un bouton d’appel téléphonique, des liens vers les réseaux sociaux / messagers, etc. ici);
- Le bouton « Haut »;
- Écran de bienvenue (une sorte d’écran de chargement animé qui permet d’afficher des salutations émotionnelles ou d’introduire une marque / marque avant d’accéder réellement à un site Web);
- Palette de couleurs personnalisée pour le panneau du navigateur Chrome;
- Le service d’optimisation automatisée du contenu et de la mise en page Web pour les appareils mobiles (c’est une option assez pratique pour les pages Web créées par des concepteurs inexpérimentés).
Wix dispose également d’une application mobile qui vous permet de gérer un site Web, si vous recevez un abonnement qui inclut l’accès à des outils professionnels.
Comment créer une version Mobile d’un site Web CMS (WordPress)
Comme tout autre CMS, WordPress ne fait pas attention à un appareil utilisé pour accéder à un site Web. La plate-forme fournit simplement la variante de conception spécifiée dans les paramètres par défaut.
Il est toujours logique de mettre en avant les services des développeurs web ici car WordPress est l’un de ces CMS dont la conception du panneau d’administration peut s’adapter aux appareils mobiles (cela signifie qu’un site Web sera pratique non seulement pour les visiteurs, mais aussi pour son propriétaire, qui pourra le modifier, le configurer et le remplir de contenu à partir d’un appareil mobile). De plus, il existe des applications pour smartphones qui sont applicables non seulement pour un CMS classique, mais pour un cloud WordPress.com plate-forme aussi.
En conséquence, une version de site web mobile s’avère être un mérite d’un modèle lui-même dans 99% des cas. La seule exception concerne les plugins ou scripts spéciaux qui peuvent rediriger les utilisateurs vers un thème mobile distinct (sur la base de la résolution d’écran ou du modèle d’appareil, par exemple).
Comment créer une version de site Web mobile avec WordPress à partir de zéro
Si vous envisagez simplement de lancer un site Web, le problème n’est pas si aigu – il vous suffit de choisir le bon modèle. L’assortiment de thèmes responsive est plus que suffisant même dans le catalogue CMS officiel. Vous devez vous assurer que le design sélectionné adhère absolument aux fonctions déclarées. Il en va de même pour les plates-formes alternatives comme ThemeForest ou TemplateMonster.
Si la vitesse de chargement et les paramètres d’Insights de vitesse de page élevée comptent vraiment pour vous, il existe des modèles spéciaux qui garantissent jusqu’à 100 points dans les tests de profil comme le thème Neve, par exemple. Cependant, les conceptions qui ne peuvent pas s’adapter aux écrans des smartphones ne sont pas très répandues de nos jours.
Comment remplacer un modèle WordPress par un modèle Réactif
Si vous possédez déjà un site Web depuis assez longtemps et que son modèle est obsolète étant initialement créé pour correspondre aux formats d’écran à grande échelle, vous devriez envisager la possibilité de remplacer un ancien design de site Web par un nouveau. Une telle approche présente plusieurs avantages, à savoir:
- La version de bureau et de site Web mobile aura le même style;
- La nécessité de gérer deux types d’interface sera éliminée;
- Vous n’aurez pas à écrire de fonctions et d’algorithmes complexes pour définir la résolution d’écran et le type d’appareil qu’un utilisateur doit rediriger vers le design séparé;
- Les thèmes commerciaux sont souvent accompagnés d’un support technique et, ainsi, vous pourrez obtenir des réponses à toutes vos questions et configurer un nouveau thème pas pire que le précédent.
Les inconvénients sont également disponibles ici. Les modèles sont souvent livrés avec des codes écrits d’analyse, de compteurs, de blocs publicitaires, etc. Certains d’entre eux introduisent même des types de matériaux distincts, ce qui déclenche la nécessité de transférer tous ces éléments vers un nouveau modèle. Toutes les erreurs potentielles peuvent avoir un impact négatif sur les résultats du moteur de recherche. Si vous avez des utilisateurs réguliers, ils peuvent ne pas aimer l’idée et peuvent même refuser de visiter votre site Web. Ainsi, vous devez analyser en profondeur le commutateur de conception à venir pour considérer toutes les nuances possibles.
Comment rendre un modèle obsolète réactif
L’idée de rendre un modèle obsolète réactif n’est pas aussi compliquée que cela puisse paraître au départ. Cependant, cela n’a pas vraiment de sens de l’essayer, si vous manquez de compétences de niche ou au moins de bases de la conception Web. Quoi qu’il en soit, il y a toujours une possibilité d’embaucher un concepteur Web pour vous aider avec cela.
L’idée principale est d’ajouter des requêtes multimédia CSS, en fonction desquelles les styles en cascade seront spécialement ajoutés pour les résolutions d’écran requises. Jetez un coup d’œil à l’exemple maintenant:
@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}
Par exemple, si votre grille principale ressemblait à ceci:
Il aura l’aspect suivant en HTML:
<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>
Les styles de ces boîtes sont placés dans des fichiers de modèle CSS avec le point debout au début signifiant qu’il s’agit de la classe CSS:
.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}
Si nous remplaçons la largeur fixe ou relative par 100% pour la résolution d’écran suggérée, la grille se présente comme suit:
Pour atteindre un tel résultat, il suffit d’ajouter la requête média aux feuilles de style (l’exemple fourni ci-dessous s’applique à tous les appareils dont la largeur d’écran est de 1024 pixels et moins):
@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}
Notez que les commentaires fournis entre parenthèses sont mentionnés exclusivement à titre d’exemple, ils ne peuvent pas être transférés au code CSS réel.
Quels pièges peuvent émerger avec une telle réalisation de conception réactive ? Malheureusement, ils sont nombreux:
- La mise en page Web entière peut être violée car non seulement les blocs clés disponibles sur une page peuvent avoir une largeur fixe. Il peut également s’agir d’images, de blocs d’actualités sur une page d’accueil / dans une catégorie, de blocs de description de l’auteur et d’autres éléments. Il est impossible de les identifier tous à la fois. Chacun d’eux devra être édité dès qu’il sera identifié.
- Le volume de la page web ne changera pas, ce qui aura un impact négatif sur la vitesse de téléchargement avec une connexion Internet lente (aucune optimisation ne sera possible dans de telles conditions).
- Selon les recommandations du moteur de recherche, les polices sur les appareils mobiles doivent être facilement lisibles sans zoom arrière. Cela déclenchera la nécessité de redéfinir toutes les tailles de police pour les en-têtes, les textes de corps, les citations, les listes (numérotées et non numérotées), etc.
- Un en-tête et un menu complexe doivent être complètement refaits. Il est logique de ne laisser qu’un petit logo de site Web, une icône de recherche (si vous avez cette option) et une icône de profil (si un système d’autorisation est utilisé). Un menu de bureau devrait mieux être caché et remplacé par une icône « sandwich » (icône de menu). Dans la majorité des modèles réactifs populaires, cela est implémenté par deux menus parallèles: le premier est destiné aux écrans de bureau et il est affiché sur PC uniquement, tandis que le second est destiné aux appareils mobiles uniquement (il est affiché sur la base des mêmes requêtes multimédias sur les appareils mobiles uniquement).
- Si la structure des boîtes principales diffère, par exemple, la barre latérale est affichée à gauche mais pas à droite, tandis que tous les widgets seront affichés devant le contenu principal, bien qu’il soit plus logique de les placer plus bas.
- En dehors des fichiers CSS, les styles de site Web peuvent être remplacés par des scripts JS, il sera plus difficile de les trouver et de les modifier.
Ce ne sont là que quelques-uns des pièges potentiels. Ainsi, il est logique d’embaucher un expert en conception Web pour compléter la tâche.
Les avantages des requêtes multimédia permettent de supprimer le code incorrect à tout moment. Ces styles ne sont pas affichés sur le site Web principal.
Comment ajouter une version de site Web Responsive avec des plugins
Certains CMS utilisent leurs propres jeux d’extensions, tandis que d’autres ne les ont pas du tout. WordPress coed avec les plugins les plus remarquables pour la création de sites web réactifs, à savoir:
- Jetpack – la fonctionnalité de création de version mobile automatisée a été abandonnée depuis mars 2020;
- WPtouch – est disponible en versions gratuites et payantes, l’extension a ses propres plugins et thèmes comme le plugin d’organisation de cache séparé, le plugin de création d’applications Web, le plugin d’optimisation d’image, le plugin de création d’AMP, etc. Le processus de passage du thème de bureau au thème mobile avec WPtouch est terminé sans modifier les URL des pages Web, ce qui compte beaucoup pour le référencement;
- WP Mobile Menu – menu réactif pour les appareils mobiles (il vous sera utile si vous devez remplacer un menu volumineux et complexe de la version du site Web de bureau par un menu réactif et compact pour les appareils mobiles);
- WP Mobile Detect – le plugin définit initialement qu’une personne utilise un appareil mobile et fournit le résultat comme une valeur vraie / fausse. Cela le rend applicable pour la mise en œuvre de l’option de commutateur de modèle ou pour l’affichage de certains blocs d’interface;
- WP Mobile Edition – le plugin peut convertir des sites Web WordPress en applications Web complètes. Les utilisateurs peuvent ajouter une icône de site Web à leur ordinateur de bureau smartphone / tablette pour l’utiliser au format plein écran (sans cadres ni onglets de navigateur);
- Mobile Smart – un plugin identifie que l’appareil fait référence à la classe mobile, puis bascule les thèmes vers l’autre, compatible avec les appareils mobiles. Une version Pro est livrée avec un support intégré des menus mobiles, des widgets spéciaux, une option de gestion des plugins (un ensemble séparé peut être fourni pour les appareils mobiles), un commutateur de domaine (pour la mise en œuvre du travail correct de deux versions de sites Web indépendantes), etc.
Les développeurs Web ont veillé à ce que les extensions ne soient pas réclamées, car de nombreux propriétaires de sites Web ont décidé de passer à des versions de modèles réactifs. Ainsi, la majorité de ces plugins n’ont pas été mis à jour depuis assez longtemps, ce qui peut entraîner l’incompatibilité avec la version actuelle de la plateforme. La seule exception est WPtouch.
Travailler avec chaque plugin aura ses propres particularités. Certains d’entre eux proposent des modèles mobiles prêts à l’emploi, tandis que d’autres recommandent de télécharger des extensions tierces ou de créer leurs propres extensions.
Si vous préférez travailler avec une version de site Web mobile sur le sous-domaine / adresse alternative, voici les nuances dont vous devez être conscient:
- Ce sont des sites Web différents pour les moteurs de recherche et c’est vraiment dommage que leur contenu ne soit pas unique;
- Pour que les moteurs de recherche « collent » l’URL et comprennent qu’il s’agit du même site Web, tous les attributs de lien doivent être correctement organisés:
-
- Lien d’attribut rerel= »alternate » href= »URL – page mobile » – pour les versions de bureau;
- Lien d’attribut linkrel= »canonical » href= »URL – pages Web de bureau » – pour les modèles mobiles.
- Si le contenu de différentes versions de pages Web diffère, vous courez le risque d’obtenir des sanctions pour dissimulation (pour le remplacement du contenu).
Comment créer une version mobile d’un site Web HTML
Dans la mesure où les sites Web HTML n’ont pas de fonctions dynamiques, vous ne pourrez pas analyser la résolution d’écran d’un appareil et passer d’un modèle de bureau au thème mobile en fonction du résultat. Tout ce dont vous avez besoin est de repenser complètement la grille de mise en page et les styles des éléments problématiques.
Nous avons déjà examiné comment procéder – cela se fait via des requêtes multimédias. Les dispositions les plus difficiles à adapter sont celles avec une largeur et une position fixes des éléments.
Rien ne fonctionnera sans compétences de niche spécialisées et immersion de code CSS / HTML. Il est logique d’embaucher un professionnel de la conception Web dès le début ou de changer la conception en une autre que vous pouvez acheter ou commander, ou simplement de développer une toute nouvelle page Web à partir de zéro, par exemple, en utilisant Mobirise offline website builder, par exemple. Enfin, il est peut-être grand temps de passer à l’infrastructure cloud et de choisir l’un des constructeurs de sites Web en ligne.
Sites séparés pour Mobile et Ordinateur de bureau ou Un Seul Site Web: Quel Est Le Meilleur?
Comme mentionné ci-dessus, avoir un site Web mobile est un must pour tout propriétaire d’entreprise. C’est un moyen infaillible d’assurer une présentation commerciale de qualité sur le Web, de générer du trafic et de garantir une expérience utilisateur inégalée. La question est la suivante: est-il logique de créer deux versions de site Web distinctes pour les écrans mobiles et de bureau ou de créer un site Web réactif qui s’affichera parfaitement sur les deux types d’appareils?
En général, démarrer un site Web réactif est une solution plus efficace et pratique. Il élimine la nécessité de créer deux sites Web différents avec divers domaines / sous-domaines, URL et structure interne. Ces sites confondent souvent les visiteurs et peuvent déclencher des problèmes en matière d’optimisation du référencement, de marketing Internet et d’autres méthodes de promotion connexes. Au lieu de cela, vous obtenez un projet qui s’affichera également bien sur les écrans de bureau et mobiles.
Combien Coûte une Version Mobile d’un Site Web?
Le coût d’une version mobile d’un site Web dépend généralement de la plate-forme avec laquelle vous le démarrez. Si vous choisissez un créateur de site Web en ligne comme Wix, il peut être absolument gratuit car le système vous permet de créer des sites Web prêts pour les mobiles par défaut. Cependant, le plan Wix gratuit ne vous permet pas de connecter votre propre nom de domaine, ce qui rendra impossible de tirer le meilleur parti des performances de votre projet.
Dans la mesure où Wix a une politique de prix assez distinctive et polyvalente, vous pouvez choisir l’un de ses plans pour lancer un site Web. Il suffit de considérer vos objectifs de conception Web, le type de projet et la spécialisation ainsi que le budget que vous êtes prêt à y investir, tout en choisissant l’abonnement le plus préférable. Chaque plan Wix est livré avec un large éventail de caractéristiques spéciales et de conditions qui affectent le coût final. L’abonnement au site Web le moins cher vous coûtera 13/ / mois, tandis que le prix du plan de base Business le plus abordable commence à 23 $ / mois.
Avez-vous décidé d’utiliser WordPress pour la création de sites web réactifs? Ensuite, le coût du projet dépendra éventuellement du prix des plugins que vous choisirez. Les extensions WordPress sont généralement positionnées comme gratuites, mais une partie de leurs fonctionnalités devient toujours disponible après la mise à niveau vers la version Pro. Par exemple, le coût de WPtouch Pro variera de 79 $ à 359 per par an. C’est exactement pourquoi, il semble raisonnable de passer à un modèle réactif prêt à l’emploi. Ces thèmes sont achetés une fois, alors que leur coût représente environ 40-80 $. Dans le cas où vous décidez toujours d’embaucher un développeur Web professionnel pour repenser un thème obsolète pour vous, le coût sera discuté individuellement en fonction de la complexité du projet.
Bottom Line
Ce n’est un secret pour personne que tout site Web devrait avoir une version mobile pour rester en demande auprès du public cible aujourd’hui. Il y a presque des gens qui n’utilisent pas leurs appareils mobiles pour naviguer sur le Web, à la recherche des services et des produits dont ils ont besoin. Ainsi, le processus d’optimisation mobile de votre site Web dépendra éventuellement de la plate-forme sélectionnée.
Si vous envisagez simplement de lancer un site Web, il est logique de privilégier l’un des créateurs de sites Web en ligne les plus populaires. Wix fonctionnera mieux à cette fin. Dans le cas où vous exécutez déjà un site Web alimenté par le CMS comme WordPress, il est préférable de le remplacer par un thème réactif. Les plugins qui offrent un support mobile peuvent cependant être assez coûteux, tandis qu’une refonte complète du modèle sera un véritable défi, surtout si vous avez l’intention de faire face à la tâche de manière indépendante.
De toute façon, cela n’a aucun sens de créer une version mobile séparée de votre site Web. Vous rencontrerez des problèmes liés au développement du projet et à son soutien ultérieur. Une solution beaucoup plus simple et raisonnable consiste à rendre votre site Web réactif dès le départ.