Todo lo que necesita saber sobre el diseño receptivo para WordPress

El diseño receptivo se ha vuelto cada vez más importante en los últimos años. Hoy, ser totalmente receptivo es una característica que se ha vuelto casi obligatoria para los complementos y temas de WordPress. Sin embargo, a menos que sea un diseñador web, exactamente lo que hace que el diseño receptivo sea que podría ser una caja de pandora para usted. Ciertamente sabes que es importante, pero eso es todo. Cómo funciona o cómo implementarlo todavía está algo más allá de usted. O tal vez su sitio está ejecutando otro tema estático y desea actualizarlo sin perder el aspecto que trabajó tan duro.
Ambas son muy buenas razones para educarlo sobre el diseño receptivo para WordPress, y en nuestra serie de dos elementos de partidos descubrirá todo lo que necesita saber sobre este importante tema. En esta publicación, repasaremos lo que es un diseño receptivo y cómo puede usarlo. Vaya a la segunda publicación para averiguar exactamente cómo hacer su publicación receptiva. ¿Suena bien? Entonces comencemos. ¿Qué es el diseño receptivo y por qué debería importarle? Dispositivos móviles: todo es su culpa como probablemente note, el uso de teléfonos y tabletas ha crecido enormemente en los últimos años. Para alguien como yo, que ha crecido con teléfonos rotativos, sigue siendo un poco increíble.
Sin embargo, este desarrollo no solo ha tenido consecuencias dramáticas por la forma en que nos comunicamos, sino también para el uso en línea. Con casi todos sosteniendo un teléfono inteligente hoy en día, prácticamente podemos acceder a Internet en cualquier lugar, cuando lo queramos. Solo en los EE. UU., El tiempo dedicado al promedio digital en teléfonos inteligentes aumentó en un 394 por ciento entre 2010 y 2014. El aumento de las tabletas al mismo tiempo fue incluso 1,721 por ciento! 2014 también fue el año en que el tiempo total gastó en línea utilizando dispositivos móviles ha superado el de las computadoras de escritorio. Un año después, a principios de 2015, Google anunció que ahora registra más búsquedas móviles que en computadoras de escritorio. Poco después, el gigante de la búsqueda lanzó su actualización para la compatibilidad con dispositivos móviles, en realidad penalizando los sitios web sin presencia móvil optimizada (un apodo y MobileGeddon).

El diseño web para dispositivos móviles se había vuelto casi obligatorio. Ingrese el diseño receptivo a lo largo del tiempo, las personas han venido con varias formas de hacer que su sitio sea compatible con dispositivos móviles. Dos métodos populares fueron crear una versión de sitio móvil en un sub -dominio separado (generalmente m.yoursite.com) o el uso de complementos especializados de WordPress para crear versiones de sitio para dispositivos móviles. Sin embargo, el diseño receptivo ha aparecido rápidamente como una solución básica y hasta ahora es la forma más común de hacer que los sitios compatibles con teléfonos y tabletas. No es de extrañar, porque también es el camino recomendado por Google para hacerlo.
Pero, ¿cuál es exactamente el diseño receptivo? El término en sí fue inventado por Ethan Marcotte en 2010. Describe un enfoque del diseño web que tiene como objetivo hacer que el contenido sea visible en cualquier dispositivo con un mínimo de ampliación, cambio de tamaño y desplazamiento. Esto se logra adaptando el tamaño y la posición de los elementos del sitio, para que puedan cambiarse de acuerdo con el tamaño de la ventana de visualización. (Para aquellos que no saben, la ventana describe el área en la que un sitio web es visible y depende del tamaño de la pantalla y del tamaño de la ventana del navegador). Ventajas de este enfoque las ventajas del diseño receptivo, en oposición a otros Métodos, ¿es solo para crear y crear actualizar un solo sitio? Ya sea que sean computadoras de escritorio, teléfonos, tabletas o phables (que es una palabra muy fea si me preguntas), cualquiera puede usar la misma área para acceder a tu contenido. Además, la tecnología que hace que funcione se adapta a gran escala y , por lo tanto, compatible con dispositivos y navegadores de la mayoría de las personas. Mashable no fue incorrecto cuando llamaron a 2013 el año del diseño receptivo, porque este enfoque de diseño web se convirtió en el estándar de facto. Sin embargo, ¿cómo funciona exactamente? La base del diseño receptivo El diseño receptivo utiliza dimensiones proporcionales en lugar de absolutamente el principio principal de adaptar los sitios web a la pantalla en la que se muestran es la producción de una red de fluidos. La cuadrícula describe la estructura principal de un sitio web, como el encabezado, el sótano, el contenido, la barra lateral y todo lo que contiene.
Si no sabe de qué estoy hablando, acceda a cualquier sitio web receptivo (como este) y dibuje una parte de la ventana de su navegador al otro. Verá que el diseño cambia cuando la pantalla se vuelve más pequeña. Esto se logra utilizando las mediciones proporcionales para el ancho y la altura de los elementos de la página en lugar de los absolutos. Para aclarar lo que quiero decir, debe saber que en el pasado todos los sitios web eran estáticos, porque todas las mediciones se declararon en píxeles o en otra medida absoluta. Independientemente del tamaño de la pantalla con la que mira estos sitios, su diseño siempre seguirá siendo el mismo. Si la pantalla se vuelve más pequeña que el sitio, los usuarios deben moverse y aumentar para ver el resto. Para eliminar esto, el diseño receptivo evita mediciones absolutas y, en cambio, usa las proporcionales. Esto significa que las dimensiones de los elementos ya no se declaran en píxeles o algo así, sino en porcentajes y otras mediciones receptivas. De esta manera, los elementos se pueden adaptar a la pantalla en la que se muestran y es lo más importante para trabajar el diseño web receptivo.
Las dimensiones de las imágenes son flexibles, lo que es válido para la cuadrícula se aplica naturalmente a las imágenes. Y tienen que adaptarse al entorno de visualización y coincidir en la pantalla. Como verá en la segunda parte, lograr esto a través de CSS es realmente bastante simple. Sin embargo, las imágenes vienen con otras consideraciones, el tamaño más importante.
Las imágenes visuales a menudo representan la mayor parte del peso de la página y muchos dispositivos móviles, especialmente los teléfonos, tienen que hacer frente a velocidades de descarga más bajas. Por lo tanto, el diseño receptivo no se refiere solo a la adaptación de imágenes al tamaño de la pantalla, sino que debe asegurarse de que las páginas sigan siendo utilizables en conexiones más lentas. WordPress recientemente introdujo cambios en este departamento. Si está ejecutando la última versión, la plataforma se encargará automáticamente. Sin embargo, es un tema que generalmente es importante recordar para SEO en la página y como un paso para acelerar WordPri. Otras consideraciones Las redes fluidas y las imágenes flexibles forman la base del diseño receptivo, sin embargo, hay más. En general, el enfoque de diseño es satisfacer las necesidades de los usuarios móviles que interactúan con los sitios web de una manera diferente a los usuarios en computadoras de escritorio. Por ejemplo, casi todos estos dispositivos son operados por Touch. Esto significa que los usuarios no pueden pasar con el mouse sobre los elementos y tienen diferentes necesidades cuando se trata de la forma, el tamaño y la funcionalidad de los botones, los formularios y, lo más importante, los menús.
Veremos en el segundo artículo cómo pueden responder los propietarios del sitio web. Por ahora, volvamos a la tecnología que hace que el diseño receptivo funcione. La tecnología detrás del diseño adaptativo es el momento de ir conmigo. Si bien los sitios de WordPress suelen ser una combinación de HTML, CSS y JavaScript ocasionalmente, la columna vertebral del diseño receptivo son interrogatorios de CSS de medios. ¿No estás familiarizado con el término? No te preocupes, lo descubrirás todo ahora. ¿Qué son los interrogatorios de los medios? Introducido por primera vez en 2009, los interrogatorios de los medios son operadores CSS que permiten a los diseñadores y desarrolladores cambiar los estilos CSS de acuerdo con diferentes condiciones. Estos incluyen la resolución de la pantalla, la orientación (paisaje o retrato) y, lo más importante, el tamaño de la ventana de visualización que visualiza el sitio. Esencialmente, esto significa que puede cambiar el diseño de su sitio web de acuerdo con el tamaño de la ventana del navegador en la que se ve. Si alguna vez ha echado un vistazo al archivo style.css de un tema moderno de WordPress, es posible que ya haya visto una consulta de medios: pantalla solo @media y (ancho máximo: 500 px) {/ * CSS personalizado va aquí */

} Si no puede reunirlo usted mismo, el código anterior le dice al navegador que use el CSS personalizado para pantallas bajo cierta dimensión (en este caso 500 píxeles). Esto se llama punto de interrupción. ¿Qué es exactamente un punto de quiebre? Me alegro de que hayas preguntado. Presentamos su consulta de medios de interrupción define los puntos de límite en el tamaño de la ventana de visualización en la que el diseño del sitio cambia o “interrumpe”. Por ejemplo, si el ancho de la ventana de visualización cae por debajo de 600px, la barra lateral se moverá bajo el contenido principal (que es una maniobra muy común). Usando tales puntos de interrupción, los temas pueden cubrir una gama de diferentes tamaños de pantalla e implementar cambios dependiendo del espacio disponible para su diseño. Por lo tanto, pueden hacer cambios dependiendo del diseño e independientemente del dispositivo utilizado para visitar el sitio. Después de todo, aparecen nuevos dispositivos móviles todos los días, cada uno con su propia dimensión de pantalla, resolución y la capacidad de usarse tanto en modo de retrato como en modo paisajista. En total, esto se reduce a cientos de tamaños diferentes que los diseñadores deben considerar para el diseño específico del dispositivo. Debido a que nunca podemos crear soluciones personalizadas para cada uno de ellos, definir puntos de delimitación independientes es una idea mucho mejor, y las consultas de los medios le permiten hacerlo. Además, puedo verificar otras condiciones que el tamaño de la pantalla, sin embargo, esto es suficiente para nuestros propósitos. Si desea obtener más información, consulte este recurso. ¿Todo su diseño receptivo se puso al día?