¿Qué tan importante es el diseño web receptivo?


29

Recientemente escuché una variedad de opiniones sobre los pros y los contras del uso del diseño web receptivo y me preguntaba si era necesario que las pequeñas empresas que se enfocan en áreas geográficas pequeñas implementen un diseño web receptivo.

Algunas subpreguntas que tengo sobre esto incluyen:

  1. ¿Es mejor usar un diseño web receptivo en lugar de tener un código separado utilizado para diferentes dimensiones / dispositivos?

  2. ¿Puede afectar potencialmente al SEO (positiva o negativamente)?

  3. ¿Cuáles son los principales problemas con los que me puedo encontrar al optimizar un sitio web para una empresa utilizando este método de diseño?


Acaba de hacer un cambio drástico en su pregunta de título sin modificar realmente el contenido. ¿Estás realmente seguro de eso? (Sugerencia: la respuesta ahora es "no")
Su '

@Su 'Perdón por eso, me acabo de dar cuenta de que cambiaría por completo las respuestas que recibiría, así que hice un' retroceso '
vidas del

1
¿Que tan importante? Cero a poca importancia para la mayoría de los sitios. Para una aplicación o herramienta más (1) ¿Responsivo frente a Adaptativo? Varía de persona a persona y de proyecto a proyecto. En resumen, ningún método es mejor y el uso también depende de la audiencia del sitio. (2) ¿Afecta el SEO? No. (3) ¿Problemas principales? Tendrá que probar más, corregir más errores y codificar más, algunas cosas no funcionarán cuando tenga un ancho reducido y algunas cosas violarán TOS (adsense) si las elimina o las cambia. Aquí hay 10 características importantes para aplicaciones web en este video que, en mi humilde opinión, se aplican a la mayoría de los sitios de todos modos vimeo.com/10510576
Anthony Hatzopoulos

Respuestas:


21

Se pronostica ampliamente que el uso de Internet móvil excederá el uso de escritorio dentro de un par de años a partir de ahora, por lo que algún tipo de optimización móvil debería ser una consideración seria para cualquier negocio.

En muchos sentidos, esto es especialmente cierto para las pequeñas empresas localizadas: como era de esperar, muchas búsquedas móviles tienden a centrarse en encontrar cosas cercanas: piense en encontrar una tienda, un restaurante, etc.

A partir de mayo de 2012, el diseño receptivo es la mejor práctica recomendada por la industria de Google al diseñar para teléfonos inteligentes. Uno de los principales beneficios es que está ejecutando un sitio: ese es un sitio para diseñar, construir, mantener y promover. Es eficiente

Desde el punto de vista de SEO, alojar un sitio móvil separado, egmexample.com, significa que necesita optimizar 2 sitios separados y dividir el valor de su negocio (PageRank, autoridad, etc.) en las dos ubicaciones. Si bien puede evitar eso sirviendo contenido en las mismas URL a través de la detección de agente de usuario, esto no se ocupa de la duplicación de esfuerzos (todavía son 2 sitios separados), y también presenta más desafíos técnicos, por ejemplo, garantizar su agente de usuario la detección funciona y se mantiene actualizada, los motores de búsqueda indexan el contenido correcto en el índice correcto, etc.

En general, el diseño receptivo es una solución elegante.

Para responder a sus otras preguntas:

  1. Tocado arriba, pero también considere qué tan rápido se desarrolla el mercado móvil. Cuanto más flexible sea su solución móvil, menos tendrá que hacer para mantenerse al día.

  2. Depende de con qué se esté comparando, pero como se mencionó anteriormente, cualquiera de las otras 2 opciones principales tienen importantes desafíos de SEO.

    Ha habido cierta preocupación sobre el tema del "encubrimiento", es decir, ocultar contenido de los motores de búsqueda, lo cual es inherente al diseño receptivo en la mayoría de las implementaciones. Sin embargo, aunque, hasta donde sé, esto no ha sido respondido explícitamente por ninguno de los principales motores de búsqueda, que Google lo considere como "la mejor práctica" podría verse como una indicación de que Google es capaz de discernir entre la ocultación legítima de contenido para razones de optimización del dispositivo y otras ocultaciones menos legítimas, por razones de manipulación.

  3. Creo que el desafío principal es determinar qué contenido mostrar a los usuarios móviles. Dependiendo de su sitio, eso podría no ser un problema, pero en muchos casos lo es. La consideración clave aquí es entender lo que sus visitantes móviles están tratando de hacer. Por ejemplo, alguien en un iPhone probablemente quiera información o transacciones rápidas y fáciles. Es más probable que la misma persona en un iPad esté interesada en una experiencia de navegación más relajada.

Esta pregunta y respuesta se lee de manera notablemente divertida cuatro años en el futuro.
dwjohnston

12

La idea detrás es brindar una experiencia de navegación óptima a su visitante, independientemente del dispositivo. Como la cantidad de visitantes que usan un dispositivo móvil probablemente aumentará en lugar de disminuir, tiene sentido seguir esa ruta.

Hay una serie de temas asequibles (por no decir baratos) para Blogs y CMS que puedes probar de inmediato y ver si te gusta lo que obtienes (verifica con todos o algunos de los dispositivos de tus clientes).

  1. Siempre que tenga una razón especial, siempre trate de concentrarse en una base de código. Una razón podría ser que desee ofrecer un sitio web especializado como una "aplicación web".

  2. SEO: no. Tan bueno y malo como un diseño que no responde.

  3. Tienes que hacer un poco más de planificación al principio. ¿Qué contenido debe mostrarse en el dispositivo más pequeño, cómo debe ser el orden del contenido? Ese tipo de cosas. O bien: ¿Se ve bien mi contenido en todas mis dimensiones compatibles? También es posible que desee optimizar los tamaños de sus imágenes para cada una de las dimensiones para ofrecer no solo imágenes a escala del navegador sino también de tamaño real. Si su CMS no es compatible, es un poco más de trabajo.

Si planea incluir anuncios de una fuente externa, también debe verificar si los formatos dados funcionan bien juntos.

Editar:

Permítanme agregar que si tiene datos históricos de análisis web disponibles (por ejemplo, Google Analytics), puede buscar fácilmente la cantidad de usuarios móviles y no móviles, identificar los dispositivos usados ​​(hasta el hardware real) y ver las resoluciones de pantalla ("¿Realmente ven mis páginas o solo una parte de ellas y tienen que desplazarse?").

Segunda edición:

De acuerdo con esta publicación "Sitios web móviles versus diseño receptivo: ¿cuál es la solución adecuada para su negocio?" "en el blog de Google Analytics, un sitio diseñado teniendo en cuenta el diseño receptivo tiene estas ventajas:

  • Facilidad de actualización
  • Optimizado para motores de búsqueda
  • Agregar códigos de conversión y redireccionamiento

Los pros del sitio móvil separado:

  • Diseñando para las necesidades del usuario móvil
  • Creación del sitio de Quicke
  • Grandes opciones de bricolaje

El artículo "Diseño receptivo: aprovechar el poder de las consultas de los medios" en el Blog oficial de Google Webmaster Central ofrece una buena introducción de cómo se implementa realmente el "Diseño receptivo".

"Creación de sitios web optimizados para dispositivos móviles" en Google Developers dice:

"Google recomienda que los webmasters sigan las mejores prácticas de la industria de usar un diseño web receptivo, es decir, servir el mismo HTML para todos los dispositivos [...]"


2
Google realmente clasificará su sitio más bajo si tarda más en cargar.
Steffan Donal

2
@Ruirize Sí, pero ... Preguntó si el diseño receptivo tiene un impacto negativo en el SEO. Y el diseño receptivo no hace que una página se cargue más. Entonces "no". Solo si te gusta hacer eso ;-)
initall

@initall: el diseño receptivo puede hacer que su sitio tarde más en cargarse en un dispositivo móvil, según cómo haya diseñado su sitio solo para móviles. Si hubiera tenido un tamaño de página más pequeño (menos contenido inicial, menos bibliotecas, etc.), tal vez su sitio demore más de lo que podría tener en un dispositivo móvil. Aún así, probablemente sea bueno optimizar un solo sitio para redes de bajo ancho de banda, pero es algo a tener en cuenta.
Nick

1
@Nick Por supuesto, si compara un sitio optimizado para dispositivos móviles con uno más genérico (Responsive), el ganador ... no es sorprendente. Este enumera algunas de las trampas
initall

3

Creo que es importante darse cuenta primero de que "diseño receptivo" (RD) es un término de moda (si pongo Ancho: 100% a un elemento que tengo un RD allí, para exagerar) y por eso su importancia parece más importante que Realmente es como al final es condicional como todo lo demás.

¿Es necesario implementar RD?

Para responder eso, necesitará establecer algunas definiciones:

  1. ¿Quién es tu público objetivo?
  2. ¿Qué tipo de audiencia es tu objetivo?
  3. ¿Cuál es el propósito de su sitio web?
  4. Desde dónde se accederá a su sitio web (en la mayoría de los casos)
  5. etc.

Esto es muy similar al análisis de marketing. Se trata de tener el medio adecuado para la audiencia correcta (tal vez su audiencia se sienta frente a una computadora la mayor parte del día, o están en movimiento con el último iPhone, y así sucesivamente). ¿Hacen ambas cosas, entonces, por supuesto, RD es central.

¿Es mejor usar un diseño web receptivo en lugar de tener un código separado utilizado para diferentes dimensiones / dispositivos?

Depende de la complejidad de la interfaz de usuario y de cómo la usará. En la mayoría de los casos, se puede representar una página típica utilizando diferentes conjuntos de CSS para las distintas pantallas. Sin embargo, las IU más complejas o sofisticadas pueden requerir diferentes enfoques, por lo que puede ser conveniente presentar una estructura y estrategia de página diferente según el dispositivo que se utilice (mapas de Google, por ejemplo, interfaz multitáctil ...).

¿Puede afectar el SEO (positiva o negativamente)?

El SEO tiene más que ver con el contenido que con el diseño. Sin embargo, solo Google sabe si ponderan el diseño, pero el diseño / diseño, pero en general, si su contenido es de alta calidad, esto tendrá más peso que el diseño real.

¿Cuáles son los principales problemas con los que me puedo encontrar al optimizar un sitio web para una empresa utilizando este método de diseño?

Diseñándolo para el público equivocado. Analice su objetivo y suministre datos técnicos actualizados si es posible (es decir, registros de visitantes que proporcionan información sobre la plataforma, etc.)

La nueva tecnología siempre es arriesgada, ref. El problema HTML5 para Facebook. No está completamente maduro en este momento e invita a varios problemas similares al IE6 versus problemas estándar.

Mantenlo lo más simple posible. Las páginas web de lujo solo son valiosas en muy poco tiempo hasta que el usuario realmente tenga que usar su página. Si tiene que esperar 1/2 segundo para que se termine un desvanecimiento por cada clic que haga, el usuario se perderá bastante rápido. Ese tipo de cosas.


1
Un claro no a algunas partes de su respuesta: no mezcle el "diseño receptivo" con los conceptos "flexibles" o "fluidos". Según el tamaño de la pantalla, un diseño receptivo puede parecer "fijo", ya que depende de las consultas de los medios para entregar diferentes CSS en función del ancho del navegador. No es "ancho: 100%". No lo llamaría un "término de moda" porque es un concepto razonable, una buena respuesta a un problema actual y no solo una exageración. Con respecto al SEO: al menos Google se esforzó en detectar diseños individuales versus diseños de otro tema; de nuevo: el RD per se no es malo ni bueno, depende de su contenido.
initall

1
100% detrás del comentario 'fijo', aunque es agua turbia. Mis sitios receptivos en el trabajo han sido reparados con elementos internos fluidos. Yo diría que es una palabra de moda en este momento, pero imagino que muy pronto se llamará diseño web / desarrollo. Creo que el impacto de SEO podría venir si las empresas tienen un sitio móvil en lugar de responder ... pero, no tengo idea de los efectos de este SEO inteligente.
DBUK

2

Leí las otras respuestas, perdóname si soy redundante ... Estoy haciendo un diseño receptivo todos los días durante más de 8 horas al día en este momento ... Mis clientes lo quieren porque quieren que los usuarios de dispositivos móviles tengan un 'único' experiencia, mis empleadores lo quieren porque Google se jacta de ser el método preferido y simplifica bien. (y si Google se jacta de ser la forma de hacer algo que probablemente funcione mejor para SEO)

¿Es mejor usar un diseño web receptivo en lugar de tener un código separado utilizado para diferentes dimensiones / dispositivos?

Yo diría que es mejor, sí. La mayor parte de su código es el mismo código, lo que resulta en menos trabajo que escribir una aplicación de iPhone, una aplicación de droide, una aplicación de iPad, una aplicación de Kindle ... entiendes el punto.

¿Puede afectar potencialmente al SEO (positiva o negativamente)?

Desde un punto de diseño, siento que es neutral; sin embargo, desde un punto de vista estadístico, mis diseños receptivos están funcionando muy bien. Los clientes los aman, y a los clientes les encanta usarlos.

¿Cuáles son los principales problemas con los que me puedo encontrar al optimizar un sitio web para una empresa utilizando este método de diseño?

Al principio es un poco difícil de hacer ... necesita investigar un poco sobre las consultas de los medios y preferiblemente tener algunos dispositivos móviles para probar. Tenga en cuenta que cambiar el tamaño de su ventana en su escritorio está cerca, pero la forma en que los dispositivos móviles representan Internet a veces es diferente de lo que cabría esperar. Por ejemplo, diseñé un sitio receptivo donde utilicé una repetición bg para el encabezado y en el escritorio se extiende por toda el área visible; sin embargo, en iOS se interrumpe por alguna razón ...

Recomiendo aprender y probar un diseño receptivo. mira este sitio para comenzar: http://html5boilerplate.com

Para responder a la pregunta en el título: es importante y le convendría conocerlo y cómo diseñarlo, y si decide no usarlo, debe estar preparado para defender esa postura ya que su cliente puede estar configurado al tener este diseño. Desde mi experiencia, los clientes y los clientes adoran el diseño receptivo. Los clientes felices y los clientes felices son una razón suficiente para que lo persiga :)


1

El diseño web receptivo es crítico: si está creando un nuevo sitio, DEBE hacer que su sitio responda. Ya, el 50% del tráfico proviene de dispositivos móviles y tabletas y no solo va a crecer, sino que se convertirá en la forma claramente dominante de uso de Internet.

Para las pequeñas empresas que se dirigen a pequeñas áreas geográficas, es aún más crítico: el SEO será muy difícil para una nueva pequeña empresa, pero si su producto es bueno, puede maximizar la cantidad de personas que comparten lo que está haciendo.

Cuando se trata de leer las redes sociales, la mayoría de las personas utilizan dispositivos móviles ahora, generalmente en la cama por la mañana y por la noche.

Si su sitio no se puede usar en un dispositivo móvil, se perderán todos los recursos compartidos que lleguen a su audiencia relevante. No quieres esto. Es crítico evitar que suceda.

Con respecto al código receptivo o separado: La desventaja principal del diseño receptivo es que no es tan rápido como las bases de código separadas. Esta pérdida de velocidad será insignificante, ciertamente en el caso de una pequeña empresa local cuando otros factores pueden aparecer en la mente de los usuarios en cuanto a por qué el sitio es 0.2 segundos más lento que otros.

La gran ventaja del diseño receptivo es que mantiene la misma base de código. Esto reduce los costos de mantenimiento, costos de prueba y costos de desarrollo.

La gran cosa en SEO en estos días es la "Calidad del sitio": la calidad del sitio es difícil de medir, pero en general, Google usa la tasa de rebote y el tiempo en el sitio para medir esto. Si su sitio apesta en dispositivos móviles, el 50% de su tráfico tendrá una alta tasa de rebote y una gran cantidad de visitantes con poca participación (menos de 10 segundos en la página).

Esto lo pone en riesgo de penalizaciones de Google: mire Google Panda y las nuevas penalizaciones de Dominio de coincidencia exacta (la semana pasada) , las cuales penalizan a los sitios por tener 'baja calidad'.

Los principales problemas con los que se puede encontrar al optimizar un sitio web para una empresa utilizando este método es que es una nueva palabra de moda, todos lo necesitan, por lo que hay vaqueros que cobran precios ridículamente altos por algo que es increíblemente fácil de hacer.

Por ejemplo, recientemente hice un sitio web que tiene una tienda, un foro, una sección de preguntas y respuestas, así como varias otras páginas, blogs, etc. que responden completamente a todos los dispositivos en aproximadamente un día.

Estos son los conceptos básicos de lo que debe hacer:

  1. Ajuste el relleno del cuerpo y los márgenes.
  2. Mueva los menús del lado izquierdo o derecho a los menús desplegables, quizás los oculte debajo de un botón de opciones en la parte superior.
  3. Cambie el tamaño de los contenedores, use el ancho al 100% donde pueda
  4. Cambia todas tus imágenes al ancho 100%
  5. Decida qué cosas no se necesitan en el teléfono (¿anuncios?) Y elimínelas (pantalla: ninguna)

Aquí hay un código de muestra:

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

Lo que hace es eliminar cualquier cosa con una clase de 'advertbox' de los teléfonos inteligentes (con un ancho máximo de 480 px) y reduce el margen del cuerpo.

Si está creando un nuevo sitio, esto es aún más fácil de construir, ya que puede asegurarse de construir un diseño limpio con clases agradables y un buen estilo para todos los dispositivos.

¡Espero que esto ayude!


1

Solo me gustaría intervenir con una perspectiva diferente:

No, no es obligatorio ni recomendado. Depende de quién sea su público objetivo. Mire sus análisis y vea qué porcentaje proviene de Mobile y de los que vienen en Mobile, ¿hay alguna caída significativa en comparación con los usuarios de Desktop?

Para dar un ejemplo donde trabajo, nuestro sitio no responde. Sin embargo, el 90% de nuestro tráfico proviene de usuarios de computadoras de escritorio y las tasas de rebote y las tasas de finalización de eventos son casi idénticas en computadoras de escritorio, dispositivos móviles y tabletas.

Hasta que haya una justificación de costos para cambiarlo, simplemente no hay un incentivo financiero para que lo hagamos. Decir declaraciones generales como el 50% de los usuarios están en dispositivos móviles o algo solo es aplicable si todos los usuarios son su público objetivo. De lo contrario, es completamente irrelevante y una mala lógica a seguir.

Solo necesita ver el% de usuarios en dispositivos móviles a los que se dirige. Particularmente para las aplicaciones B2B, la mayoría de las personas no mirarán sus teléfonos en su tiempo libre. Obtendrá tráfico de lunes a viernes en las computadoras de escritorio.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.