Hoy en día, el acceso a Internet no se limita sólo a los ordenadores portátiles o computadoras de escritorio. En cambio, con la llegada de los dispositivos móviles, más y más usuarios están accediendo a Internet a través de una diversa gama de gadgets y resoluciones de pantalla. Como resultado de ello, la importancia de tener un sitio web que funciona bien a través de múltiples dispositivos, como teléfonos inteligentes y tabletas, es de vital importancia.
Y cuando se trata de crear un sitio web que se ve muy bien a través de estos dispositivos diferentes, hay dos enfoques principales: diseño sensible y diseño adaptativo. En este artículo, voy a tomar un vistazo a los beneficios y desventajas de estos dos enfoques.
Diseño Sensible
En términos más simples, el diseño de respuesta abastece a diferentes resoluciones de pantalla por tener un diseño definido para cada uno. Por lo tanto, con cada diseño, la anchura de los elementos se cambia el tamaño en relación con el tamaño de la ventana de cambiar (más como una serie de diseños de líquidos).
El concepto de diseño de páginas web sensibles primero fue traído a la luz de calcio porEthan Marcotte , en su artículo de A List Apart . Si usted está buscando para el material informativo completa sobre el diseño de respuesta, debe, por todos los medios, echa un vistazo a el libro de Marcotte, Diseño Responsive Web (9 dólares por libro electrónico, también disponible en edición de bolsillo por $ 18 + gastos de envío).
Responsive Web Design permite a sus visitantes ver a través de diferentes dispositivos que utilizan el mismo diseño. El diseño se ajusta automáticamente en función de la resolución de la pantalla de los usuarios. Por ejemplo: para una pantalla de escritorio más grande, el diseño puede mostrar tres columnas de contenido, pero puede ajustarse a un solo o doble columna en un teléfono inteligente o una tableta, y así sucesivamente. Naturalmente, puesto que garantiza la uniformidad de diseño a través de múltiples dispositivos, el diseño de respuesta es a menudo favorecida y apreciado por los diseñadores de WordPress.
Ventajas
1. Como ya se ha mencionado, el diseño web sensible asegura la uniformidad de diseño a través de múltiples dispositivos y resoluciones de pantalla. Aunque su diseño se puede ajustar (por ejemplo, en términos de ancho de columna) para adaptarse a las pantallas de los móviles, en general, la disposición de diseño y el estilo se mantiene uniforme en todo. 2. Quizás la ventaja más grande y más enfática de diseño de respuesta es el hecho de que resulta ser más motores de búsqueda en comparación con las alternativas. Bueno, al menos Google cree que sí; que han hablado de ella aquí , aquí y aquí . Y para citar una parte de sus configuraciones recomendadas:
… Los sitios que utilizan el diseño web de respuesta, es decir, lugares que sirven todos los dispositivos en el mismo conjunto de direcciones URL, con cada URL que tengan el mismo código HTML a todos los dispositivos y utilizando sólo CSS para cambiar cómo se procesa la página en el dispositivo. Esta es la configuración recomendada por Google.
3. Además, el diseño de respuesta también se suma la simplicidad de su sitio web. Dado que todo su contenido es sólo en una dirección URL, que viene muy bien con factores como el uso compartido de medios sociales, filas del motor de búsqueda, marcadores, estadísticas web, etc Además, no se olvide el hecho de que usted tendrá que mantener una sola versión de su sitio web (en oposición a dos versiones móviles y de escritorio por separado). Esto puede ir una manera larga en el ahorro de su tiempo y esfuerzos.
Desventajas
1. Variar la anchura de las columnas de contenido entre dispositivos significa que es posible que tenga que ser muy prudentes al momento de elegir los anuncios para su sitio web. No todos los anuncios encajan con alegría en cada resolución de pantalla, por lo que la integración de anuncios en un diseño sensible se hace difícil. De hecho, incluso los anuncios de Google AdSense no siempre funcionan bien a través de múltiples resoluciones. 2. Un equilibrio debe lograrse entre la experiencia del usuario en el escritorio y el móvil.Factores tales como los tiempos de carga y la accesibilidad también pueden entrar en juego. Por ejemplo, si su diseño simplemente reduce proporcionalmente las imágenes para resoluciones de pantalla móvil, los usuarios móviles podría terminar de descargar una imagen de tamaño completo, a pesar de todo lo que necesitan para ver una vista previa es 200 x 200 en sus teléfonos.
Diseño Web Adaptativo
A diferencia de diseño de respuesta, diseño web adaptativo no cambia de manera fluida para adaptarse a cualquier resolución de pantalla o el tamaño del dispositivo. Por el contrario, tiene una serie de diseños estáticos y definidos que se adaptan a un determinado conjunto de resoluciones de pantalla.
La idea detrás del diseño web adaptativo es crear la mejor experiencia para el usuario, independientemente del navegador o dispositivo que él o ella utiliza. Como tal, en lugar de tener «un diseño para gobernar ‘em all», el diseño adaptativo utiliza un método con particiones. Los usuarios de escritorio se muestran la página web completa, mientras que los usuarios de móviles son presentados con una versión móvil separada del sitio.
Como resultado, usted puede asegurarse de que su sitio móvil es-tap amable, cargas más rápido y consume menos datos, y los enlaces de navegación son más prominentes.Para su página de escritorio, por otra parte, usted puede incluso optar por descartar las características móviles-tap de usar. Por otro lado, también puede mostrar un enlace «Cambiar a móvil / escritorio del sitio» en el pie de página o la barra lateral, por lo que los usuarios de dispositivos como tabletas pueden decidir por sí mismos.
Ventajas
1. La primera y principal ventaja del diseño web adaptativo es el hecho de que se asegura la mejor experiencia de usuario para todos los visitantes, independientemente de su dispositivo. Sus visitantes móviles verán un sitio web que es toque amable y optimizado para su dispositivo, mientras que los usuarios de escritorio verán un sitio que abastece principalmente a su dispositivo. 2. Podría decirse que el diseño web adaptativo tiene mejores perspectivas de monetización que el diseño de respuesta, por el simple hecho de que usted puede optimizar fácilmente los anuncios sobre la base de sus teléfonos de escritorio o diseños de sitios. . 3 Puede utilizar el diseño web adaptativo para acelerar y mejorar el rendimiento de su sitio web en dispositivos móviles: ya que los sitios móviles son básicamente versiones simplificadas de sus contrapartes de escritorio, se puede emplear un mecanismo de navegación más simple y menos imágenes y atraer a los visitantes de su móvil!
Desventajas
1. Usted tendrá que utilizar las redirecciones para la reticulación. Digamos, si enlaza a un artículo más antiguo en su sitio web en un nuevo artículo, que el sitio no se vincula a? Su escritorio sitio (principal) o tu móvil (generalmente un sub-dominio en m.yoursite.com)? Obviamente, usted tendrá que configurar las redirecciones para que cualquiera que haga clic en el enlace del sitio de escritorio desde un dispositivo móvil se redirige a la versión móvil de ese vínculo particular. 2. Si bien esto es puramente subjetiva, que tiene un diseño adaptativo puede dejar la tableta (e incluso netbook, si acaso la gente todavía utiliza uno) a los usuarios que cuelgan. Su sitio web para móviles está optimizado para una resolución smartphone. Su sitio de escritorio abastece a pantallas más grandes. ¿Qué pasa con los usuarios con tabletas, que generalmente tienen una pantalla que es más grande que los teléfonos inteligentes, pero más pequeño que los portátiles? Incluso si esto no se aplica a sus visitantes, seguramente debe considerar la posibilidad de un enlace en el pie de página o la barra lateral que permite a los espectadores para alternar entre las versiones de escritorio y móviles de su sitio web. 3. diseño web adaptativo probablemente podría lastimar sus términos con los motores de búsqueda. Por ejemplo, un artículo que se encuentra disponible en yoursite.com nice-artículo / también estará disponible en m.yoursite.com nice-article /. La mayoría de los motores de búsqueda no se dan cuenta de idéntico contenido a través de múltiples direcciones URL, así que se puede argumentar que el diseño adaptativo no es como el diseño tan sensible SEO-friendly. Sin embargo, creo que esto podría ser sólo una cuestión de percepción-la-URL-es-el mal-idéntico contenido a través de múltiples regla general, se aplica a los sitios que copian contenido de otros sitios. Tal vez los robots de motores de búsqueda son lo suficientemente inteligentes como para darse cuenta de que m.yoursite.com es una variante móvil fácil de yoursite.com-en cualquier caso, como ya se mencionó anteriormente en este artículo, Google ha menudo profesado su reconocimiento por el diseño web de respuesta, por lo que el diseño adaptativo hace quedarse un poco atrás en términos de SEO.
Conclusión
Diseños web Tanto respondan y se adapten asegurarse de que su sitio web funciona bien a través de diferentes dispositivos con diferentes resoluciones de pantalla. Si bien el diseño de respuesta hace que su sitio web se ajusta automáticamente su configuración de acuerdo con la resolución de pantallael diseño adaptable permite que la experiencia del usuario especializado distinguiendo entre las versiones móviles y de escritorio del mismo sitio.
