¿Qué es el Diseño Responsivo?
El diseño web receptivo se refiere a una estrategia de diseño que crea sitios web que funcionan bien para dispositivos móviles, tabletas y computadoras de escritorio. Los sitios web sin un diseño receptivo corren el riesgo de alienar a un número significativo de usuarios.
Además, Google considera la “compatibilidad con dispositivos móviles” como un parámetro para la clasificación.
Además, el 53,8% de los diseñadores web afirman que “no responder en todos los dispositivos” es una de las principales razones para rediseñar un sitio web. Naturalmente, los desarrolladores y diseñadores de sitios web ponen gran énfasis en la creación de sitios web receptivos en primer lugar. Este artículo explorará algunos métodos mediante los cuales pueden lograr esto y probará sitios web para niveles adecuados de capacidad de respuesta.
Cómo crear un sitio Web Responsive
La guía para principiantes de diseño web receptivo (ejemplos de código y ejemplos de diseño)
Con un Internet al que se accede cada vez más desde dispositivos móviles, ya no es suficiente tener un diseño de sitio web estático que solo se ve bien en la pantalla de una computadora.
Sin mencionar que también debe considerar tabletas, computadoras portátiles 2 en 1 y diferentes modelos de teléfonos inteligentes con diferentes dimensiones de pantalla al crear un diseño.
Por lo tanto, colocar su contenido en una sola columna y cancelarlo no va a ser suficiente.
Con un diseño web receptivo, puede asegurarse de que su sitio web se vea mejor en teléfonos celulares, tabletas, computadoras portátiles y pantallas de escritorio.
Y esa mejora en la experiencia del usuario significa mayores conversiones y crecimiento empresarial.
Esta guía le brindará todo lo que necesita saber sobre el diseño de sitios web receptivos, incluidas definiciones, un tutorial paso a paso, ejemplos y más.
Ahora que está familiarizado con los componentes básicos, es hora de hacer que su sitio web responda.
1– El diseño
Al crear un sitio web receptivo o hacer receptivo un sitio existente, lo primero que debe observar es el diseño.
Cuando construyo sitios web receptivos, siempre empiezo creando un diseño no receptivo, fijo en el tamaño predeterminado. Por ejemplo, el ancho predeterminado de CatsWhoCode.com es 1100px.
Cuando estoy satisfecho con el diseño que no responde, agrego consultas de medios y pequeños cambios en mi CSS para crear un sitio receptivo. Cuando se trata de diseño web, es mucho más fácil concentrarse en una tarea a la vez.
Cuando haya terminado con su diseño que no responde, lo primero que debe hacer es pegar las siguientes líneas dentro de las etiquetas y en su página HTML.
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">
Esto establecerá la vista en todas las pantallas en una relación de aspecto de 1 × 1 y eliminará la funcionalidad predeterminada de los iPhone y otros dispositivos móviles que representan sitios web en vista completa y permiten a los usuarios acercar el diseño al pellizcar.
Ahora es el momento de agregar algunas consultas de medios. Según el sitio W3C, las consultas de medios consisten en un tipo de medio y cero o más expresiones que verifican las condiciones de características de medios particulares. Mediante el uso de consultas de medios, las presentaciones se pueden adaptar a una gama específica de dispositivos de salida sin cambiar el contenido en sí.
En otras palabras, las consultas de medios permiten que su sitio web se vea bien en todo tipo de pantallas, desde teléfonos inteligentes hasta pantallas grandes. Esto es lo que se llama diseño web responsivo.
Las consultas de medios dependen del diseño de su sitio web, por lo que es bastante difícil para mí proporcionarle un fragmento de código listo para usar. Sin embargo, el siguiente código es un buen punto de partida para la mayoría de los sitios web. En este ejemplo, #principal es el área de contenido principal y #secundario la barra lateral.
Al observar el código, puede ver que definí dos tamaños: el primero tiene un ancho máximo de 1060 px y está optimizado para la visualización horizontal de tabletas. #primary ocupa el 67 % de su contenedor principal y #secundario el 30 %, más un margen izquierdo del 3 %.
El segundo tamaño está diseñado para tabletas de retrato y tamaños más pequeños. Debido al pequeño tamaño de las pantallas de los smartphones, decidí darle a #primary un ancho del 100%. #secundario también tiene un ancho del 100 % y se mostrará debajo de #primario.
Como ya dije, probablemente tendrás que adaptar un poco este código para que se ajuste a las necesidades específicas de tu sitio web. Péguelo en el archivo .css de su sitio.
Una vez hecho esto, veamos qué tan receptivo es su diseño. Para hacerlo, uso esta increíble herramienta creada por Matt Kersley. Por supuesto, puede comprobar el resultado en su propio dispositivo móvil.
/* Consultas de medios: panorama de la tableta */
pantalla @media y (ancho máximo: 1060px) {
#principal { ancho: 67%; }
#secundario { ancho:30%; margen izquierdo: 3%;}
}
/* Media Queries: Tabled Portrait */
Pantalla @media y (ancho máximo: 768 px) {
#principal { ancho: 100%; }
#secundario { ancho:100%; margen:0; borde: ninguno; }
}
2– Medios
Un diseño receptivo es el primer paso para un sitio web totalmente receptivo. Ahora, centrémonos en un aspecto muy importante de un sitio web moderno: los medios, como videos o imágenes.
El código CSS a continuación garantizará que sus imágenes nunca sean más grandes que su contenedor principal. Es súper simple y funciona para la mayoría de los sitios web receptivos. Para que funcione correctamente, este fragmento de código debe insertarse en su hoja de estilo CSS.
img { ancho máximo: 100%; altura: automático; }
Aunque la técnica anterior es eficiente, a veces es posible que necesite tener más control sobre las imágenes y mostrar una imagen diferente según el tamaño de visualización del cliente.
Como puede ver, usamos el atributo data-* para almacenar URL de imágenes de reemplazo. Ahora, usemos todo el poder de CSS3 para reemplazar la imagen predeterminada por una de las imágenes de reemplazo especificadas si se cumple la condición de ancho mínimo del dispositivo:
Impresionante, ¿no? Ahora echemos un vistazo a otro medio muy importante en los sitios web de hoy: los videos.
Como la mayoría de los sitios web utilizan videos de sitios de terceros como YouTube o Vimeo, decidí centrarme en la técnica de video elástico.
.video-contenedor {
posición: relativa;
acolchado-bajo: 56,25%;
acolchado superior: 30px;
altura: 0;
desbordamiento: oculto;
}
.video-contenedor iframe,
objeto .video-container,
.video-contenedor incrustar {
posición: absoluta;
superior: 0;
izquierda: 0;
ancho: 100%;
altura: 100%;
}
Una vez que aplicó este código a su sitio web, los videos incrustados ahora responden.
3– Tipografía
El último paso de este tutorial es definitivamente importante, pero los desarrolladores a menudo lo descuidan cuando se trata de sitios web receptivos: la tipografía.
Hasta hace poco, la mayoría de los desarrolladores usaban píxeles para definir los tamaños de fuente. Si bien los píxeles están bien cuando su sitio web tiene un ancho fijo, un sitio web receptivo debe tener una fuente receptiva. El tamaño de fuente de su sitio debe estar relacionado con el ancho de su contenedor principal, para que pueda adaptarse a la pantalla del cliente y ser fácilmente legible en dispositivos móviles.
La especificación CSS3 incluye una nueva unidad llamada rems. Funcionan casi de manera idéntica a la unidad em, pero son relativas al elemento html, lo que las hace mucho más fáciles de usar que ems.
Como los rems son relativos al elemento html, no olvide restablecer el tamaño de fuente html:
html { font-size:100%; }
Una vez hecho esto, puede definir tamaños de fuente receptivos como se muestra a continuación:
@media (ancho mínimo: 640px) { cuerpo {font-size:1rem;} }
@media (ancho mínimo: 960px) {cuerpo {tamaño de fuente: 1.2rem;}}
@media (ancho mínimo: 1100px) {cuerpo {tamaño de fuente: 1.5rem;}}
¿Qué es un sitio web totalmente receptivo?
El diseño web receptivo es una técnica que garantiza que una página web se muestre bien y brinde una experiencia de usuario de calidad tanto en dispositivos tradicionales como móviles. Debido a la importancia de los teléfonos inteligentes y otros dispositivos portátiles, es obligatorio que su sitio web pueda adaptarse a varios tamaños de pantalla.
¿Cómo hago que mi sitio web de WordPress sea receptivo?
Si desea crear un sitio de WordPress receptivo, el proceso es básicamente el mismo que con otros sitios web. Puede seguir este tutorial o instalar el complemento WP Touch que se encargará del trabajo por usted.
ES_CO 
EN