Teniendo en cuenta el creciente uso de dispositivos móviles, desde finales de abril de 2015, Google ha penalizado a los sitios web cuyas páginas no están preparadas para dispositivos móviles. Consecuencia, para su SEO, debe asegurarse de que su sitio web se muestre decentemente tanto en pantallas grandes como pequeñas.
En este artículo, le mostraré cómo puede poner su sitio web en la página usando la regla @media de CSS3.
Es importante tener en cuenta que los términos "receptivo" y "compatible con dispositivos móviles" a menudo se usan indistintamente a pesar de la diferencia en su significado real. Comprender lo que significa cada uno es importante para poder garantizar que su sitio web cumpla con los criterios necesarios para adaptarse a todos los tamaños de pantalla.
Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Entonces, volvamos a por qué estamos aquí.
Sensible y móvil-compatible
Sitios web que no son ni sensibles ni compatible con móviles, se muestran de forma idéntica en todas las pantallas, es decir, la versión para pantallas grandes se muestra en todas partes. En pantallas más pequeñas, debes desplazar la página horizontalmente para ver todo su contenido. Son difíciles de navegar en estas pantallas.
Descubre también estos Complementos de 8 WordPress para personalizar el aspecto de su sitio web
Un sitio web es móvil compatible cuando solo cumple con el mínimo estricto para ser visto en el móvil, lo que no lo convierte en un sitio web responsive. Por ejemplo, un sitio web puede considerarse compatible con dispositivos móviles si no tiene que navegar horizontalmente. Esto hace que sus elementos se vuelvan pequeños e indistinguibles. A continuación, debe acercar la imagen para leer su contenido.
Por su parte, los sitios web sensible adaptarse perfectamente a diferentes tamaños de pantalla. Redefinen sus elementos para que puedan verse y utilizarse fácilmente en las pantallas más pequeñas. Este es el tipo de diseño que desea para su sitio web.
Vea también nuestro Los complementos de 10 WordPress para crear un formulario de reserva en su sitio web
Ahora sabe la diferencia entre un dispositivo móvil receptivo y compatible. Ahora veremos la regla @media de CSS3 que le permite actualizar su sitio web para que responda o crear con bastante facilidad Temas de WordPress con contenido receptivo.
La regla @media de CSS3
Para que su tema responda, necesitará la regla @media de CSS3. Básicamente, le permite definir los estilos que desea usar para un tipo (tamaño) particular de pantalla. Lo usará como otra regla CSS (con llaves) excepto que anida otras reglas CSS.
@media media-type (expresión) {css-test-selector {property1: value1; propiedad2: valor2; }}
En esta estructura los elementos dentro de la regla @ medios Sólo cuando el trabajo de tipo de medios especificado para haber sido detectado con éxito. El tipo de medio elegido, puede especificar las características en términos de dimensiones.
Descubre Cómo aplicar la interfaz y la experiencia del usuario a WordPress
La regla @media detecta por ti el tipo de pantalla con la que se visita tu web y elige las reglas que más se adaptan a este tipo de pantalla. Todos los principales navegadores ya han integrado la regla. @media.
Aquí está la lista para su información: Chrome , Safari, Firefox, IE, Opera et Southern Implants.
Definir las pantallas de destino.
Si desea modificar un tema de WordPress existente, por favor haga una copia de seguridad del CSS de este último para poder volver atrás en caso de ser necesario.
Lea también nuestro artículo sobre Cómo cargar gradualmente los comentarios de Facebook y Disqus
Como hemos visto en su estructura, para definir el tipo de pantalla, debes reenviar @media el tipo de pantalla objetivo. Aquí está la lista de los diferentes tipos de pantalla:
– todos : para todo tipo de pantallas o para las dimensiones especificadas en expresión
– detectar : para todas las pantallas, ya sean móviles, tabletas, portátiles o de escritorio
– Imprimir : para impresoras, si desea estilos particulares para las páginas que se pueden imprimir
– habla : para lectores de pantalla, si desea estilos para personas con discapacidad visual.
También hay operadores que puede poner antes del tipo de pantalla; como no para mostrar estilos para pantallas que son de un tipo diferente al especificado o , solamente para aplicar estilos solo a pantallas específicas. Por tanto, puede tener:
@media única pantalla
Definir estilos para las dimensiones de la pantalla
Se puede utilizar expresión para proporcionar más detalles sobre las características de la pantalla. Después @media entrar y seguido de la expresión. Si usa varias expresiones, todas deben estar separadas por y. Aquí hay un ejemplo de la estructura:
@media solo pantalla y (ancho máximo: 640px) {selector-css-example {/ * Su CSS habitual aquí * /}}
En este ejemplo utilizo max-ancho con un valor de 640px. Esto es para establecer un ancho de pantalla máximo del tamaño de un iPhone o un pequeño teléfono inteligente Android. Con este tipo de estructura, tienes control sobre cómo se ve tu sitio web en diferentes dispositivos. Aquí hay una lista de propiedades relacionadas con las dimensiones que puede usar en expresión :
Descubre también nuestro 8 SEO Plugins de WordPress para optimizar el SEO de su sitio web
– men-anchura et max-ancho : respectivamente el ancho mínimo y máximo requerido para la visualización de estilos contenidos en la regla @media. Un píxel más y estilos no se muestran.
– men altura et max-height : respectivamente la altura mínima y máxima requerida para mostrar los estilos contenidos en la regla @media. Debido a que la mayoría de las pantallas están diseñadas para desenrollar páginas verticalmente, las propiedades min-altura et max-height son poco utilizados
Aquí hay una lista de tamaños de pantalla para algunos terminales:
– IPhone: 640px
- IPad: 1024px
- Tabletas: 1366px
- Teléfono inteligente Android: 640px, 720px, 854px, 960px
- Android extra grande: 1024px, 1066px
- Teléfono con Windows: 480
- Windows phone grande: 768px
- jóvenes y mayores: 320px
- Ultrabook / Laptops: 1366px
- Computadoras de escritorio y televisores: 1920px
Hay muchas otras propiedades que puede utilizar en expresión. Por ejemplo, si tiene como objetivo computadoras de escritorio o pantallas de televisión capaces de mostrar imágenes con una relación de aspecto de 16: 9, podría usar una estructura como esta:
@media solo pantalla y (ancho mínimo: 1920px) y (relación de aspecto del dispositivo: 16/9) {selector-css-example {/ * Su CSS habitual aquí * /}}
Para obtener listas y ejemplos más completos, consulte w3schools et Mozilla desarrolladores de.
Pruebe la funcionalidad receptiva de su sitio web
A medida que modifica o construye su tema de WordPress o al final si te gustan las sorpresas, debes probar el resultado para ver si finalmente responde. Recuerde, Google busca sitios web que no responden.
Ver también estos Complementos de 10 WordPress para crear pestañas en tu blog
Al no tener todos los dispositivos móviles a los que se dirige, existen (afortunadamente para nuestras bolsas de valores) una buena cantidad de herramientas para ver cómo su sitio web se adapta a diferentes pantallas.
Directamente en el navegador de su ordenador, puede utilizar Ventana Resizer Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. A continuación se muestra una imagen de BlogPasCher en la Vista de diseño receptivo que viene por defecto con Firefox.
También hay sitios web dedicados a la tarea:
Este sitio web tiene la particularidad de permitirte elegir tú mismo las dimensiones de la pantalla. Tenga en cuenta que este sitio web carga el suyo en un marco. Así que si tu tema de WordPress fue diseñado para no mostrarse en un marco, por lo que es muy posible que no se muestre aquí.
Peek iPad
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Este sitio web es interesante para probar su sitio web en los últimos dispositivos Apple, iPad y iPhone. Simplemente ingrese su URL. Tenga en cuenta que está sujeto al mismo problema de fotogramas que responsivepx.
En este sitio web puede probar el suyo en pantallas pequeñas y en modelos más antiguos de teléfonos que seleccione en el lado derecho de la pantalla. También puede configurar algunas propiedades de la pantalla.
Prueba de optimización para móviles de Google
Esta es una de las pruebas más importantes, si no la más importante. Simplemente ingrese su dirección en la barra y haga clic en Analizar para iniciar la prueba. Después de la prueba, la herramienta muestra un informe y una puntuación. Si la prueba es positiva, genial, Google no te penalizará.
Si no eres desarrollador te aconsejo una lista de temas de WordPress receptivos para empezar.
Recursos recomendados
Descubra también otros recursos recomendados que le ayudarán a atraer mejor a sus socios y suscriptores, pero también a mejorar la seguridad de su sitio web.
- Cómo crear enlaces personalizados cursos sobre WordPress
- Complementos de 5 WordPress para agregar comentarios de clientes a tu blog
- Cómo crear una rueda de fortuna para cupones en WooCommerce
- Descubre las mejores ofertas y cupones para tu blog
Conclusión
Listo ! usted sabe todo lo que hay que saber sobre cómo hacer que su sitio web o tema de WordPress responda usando la regla @media de CSS3. Si nos perdimos un tema de WordPress que es querido para usted o que prefiere, deje un enlace en la sección comentarios a continuación.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
También te invitamos a compartir en tus diferentes redes sociales.
...
