Saltar al contenido principal

Modo de empleo móvil-primer diseño de Temas de WordPress

Divi: el tema de WordPress más fácil de usar

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

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

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

Pero el diseño receptivo ha evolucionado desde 7 hace años 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 estilos.

Su trabajo de diseño debe hacerse para adaptarse a cualquier tipo de pantalla, por lo que sus puntos de interrupción se basan en su diseño, no en el tamaño de pantalla esperado. Es una cuestión de rendimiento, que le permitirá asegurarse de que su sitio sea rápido en todos los dispositivos por todas las conexiones. Y, lo más importante, se trata de contenido también. Porque el El diseño de su diseño debería funcionar no solo en cualquier tipo de dispositivo, sino también funcionar correctamente con su contenido, para que la experiencia del usuario sea lo mejor posible al consumir ese contenido.

Mi método favorito para enfrentar estos desafíos es adoptar un primer enfoque móvil, que transforma el diseño de un sitio web tradicional. En lugar de diseñar un diseño que se adapte a pantallas grandes y ajustarlo para pantallas más pequeñas, primero debe comenzar diseñando para pantallas pequeñas y luego adaptarlo para pantallas grandes. Esto le brinda una serie de ventajas en términos de planificación de contenido, diseño y rendimiento, y hará que su codificación sea más eficiente.

Dans ce tutoriel, je vais décrire quelques-uns des avantages d’une approche approche mobile et expliquer en quoi cela consiste en détails. Ensuite, je vais vous montrer comment s’y prendre pour convertir votre thème WordPress en thème mobile.

¿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:

Repensa tu enfoque del diseño y desarrollo web para que funcione primero en los dispositivos móviles.

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

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Entonces, ¿qué significa esto en términos de la forma en que trabaja? Bueno, reconsiderar su forma de diseñar sitios web para poner interés en los dispositivos móviles primero implica algunas cosas:

  • Concéntrese en el contenido y las interacciones, no en los detalles, imágenes y elementos que hacen que su sitio se vea bien y llene el espacio.
  • Deshazte de los elementos en la pantalla que están ahí porque hay espacio para ellos, no porque tengan un propósito.
  • Un diseño centrado en la experiencia del usuario. El diseño debería simplificar la navegación para los usuarios.
  • Considere las necesidades en términos de contenido: ahora que tiene una pantalla pequeña para trabajar, ¿qué es lo que realmente desea poner en línea?
  • Estructure su contenido, es fácil interactuar con él en una pantalla pequeña.
  • Para ser efectivo.

No digo que eso signifique que su sitio o tema debe ser hermoso, un diseño moderno y atractivo es importante para UX y para crear una impresión. Pero digo que el diseño debe centrarse primero en el móvil no solo en la apariencia.

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

La mejor manera de acercarse al primer diseño y desarrollo móvil es desde una pizarra en blanco. Con un nuevo proyecto, tendrá todos los beneficios del móvil en primer lugar, incluido el nuevo enfoque de diseño, así como los beneficios 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?

Tome un tema imaginario y considere que ya tiene un diseño. Así es como luce nuestro diseño de oficina:

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Los principales elementos de esta disposición 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)

El estilo de diseño para esto es probable que 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. Podría haber algunos de ellos, pero centrémonos en uno para las pantallas más pequeñas. Esto 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; }}

Puedes elegir estructurar tu CSS de forma diferente (o usa un preprocesador), Pero en esencia esto es lo que tendrá. Dos bloques de código: uno para el escritorio y para móviles.

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

Ahora, en la parte superior de la hoja de cálculo, puede establecer el diseño para tamaños de pantalla pequeños:

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

Notará que es más corto que el estilo original para pantallas pequeñas. Esto se debe a que no tiene que volver a hacer todo lo que ya ha creado para pantallas más grandes.

Ahora, cree la consulta de medios, usando esta vez en min-width en lugar de max-width:

@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; }}

Suena familiar? Este es el mismo estilo que usaste como predeterminado en tu hoja de estilo receptiva. Entonces, no hay ganancia aquí en términos de la cantidad de código, pero hay uno 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 estilos, para reemplazarla por elementos agregados en " consulta de medios Para el modo de respuesta. Esto le dará una pequeña mejora en el rendimiento en dispositivos móviles.

Puede haber 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. Este es 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, lo que requiere una cantidad muy pequeña de código.

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

Eso es todo por este tutorial, si tiene alguna pregunta, no dude en preguntar.

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
9 acciones
cuota4
Tweet2
Siguiente 3
WhatsApp