Quelle est l'importance de la conception de sites Web réactifs?

J'ai entendu récemment une variété d'opinions concernant les avantages et les inconvénients de l'utilisation de la conception de sites Web réactifs et je me demandais s'il était nécessaire pour les petites entreprises qui ciblent de petites zones géographiques de mettre en œuvre une conception de sites Web adaptative.

Voici quelques sous-questions que j'ai à ce sujet:

1. Est-il préférable d'utiliser une conception Web réactive plutôt que d'utiliser un code distinct pour différentes dimensions / appareils?

2. Peut-il potentiellement affecter le référencement (positivement ou négativement)?

3. Quels sont les principaux problèmes que je pourrais rencontrer lors de l'optimisation d'un site Web pour une entreprise utilisant cette méthode de conception?

L'utilisation d'Internet mobile devrait largement dépasser l'utilisation des ordinateurs de bureau dans quelques années, donc une sorte d'optimisation mobile devrait être une considération sérieuse pour toute entreprise.

À bien des égards, cela est particulièrement vrai pour les petites entreprises localisées: assez prévisible, de nombreuses recherches mobiles ont tendance à se concentrer sur la recherche de choses à proximité - pensez à trouver un magasin, un restaurant, etc.

Depuis mai 2012, la conception adaptative est la meilleure pratique recommandée par Google pour la conception de smartphones. L'un des principaux avantages est que vous gérez un seul site: c'est un site à concevoir, construire, maintenir et promouvoir. C'est efficace.

D'un point de vue SEO, l'hébergement d'un site mobile séparé, egmexample.com, signifie que vous devez optimiser 2 sites séparés et répartir la valeur de votre entreprise (PageRank, autorité, etc.) sur les deux sites. Bien que vous puissiez éviter cela en diffusant du contenu sur les mêmes URL via la détection d'agent utilisateur, cela ne résout pas la duplication des efforts (il s'agit toujours de 2 sites séparés), et cela introduit également des défis plus techniques, par exemple, assurer votre agent utilisateur la détection fonctionne et est tenue à jour, que les moteurs de recherche indexent le bon contenu dans le bon index, etc.

En tout, le design réactif est une solution élégante.

Pour répondre à vos autres questions:

1. Abordé ci-dessus, mais pensez également à la vitesse à laquelle le marché mobile se développe. Plus votre solution mobile est flexible, moins vous aurez besoin de faire pour suivre.

2. Cela dépend de ce que vous comparez, mais comme mentionné ci-dessus, l'une ou l'autre des 2 autres options majeures a des défis SEO importants qui s'y rattachent.

   Il y a eu une certaine inquiétude au sujet de la "dissimulation", c'est-à-dire de cacher le contenu des moteurs de recherche, qui est inhérente à la conception réactive dans la plupart des implémentations. Cependant, même si, à ma connaissance, aucun des principaux moteurs de recherche n'y a répondu explicitement, le fait que Google la considère comme une "meilleure pratique" pourrait être considéré comme une indication que Google est capable de discerner entre la dissimulation légitime de contenu pour pour des raisons d'optimisation de l'appareil et autres, moins légitimes, pour des raisons de manipulation

3. Je pense que le principal défi consiste à déterminer quel contenu afficher aux utilisateurs mobiles. Selon votre site, ce n'est peut-être pas un problème, mais dans de nombreux cas, c'est le cas. La considération clé ici est de comprendre ce que vos visiteurs mobiles essaient de faire. Par exemple, quelqu'un sur un iPhone veut probablement des informations ou des transactions rapides et faciles. La même personne sur un iPad est plus susceptible d'être intéressée par une expérience de navigation plus tranquille.

L'idée derrière est de donner une expérience de navigation optimale à votre visiteur quel que soit l'appareil. Comme le nombre de vos visiteurs qui utilisent un appareil mobile augmentera probablement au lieu de diminuer, il est tout à fait logique d'emprunter cette voie.

Il existe un certain nombre de thèmes abordables (pour ne pas dire bon marché) pour les blogs et les CMS que vous pouvez immédiatement essayer et voir si vous aimez ce que vous obtenez (vérifiez avec tous vos ou certains de vos appareils clients).

1. Tant que vous avez une raison particulière, essayez toujours de vous concentrer sur une base de code. Une raison pourrait être que vous souhaitez offrir un site Web spécialisé comme une «application Web».

2. SEO: non. Aussi bon et mauvais qu'une mise en page non réactive.

3. Vous devez faire un peu plus de planification au début. Quel contenu doit être affiché sur le plus petit appareil, comment doit être l'ordre du contenu? Des choses comme ça. Ou: Mon contenu est-il beau dans chacune de mes dimensions prises en charge? Vous souhaiterez peut-être également optimiser la taille de vos images pour chacune des dimensions afin de fournir non seulement des images à l'échelle du navigateur, mais également des images redimensionnées. Si votre CMS ne prend pas en charge cela, c'est un peu plus de travail.

Si vous prévoyez d'inclure des annonces provenant d'une source externe, vous devez également vérifier si les formats donnés fonctionnent bien ensemble.

Modifier:

Permettez-moi d'ajouter que si vous disposez de données d'analyse Web historiques (par exemple, Google Analytics), vous pouvez facilement rechercher le nombre d'utilisateurs mobiles par rapport aux utilisateurs non mobiles, identifier les appareils utilisés (jusqu'au matériel réel) et examiner les résolutions d'écran. ("Est-ce qu'ils voient réellement mes pages ou juste une partie de celles-ci et doivent faire défiler?").

Deuxième montage:

Selon cet article "Sites Web mobiles vs conception réactive: quelle est la bonne solution pour votre entreprise?" "Sur le blog de Google Analytics, un site conçu avec le Responsive Design a à l'esprit ces avantages:

• Facilité de mise à jour
• Optimisé pour les moteurs de recherche
• Ajout de codes de conversion et de redirection

Les avantages du site mobile distinct:

• Concevoir pour les besoins des utilisateurs mobiles
• Création de site Quicke
• Excellentes options de bricolage

L'article "Conception réactive - exploiter la puissance des requêtes médiatiques" sur le blog officiel de Google Webmaster Central donne une belle introduction sur la façon dont la "conception réactive" est réellement mise en œuvre.

"Construire des sites Web optimisés pour les mobiles" sur Google Developers déclare:

"Google recommande aux webmasters de suivre les meilleures pratiques de l'industrie en matière de conception de sites Web réactifs, à savoir servir le même HTML pour tous les appareils [...]"

Je pense qu'il est important de réaliser d'abord que le "responsive design" (RD) est un terme à la mode (si je mets Largeur: 100% à un élément, j'ai un RD juste là, pour exagérer) et donc son importance semble plus importante qu'il ne est vraiment comme à la fin c'est conditionnel comme tout le reste.

Est-il nécessaire d'implémenter RD?

Pour répondre à cela, vous devrez énoncer quelques définitions:

1. Qui est votre public cible
2. Quel type d'audience est votre cible
3. Quel est le but de votre site Web
4. D'où votre site Web sera-t-il accessible (dans la plupart des cas)
5. etc.

Ceci est très similaire à l'analyse marketing. Il s'agit d'avoir le bon support pour le bon public (peut-être que votre public est assis devant un ordinateur presque toute la journée, ou qu'il est en déplacement avec le dernier iPhone, etc.). Est-ce qu'ils font les deux, alors bien sûr, RD est central.

Est-il préférable d'utiliser une conception Web réactive plutôt que d'utiliser un code distinct pour différentes dimensions / appareils?

Cela dépend de la complexité de l'interface utilisateur et de la façon dont vous allez l'utiliser. Une page typique peut dans la plupart des cas être rendue en utilisant différents ensembles de CSS pour les différents affichages. Cependant, les interfaces utilisateur plus complexes ou sophistiquées peuvent nécessiter des approches différentes, il peut donc être judicieux de présenter une structure de page et une stratégie différentes en fonction de l'appareil utilisé (Google maps par exemple, interface multi-touch ..).

Peut-il affecter le référencement (positivement ou négativement)?

Le référencement est plus une question de contenu que de design. Seul Google sait s'ils pondèrent la conception, mais la conception / mise en page, mais en général, si votre contenu est de haute qualité, cela sera plus pondéré que la conception réelle.

Quels sont les principaux problèmes que je pourrais rencontrer lors de l'optimisation d'un site Web pour une entreprise utilisant cette méthode de conception?

Concevoir pour le mauvais public. Analysez votre cible et fournissez des données techniques à jour si possible (c.-à-d. Journaux des visiteurs fournissant des informations sur la plate-forme, etc.)

Les nouvelles technologies sont toujours risquées, réf. le problème HTML5 pour Facebook. Il n'est pas complètement mature à ce stade et invite à divers problèmes similaires à ceux d'IE6 par rapport aux problèmes de normes.

Restez aussi simple que possible. Les pages Web fantaisistes ne sont utiles que très peu de temps jusqu'à ce que l'utilisateur doive réellement utiliser votre page. S'il doit attendre 1/2 seconde pour qu'un fondu se termine à chaque clic qu'il fait, l'utilisateur sera perdu assez rapidement. Des choses comme ça.

J'ai survolé les autres réponses, pardonnez-moi si je suis redondant ... Je fais du design réactif tous les jours pendant 8 + heures par jour à ce stade ... Mes clients le veulent parce qu'ils veulent que les utilisateurs mobiles aient un 'unique' l'expérience, mes employeurs le veulent, car il est vanté par Google comme la méthode préférée et rationalise bien. (et si Google se vante d'être le moyen de faire quelque chose qui fonctionne le mieux pour le référencement)

Est-il préférable d'utiliser une conception Web réactive plutôt que d'utiliser un code distinct pour différentes dimensions / appareils?

Je dirais que c'est mieux, oui. La plupart de votre code est le même code, ce qui entraîne moins de travail que d'écrire une application iPhone, une application droïde, une application iPad, une application Kindle ... vous obtenez le point.

Peut-il potentiellement affecter le référencement (positivement ou négativement)?

D'un point de vue design, je pense que c'est neutre; cependant, d'un point de vue statistique, mes conceptions réactives fonctionnent très bien. Les clients les aiment et les clients aiment les utiliser.

Quels sont les principaux problèmes que je pourrais rencontrer lors de l'optimisation d'un site Web pour une entreprise utilisant cette méthode de conception?

C'est un peu difficile à faire au début ... vous devez faire des recherches sur les requêtes multimédias et avoir de préférence des appareils mobiles pour tester. Gardez à l'esprit que le redimensionnement de votre fenêtre sur votre bureau est proche, mais la façon dont les appareils mobiles rendent Internet est parfois différente de ce que vous attendez. Par exemple, j'ai conçu un site réactif où j'ai utilisé une répétition bg pour l'en-tête et sur le bureau, il s'étend sur toute la zone visible; cependant, sur iOS, il coupe court pour une raison quelconque ...

Je recommande d'apprendre et d'essayer une conception réactive. consultez ce site pour un démarrage rapide : http://html5boilerplate.com

Pour répondre à la question dans le titre: c'est important et il vous incomberait d'en être conscient et de savoir comment le concevoir, et si vous décidez de ne pas l'utiliser, vous devez être prêt à défendre cette position car votre client peut être défini d'avoir cette conception. D'après mon expérience, les clients et les clients aiment la conception réactive. Des clients satisfaits et des clients satisfaits sont une raison suffisante pour que je poursuive :)

La conception de sites Web réactifs est essentielle - si vous créez un nouveau site, vous DEVEZ rendre votre site réactif. Déjà, 50% du trafic provient des appareils mobiles et des tablettes et non seulement cela va augmenter, mais ce sera la forme clairement dominante d'utilisation d'Internet.

Pour les petites entreprises qui ciblent de petites zones géographiques, c'est encore plus critique - le référencement sera très difficile pour une nouvelle petite entreprise, mais si votre produit est bon, vous pouvez maximiser la quantité de personnes qui partagent ce que vous faites.

En ce qui concerne la lecture des médias sociaux, les gens utilisent désormais principalement des appareils mobiles - généralement au lit le matin et au lit la nuit.

Si votre site est inutilisable sur un appareil mobile, tous les partages qui ont atteint votre public concerné sont perdus. Tu ne veux pas ça. Il est essentiel d'éviter que cela se produise.

En ce qui concerne le code réactif ou séparé: le principal inconvénient de la conception réactive est qu'il n'est pas aussi rapide que des bases de code distinctes. Cette perte de vitesse va être négligeable, certainement dans le cas d'une petite entreprise locale lorsque d'autres facteurs peuvent apparaître dans l'esprit des utilisateurs pour expliquer pourquoi le site est 0,2 seconde plus lent que d'autres.

Le gros avantage de la conception réactive est que vous conservez la même base de code. Cela réduit les coûts de maintenance, les coûts de test et les coûts de développement.

La grande chose dans le référencement de nos jours est la «qualité du site» - la qualité du site est difficile à mesurer, mais de manière générale, Google utilise le taux de rebond et le temps sur le site pour mesurer cela. Si votre site craint sur mobile, 50% de votre trafic va avoir un taux de rebond élevé et un nombre élevé de visiteurs avec un faible engagement (moins de 10 secondes sur la page).

Cela vous expose au risque de pénalités Google - regardez Google Panda et les nouvelles pénalités (la semaine dernière) du domaine de correspondance exacte , qui pénalisent les sites pour leur «faible qualité».

Les principaux problèmes que vous pourriez rencontrer lors de l'optimisation d'un site Web pour une entreprise en utilisant cette méthode sont que c'est un nouveau mot à la mode, tout le monde en a besoin, donc il y a des cowboys là-bas qui facturent des prix ridiculement élevés pour quelque chose qui est incroyablement facile à faire.

Par exemple, j'ai récemment créé un site Web qui a une boutique, un forum, une section Q & A ainsi que diverses autres pages, blogs, etc. entièrement réactifs pour tous les appareils en une journée environ.

Voici les bases de ce que vous devez faire:

1. Ajustez le rembourrage du corps et les marges
2. Déplacez plutôt les menus de gauche ou de droite dans des listes déroulantes, peut-être les masquez-vous sous un bouton d'options en haut.
3. Redimensionnez les conteneurs, utilisez une largeur de 100% là où vous le pouvez
4. Changez toutes vos images en largeur 100%
5. Décidez quels éléments ne sont pas nécessaires sur le téléphone (publicités?) Et supprimez-les (affichage: aucun)

Voici un exemple de code:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

Ce que cela fait, c'est de supprimer quoi que ce soit avec une classe de 'pub publicitaire' des smartphones (avec une largeur maximale de 480 pixels) et de réduire la marge corporelle.

Si vous créez un nouveau site, cela est encore plus facile à créer car vous pouvez vous assurer de créer un design propre avec de belles classes propres et un bon style pour tous les appareils.

J'espère que ça aide!

Je voudrais juste faire un carillon avec une perspective différente:

Non, ce n'est pas obligatoire ni même recommandé. Cela dépend de qui est votre public cible. Examinez vos analyses et voyez quel pourcentage provient de Mobile et de ceux qui arrivent sur Mobile, y a-t-il une baisse significative par rapport à vos utilisateurs de bureau?

Pour donner un exemple où je travaille, notre site n'est pas réactif. Cependant, 90% de notre trafic provient des utilisateurs d'ordinateurs de bureau et les taux de rebond et les taux d'achèvement des événements sont presque identiques sur les ordinateurs de bureau, mobiles et tablettes.

Tant qu'il n'y a pas de justification des coûts pour le changer, il n'y a tout simplement pas d'incitation financière à le faire. Dire des déclarations générales comme 50% des utilisateurs sont sur mobile ou quelque chose ne s'applique que si tous les utilisateurs sont votre public cible. Sinon, sa logique complètement hors de propos et mauvaise à suivre.

Vous devez uniquement regarder le% d'utilisateurs sur mobile que vous ciblez. En particulier pour les applications B2B, la plupart des gens ne regarderont pas leur téléphone pendant leur temps libre. Vous obtiendrez du trafic du lundi au vendredi sur les ordinateurs de bureau.