Hacer que un sitio web de ancho fijo sea compatible con dispositivos móviles

Última actualización el 22 de mayo de 2020

Construcción compatible con dispositivos móviles. Hubo un tiempo en que mi mayor preocupación como diseñador gráfico y desarrollador web era hacer que mi CSS funcionara en Internet Explorer. IE no solo sigue siendo un dolor de cabeza, ahora tenemos que preocuparnos por numerosos tamaños de pantalla y sistemas operativos.

Llegará un momento en que el móvil supere a la navegación de escritorio. Dado que los dispositivos móviles se han vuelto tan prominentes en nuestra vida cotidiana, hay momentos en los que los diseñadores web necesitamos resultados inmediatos. Si eres uno de esos diseñadores o programadores que simplemente no tiene tiempo para convertir un sitio web estático en un tema de WordPress, uno que sea compatible con dispositivos móviles, hay esperanza para ti, amigo mío. Cuando se trata de ver todo su contenido en dispositivos móviles, puede lograrlo con un poco de optimización de CSS y HTML.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

A nivel mundial, los dispositivos móviles representan más de la mitad de los minutos que se pasan en línea, según comScore

Los sitios web aptos para dispositivos móviles o receptivos tienen la capacidad de configurar el ancho de su sitio web automáticamente, para adaptarse al dispositivo del espectador. Las barras de desplazamiento horizontales son un no-no en el diseño receptivo. Si ve su sitio web actual en un dispositivo móvil y ve una barra de desplazamiento en la parte inferior de su teléfono o tableta, es probable que su sitio web (o elementos de su sitio) no sea compatible con dispositivos móviles. Estas barras de desplazamiento horizontales arruinan la experiencia del usuario y lo más probable es que hagan clic en el botón Atrás. La gente está tan acostumbrada a desplazarse verticalmente en sus dispositivos, que cuando los usuarios tienen que desplazarse tanto vertical como horizontalmente para ver el contenido, se sienten incómodos y abandonan el sitio.

Es todo incluido desde este punto en adelante, los sitios web de diseño tienen clases de CSS e ID para todo, y me refiero a todo.

Desde el encabezado y los div del menú hasta las etiquetas <p> en el pie de página. Querrá ajustar el tamaño de todas estas cosas según el ancho de la pantalla. Mover, cambiar el tamaño y escalar es mucho más fácil cuando el elemento se puede orientar a través de CSS.

Las consultas de medios CSS son más fáciles de usar de lo que piensas.

La primera vez que me llamaron la atención las consultas de medios, pensé que era parte de un lenguaje de programación y no una forma de CSS. Me invadió una sensación de alivio cuando descubrí lo que realmente era, y lo he estado usando desde entonces en TODOS mis proyectos web.

Las consultas de medios son básicamente reglas CSS. Si su pantalla tiene este ancho, aplique este CSS solo a estos elementos. Echa un vistazo a continuación.

Entonces, el código anterior simplemente dice que si la pantalla del usuario tiene entre 100 px y 699 px de ancho, cambie el color de fondo del cuerpo a azul. Aquí es donde el etiquetado de cada div y span en su sitio se vuelve crucial. La manipulación de estos elementos para diferentes anchos de pantalla se vuelve más fácil con el etiquetado adecuado.

Css-tricks.com enumera muchos anchos móviles para nosotros como referencia rápida.

Ejemplo de código CSS

/* ———– HTC One ———– */
/* Retrato y Paisaje */

@media pantalla

y (ancho del dispositivo: 360px)

y (altura del dispositivo: 640 px)

y (-webkit-dispositivo-proporción de píxeles: 3) {

/*****TU CÓDIGO AQUÍ*****/

}

Hay mucho más código de consulta de medios para teléfonos Galaxy, HTC y Apple. Además, se enumeran los anchos de las tabletas Ipad, Galaxy y Nexus. ¡Todo lo que tiene que hacer es ingresar este código en el archivo CSS de su sitio y completar los corchetes CSS en blanco con su propio código! ¡Hecho!

Su sitio responde, pero aún no se siente del todo bien

Puede comenzar a notar que algunos elementos de su sitio ocupan bastante espacio en los dispositivos móviles, como su menú principal. Al hacerlo receptivo, lo más probable es que hayas aplicado un "flotante: ninguno" en las etiquetas <li> de tu menú. Pero ahora el menú ocupa una gran parte del espacio en la parte superior de su sitio. Deberá convertir su menú principal en un menú desplegable con consultas de medios jQuery y CSS. Css-tricks.com también explica cómo hacer esto.

También puede considerar ciertos elementos como insignificantes, que se pueden encontrar tanto en el escritorio como en los dispositivos móviles. . Puedes deshacerte de ellos usando CSS:

Estos ajustes del sitio tienden a hacer que los sitios web sean realmente largos, obligando a los usuarios a desplazarse mucho. Aquí es donde el texto de anclaje (para usuarios videntes) o los enlaces de salto (para lectores de pantalla) se convierten en sus amigos.

El texto de anclaje es un enlace en el que se puede hacer clic que permite a los usuarios saltar a una determinada sección de su página web, sin tener que desplazarse. Es un método útil para sitios compatibles con dispositivos móviles. El siguiente código es un ejemplo de enlace de texto de anclaje.

<a href=”#skip”>Haga clic aquí para pasar al contenido principal</a>

<a id=”skip”></a>El contenido principal comienza aquí

Los enlaces de omisión se utilizan principalmente para lectores de pantalla y permiten a los usuarios con discapacidades omitir u omitir contenido web repetitivo, como la navegación del menú, y acceder directamente a la información que les interesa.

Si los enlaces de omisión tienen una regla CSS de "display:none", los lectores de pantalla el enlace se vuelve "inaccesible". Entonces, una forma de evitar esto es colocar los enlaces fuera de la pantalla, de esa manera los lectores de pantalla aún pueden reconocer sus enlaces y permitirles saltar a través de su nuevo sitio móvil.

Entonces, esa es la manera rápida y fácil de convertir su sitio web de ancho fijo en uno compatible con dispositivos móviles. Además, no olvide configurar todas sus imágenes en “ancho: 100%; altura: automático.” Cualquier imagen, div o intervalo que tenga un ancho establecido en píxeles, se creará en la barra de desplazamiento horizontal en los dispositivos móviles, así que recuerde configurarlos en porcentajes o anchos diferentes para los diferentes dispositivos que usan consultas de medios.

Puede llevar un poco de tiempo, pero confía en mí, una vez que lo aprendas, lo usarás para siempre. Usarás este método en todos los sitios web que hagas, porque incluso los temas y plantillas más nuevos de WordPress o Joomla requieren un poco de manipulación para que se vean como tú quieres. Eso es especialmente cierto, con el mercado en constante cambio de dispositivos móviles.

-Izzak Hale, diseñador gráfico sénior