Los sitios receptivos y los temas receptivos son más que una moda pasajera. Con más y más personas que utilizan dispositivos móviles para acceder a Internet, la capacidad de respuesta es ahora una característica esencial de cualquier buen sitio web o sitio web. tema de WordPress.

Si consulta el directorio de Temas de WordPress, encontrará que la mayoría de los temas recientes son receptivos, lo que significa que se ven y funcionan muy bien en cualquier dispositivo.

Pero el diseño receptivo ha evolucionado durante los 7 años desde que fue desarrollado por Ethan Marcotte. Ahora, un diseño para una variedad de tamaños de pantalla es mucho más que identificar puntos de interrupción para dispositivos populares que deben agregarse a su hoja de estilo.

Su trabajo de diseño debe adaptarse a cualquier tipo de pantalla, de modo que sus puntos de interrupción se basen en su diseño y no en el tamaño de la pantalla deseada. Se trata de rendimiento, lo que le permitirá asegurarse de que su sitio sea rápido en todos los dispositivos y en todas las conexiones. Y, sobre todo, también se relaciona con el contenido. Porque el El diseño de su diseño debe funcionar no solo en cualquier tipo de dispositivo, sino que también debe funcionar correctamente con su contenido, para que la experiencia del usuario sea lo mejor posible al consumir este contenido.

Diseño Responsive

Mi forma favorita de enfrentar estos desafíos es adoptar un enfoque móvil primero, que transforma un diseño de sitio web tradicional. En lugar de hacer un diseño que se ajuste a pantallas grandes y ajustarlo para pantallas más pequeñas, primero debe comenzar a diseñar para pantallas pequeñas y luego adaptarlo para pantallas grandes. Esto le brinda una serie de ventajas en lo que respecta a la planificación, el diseño y el rendimiento del contenido, y hará que la forma en que codifica sea más eficiente.

En este tutorial, describiré algunos de los beneficios de un enfoque móvil y explicaré de qué se trata en detalle. A continuación, le mostraré cómo convertir su tema de WordPress en tema móvil.

¿Qué es un diseño con un enfoque móvil?

« Mobile First Es un enfoque de diseño y desarrollo web desarrollado por Luke Wroblewski en su libro móviles primero ". Tiene dos objetivos principales:

Reconsidere su enfoque del diseño y desarrollo web para trabajar primero en dispositivos móviles.

Le permite escribir consultas de medios que funcionan primero en las pequeñas y luego en las grandes y no al revés.

Primer libro móvil

Entonces, ¿qué significa esto en términos de su forma de trabajar? Bueno, repensar la forma en que diseña sitios web para atraer el interés a los dispositivos móviles primero implica algunas cosas:

  • Centrarse en el contenido y las interacciones, no en los detalles, imágenes y cosas que hacen que su sitio se vea bonito y llenen el espacio.
  • Deshazte de los elementos en pantalla que están ahí porque hay espacio para ellos, no porque tengan un propósito.
  • Un diseño enfocado a la experiencia del usuario. El diseño debería facilitar la navegación a los usuarios.
  • Considere los requisitos de contenido: ahora que tiene una pantalla pequeña para trabajar, ¿qué es lo que realmente quiere? poner en linea ?
  • Estructura tu contenido, es fácil interactuar con él en una pantalla pequeña.
  • Para ser efectivo

No estoy diciendo que eso signifique que su sitio o tema solo debe verse bien, un diseño moderno y atractivo es importante para UX y para crear una impresión. Pero estoy diciendo que el diseño primero debe estar centrado en los dispositivos móviles, no es solo la apariencia.

Cómo transformar su tema en un tema "móvil primero"

La mejor manera de abordar el primer diseño y el desarrollo móvil es comenzar con una pizarra en blanco. Con un nuevo proyecto, tendrá todas las ventajas de la telefonía móvil en primer lugar, incluido el nuevo enfoque de diseño, así como las ventajas de la codificación.

Pero a veces tienes un tema receptivo que deseas actualizar y convertir a un tema "primero para dispositivos móviles". ¿Cómo vas a hacerlo?

Tomemos un tema imaginario y consideremos que ya tiene un diseño. Así es como se ve nuestro diseño de oficina nuevamente:

Diseño de escritorio

Los elementos principales de este diseño serán similares a esto:

  • Encabezado
  • nav.main (navegación principal)
  • section.main (sección principal)
  • section.content (área de contenido)
  • aside.sidebar (barra lateral)
  • pie de página (pie de página)

Es probable que el estilo de diseño para esto sea algo como esto:

cabecera, .main, pie de página {width: 96%; max-width: 1000px; margen: 10px automático; clear: both; .Este contenido ha sido} {width: 60%; margin-right: 5%; float: left; .sidebar} {width: 35%; float: right; }

Como el tema es "receptivo", también necesitará algunas consultas de medios para la versión más pequeña de la pantalla. Puede que haya algunos de ellos, pero centrémonos en el de las pantallas más pequeñas. Es probable que sea algo similar a esto:

@media pantalla y (max-width: 500px) {header, .main, pie de página, .Este contenido ha sido, .sidebar {width: 98%; } .Este contenido, .sidebar {float: none; margen: 0 automático; }}

Puede elegir estructurar su CSS de manera diferente (o usar un preprocesador), pero esencialmente eso es lo que obtienes. Dos bloques de código: uno para escritorio y otro para móvil.

Ahora echemos un vistazo a cómo convertir esto para un primer diseño móvil. Primero, elimine los dos bloques de código.

Ahora, en la parte superior de la hoja de cálculo, puede configurar el diseño para pantallas pequeñas:

cabecera, .main, pie de página {margin: 10px 1%; }

Notarás que es más corto que el estilo original para pantallas pequeñas. Esto se debe a que no tiene que rehacer todo lo que ya creó para las pantallas más grandes.

Ahora, cree la consulta de medios, utilizando este tiempo en ancho mínimo en lugar de ancho máximo:

@media pantalla y (min-width: 500px) {header, .main, pie de página {width: 96%; max-width: 1000px; margen: 10px automático; clear: both; .Este contenido ha sido} {width: 60%; margin-right: 5%; float: left; .sidebar} {width: 35%; float: right; }}

¿Esto te suena familiar? Este es el mismo estilo que usó como predeterminado en su hoja de estilo adaptable. Así que no hay ganancia aquí en términos de la cantidad de código, pero hay una en términos de rendimiento: los dispositivos con pantallas más pequeñas ignorarán esto en lugar de pasar por toda la hoja de estilo para reemplazarla. por elementos añadidos en " consulta de medios Para el modo receptivo. Esto le dará una pequeña mejora en el rendimiento en dispositivos móviles.

Es posible que haya notado que el valor " max-ancho Es mucho más alto para elementos de ancho completo que el valor " min-width Para las consultas de medios, lo que hace que esta línea de código sea redundante para pantallas de tamaños inferiores a 1000px de ancho. Aquí hay un desafío para usted: intente eliminar esta parte del código y agregue una segunda consulta de medios dirigida a pantallas grandes.

Así es como convierte su diseño receptivo a " móviles primero ". Hay dos pasos:

Escriba el estilo predeterminado para pantallas pequeñas, que requiere una cantidad muy pequeña de código.

Agregue una consulta multimedia usando " min-width »Lugar de« max-ancho Y copie el estilo predeterminado de su tema receptivo a eso.

Eso es todo para este tutorial, si tienes alguna pregunta, no dudes en hacerla.