Primer diseño móvil: por qué es genial y por qué apesta

Históricamente, la mayoría de los diseñadores web y sus clientes se han acercado primero al lado del escritorio de cualquier proyecto, dejando la parte móvil como un objetivo secundario que se logra más tarde. Incluso con el aumento del diseño receptivo, muchos de nosotros comenzamos con el sitio de "tamaño completo" y avanzamos hacia abajo.

Sin embargo, hay una tendencia creciente en la industria a invertir este flujo de trabajo y comenzar con consideraciones móviles y luego pasar a una versión de escritorio más grande.

¿Por qué alguna vez abordarías un proyecto de esta manera? ¿Cuáles son algunos de los pros y los contras de esta estrategia? ¡Sigue leyendo para descubrirlo!

El diseño web móvil no es un nicho

Si aún tiene en mente que el diseño web móvil y el desarrollo de aplicaciones es una industria de nicho, debe cambiar su forma de pensar. El móvil no es una tendencia, ni siquiera es el futuro, es el presente. No me creas Aquí hay algunas estadísticas locas para considerar de Mobithinking:

• Hay más de 1.200 millones de usuarios de dispositivos móviles en todo el mundo.
• En los EE. UU., El 25% de los usuarios de la web móvil son solo móviles (rara vez usan una computadora de escritorio para acceder a la web)
• Las aplicaciones móviles se han descargado 10.900 millones de veces.
• Las ventas de dispositivos móviles están aumentando en todos los ámbitos, con más del 85 por ciento de los nuevos teléfonos que pueden acceder a la Web móvil

Uno de los hechos más potentes aquí es el segundo elemento, que saca a la luz que muchos usuarios probablemente solo verán la versión móvil de su sitio. Esa es una revelación asombrosa, ¿no?

Más que nunca antes, la web es algo que llevamos en nuestros bolsillos, no algo que simplemente se cuelga cerca de nuestro escritorio o incluso en nuestros hogares. Esta es una tendencia global que solo seguirá creciendo en los próximos años. ¿Estás listo para esto? ¿Su conjunto de habilidades profesionales incluye el desarrollo web para todas las plataformas importantes o solo el ámbito del escritorio?

¿Por qué móvil primero?

Es probable que ninguna de las personas que leen esto no haya aprendido nada nuevo hasta este momento. Los teléfonos de más de $ 500 en los bolsillos de todas las personas que conoces son toda la indicación de que necesitas que la web haya salido de su caja con forma de computadora.

Sin embargo, el hecho de que el acceso web móvil sea popular no hace casi nada para convencerme de que necesito seguir una estrategia que priorice los dispositivos móviles. ¡La otra cara del 25% de los usuarios de dispositivos móviles es solo para dispositivos móviles es que el 75% de ellos no lo son! El escritorio sigue siendo un medio importante, que no debe olvidarse ni empujarse a la parte posterior todavía. Entonces, ¿por qué estamos considerando tomar la ruta móvil primero?

Uno de los principales catalizadores para el surgimiento del diseño web móvil primero fue el anuncio de Eric Schmidt en 2010 de que Google adoptará este enfoque de ahora en adelante, llegando a decir: "Creo que ahora es el proyecto conjunto de todos nosotros para que el móvil sea la respuesta a casi todo ”(fuente). ¿Por qué este cambio drástico en el enfoque?

Degradación elegante versus mejora progresiva

Estas son algunas palabras de moda importantes de hace unos años que aún pueden dar mucha información sobre la noción de diseño web móvil primero y por qué es un concepto importante a considerar.

La degradación elegante surgió de la necesidad de tener una función de diseño en tantos navegadores y plataformas como sea posible. Los diseñadores y desarrolladores querían aprovechar la nueva tecnología sin excluir a los usuarios con configuraciones que no tenían soporte. La conclusión general fue crear y ofrecer la mejor experiencia posible, y luego tener en cuenta cada posible degradación y garantizar que, a pesar de las deficiencias, el sitio seguiría siendo funcional.

En términos de diseño web móvil, esto significaba que un sitio web estándar completo reduciría gradualmente y eliminaría gradualmente el contenido y las características a medida que la ventana gráfica se volviera más pequeña y el sistema más simple (sin soporte de Flash, etc.).

De esta tendencia surgió una nueva idea poderosa: mejora progresiva. En esta versión del cuento, pones tu mejor pie adelante en la plataforma móvil, proporcionando a los usuarios un espacio de pantalla mínimo, potencia de procesamiento y complementos de terceros, una experiencia increíble que se ve muy bien y funciona perfectamente. A medida que surja la necesidad, el sitio se puede "mejorar" gradualmente e incluso repensar por completo para plataformas más grandes con menos restricciones.

Por qué gana la mejora progresiva

De un vistazo, estas dos metodologías parecen más o menos equivalentes. ¿A quién le importa dónde comienzas el proceso de diseño siempre que se haga, verdad?

Sin embargo, la realidad de la situación es un poco más compleja. Cuando comienza con la plataforma de escritorio, tiende a querer aprovechar todo lo que la plataforma tiene para ofrecer. Usted crea un producto increíble que aprovecha mucha tecnología excelente, solo para darse cuenta de que ninguno de ellos se adapta bien a los dispositivos móviles. Esto puede y conduce a productos móviles severamente diluidos que se sienten más como una ocurrencia tardía que como un producto pulido y terminado. ¿Esto sucede con cada proyecto? Quizás no, pero la historia es probablemente mucho más común de lo que te gustaría creer.

Si examinamos el flujo de trabajo de mejora progresiva, el resultado tiende a ser una historia diferente. Aquí comenzamos con un proyecto que es súper delgado y bastante impresionante. Has tomado toda esa energía inicial y la has puesto en la creación de un producto que se ve y funciona bien a pesar de las muchas restricciones que enfrentaste.

Más importante aún, ya ha pasado por el problema de recortar el contenido a sus elementos más vitales. Ahora, cuando llega el momento de llevar este diseño al escritorio, en lugar de enfrentar la decisión de qué cortar y cómo diluir su producto, ¡en cambio puede decidir cómo hacerlo aún más robusto!

Contenido web: mejor servicio selectivo

El argumento anterior llega a usted desde un punto de vista puramente filosófico con la conclusión final de que el resultado tiende a ser mejor si se adopta un enfoque móvil primero. Si desea una discusión con un poco más de sustancia observable detrás, no busque más allá de cómo sirve su contenido.

Si tomamos el punto de vista de degradación elegante, todo el contenido (texto, imágenes, video, audio, etc.) se sirve al mismo tiempo a lo que se supone que es la plataforma más grande. A partir de aquí, se tienen en cuenta las versiones móviles que simplemente ignoran o eliminan gran parte de este contenido de la página. Sin embargo, el problema es que ya estaba cargado en si la plataforma dada lo necesitaba o no. Nos encontramos sirviendo más contenido del necesario en la plataforma que a menudo se asocia con las velocidades de descarga más lentas. ¿Ves algo malo en eso?

Con un primer punto de vista móvil, comenzamos cargando lo esencial absoluto en las plataformas más pequeñas. Esto conduce a una experiencia más ágil que evita retrasos innecesarios. Los recursos adicionales se cargan estrictamente según sea necesario en plataformas que pueden manejarlos bien.

¿Qué pasa con el diseño receptivo?

¿Cómo encaja todo esto con un diseño receptivo, la otra tendencia que se está apoderando de la web? La buena noticia es que estas dos estrategias no son competitivas. Se podría decir que fueron hechos el uno para el otro.

El diseño receptivo se basa en el concepto de consultas de medios que se dirigen a dispositivos específicos y tamaños de ventana gráfica. Con esto en mente, puede codificar su CSS inicial dada una perspectiva móvil y luego usar consultas de medios para ofrecer selectivamente un estilo adicional a medida que aumenta el tamaño de la ventana gráfica.

Es probable que esto sea lo opuesto al método que normalmente toma con un diseño receptivo: comience en grande y luego reduzca. Sin embargo, dados los argumentos anteriores, hay mucha lógica detrás de estructurar sus consultas de medios de pequeño a grande.

El gran inconveniente de la grasa

¡Hurra por el diseño web móvil primero! Es lo mejor para visitar la web desde The Oatmeal. Entonces, ¿por qué no estoy entusiasmado? ¿Por qué, a pesar de hablar sobre el diseño receptivo, a menudo he evitado francamente el tema del diseño web móvil primero?

De inmediato me enfrento a una pantalla más pequeña, menos recursos y muchos más dolores de cabeza.

La respuesta aquí es simple: no es ni divertido ni fácil. Claro que el diseño receptivo es complicado, pero me permite flexionar mis músculos de diseño y aprovechar una gran cantidad de funciones integradas del navegador para realizar algunas hazañas geniales. El diseño receptivo hace que mi caja de juguetes sea más grande, no más pequeña.

Sin embargo, con el diseño móvil primero, me golpean la cabeza con restricciones en el paso uno. ¡Eso no es divertido en absoluto! De inmediato me enfrento a una pantalla más pequeña, menos recursos y muchos más dolores de cabeza. Además, no es el territorio cómodo. He pasado la mayor parte de mi carrera de diseño web en el espacio del escritorio, construyendo experiencias en torno a los mouse y los clics, no a las puntas de los dedos. He hecho mucho trabajo móvil pero no lo llamaría mi punto fuerte.

Lo más importante, desde una perspectiva de diseño estricta, me resulta muy difícil sumergirme en un diseño si estoy comenzando con dispositivos móviles y avanzando. Mencioné esto en un artículo reciente a muchos "huzzahs" en los comentarios e incluso escuché a profesionales líderes de la industria cantar una canción similar.

A la altura del desafío

Veamos por un segundo mis argumentos a favor y en contra de un enfoque de diseño móvil primero. En la categoría "para", tenemos argumentos directos y lógicos que son difíciles de minimizar. En la categoría "en contra" tengo muchas quejas y dudas personales. ¿De qué lado crees que gana esta batalla?

Tengo que renunciar a un poco de comodidad en nombre de ser un mejor diseñador.

Quizás tenga algunos mejores argumentos anti-mobile-first que yo, pero si miro esto desde un punto de vista objetivo, es evidente que el enfoque de mobile-first es el contendiente más fuerte.

Esto significa que probablemente necesito superarme y enfrentar el desafío de comenzar proyectos con un punto de vista móvil. Si no me siento cómodo diseñando para dispositivos móviles, bueno, eso significa que tengo espacio para crecer y técnicas para aprender.

En última instancia, si mis razones para adoptar un enfoque móvil primero están centradas en el usuario y mis razones en contra son personales, entonces tengo que renunciar a un poco de comodidad en nombre de ser un mejor diseñador.

¿Qué te detiene?

Ahora sabe todo acerca de cuán excelente es el diseño web móvil primero para sus usuarios. Usted sabe que las grandes empresas como Google están adoptando este enfoque y puede ver los beneficios de un flujo de trabajo móvil primero. Entonces, ¿qué te detiene?

¿Compartes mi perspectiva de que mobile-first es una estrategia difícil de implementar y estás de acuerdo en que solo necesitas dar el salto? ¿O hay algo más sustancial que te detiene?