Todos escuchamos mucho esta palabra «responsive» en el dominio de diseño web hoy en día. La gente recomienda encarecidamente e insiste en la importancia de usar un diseño receptivo. Pero los novatos en los campos de los blogs profesionales y el webmastering a menudo se toman un poco de tiempo para hacerse con todo este rumor sobre qué es un sitio web receptivo y cómo desarrollarlo.
Las personas a menudo crean sus temas de sitios web basados en un archivo de imagen (por ejemplo, PSD). Si bien todos los diseños de sitios web comienzan como una imagen, uno debe tener mucho cuidado de que su diseño se ajuste a los principios de capacidad de respuesta y sea compatible con dispositivos móviles. Echemos un vistazo al tema y averigüemos todo sobre este tema.
Bueno, la capacidad de respuesta de un sitio web se refiere a su capacidad de ajustar la pantalla de acuerdo con el dispositivo en el que se está viendo. Atrás quedaron los días en que la mayoría de la gente solía usar PC de escritorio, ahora hay todo tipo de dispositivos por ahí. ¡Computadoras de escritorio, portátiles, netbooks, tabletas, mini tabletas, lectores de libros electrónicos, teléfonos inteligentes y teléfonos no tan inteligentes! Uf! ¡Demasiados para no preocuparse!
Todos estos dispositivos tienen sus propios tamaños de pantalla y resoluciones específicas. Un sitio web «rígido» no podrá adaptarse (o, digamos, responder) a los diferentes tamaños de pantalla. La apariencia de la barra de desplazamiento horizontal en el navegador es una de las señales más notables de que el sitio web no responde.
Por el contrario, el sitio web con un tema adaptable podrá adaptarse y se asegurará de que el contenido sea fácilmente legible de cualquier tamaño de pantalla.
En realidad no. Un tema sensible ajustará la pantalla con el objetivo principal de que el contenido del sitio web pueda ser utilizado por el visitante. Para lograr este objetivo, el sitio web puede ocultar algunos de sus componentes accesorios (como la barra lateral) y cambiar el tamaño de otros componentes (por ejemplo, imágenes, fuentes, etc.).)
Es bastante fácil saber qué tan sensible es el tema de su sitio web. Solo tiene que abrirlo en diferentes tamaños de monitores de computadora y pantallas de teléfonos móviles. Si ves bien tu sitio web y todo el contenido es legible, tu sitio web es responsivo. Si no tiene diferentes tipos de dispositivos para probar su sitio web, también puede usar pruebas en línea para la capacidad de respuesta.
La respuesta general es que sí es muy importante. Pero antes de tomar la decisión de hacer un cambio de imagen de su sitio web para transformarlo en uno receptivo, debe mirar los datos de tráfico web. A partir de estos datos, intenta encontrar cuánto tráfico está recibiendo tu sitio web desde dispositivos móviles. Por lo general, los sitios web están diseñados para usarse en computadoras de escritorio / portátiles, pero si recibe tráfico significativo de dispositivos como tabletas / teléfonos móviles, debería ver cómo se ve su sitio web en dichos dispositivos.
En la actualidad, los sitios web asiáticos reciben un promedio del 27% de su tráfico desde dispositivos móviles. Este porcentaje sería mucho mayor para sitios web en áreas como Europa y América porque los dispositivos móviles son relativamente mucho más populares.
Te sorprenderá que la capacidad de respuesta se pueda lograr fácilmente usando solo CSS. Los estándares CSS actuales le permiten estilizar su sitio web para diferentes tipos de pantalla. Esto significa que puede tener reglas CSS separadas para diferentes tamaños de pantalla. Por ejemplo:
@pantalla de medios y (ancho máximo:320px) {
.primario-barra lateral { mostrar: none } / / ocultar la barra lateral cuando el tamaño de la pantalla es de 320 px o menos
}
@pantalla de medios y (ancho mínimo:1024px) {
cuerpo { tamaño de fuente: 12px} / / establece el tamaño de fuente para tamaños de pantalla superiores a 1024px
}
Estas reglas CSS personalizadas controlarán el aspecto de su sitio web dependiendo del espacio disponible en la pantalla.
Si decides optar por el diseño responsivo para tu sitio web o blog, puedes esperar tener las siguientes ventajas:
- El tráfico aumentará en su sitio web porque los usuarios de dispositivos móviles podrán usarlo y pueden decidir regresar para obtener nueva información. Si los usuarios móviles no pueden usar el contenido de un sitio web, ¡no volverán!
- Si utiliza anuncios en su sitio web para ganar dinero en línea, sus ingresos pueden aumentar porque un sitio web receptivo también podrá mostrar anuncios en dispositivos móviles.
- No necesitará desarrollar diferentes versiones de su sitio web o blog para diferentes plataformas. Esto también ahorrará tiempo en mantenimiento, ya que más versiones requieren más tiempo de mantenimiento.
- Si desarrolla más de una versión para diferentes tipos de dispositivos, se enfrenta al peligro de indexar URL duplicadas en Google. Las URL diferentes que apuntan al mismo contenido se denominan URL duplicadas. Google pone una fuerte penalización en las URL duplicadas creyendo que el contenido también está duplicado. El diseño de sitios web receptivos lo protege de tal penalización.
- No tendrá que preocuparse por la detección correcta del agente, ya que el mismo sitio web funcionará para todos los agentes del navegador.
- Compartir URL en sitios web de redes sociales será más fácil porque cada página de tu sitio web solo tendrá una URL asociada.
El diseño responsivo no presenta desventajas significativas, excepto que las reglas CSS adicionales pueden aumentar el tamaño del archivo CSS y, como resultado, el tiempo de descarga aumentará. Pero con Internet cada vez más rápido disponible en todo el mundo, no creo que esto plantee ningún problema real.
En el diseño responsivo, no se utilizan diferentes imágenes para diferentes tamaños de pantalla. En su lugar, la misma imagen se cambia de tamaño a través de CSS para que quepa en la pantalla del dispositivo. Por lo tanto, los dispositivos móviles también tendrán que descargar las mismas imágenes de alta resolución que se sirven en conexiones de escritorio.
Ahora, sabemos que el diseño receptivo puede suponer una carga adicional para la conexión a Internet móvil, es importante que pueda probar la rapidez con la que funciona su diseño actual (receptivo o no receptivo). La mejor herramienta en línea para probar esto es PageSpeed de Google. Esta herramienta puede marcar su sitio web tanto en dispositivos de escritorio como móviles.
La mayoría de los sitios web de Google ahora son responsivos. Por ejemplo, el sitio web de Chromebook utiliza un diseño adaptable. Pero Google es una empresa pionera en todo lo relacionado con Internet. A medida que más y más empresas reconocen la importancia del diseño receptivo, los sitios web están cambiando a este nuevo paradigma. Mira los sitios web de la cadena de restaurantes Wendy’s, la compañía de marketing entrante HubSpot y el periódico Boston Globe para obtener algo de inspiración.
Sí, hay muchos sitios web importantes que aún no han adoptado el diseño adaptable. Los ejemplos incluyen CNN y BBC. Estos son sitios web masivos y un rediseño completo para incorporar capacidad de respuesta puede requerir una inversión significativa. Esa podría ser la razón por la que estos medios de comunicación son todavía sensible.
no, no es muy caro. Si tienes un sitio web/blog basado en WordPress, hay muchos temas responsivos disponibles. El tema predeterminado de WordPress (es decir, TwentyThirteen) también está diseñado para ser receptivo. La mayoría de los temas gratuitos ofrecidos por WordPress y Blogger son responsivos. Pero si está utilizando un tema de terceros, debe verificar su capacidad de respuesta.