¿Pasos simples para hacer que el sitio web sea compatible con dispositivos móviles (diseño receptivo)?

Finalmente he hecho que mi sitio: steakovercooked.com sea fácil de usar para dispositivos móviles y, por lo tanto, todas las páginas web en mis 6 dominios hasta ahora están calificadas para ser compatibles con dispositivos móviles.

La facilidad de uso móvil ahora es un factor en la clasificación, por ejemplo, los motores de búsqueda de Google tienden a promocionar los sitios que pasan la prueba de facilidad de uso móvil.

compatible con dispositivos móviles

Estos son los pasos para hacer que el usuario móvil sea fácil de usar, también conocido como Responsive CSS Design.

Limpie el CSS en línea en las etiquetas HTML

El CSS en línea en las etiquetas HTML es malo, ya que mezclan la presentación y HTML, por ejemplo,

El estilo se define directamente en la etiqueta div HTML, que no es posible cambiar usando hojas de estilo externas.

No use píxeles de ancho especificado/fijo

Si define algo como, por ejemplo, ancho: 900 px, es probable que no sea compatible con dispositivos móviles. Puede reemplazar esto con un porcentaje, por ejemplo, 30%. Es menos probable que los píxeles más pequeños sean un problema, por ejemplo, los íconos están bien en resoluciones de pantalla pequeña. Imagínese, el ancho de pantalla más pequeño es de 300 píxeles (aproximadamente), por lo que no desea que ninguno de sus elementos HTML sea más ancho que eso.

Ponga lo siguiente dentro de la etiqueta principal

Las imágenes/tablas son las peores

Las tablas son peores para el diseño receptivo, por lo que es posible que deba reemplazarlas con elementos div simples. Las imágenes deben especificarse con el siguiente estilo de ancho máximo, por ejemplo

¡Eso es todo, sin cosas complejas! Tenga en cuenta que una página fácil de usar para dispositivos móviles no es lo mismo que AMP (páginas móviles aceleradas).