Un site Web pour les ordinateurs de bureau et un pour mobile dans le même domaine
J'ai deux sites Web, l'un destiné aux ordinateurs de bureau et l'autre aux mobiles et tablettes.
Je redirige les utilisateurs avec un script JS. Je sais que la redirection n'est pas une bonne pratique pour Google. Quelle est la meilleure façon de faire sauf pour le responsive design? Le site principal est construit sur Hype et il est plein d’animation, il ne peut donc pas y avoir qu'un seul site réactif.
C'est ce qu'on appelle le développement Web adaptatif. Vous devez détecter l'agent utilisateur et servir un balisage différent en fonction du périphérique.
En PHP, vous pouvez utiliser $ _SERVER ['HTTP_USER_AGENT'].
Vous voudrez inclure ce code pour que Google sache ce que vous faites:
<?php
Header('Vary: User-Agent');
?>
Voici quelques informations supplémentaires: https://developers.google.com/webmasters/mobile-sites/mobile-seo/dynamic-serving
Vous pouvez également créer une version mobile du site sur un sous-domaine.
Sur la page du bureau ( http://www.example.com/page-1 ), ajoutez:
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1">
et sur la page mobile ( http://m.example.com/page-1 ), l'annotation requise doit être:
<link rel="canonical" href="http://www.example.com/page-1">
Le site principal est construit sur Hype et il est plein d’animation, il ne peut donc pas y avoir qu'un seul site réactif.
Cela ne veut pas du tout vrai.
Hype a des fonctionnalités de conception réactives. Vous pouvez donc mettre à jour votre animation de sorte qu'elle s'exécute dans les deux sens sur les ordinateurs de bureau et sur les mobiles tout en étant affichée sur la même page du même site Web. Hype lui-même est littéralement un outil de conception réactif. C'est la meilleure approche.
Mais si vous ne voulez pas faire cela, vous configurez chaque page pour mobile, puis réécrivez votre code JavaScript afin qu'au lieu de détecter les bureaux et de les rediriger vers une page entièrement différente, vous détectiez des bureaux et remplaciez le contenu de la page actuelle par Hype. animation dans la même page à la même URL.
Un élément clé à comprendre est qu'une URL est la page. Une page, une URL, une entrée dans la base de données Google, un signet dans chaque navigateur et l’URL ne change jamais et il ne disparaît jamais d’Internet. C’est littéralement ainsi que fonctionne l’architecture de WorldWideWeb. Le site peut être fermé, le contenu supprimé, mais chaque URL que vous créez doit toujours être présente, avertissant au moins le lecteur que le site est fermé et que le contenu est supprimé.
Donc, fondamentalement, écrire votre carte de site dans une liste est la première et la plus importante tâche lors de la création d'un document Web:
/about
/bar
/foo
/privacy
/products
/terms
… Et vous y consacrez beaucoup de temps et d’efforts, car ces URL ne disparaîtront jamais, une fois que vous les aurez créées. (Vous pouvez choisir de les supprimer plus tard, mais vous ne pouvez pas les supprimer de Google, des signets de votre lecteur et d'autres emplacements.)
Ensuite, en second lieu, vous mettez tout ce qui concerne about/about et tout le contenu barre dans/bar, et ainsi de suite, dans une colonne unique qui fonctionne sur tous les écrans, du plus petit portable au plus gros ordinateur ou téléviseur.
Ensuite, vous utilisez des techniques de conception réactives pour améliorer le site Web sur des écrans plus grands. Principalement en refondant la colonne unique en 2 ou 3 colonnes, en plaçant des arrière-plans plus grands pour les ordinateurs de bureau, mais cela inclut également des animations telles que les animations Hype que seuls les grands écrans verront. Mais vous ne jouez pas avec les URL. Tous les lecteurs verront votre page à propos de/à propos de, mais celle-ci sera différente sur un iPhone 5 par rapport à un MacBook Pro. Si vous avez une page “/ about2” à laquelle vous envoyez des bureaux, la page est totalement différente. Google ne verra peut-être même pas cette page, mais s’ils le verront, ils la considéreront comme une page différente. L'URL est l'identifiant unique qui nous permet de distinguer une page de l'autre. Si vous divisez ce que vous pensez être une page en deux URL, vous avez créé deux pages. Il existe des moyens compliqués de contourner ce problème dans certains cas, mais ils ne sont pas parfaits et ils sont plus compliqués que de simplement faire les choses correctement.
Si vous débutez dans le responsive design, jetez un œil à Skeleton , un CSS standard qui vous permettra de transformer votre site mobile en site web sensible en environ 10 minutes. Il est facile d'attribuer n'importe quel élément de votre page à une grille, et cette grille se réduit lorsque l'écran devient plus petit.
Le design réactif ne va pas disparaître. En fait, il va falloir devenir plus réactif. Les montres auront leur propre 4G et vous voudrez peut-être afficher une vue très minimale de vos pages pour regarder les utilisateurs avec votre logo en arrière-plan et 2 ou 3 liens importants. Si votre site Web est réactif, il s’agit d’un codage CSS de 30 à 60 minutes. Vous voudrez peut-être prendre en charge certains iMac 4KTV et 5K, ce qui signifie générer des images très haute résolution et ensuite 30 à 60 minutes de codage CSS. Un site responsive fait tout ce qui est difficile en CSS, où il est facile.