[Debate] Diseño web responsivo: Pros & Contras

[Mitsug]

Muy buenas tardes con todos. Soy programador Java y como tal, programo mayormente para web. Siempre se me ha dificultado, no por razones técnicas, si no por dejadéz y aburrimiento aprender CSS.

Buscando en la web sobre diseño responsivo, me encontré con un post en donde se declara las siguientes ventajas y desventajas:

Desventajas:

• Implementación: La implementación puede tardar más de lo esperado. Como se trata de un concepto nuevo, todavía hay poca familiaridad con los problemas que pueden aparecer.

• Dificultad Técnica: El diseño adaptativo es muy nuevo y se encuentra aún en desarrollo. Viene con sus propias reglas y técnicas. Continuará desarrollándose y ajustándose según se vaya utilizando cada vez más.

• Tiempo de carga: Las imágenes normalmente simplemente se reescalan, en lugar de cambiar de tamaño. Esto repercute negativamente en el tiempo de carga de las página.

• Recursos limitados: Una vez más, este es un concepto nuevo. Puede resultar difícil encontrar a alguien que le puede ofrecer la opción de diseño adaptativo.



Ventajas:

• Mejora de SEO: Con un diseño adaptativo, sólo hay una dirección URL, que no es el caso si se crea cada sitio por separado. El SEO no se diluirá con todas las URL diferentes, optimizándolo.

• Menos mantenimiento: Le permite crear un sitio que responda a todas las pantallas que hay, con sus diferentes tamaños. Esto difiere de la práctica actual de la creación de sitios totalmente diferentes para cada tamaño de la pantalla. Al tener todo el código en una sola página, centralizado, es mucho mas sencillo y rápido realizar ajustes ya que estos solo se harán en una página.

• Mejor Experiencia del Usuario: El diseño adaptativo está diseñado para maximizar la experiencia del usuario. Los usuarios encontrarán mucho más fácil de navegar y utilizar los sitios optimizados para el dispositivo que estén utilizando.

• Analítica Web / Seguimiento: Como dijimos anteriormente, el diseño adaptativo utiliza una única URL. En lugar de tener que analizar los datos producidos por varias direcciones diferentes, una URL única hace el seguimiento de su sitio web mucho más fácil.

• Intercambio Social: Si alguien desde un PC comparte un enlace de un sitio web tradicional con un dispositivo móvil, este, no tendrá la misma experiencia ya que estará viendo la página optimizada para pantalla grande en un dispositivo mucho mas pequeño. Con el diseño adaptativo resolvemos este problema. El enlace enviado al teléfono móvil sería adaptado a ese dispositivo.

• Los nuevos dispositivos: Continuamente se crean nuevos dispositivos con distintas relaciones de pantalla. Con un diseño adaptativo, no hay que preocuparse de crear un nuevo sitio web para la pantalla del ultimísimo dispositivo salido al mercado.

• Google lo recomienda: “Google recomienda a los webmasters seguir las últimas y mejores prácticas de la industria como el diseño adaptativo…”


---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
He oído algunos usuarios que frecuentan navegar en el móvil que las webs con diseño responsivo hacen un mayor consumo de recursos porque tienen que reescalar imágenes y demás multimedia. ¿Qué tan cierto puede ser esto?

¿Alguien ya ha utilizado éste patrón de diseño?



Saludos.

[engel lex]

Desventajas:

• Implementación: La implementación puede tardar más de lo esperado. Como se trata de un concepto nuevo, todavía hay poca familiaridad con los problemas que pueden aparecer.

• Dificultad Técnica: El diseño adaptativo es muy nuevo y se encuentra aún en desarrollo. Viene con sus propias reglas y técnicas. Continuará desarrollándose y ajustándose según se vaya utilizando cada vez más.

• Tiempo de carga: Las imágenes normalmente simplemente se reescalan, en lugar de cambiar de tamaño. Esto repercute negativamente en el tiempo de carga de las página.

• Recursos limitados: Una vez más, este es un concepto nuevo. Puede resultar difícil encontrar a alguien que le puede ofrecer la opción de diseño adaptativo.

ok, voy punto a punto...

• Implementación: La implementación puede tardar más de lo esperado. Como se trata de un concepto nuevo, todavía hay poca familiaridad con los problemas que pueden aparecer.

cómo que la implementan puede tardar más de lo esperado?... si el equipo ejecuta codigo css y jscript funciona... si te refieres a lo que tardar un programador en dártelo, depende de ese programador

• Dificultad Técnica: El diseño adaptativo es muy nuevo y se encuentra aún en desarrollo. Viene con sus propias reglas y técnicas. Continuará desarrollándose y ajustándose según se vaya utilizando cada vez más.

??? no es un lenguaje de programacion... depende del programador que haga algo general capaz de adaptarse a los standares o los casos más normales...

• Tiempo de carga: Las imágenes normalmente simplemente se reescalan, en lugar de cambiar de tamaño. Esto repercute negativamente en el tiempo de carga de las página.

no... simplemente no... incluso si lo haces con php revisando promero browser agent el tiempo de carga se puede subir muchisimo

• Recursos limitados: Una vez más, este es un concepto nuevo. Puede resultar difícil encontrar a alguien que le puede ofrecer la opción de diseño adaptativo.

recursos limitados? si, es un concepto "nuevo" pero los recursos de php+css+jscript para estos son MUCHOS, el no conseguir alguien que sepa hacerlo... bueno... es una lastima por ese que no sabe hacerlo, bastante info y ayuda hay en la web...

Ventajas

• Google lo recomienda: "Google recomienda a los webmasters seguir las últimas y mejores prácticas de la industria como el diseño adaptativo..."

... eso no es una ventaja... es una recomendación...

He oído algunos usuarios que frecuentan navegar en el móvil que las webs con diseño responsivo hacen un mayor consumo de recursos porque tienen que reescalar imágenes y demás multimedia. ¿Qué tan cierto puede ser esto?

el trafico sobre smartphone crece cada día pro las velocidades de internet y capacidades de los dispositivos, ahorita vamos por casi un 30% de la navegación mundial es móvil... y no solo es para celular... tambien es para adaptarse a pantallas entre 1024x720 (notebook) hasta 1920x1080(fullHD casi el doble de ancho)

¿Alguien ya ha utilizado éste patrón de diseño?

yo

[#!drvy]

+1  @engelx.

Realmente todas las desventajas se reducen a: es algo nuevo... pos vaya.

• Tiempo de carga: Las imágenes normalmente simplemente se reescalan, en lugar de cambiar de tamaño. Esto repercute negativamente en el tiempo de carga de las página.

Eso solo lo puede afirmar alguien muy novato en ese área...

• Recursos limitados: Una vez más, este es un concepto nuevo. Puede resultar difícil encontrar a alguien que le puede ofrecer la opción de diseño adaptativo.

Casi todos los diseñadores web (o todos los que se dedican a desarollo web) te ofrecen responsive.. vamos.. de no llegar a hacerlo se quedarían en la ruina ya que todo el mundo busca eso..

Mejora de SEO: Con un diseño adaptativo, sólo hay una dirección URL, que no es el caso si se crea cada sitio por separado. El SEO no se diluirá con todas las URL diferentes, optimizándolo.

En realidad eso es estúpido. Usar una url para movil y otra para pc no afecta en nada al seo siempre y cuando las 2 muestren la misma información. Es mas, para algo existe el robots.txt mediante el cual puedes decirle a los robots que no escaneen cierta parte o subdominio.

https://mobile.twitter.com/robots.txt
https://m.facebook.com/robots.txt

Saludos

[EFEX]

Diseño web responsivo: Todo se mide en porcentajes creando un diseño fluido y adaptado a la pantalla, la idea es soportar todos los tamaños desktop, tablets, smartphones. El mismo sitio se adapta solo a la pantalla sin necesidad de crear otro sitio.

Diseño web adaptable: Aplica las mismas ideas que el diseño responsivo con la diferencia de utilizar el servidor para detectar el dispositivo y mostrar el diseño correspondiente segun este., osea diferentes templates para diferentes dispositivos mostrando lo necesario para el usuario segun en el caso de tal dispositivo.


Con el tema de las imagenes(tambien con imagenes de fondo) no podes utilizar una imagen grande siendo tu usuario utiliza su celular., tenes que tener en cuenta que tienen conexiones 3G/4G y en muchos paises es una mentira(como el mio). Para eso se utilizan diferentes tecnicas del lado del servidor u cliente como..

adaptive-images.com: Detecta el tamaño de resolucion con javascript, php por su lado crea cachea una imagen proporcional al tamaño(segun entendi).. el problema utiliza cookies.

https://github.com/scottjehl/picturefill: Utilizando javascript definis la imagen segun la resolucion de pantalla.. el problema varios html markup.

https://github.com/teleject/hisrc: Lo mismo que el de arriba solo que utiliza la libreria Jquery y hace el markup en una sola linea.

https://github.com/scottjehl/picturefill: Lo mismo que los dos ultimos.

La razon por que existen varias tecnicas creo que es por que no esta estandarizado aun..

[alan++]

Cuando comence a utilizar los diseños responsives o "sensibles" lo unico que note en realidad es un cambio de pensamiento de como debia generarse una web, sigo usando px para limitar por ejemplo el maximo tamaño ante resoluciones muy grandes y a su vez juego con los % para resoluciones inferiores...

Sin embargo no estamos hablando de otro idioma u otra forma de trabajar, solo un cambio de enfoque con el cual se realiza, nada mas

Decir que es algo totalmente diferente lo veo falso, es la evolucion del diseño que aunque comparte mucho con las antiguas costumbres deja lugar a nuevas ideas

[Mitsug]

Gracias a todos por sus respuestas. Ya cansé de usar plantillas para mis aplicaciones web xD, voy a aprender CSS3 para hacer mis propios diseños responsivos.

[EFEX]

Cuando comence a utilizar los diseños responsives o "sensibles" lo unico que note en realidad es un cambio de pensamiento de como debia generarse una web, sigo usando px para limitar...

Podrias leer sobre crear layout fluid, fixed, elastic   

[alan++]

Ya me pongo a investigar!

Gracias EFEX!

Investigado, yo me muevo entre fixed y fluid layouts, no habia pensado el metodo elastic... me gustaria ver alguna pagina con este metodo

[bacanzito]

para mi el diseño web responsivo es la ostia , por que el futuro son los moviles , tablets la mejor comodida de navegacion  .