Quelle est l'importance de la conception Web réactive?
J'ai récemment entendu diverses opinions sur les avantages et les inconvénients de l'utilisation de la conception Web réactive et je me demandais s'il était nécessaire que les petites entreprises qui ciblent de petites zones géographiques mettent en œuvre une conception Web réactive.
Certaines de mes sous-questions concernant ceci incluent:
Est-il préférable d'utiliser une conception Web réactive plutôt que d'avoir un code séparé utilisé pour différentes dimensions/dispositifs?
Peut-il potentiellement affecter le référencement (de manière positive ou négative)?
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 de l’internet mobile est largement utilisée devrait dépasser l’utilisation des ordinateurs de burea d’ici quelques années, donc une sorte d’optimisation de la téléphonie 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: comme il fallait s'y attendre, de nombreuses recherches sur mobile ont tendance à être axées sur la recherche d'objets à proximité - pensez à trouver un magasin, un restaurant, etc.
Depuis mai 2012, le responsive design constitue recommandé par Google les meilleures pratiques de l'industrie lors de la conception pour les smartphones. L’un des principaux avantages est que vous utilisez un seul site: c’est un site unique pour la conception, la construction, la maintenance et la promotion. C'est efficace.
Du point de vue du référencement, héberger un site mobile distinct, par exemple. m.exemple.com, signifie que vous devez optimiser deux sites distincts et diviser la valeur de votre entreprise (PageRank, autorité, etc.) entre les deux sites. Bien que vous puissiez éviter cela en servant du contenu sur les mêmes URL via la détection d'agent utilisateur, cela ne traite pas la duplication des efforts (il s'agit toujours de deux sites distincts) et introduit également des défis techniques supplémentaires, par exemple. vous assurer que votre détection d'agent d'utilisateur fonctionne et est tenue à jour, que les moteurs de recherche indexent le bon contenu dans le bon index, etc.
En résumé, le design réactif est une solution élégante.
Pour répondre à vos autres questions:
Touché ci-dessus, mais considérez également à quelle vitesse le marché mobile se développe. Plus votre solution mobile est flexible, moins vous aurez à faire pour suivre le rythme.
Cela dépend de ce que vous comparez, mais comme mentionné ci-dessus, l'une ou l'autre des deux autres options principales comporte d'importants problèmes de référencement.
La question du "masquage", c’est-à-dire le fait de cacher du contenu aux moteurs de recherche, fait partie des préoccupations qui sont inhérentes à la conception réactive dans la plupart des implémentations. À ma connaissance, aucun des principaux moteurs de recherche n’a répondu explicitement à cette question, mais Google le considère comme une "meilleure pratique", ce qui pourrait indiquer que Google est capable de discerner entre le masquage légitime de contenu des raisons d'optimisation du dispositif et d'autres dissimulations moins légitimes, pour des raisons de manipulation.
- Je pense que le principal défi consiste à déterminer le contenu à afficher aux utilisateurs de mobiles. En fonction de votre site, cela ne pose peut-être pas problème, mais dans de nombreux cas, ce l'est. La considération essentielle ici est de comprendre ce que vos visiteurs mobiles tentent de faire. Par exemple, une personne 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 sereine.
L'idée est de donner une expérience de navigation optimale à votre visiteur, quel que soit l'appareil. Étant donné que le nombre de visiteurs utilisant un appareil mobile augmentera probablement au lieu de diminuer, il est tout à fait logique de suivre cette voie.
Il existe un certain nombre de thèmes abordables (pour ne pas dire économiques) pour les blogs et les systèmes de gestion de contenu que vous pouvez immédiatement essayer et voir si vous aimez ce que vous obtenez (vérifiez auprès de tous vos appareils ou de certains de vos appareils clients).
Tant que vous avez une raison particulière, essayez toujours de vous concentrer sur une base de code. Une raison peut être que vous souhaitez offrir un site Web spécial comme une "application Web".
SEO: non. Aussi bon et mauvais qu'une mise en page non sensible.
Vous devez faire un peu plus de planification au début. Quel contenu devrait être affiché sur le plus petit appareil, comment devrait être l'ordre du contenu? Des choses comme ça. Ou: mon contenu est-il bon dans chacune des dimensions prises en charge? Vous voudrez 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 supporte pas cela, c'est encore du travail.
Si vous envisagez d'inclure des annonces provenant d'une source externe, vous devez également vérifier si les formats donnés sont compatibles.
Modifier:
Permettez-moi d'ajouter que si vous disposez de données historiques d'analyse Web (par exemple Google Analytics), vous pouvez facilement rechercher le nombre d'utilisateurs Mobile par rapport aux utilisateurs non mobiles, identifier les périphériques utilisés (jusqu'au matériel réel) et consulter les résolutions d'écran. ("Est-ce qu'ils voient mes pages ou juste une partie de celles-ci et doivent faire défiler?").
Deuxième édition:
Selon cet article "Sites Web mobiles vs Responsive Design: quelle solution convient le mieux à votre entreprise?" "sur le blog Google Analytics, un site conçu dans le respect de Responsive Design présente les avantages suivants:
- 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
- Quicke création de site
- Grands options de bricolage
L'article "Responsive Design - Exploiter la puissance des requêtes des médias" sur le blog officiel de Google Webmaster Central présente de manière intéressante la manière dont le "Responsive Design" est réellement mis en œuvre.
"Création de sites Web optimisés pour les appareils mobiles" sur les développeurs Google:
"Google recommande aux webmasters de suivre la meilleure pratique de l'industrie consistant à utiliser une conception Web réactive, à savoir utiliser le même code 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 Width: 100% à un élément, j’ai un RD à exagérer) et par conséquent son importance apparaît plus important que ce n’est en réalité car à la fin, il est conditionnel comme tout le reste.
Est-il nécessaire de mettre en œuvre RD?
Pour répondre à cette question, vous devrez définir des définitions:
- Qui est votre public cible
- Quel type de public est votre cible
- Quel est le but de votre site web
- D'où accéderez-vous à votre site Web (dans la plupart des cas)
- 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 reste assis devant un ordinateur presque toute la journée, ou qu’il est en déplacement avec le dernier iPhone, etc.). Do-ils faire 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'avoir un code séparé utilisé pour différentes dimensions/dispositifs?
Dépend de la complexité de l'interface utilisateur et de la manière dont vous allez l'utiliser. Dans la plupart des cas, une page typique peut être rendue en utilisant différents ensembles de CSS pour les différents affichages. Toutefois, des interfaces plus complexes ou sophistiquées peuvent nécessiter différentes approches. Il peut donc être judicieux de présenter une structure et une stratégie de page différentes selon le périphérique utilisé (Google Maps, par exemple, interface multi-touch ..).
Cela peut-il affecter le référencement (positivement ou négativement)?
Le référencement concerne davantage le contenu que le design. Seul Google sait s’ils accordent une importance particulière à la conception, mais à la conception et à la mise en page, mais en général, si le contenu est de haute qualité, le poids sera plus important 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?
Conçu pour le mauvais public. Analysez votre cible et fournissez si possible des données techniques à jour (c.-à-d. Des journaux de visiteurs fournissant des informations sur la plateforme, etc.)
Les nouvelles technologies sont toujours risquées, réf. le problème HTML5 pour Facebook. Il n’est pas encore complètement développé et suscite divers problèmes similaires à IE6 par rapport aux problèmes standard.
Gardez-le aussi simple que possible. Les pages Web fantaisistes ne valent que très peu de temps avant que l'utilisateur n'ait à utiliser votre page. S'il doit attendre 1/2 seconde pour que le fondu se termine à chaque clic, l'utilisateur sera perdu assez rapidement. Des choses comme ça.
J'écrase les autres réponses, pardonnez-moi si je suis redondant ... Je fais un design réactif tous les jours pendant 8 heures ou plus par jour à ce stade ... Mes clients le souhaitent car ils souhaitent que les utilisateurs mobiles disposent d'un "unique" expérience, mes employeurs le veulent parce que Google s'en vante comme méthode privilégiée et la rationalise bien. (et si Google se vante de pouvoir faire quelque chose de très probablement plus efficace pour le référencement)
Est-il préférable d'utiliser une conception Web réactive plutôt que d'avoir un code séparé utilisé pour différentes dimensions/dispositifs?
Je dirais que c'est mieux, oui. La majeure partie de votre code est identique à celle générée par 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 (de manière positive ou négative)?
Du point de vue de la conception, je pense que c'est neutre; Cependant, d’un point de vue statistique, mes conceptions réactives se débrouillent 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 des médias et, de préférence, avoir des appareils mobiles sur lesquels tester. N'oubliez pas que le redimensionnement de votre fenêtre sur votre bureau est proche, mais la manière dont les appareils mobiles rendent Internet est parfois différente de ce à quoi vous vous attendiez. Par exemple, j'ai conçu un site responsive dans lequel j'ai utilisé une répétition bg pour l'en-tête et sur le bureau, celle-ci s'étend sur la totalité de la zone d'affichage. Cependant, sur iOS, il coupe pour une raison quelconque ...
Je recommande d'apprendre et d'essayer un design réactif. Consultez ce site pour un démarrage rapide: http://html5boilerplate.com
Pour répondre à la question dans le titre: il est important et il vous incomberait d’en être conscient et de savoir comment le concevoir. Si vous décidez de ne pas l’utiliser, vous devez être prêt à défendre cette position, car votre client peut être déterminé d'avoir cette conception. D'après mon expérience, les clients et les clients aiment le design réactif. Des clients heureux et des clients heureux sont une raison suffisante pour le poursuivre :)
Je voudrais juste entrer dans une perspective différente:
Non, ce n'est pas obligatoire ni même recommandé. Cela dépend de votre public cible. Examinez vos analyses et voyez quel pourcentage provient de Mobile. Parmi ceux qui arrivent sur Mobile, y a-t-il une baisse significative par rapport à vos utilisateurs de Desktop?
Pour donner un exemple où je travaille, notre site n’est pas réactif. Cependant, 90% de notre trafic provient d'utilisateurs 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 que les coûts ne justifient pas une modification, rien ne nous incite financièrement à le faire. Dire des déclarations générales telles que 50% des utilisateurs sont sur mobile ou quelque chose n'est applicable que si tous les utilisateurs sont votre public cible. Sinon, sa logique est totalement inutile et mauvaise à suivre.
Vous devez uniquement examiner le% d'utilisateurs sur mobile que vous ciblez. En particulier pour les applications B2B, la plupart des gens ne vont pas regarder leur téléphone pendant leur temps libre. Vous aurez du trafic du lundi au vendredi sur les ordinateurs de bureau.
Une conception Web réactive est essentielle. Si vous créez un nouveau site, vous DEVEZ le rendre réactif. Déjà, 50% du trafic provient d'appareils mobiles et de tablettes, et non seulement cela va augmenter, mais aussi la forme dominante d'utilisation d'Internet.
Pour les petites entreprises qui ciblent de petites zones géographiques, cela est encore plus crucial - le référencement va être très difficile pour une nouvelle petite entreprise, mais si votre produit est bon, vous pouvez maximiser le nombre de personnes partageant ce que vous faites.
Pour ce qui est de la lecture des médias sociaux, les gens utilisent 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, les partages qui touchent votre public cible sont perdus. Vous ne voulez pas cela. Il est essentiel d'éviter que cela se produise.
Concernant 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 séparées. Cette perte de vitesse va être négligeable, certainement dans le cas d'une petite entreprise locale où d'autres facteurs peuvent expliquer aux utilisateurs pourquoi le site est 0,2 seconde plus lent que les autres.
Le gros avantage du responsive design 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 qualité du site est difficile à évaluer, mais Google utilise généralement le taux de rebond et le temps passé sur le site pour le mesurer. Si votre site est saturé en mobile, 50% de votre trafic générera un taux de rebond élevé et un nombre élevé de visiteurs peu mobilisés (moins de 10 secondes sur la page).
Cela vous expose aux pénalités de Google. Regardez Google Panda et la nouvelle (la semaine dernière) Exact Match Domain pénalités, qui pénalisent les sites pour leur "faible qualité".
Les principaux problèmes que vous pouvez rencontrer lors de l'optimisation d'un site Web pour une entreprise utilisant cette méthode sont qu'il s'agit d'un nouveau mot à la mode, tout le monde en a besoin. Il existe donc des cow-boys qui facturent des prix ridiculement élevés pour quelque chose d'incroyablement facile à faire.
Par exemple, j'ai récemment créé un site Web comportant une boutique, un forum, une section de questions-réponses ainsi que diverses autres pages, blogs, etc. entièrement réactif pour tous les appareils en une journée environ.
Voici les bases de ce que vous devez faire:
- Ajuster le rembourrage et les marges du corps
- Déplacez plutôt les menus latéraux gauche ou droit dans des menus déroulants, cachez-les peut-être sous un bouton d'options en haut.
- Redimensionnez les conteneurs, utilisez la largeur 100% lorsque vous le pouvez
- Changez toutes vos images en largeur 100%
- Décidez quels éléments ne sont pas nécessaires au téléphone (annonces?) Et supprimez-les (affichage: aucun)
Voici un exemple de code:
@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}
Cela supprime tout ce qui a une classe de "advertbox" sur les smartphones (avec une largeur maximale de 480 pixels) et réduit la marge corporelle.
Si vous créez un nouveau site, cela est encore plus facile à intégrer car vous pouvez vous assurer de concevoir un design épuré avec des classes propres de Nice et un style adapté à tous les appareils.
J'espère que ça aide!