homefinance blog
Tener un sitio amigable con dispositivos móviles se ha convertido en una necesidad más que una opción. Sin embargo, aunque hay varias formas de crear una versión móvil de un sitio web, la más práctica y beneficiosa es el uso de una consulta de medios móviles.
El diseño receptivo y la consulta de medios proporcionan soluciones para garantizar que su sitio web se adapte automáticamente a todos los dispositivos y dimensiones de pantalla. Estos son temas centrales y complejos que, una vez que comprenda el concepto, facilitará en gran medida la creación de sitios receptivos.
En esta guía, explicaremos cuál es el diseño receptivo, cómo la tecnología que la hace funcionar. También discutiremos cómo implementar y usar las consultas de medios receptivas para todos los dispositivos y proporcionaremos algunos consejos de solución de problemas. ¡Vamos a empezar!
En este articulo
¿Qué es el diseño receptivo?
¿Cómo funciona el diseño receptivo?
¿Cuáles son las consultas de medios CSS en diseño receptivo?
Cómo usar consultas de medios para todos los dispositivos
¿Cuáles son las dimensiones de pantalla más comunes?
Solución de problemas de medios
preguntas frecuentes
conclusión
Nuestro equipo de WP Buffs ayuda a los propietarios de sitios web, socios de agencias y socios independientes a crear una consulta de medios receptiva para dispositivos móviles y más. Ya sea que necesite que administremos un sitio web o que admitiran 1,000 sitios de clientes, nuestras soluciones lo cubrieron.
¿Qué es el diseño receptivo?
Cuando Google ha comenzado a enfatizar la importancia de los sitios compatibles con dispositivos móviles, la comunidad de diseño web ha respondido de varias maneras. Hemos visto sitios móviles en dominios separados con redirección automática. También había complementos especializados de WordPress para crear versiones de sitios web compatibles con teléfonos inteligentes. Algunos diseñadores simplemente ignoraron lo que estaba sucediendo y esperaban que la gente se acostumbrara a zoom y panorama.
Sin embargo, ahora la solución preferida y popular es el uso de “diseño receptivo”. Ethan Marcotte inventó la fecha límite en 2010. Describe un enfoque de diseño web destinado a hacer que los sitios web cumplan con el dispositivo utilizado para acceder a ellos.
En términos más técnicos, significa que el tamaño y la posición de los elementos del sitio “responden” a la llamada ventana. Esta es el área donde un sitio es visible y está limitado tanto por el tamaño del dispositivo como por la ventana del navegador utilizada por el dispositivo. El propósito del diseño receptivo es hacer que los sitios web accedan lo más cómodo posible para los visitantes sin la necesidad de zoom, desplazamiento y cambio de tamaño.
La mejor manera de experimentar esto es acceder a un sitio web con receptividad móvil a una computadora de escritorio y reducir lentamente la ventana del navegador. Obviamente, esto hará que los cambios de diseño graduales. (Consejo: puede intentarlo aquí en WP Buffs).
El diseño receptivo es una forma de crear sitios web, de modo que cumplan automáticamente con las dimensiones de cualquier dispositivo. #Wordpress haga clic para enviar un tweet
¿Cómo funciona el diseño receptivo? ️
El diseño receptivo se basa en varios principios principales. El más importante de ellos es el uso de dimensiones proporcionales en lugar de medidas absolutas. Esto significa que los elementos del sitio web se declaran en porcentajes y otras mediciones de reacción, en lugar de en unidades estáticas, como los píxeles. A continuación se muestra un ejemplo de cómo se declaró el tamaño del sitio:
.Contintent {ancho: 780px; }
La disminución de las dimensiones de esta manera ha llevado a una cuadrícula rígida (una cuadrícula es la estructura principal de un sitio web que incluye encabezado, sótano, contenido, barras laterales, etc.). Como resultado, independientemente del tamaño del dispositivo que usó para ver un sitio web, siempre se vería igual, y las pantallas más pequeñas tenían que hacer Panoramare y Zoom para ver todas sus piezas.
Hoy tenemos lo que se llama una red de fluidos. Utiliza mediciones proporcionales y, por lo tanto, es capaz de cumplir con el tamaño de la ventana en lugar de lo contrario. Aquí hay un ejemplo de la aparición en CSS:
. }
Además, el diseño receptivo debe considerar diferentes modelos de uso de usuarios móviles, especialmente el uso del tacto en lugar de mouse o trackpad. Esto hace que sea necesario considerar los efectos de movimiento, la forma, el tamaño y el posicionamiento de los botones y otros elementos a los que se puede hacer clic, como elementos del menú para que sean utilizables.
¿Cuáles son los interrogatorios CSS de los medios en el diseño receptivo?
En el centro del diseño receptivo está CSS. Para los no iniciados, esta parte es responsable del estilo de un sitio web. Si bien HTML crea el esqueleto y JavaScript agrega funcionalidad, todo lo que se ve hermoso suele ser CSS: tipos de fuentes, tamaños, colores, todo esto es tan central, porque determina las dimensiones de los objetos (como ya he visto). Aquí usamos nuestras medidas proporcionales. Sin embargo, hay algo más importante para que los sitios web se vean bien en los dispositivos móviles: consultas de medios CSS.
Los interrogatorios de los medios han aparecido desde 2009. Hay operadores que le permiten (y otros diseñadores y desarrolladores) agregar condiciones a su estilo, por ejemplo, puede decirle a un navegador que aplique un elemento solo a una determinada resolución de pantalla (retrato de paisaje u orientación ) o tamaño.
Un caso de uso ordinario para esto es decirle al navegador que mueva la barra lateral debajo del contenido principal, una vez que el tamaño de la pantalla cae más bajo, digamos, 600px. Hablaremos sobre cómo encontrar los puntos de interrupción correctos y estableceremos los interrogatorios de respuesta apropiados para todos los dispositivos a continuación.
Además de los interrogatorios de los medios, hay otras consideraciones importantes de CSS. Una de las más importantes son las imágenes y, más precisamente, garantizar el hecho de que se adaptan al espacio en el que aparecen. Esto generalmente se hace estableciendo el ancho máximo al 100%:
Img {altura: coche; Ancho máximo: 100%; }
Para la carga rápida de imágenes, los desarrolladores de WordPress idearon una solución maravillosa. De la versión 4.4, lo hicieron para que los navegadores reciban automáticamente el tamaño más pequeño posible a través del atributo HTML SRCSET. Esto guarda el ancho de banda, que hace todo más rápido. ¿Cómo se usan las consultas de los medios para todos los dispositivos?
Muy bien, ahora es el momento de ir a Nitty-Gragmy. En las siguientes secciones, discutiremos cómo usar la consulta CSS de medios y proporcionaremos algunos casos de uso para demostrar lo que pueden hacer:
¿Qué busca un interrogatorio típico para los medios?
Dónde poner los interrogatorios de sus medios
Consultas de medios para dispositivos móviles
Consultas de medios para tabletas
Consultas de medios para iPads
Consultas de medios de escritorio
¿Qué busca un interrogatorio típico para los medios?
Antes de desertar los interrogatorios específicos que puede usar para diferentes dispositivos, es importante comprender primero cómo se ve un típico. Si mira el archivo style.css de cualquier tema de WordPress con receptividad superior, verá algo como:
@Mediu Only pantalla y (ancho máximo: 480 px) { / * css aquí * /}
Como puede ver, cada consulta comienza con @Media (de ahí el nombre). Puede definir estilos condicionados para diferentes tipos o dispositivos de medios. La única pantalla significa que las siguientes reglas se aplican a las pantallas de computadora, tabletas, etc. Una alternativa es el discurso, que apuntaría a los lectores de la pantalla.
Todo después y es la condición bajo la cual se aplica el siguiente CSS. Otras opciones no son solo. Estas condiciones también le permiten cumplir con más condiciones juntas.
En nuestro ejemplo anterior, la consulta establece una condición para aplicar el siguiente CSS solo en las pantallas y cuando el tamaño de la pantalla se mueve por debajo de 480 PX. Esto es típico de una consulta de medios para todos los dispositivos móviles. En general, este formato es casi la consulta de medios más común que encontrará en el diseño receptivo. También es nuestro método favorito.
Nota: En el interrogatorio de CSS de medios para todos los dispositivos, Min y Max también se pueden usar indistintamente. Sin embargo, algunas personas prefieren definir los intervalos entre el tamaño de la pantalla con un ancho máximo de ancho mínimo.
Hay varios otros operadores que puede introducir. Si está interesado, puede descubrir todo sobre ellos aquí. Por ahora, pasemos al lugar donde colocar los interrogatorios de sus medios.
Dónde poner los interrogatorios de sus medios
Como mencioné, generalmente puede encontrar consultas de medios en el archivo style.css con temas populares y receptivos de WordPress. Si los ha visto, es posible que haya notado que generalmente se encuentran al final del archivo.
Esto se debe al hecho de que los navegadores leen hojas de arriba. Lo que sea que esté en la parte inferior anule cualquier regla en la parte superior (¡a menos que declare explícitamente que esto no sucede!
Entonces, si el tamaño de fuente estándar es de 18 PX (como se define al comienzo del estilo), puede cambiar el tamaño de fuente de pantalla más pequeño agregando una consulta de medios, como:
@Mediu solo pantalla y (ancho máximo: 480 px) {cuerpo {tamaño de fuente: 20 px; }}
También es posible declarar diferentes hojas de estilo para diferentes tamaños de pantalla, de modo que los interrogatorios de los medios no están todos en el mismo archivo. Sin embargo, esto excede el propósito de esta pieza. Hasta ahora, ¿de acuerdo? De acuerdo, para comprender realmente cómo usar la consulta de medios, veamos algunos casos adicionales de uso para diferentes dispositivos.
Consultas de medios para dispositivos móviles
La consulta de medios que hemos incluido en la sección anterior se puede utilizar para crear una versión móvil de su sitio. También puede ajustar las condiciones de consulta de medios móviles para apuntar a ciertos dispositivos y, más precisamente, las dimensiones de la pantalla.
Por ejemplo, para un iPhone 5, puede usar el siguiente CSS para el modo de paisaje y retrato:
@Media solo pantalla y (ancho mínimo del dispositivo: 375 px) y (ancho máximo del dispositivo: 812 px) y (-webkit-min-device-pixel-relación: 3) {}
Nota: Puede consultar este recurso para encontrar el tamaño exacto de la pantalla de un teléfono inteligente en particular. Los CSS-Truks también ofrecen una lista útil de consultas de medios estándar para cada dispositivo.
Más allá de eso, hay un puñado de casos de uso de medios que pueden ser útiles. Por ejemplo, un CSS común para dispositivos móviles está cambiando el estilo de menú, ya que estos dispositivos a menudo tienen requisitos completamente diferentes para los menús. El menú horizontal típico utilizado en las pantallas de escritorio no funciona en un teléfono, ya que hace que los botones sean demasiado pequeños para ser presionados con su dedo.
Por esta razón, muchos temas contienen marcas para moverse a un menú receptivo (completado con el ícono de la hamburguesa) bajo cierto tamaño. Por ejemplo, si disminuye su navegador en nuestro sitio web de WP Buffs, puede ver esto en acción. En una pantalla de escritorio estándar, nuestro menú de navegación para la página principal se ve así:
Sin embargo, una vez que disminuye la ventana del navegador, le cambia:
Otra forma popular de usar una consulta de medios es mover la barra lateral debajo de la sección de contenido principal. Esta es una maniobra regular en el diseño web receptivo.
No tiene sentido meter la pantalla de un dispositivo móvil con contenido, especialmente cuando el teléfono está en modo de retrato. Un ejemplo común de medios de comunicación CSS en hojas de estilo moderno se ve así:
@Mediu Only pantalla y (ancho máximo: 600 px) {.bara {flotante: ninguno; Ancho: 100%; }}
En lugar de mover el contenido, es posible que solo desee ocultarlo por completo. Por lo general, esto tiene sentido si el contenido no agrega valor a los usuarios móviles o si su carga puede llevar demasiado tiempo. En este caso, puede usar lo siguiente para deshabilitarlo:
@Mediu Only pantalla y (ancho máximo: 480 px) {.lărge-image {display: none; }}
Puede aplicar estas consultas de medios para otros dispositivos, como tabletas. Por supuesto, querrá considerar el ancho máximo mínimo y el ancho máximo adecuado para ellos.
Un poco más en esta publicación, echaremos un vistazo a las dimensiones de pantalla habituales y los puntos de interrupción. Sin embargo, primero, veamos algunos ejemplos de consultas de medios para otros dispositivos, incluidas tabletas, iPads, así como computadoras de escritorio.
Al igual que con los teléfonos inteligentes, hay una amplia variedad de tamaños de pantalla de tableta. En general, puede usar los siguientes medios CSS para tabletas:
@Media Only Screen y (Min-Lime: 768px) y (Max-Lime: 1024px)
Además, puede usar pseudoelementos en los interrogatorios de sus medios para cambiar el diseño de los botones. Una vez más, esto no es específico de las tabletas, pero lo incluimos aquí, porque el tamaño de la pantalla de la tableta en comparación con los teléfonos inteligentes ofrece más espacio y flexibilidad.
Los pseudo-elementos son relativamente nuevos en el mundo del diseño web. Pueden aplicar estilos específicos a las diferentes partes de un elemento HTML. Así es como puede usarlos para aplicar diferentes aspectos de un botón de conexión de acuerdo con el tamaño de la pantalla:
.NoUme: After {Content: “Por favor ingrese su nombre de usuario”; } @Media pantalla y (ancho máximo: 1024px) {. Name: antes {content: “username”; }} @Media pantalla y (ancho del hombre: 480px) {. Name: antes {content: “”; }}
(¡Gracias a Tomis Krnic por este ejemplo!)
Consultas de medios para iPads
Muchas personas consideran los iPads como tabletas. Sin embargo, debido a que técnicamente no están clasificados como tales por Apple, les ofreceremos su propia sección.
Una de las ventajas de usar la consulta de medios para apuntar al iPad es que puede usarlo para casi todas las generaciones de iPad, desde iPad 1 hasta iPad Mini. Para crear un diseño receptivo que se traduzca bien en estos dispositivos, puede usar las siguientes líneas CSS: @Media solo pantalla y (ancho mínimo del dispositivo: 768 PX) y (ancho máximo del dispositivo: 1024 PX)
Esto se puede usar tanto para paisaje como para retratos. Si desea apuntar a iPad Pro, le recomendamos ajustar el ancho máximo de dispositivo a 1366 px.
Consultas de medios de escritorio
A menos que adopte un enfoque móvil para el diseño web, probablemente cree su sitio de escritorio. Sin embargo, el uso de la consulta de medios receptiva es una idea inteligente, porque desea asegurarse de proporcionar una experiencia de usuario sólida (UX), incluso si un visitante usa una pequeña ventana del navegador.
Como recordaría anteriormente en esta publicación, cambiar el tamaño del navegador puede tener una gran influencia en el aspecto del sitio y la usabilidad. La incorporación de un interrogatorio CSS de Media de escritorio puede evitar la apariencia distorsionada.
En la mayoría de los casos, es más lógico definir un interrogatorio de medios basado en dimensiones de pantalla populares, en lugar de ciertos dispositivos. Este último puede causar algunos problemas, que discutiremos en breve.
En este momento, esperamos que comprenda las nociones básicas sobre cómo usar la consulta de los medios y por qué son tan importantes en el diseño receptivo. Sin embargo, queremos discutir las dimensiones de pantalla más comunes y establecer los puntos de interrupción, que pueden ser difíciles. ¿Cuáles son las dimensiones de pantalla más comunes?
Como se mencionó anteriormente, hay muchos dispositivos diferentes con diferentes dimensiones, resoluciones y pautas. Entonces, ¿a qué hora debe cambiar el diseño? Para responder a estas preguntas, analicemos primero algunas estadísticas.
Para descubrir los interrogatorios de medios apropiados para todos los dispositivos, eche un vistazo a algunas estadísticas. Según Statcounter, las siguientes son las dimensiones de pantalla más populares en Internet (septiembre de 2020):
En figuras:
360 × 640 – 11.93%
1366 × 768 – 8.95%
1920 × 1080 – 8.28%
375 × 667 – 4.28%
414 × 896 – 3.24%
Otros – 39.33%
Desde aquí, podemos concluir fácilmente que es mejor elegir tres dimensiones: escritorio, tableta y teléfono. Ahora es el momento de realizar nuestro punto de interrupción. Simplemente, un punto de interrupción es algo que puede agregar a su consulta de medios, en la que los elementos de diseño en ambos lados se comportarán de manera diferente.
En el diseño receptivo, los interrogatorios CSS se utilizan para definir los llamados puntos de interrupción. Estos son puntos de corte para el tamaño de la pantalla a la que cambia el diseño. #Wordpress haga clic para enviar un tweet
Si usa tres dimensiones de pantalla, puede agregar dos puntos de interrupción: uno a 768 PX y uno a 360 PX. Sin embargo, esto no cree que los dispositivos móviles también funcionen en la orientación del paisaje, que requiere dos puntos de interrupción más, uno a 640px y otro a 1080px. Cuando se observa datos de Statcounter, puede ver que el grupo más grande está hecho en dimensiones indefinidas (más del 39%). ¿Cómo debes optimizar para ellos?
Consultas de medios para los puntos de interrupción comunes del dispositivo
Como puede ver, tratar de establecer las consultas de medios receptivas para todos los dispositivos se confunde rápidamente, especialmente si tiene el hábito de definir los medios CSS Min y Max. Esto no significa que no haya mérito en el análisis de las estadísticas. En realidad, es una idea inteligente tener una sensación general de sus puntos de interrupción.
Sin embargo, al final, una mejor idea es definir sus puntos de interrupción dependiendo del diseño. En lugar de establecer los puntos de interrupción para ciertos dispositivos, es más cauteloso ver dónde son necesarios. De esta manera, no tendrá que optimizar para cientos de teléfonos y tabletas existentes. Puedes hacer que el diseño hable por sí mismo.
El mejor enfoque es comenzar siempre con dispositivos móviles. Tome el diseño y reduzca la pantalla al tamaño más pequeño posible. Si no tiene una consulta de medios, probablemente se verá horrible. Por ejemplo, a continuación se encuentra nuestro sitio web después de haber deshabilitado algunas de las consultas de medios:
Así que esta es su primera tarea para remediar. Es posible que no tenga que cambiar todo el aspecto, sino un elemento o dos. Nota: Puede usar herramientas de desarrolladores de Chrome y Firefox para crear diferentes dimensiones de visualización, incluida la más grande que la pantalla que usa actualmente. El alcance es hacer que parezca aceptable. Expanda lentamente la pantalla y observe el comportamiento del comportamiento:
Cuando llegas a un punto en el que ya no se ve bien, encontraste una interrupción. Ingrese el cambio en la hoja de estilo, luego continúe de la misma manera hasta llegar a la pantalla completa. Aunque esto puede ser agotador, ofrece un resultado final mucho mejor.
Referencia de consulta de medios: problemas comunes y cómo solucionarlos
Si es completamente nuevo en términos de interrogatorios de los medios, es posible que tenga algunos problemas cuando comience a usarlos por primera vez. Echemos un vistazo a algunos de los problemas más comunes que puede conocer cuando trabaje con consultas de medios para todos los dispositivos, así como para resolverlos:
Las consultas de los medios no funcionan en general
La consulta de medios de escritorio no funciona
La consulta en dispositivos móviles no funciona
Las consultas de los medios no funcionan en general
Si sus interrogatorios de los medios no entran en vigencia, lo primero que debe verificar es si están en el lugar correcto. Como se mencionó, debe estar al final de la hoja de estilo anular las declaraciones anteriores. Cuando no están en el orden correcto (consultas para pantallas más pequeñas antes de las que se encuentran en pantallas más grandes), esto puede ser una fuente de error. Si todo está en orden, pero sus estilos aún no están sobrescribidos, asegúrese de que use los mismos selectores CSS En su consulta de medios está tratando de anular. Si los anteriores son más específicos, pueden continuar anulando el nuevo selector.
Otra posibilidad es que tenga un CSS declarado en línea (es decir, directamente dentro de un documento HTML, a diferencia de la hoja de estilo). En este caso, ¡vea si puede eliminar CSS en línea o forzar una sobrescritura! Además, si una declaración anterior ya es importante adjunta, esa podría ser la razón por la cual su sobrescritura no funciona.
La consulta de medios de escritorio no funciona
Puede notar que aunque sus interrogatorios funcionan en dispositivos móviles, no funcionan en una computadora de escritorio con una ventana de navegador bajo. Si este es el caso, es posible que haya establecido una consulta de medios específica.
Es importante tener en cuenta que el ancho máximo de ancho máximo de ancho de desarrollo máximo de ancho máximo de ancho de ancho máximo no es lo mismo. Para la primera consulta de medios, el tamaño de la pantalla (no el tamaño de la pantalla) es el factor decisivo.
Supongamos que el ancho de dispositivo máximo se define como 480px. Esto significa que el diseño no cambiará en el escritorio de un navegador, porque el dispositivo de escritorio tiene una pantalla más grande, incluso si su puerto de visualización es de 480 PX. Sin embargo, cambiará en un iPhone. El uso máximo de ancho de ancho solucionará el problema. De hecho, el uso del ancho máximo es suficiente para la mayoría de los casos.
La consulta en dispositivos móviles no funciona
Tal vez estás lidiando con el escenario inverso. Si sus interrogatorios funcionan en un navegador, pero no en un teléfono móvil, es posible que haya olvidado establecer la ventana de visualización y el zoom predeterminado.
Para esto, debe agregar la siguiente línea al encabezado:
Esto le dice al navegador que juegue páginas de acuerdo con el ancho del dispositivo. La adición a menudo hace que el truco haga que los puntos de interrupción funcionen.
preguntas frecuentes
¿Cuáles son las ventajas y desventajas del diseño receptivo?
La principal ventaja de un enfoque de diseño receptivo es que necesita un solo sitio. Elimina la necesidad de ejecutar y actualizar sitios separados para usuarios de escritorio y móviles, lo que le ahorra mucho. Además, la tecnología detrás del diseño receptivo es ampliamente adoptada, por lo que funciona para casi cualquier persona, independientemente del dispositivo y el navegador. Uno de los mayores desafíos que debe considerar con el diseño receptivo es la necesidad de adaptarse a las conexiones de Internet más lentas o los dispositivos móviles que no se conectan a través de Wi-Fi. Además, las imágenes no solo tienen que adaptarse al tamaño de la pantalla, sino que a menudo representan la mayor parte del peso de una página. Por lo tanto, es importante optimizarlos tanto como sea posible. ¿Qué navegadores aceptan consultas de medios de CSS?
Como acabamos de llegar, la tecnología de diseño receptivo es ampliamente adoptada y, como tal, es respaldada por la mayoría de los principales navegadores. Sin embargo, las versiones más antiguas de Chrome y Safari no aceptan consultas vestidas, y algunas de las primeras versiones de Internet Explorer y Firefox no las aceptan en absoluto.
conclusión
El ascenso de los teléfonos móviles y las tabletas ha revisado todo el panorama en línea. Hoy en día, ningún sitio web puede manejar sin diseño receptivo y optimización móvil. Sin embargo, para maximizar la capacidad de respuesta de su sitio para todos los dispositivos, recomendamos usar consultas CSS de medios.
Como discutimos en esta publicación, puede usar consultas de medios para dispositivos móviles y otros dispositivos agregando algunas líneas CSS al archivo style.css. Mover ciertos elementos. El uso de interrogatorios de los medios es solo una de las muchas formas en que puede optimizar Su sitio de WordPress para una mejor experiencia en dispositivos móviles y navegadores.En WP Buffs, podemos ayudarlo.Ofrecemos planes y soluciones de atención de etiqueta blanca que pueden mejorar y recoger su sitio, ya sea un solo blog o docenas de sitios de clientes.¡Míralos hoy!
¿Quieres darnos comentarios o unirte a la conversación?Agregue sus comentarios en Twitter.
