Una guía fácil para crear un sitio web receptivo

¿Siempre se ha preguntado cuántos sitios web modernos parecen 'encajar' tan perfectamente, independientemente del dispositivo que esté utilizando para verlos? La codificación de una página web receptiva es una práctica común que ahora prevalece ampliamente en muchos sitios web nuevos en la actualidad. Las páginas web receptivas realizan un truco inteligente al cambiar su tamaño para adaptarse a la pantalla del dispositivo que se utiliza para ver el sitio web. Eso significa que se ven muy bien en un iPhone o una computadora de escritorio y todo lo demás.

Esta "capacidad de respuesta" se produce de manera tan fluida que es posible que ni siquiera lo hayas notado. Un excelente diseño web receptivo debe fluir sin problemas de un dispositivo a otro al mismo tiempo que garantiza que se mantenga una experiencia de navegación óptima. Los sitios web receptivos han pasado de ser una característica "agradable de tener" a algo que ahora es prácticamente obligatorio para cualquier sitio web. ¿Por qué? Simplemente porque la cantidad de personas que ahora usan dispositivos móviles para navegar en línea se ha disparado en los últimos años y esta tendencia hacia dispositivos móviles (y, por lo tanto, pantallas más pequeñas) no muestra signos de desaceleración.

Eche un vistazo a los datos a continuación (proporcionados por cortesía de statcounter.com). Verá que, con mucho, los tamaños de pantalla más frecuentes son pequeños (es decir, pantallas móviles).

Imagínese si todos estos millones de usuarios tuvieran que mirar sitios web que no responden en estos dispositivos. Se sentirían muy frustrados, ya que implicaría realizar muchas acciones de "pellizcar y hacer zoom" para poder ver adecuadamente el contenido en esos sitios web respectivos. Hay muchas probabilidades de que estos usuarios abandonen estos sitios web en favor de un equivalente receptivo.

Si perder clientes potenciales no es suficiente para convencerlo del valor de tener un sitio web receptivo, entonces tal vez la idea de perder clasificaciones de búsqueda podría serlo. Google ha penalizado durante algún tiempo los sitios web que no ofrecen algún tipo de diseño receptivo o adaptable para usuarios móviles. Eso significa que si su sitio web no funciona bien en un dispositivo móvil, espere recibir una penalización en la clasificación. ¿Qué significa 'funciona bien' en un móvil? Bueno, el contenido debe mostrarse de una manera que sea fácil de usar. Esto significa que debe ser legible sin pellizcar ni hacer zoom. También debe cargarse rápidamente (si está interesado en cómo el almacenamiento en caché de WordPress puede ayudarlo con sus objetivos de velocidad, consulte este artículo 'Almacenamiento en caché de WordPress: cómo funciona y por qué debería usarlo !')

Páginas web receptivas frente a páginas web adaptativas

Si retrocedemos una década o dos, los teléfonos móviles no eran tan frecuentes como lo son ahora. Ciertamente, los que hicieron un buen trabajo al permitirle navegar por la web realmente no comenzaron a llegar hasta quizás 2005 en adelante (por increíble que parezca, el iPhone ni siquiera apareció en escena hasta 2007). Las redes celulares tampoco podían transportar muchos datos, lo que significaba que había oportunidades limitadas para la navegación web móvil. Todo eso cambió rápidamente durante la última década y los sitios web se esforzaron por ponerse al día para servir mejor a sus clientes en el nuevo mundo impulsado por dispositivos móviles en el que nos encontramos ahora.

Los diseñadores web trabajaron de varias maneras para resolver el problema de tener que adaptar un sitio web de 'escritorio' a una pantalla móvil. En los primeros días, se desarrollaron sitios web independientes 'solo para dispositivos móviles' que se ejecutaban junto con la versión principal de 'escritorio' de un sitio web. Por lo general, tenían un diseño bastante tosco y con frecuencia ofrecían una experiencia de navegación simplificada que omitía muchas características de su hermano mayor de escritorio.

Después de esto, el Diseño Adaptativo entró en escena. Esto llevó la versión solo móvil de ofrecer un sitio web móvil especialmente diseñado un paso más allá. Se crean múltiples diseños estáticos que ofrecen una experiencia de navegación móvil más atractiva para el usuario. Se carga el tamaño de pantalla del dispositivo que utiliza el sitio web y se sirve el tamaño más adecuado. Por lo general, se construirían seis tamaños para adaptarse a pantallas que van desde una computadora de escritorio grande hasta un dispositivo móvil. Sin embargo, el diseño adaptativo es algo limitante y definitivamente no está preparado para el futuro, ya que no se adapta a los tamaños de pantalla que no encajan perfectamente en el conjunto de 6 categorías que se han creado. También requiere muchos recursos desde una perspectiva de diseño, ya que se deben construir 6 versiones de un sitio web.

Los principales inconvenientes de los diseños adaptables se resolvieron con el diseño receptivo. En lugar de ofrecer un diseño prediseñado basado en el tamaño de una pantalla, los diseños receptivos ajustan la forma en que se representan según el dispositivo. Esto significa que debe obtener un sitio web atractivo y fácil de usar, independientemente del dispositivo (y el tamaño de pantalla correspondiente) que se utilice para ver el sitio web.

El diseño receptivo ahora se considera el estándar de la industria para sitios web móviles. De hecho, los mismos Google recomiendan el Diseño Web Responsivo. En este tutorial, daremos una mirada a los principiantes al diseño receptivo y cómo se puede aplicar al diseño de su sitio web.

¿Cómo funcionan los sitios web receptivos?

Los sitios web receptivos utilizan lo que se denomina consultas de medios CSS para modificar el diseño de un sitio web en función del ancho de la pantalla. CSS Media Queries es una herramienta poderosa que en realidad es bastante simple de implementar si tiene una comprensión básica de CSS. Un lugar para comenzar antes de sumergirse en el proceso de creación de un sitio web receptivo es echar un vistazo a algunos ejemplos en vivo. La mejor manera de hacer esto es en una pantalla de computadora de escritorio o portátil. Abra un navegador, como Chrome, y diríjase a un sitio web popular. Es posible que desee probar el nuestro en pressidium.com.

Reduzca el tamaño de la ventana del navegador y luego, pasando el cursor sobre el borde derecho de la ventana del navegador, comience a deslizar la ventana para que se vuelva más estrecha. Verás que a medida que se hace más pequeño, el diseño del sitio web se modifica. Lo que sucede es que cuando el sitio web alcanza un tamaño predefinido (por ejemplo, 1000 píxeles de ancho), se activa una consulta de medios CSS que le indica al navegador que use el estilo CSS relacionado con este ancho de pantalla. Luego, el sitio web fluye con gracia o responde a este nuevo tamaño de pantalla y se muestra en consecuencia. ¡Muy inteligente!

Entonces, ahora que tenemos una comprensión básica de lo que está sucediendo, profundicemos en el meollo del asunto y veamos cómo podemos construir una página web receptiva nosotros mismos.

Creación de una página web receptiva

No vamos a utilizar ningún código de back-end en este tutorial, por lo que no es necesario acceder a un servidor para intentarlo. Simplemente cree una carpeta en su escritorio y agregue sus archivos de trabajo a esto.

Paso 1: HTML

Cree un archivo index.html dentro de su nueva carpeta. Abra este archivo con su editor de texto/código favorito y luego inserte el siguiente código:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

Paso 2: CSS externo

Deberá agregar un archivo externo style.css. Para hacer esto, cree un archivo llamado style.css y colóquelo en la misma carpeta que su archivo index.html. Luego, agregue el siguiente código:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

En este punto, si abre su archivo index.html con su navegador de Internet (usamos Chrome en este ejemplo), lo que debería ver en su página es algo como esto:

Ahora echemos un vistazo a las herramientas de desarrollo de nuestro navegador (nuevamente, estamos usando Chrome para este ejemplo). Abra Chrome y presione F12 y configúrelo para ver en el lado derecho.

Cambie el tamaño de la ventana moviendo el cursor separador y observe cómo cambia la resolución de la pantalla en tiempo real.

Paso 3: Unidades relativas de CSS

En nuestro ejemplo, verá que si lo arrastra a 1396 px de ancho, notará que la barra lateral derecha con el menú se moverá debajo del contenido principal, ya que ya no cabrá.

Eso sucedió porque establecimos un ancho fijo de 900px en div#main y 300px en div#sidebar . Cambiemos el formato de estos valores y usemos porcentajes en su lugar. (Tenga en cuenta que los rellenos y los márgenes también se cuentan en el ancho, por lo que estos valores también deben convertirse a un porcentaje).

Cuando haya realizado estas ediciones, el archivo style.css debería verse así:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

¡Esto ahora se está poniendo emocionante ya que tenemos una página que ahora se está volviendo más receptiva!

Aunque las cosas están mejorando, el área de publicaciones necesita más edición de CSS. Cuanto más pequeño es el ancho, más “feos” se vuelven los buzones. Para evitar esto, necesitamos editar el CSS de la publicación para lograr un diseño más bonito y receptivo.

Notarás que los problemas visuales solo ocurren cuando la pantalla se estrecha. Para resolver este problema, tendremos que usar algunas consultas de medios CSS para que, más allá de cierto punto, se active el CSS alternativo que produce un diseño de mejor apariencia.

Lo que vamos a intentar hacer es convertir nuestra área de publicación de 3 columnas de 'pantalla ancha' en un área de 2 columnas que encajará mejor en una pantalla más estrecha. Para lograr esto, utilizamos consultas de medios CSS.

Paso 4: consultas de medios CSS

Para nuestro modo de 'pantalla ancha', presentaremos una consulta de medios CSS como esta: like this @media screen and (min-width: 1396px) . Esta consulta se encuentra en la parte superior de nuestra hoja de estilo CSS y encierra todo el conjunto de CSS que queremos ejecutar cuando nuestra pantalla tiene un ancho mínimo de 1396 px.

Ahora podemos copiar todo este código y duplicarlo en nuestra hoja de estilo CSS (cópielo y péguelo debajo del CSS actual para que tenga dos versiones idénticas en un archivo). Ahora, edite la consulta de medios CSS en la parte superior del segundo lote de CSS para leer @media screen and (max-width: 1395px) . Esto ahora le dice a nuestro navegador que si es más pequeño que 1395px, entonces debería ejecutar este CSS. Ahora que esto está hecho, podemos modificar el CSS en esta sección 'más pequeña' para que altere el diseño de nuestra página web para que se ajuste mejor a una pantalla más pequeña. En este ejemplo, vamos a modificar el y deberíamos modificar el porcentaje de div.post del 31,1 % al 45 %.

Ahora debería tener un archivo CSS que se vea así:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

Ahora que los cuadros de publicaciones tienen un estilo diferente para pantallas con un ancho inferior a 1395 px, veamos cómo se refleja esto en acción:

¡Agradable!

Notarás que las cosas se siguen poniendo raras mientras se reduce y después de cruzar 760px de ancho.

Para ordenar esto, podemos usar el mismo truco que usamos para pasar de 3 columnas a 2. Esta vez, sin embargo, usaremos un 'punto de ruptura' de 760 px y modificaremos nuestro CSS div.post al 94 %. Si hacemos esto, tendremos tres consultas de medios CSS que deberían verse así:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

Nuestra @media screen and (max-width: 760px) CSS incluirán nuestro div.post editado que se verá así:

 div.post { width: 94%; float: left; padding: 2%; }

Si todo está bien, ahora debería ver algo como lo siguiente cuando reduzca el ancho de su navegador a menos de 760px de ancho:

¡Y eso es! ¡Ahora hemos creado una página web receptiva que funciona en pantallas más grandes, tabletas y móviles!

El uso de esta plantilla tiene más de un juego y experimenta con otros estilos CSS. Hay mucho que aprender jugando con este ejemplo y aplicando varias reglas de CSS que luego se pueden usar para crear sitios web hermosos Y receptivos.

Aloje su sitio web con Pressidium

GARANTÍA DE DEVOLUCIÓN DE DINERO DE 60 DÍAS

VER NUESTROS PLANES

Conclusión

Si está utilizando un CMS como WordPress, es posible que se pregunte por qué es necesario profundizar en el CSS subyacente y las consultas de medios que impulsan una página web receptiva. Después de todo, cualquier tema de WordPress codificado decentemente ya debería tener un diseño receptivo incorporado. Si bien esto es cierto, comprender por qué un sitio web actúa de la manera en que lo hace en función de ciertos anchos de navegador puede ser de gran ayuda. Puede haber ocasiones en las que, por alguna razón, el diseño receptivo inicial agregado por el autor del tema no funcione como usted también lo necesita. Al saber cómo aplicar consultas de medios para modificar qué CSS se muestra en ciertos puntos de interrupción, puede seguir adelante y aplicar cambios que den como resultado el aspecto y la función que necesita.

Y si alguna vez planea construir su propio tema de WordPress, ¡entonces una sólida comprensión de las consultas de medios es absolutamente imprescindible! Esperamos que este artículo le haya dado una idea de lo que sucede detrás de escena con los sitios web receptivos de hoy. ¡Feliz codificación receptiva!