Consejos esenciales para convertir un sitio de escritorio a móvil

Dado que los dispositivos móviles han superado en popularidad a los de escritorio, es necesario que los diseñadores diseñen teniendo en cuenta los dispositivos móviles. Mobile-first es una técnica popular porque es más fácil escalar el móvil que reducir el escritorio.

Sin embargo, a veces la elección se le quita de las manos. Por lo general, los diseñadores se encuentran adaptando diseños de escritorio existentes a dispositivos móviles. Y debido a que algunos elementos no se traducen bien, es esencial que los diseñadores comprendan qué ajustes específicos deben hacer al diseñar para la pantalla pequeña. Así es cómo…

Adopta el minimalismo

El minimalismo ha sido popular en el diseño web durante años, simplemente porque a menudo ayuda a la usabilidad y también se ve bien. Sin embargo, cuando se trata de dispositivos móviles, el minimalismo es una opción menos estética, ya que se basa puramente en la usabilidad.

Según Nielsen Norman Group, las características de corte son una necesidad en diseño móvil. Entonces, ¿qué significa esto para los diseñadores cuando intentan crear un sitio móvil a partir de uno de escritorio ya establecido?

Significa eliminar lo que no es esencial para la experiencia del usuario móvil. Por ejemplo, si está realizando la transición de una tienda de comercio electrónico de una computadora de escritorio a un dispositivo móvil, mantenga la misma cantidad de productos mostrados en el sitio móvil; solo tiene sentido, porque los compradores quieren poder encontrar todo lo que una tienda en línea tiene para ofrecer, al igual que la tienda en línea quiere mostrar todo lo que tiene para vender a los visitantes de su sitio. Sin embargo, un gran carrusel de anuncios para las últimas ofertas podría reducirse un poco.

Ocultar navegación

Una de las características más comunes en las pantallas de los móviles es el menú de hamburguesas, ese pequeño icono casi omnipresente con tres segmentos de líneas horizontales apilados uno encima del otro. Este es otro caso perfecto en el que el tamaño de pantalla más pequeño de los dispositivos móviles obliga a los diseñadores a cambiar los elementos que se espera que se vean de cierta manera en los escritorios.

A pesar de la opinión dividida sobre la presencia del menú de hamburguesas, es prácticamente omnipresente en las pantallas de los dispositivos móviles simplemente porque es la mejor solución que han encontrado los diseñadores para reducir la escala del menú de navegación de los escritorios a los dispositivos móviles.

Visite el sitio web del famoso chef Bobby Flay para conocer su cadena de restaurantes llamada Bobby’s Burger Palace. Como era de esperar, el menú de navegación se distribuye horizontalmente en la parte superior de la página de inicio, pero cuando accedes a la versión móvil del sitio, el menú horizontal desaparece. En su lugar está el menú de hamburguesas ordenado y ordenado, justo en el mismo lugar de la pantalla donde estaría el menú horizontal más largo en la versión de escritorio.

Walmart también hace uso del menú de hamburguesas en su transición de diseño de escritorio a dispositivo móvil.

En su sitio de escritorio, Walmart muestra la navegación desplegable «Todos los departamentos» que abre una segunda capa de opciones de navegación, todas en la misma página. En el sitio móvil, sin embargo, esa función no es posible debido al tamaño de la pantalla pequeña, por lo que se ha diseñado un reemplazo: la segunda capa de opciones de navegación está en el menú de hamburguesas y estas abren más y más opciones de navegación con cada selección. —Casi como pasar las páginas de un libro de izquierda a derecha.

Cambiar a una sola columna

De acuerdo con el hecho de que lo más simple es mejor cuando se trata de diseño móvil, le irá bien a sus clientes si recuerda que un diseño de una sola columna es más limpio y más fácil de operar para sus usuarios en una pantalla más pequeña. El gran beneficio de un diseño de una sola columna es que elimina el desplazamiento horizontal, como si tuviera mucho texto en una página y quisiera que sus lectores deslizaran la pantalla de izquierda a derecha para seguir leyendo.

Cuando presenta un diseño de una sola columna, optimiza la experiencia del usuario, alentando a los usuarios a simplemente desplazarse hacia abajo para leer o hacer clic en un enlace que desean ver en una nueva página. Esto es mejor que obligarlos a deslizarse de izquierda a derecha, lo que es más difícil de hacer que simplemente desplazarse hacia abajo, especialmente cuando considera la posición del pulgar de su usuario en relación con la forma en que sostiene un dispositivo móvil.

El sitio web de escritorio del periódico The New York Times presenta varias columnas. Eso es fácil de usar en un escritorio, cuando los usuarios de su cliente pueden simplemente mover el cursor de izquierda a derecha sin problemas en un trackpad o mouse.

Por supuesto, el sitio móvil de The New York Times comprende cómo las cosas tienen que cambiar en pantallas más pequeñas, por lo que presenta un diseño limpio y eficiente de una sola columna que mejora la experiencia del usuario, ya que los lectores pueden desplazarse hacia abajo sin esfuerzo para obtener más contenido con sus pulgares. .

Consideraciones móviles

Debido a la influencia de los dispositivos móviles en los usuarios de hoy, los diseñadores siempre deben diseñar para dispositivos móviles. Sin embargo, no es suficiente simplemente diseñar un sitio móvil junto con el sitio de escritorio y llamar a eso diseño para dispositivos móviles.

Diseñar para dispositivos móviles significa ser considerado con los ajustes específicos que tendrá que hacer para el sitio de su cliente cuando diseñe para la pantalla pequeña. Esto incluye todo lo que mencionamos anteriormente, desde el minimalismo en el diseño hasta ocultar la barra de navegación y pasar a un diseño de una sola columna.

Al adoptar estas mejores prácticas en su conjunto de habilidades, creará sitios que se adaptan perfectamente a los dispositivos móviles.