Diseño receptivo en el mundo corporativo

Cuando ya tiene un plato completo de trabajo del cliente, puede ser difícil ingresar a las nuevas tecnologías. El diseño receptivo es una gran frase de moda en este momento, pero no es necesario forzarlo a un cliente a menos que sus usuarios vean un beneficio de él.

En 352 Media Group, vimos recientemente la oportunidad de crear un sitio totalmente receptivo para un cliente, Purple Communications. Crean software para personas con pérdida auditiva que, de otro modo, no podrían realizar una llamada telefónica. Usando su computadora, teléfono, videoteléfono u otro dispositivo electrónico, pueden comunicarse con otras personas usando un servicio de retransmisión de video.

Purple Communications ofrece aplicaciones para múltiples plataformas telefónicas, por lo que una parte sustancial de su tráfico web proviene de dispositivos móviles. Al observar su tráfico, quedó muy claro que la mejor solución para el cliente era crear un sitio totalmente receptivo. Nuestra empresa ya ha creado sitios para dispositivos móviles, pero esta fue la primera vez que un sitio ofrecía servicios tanto a los usuarios de dispositivos móviles como a los de escritorio. Si está interesado en incorporar algunas características de diseño web receptivo en el sitio web de su empresa o cliente, aquí hay algunos consejos para tener en cuenta:

No comprometa el diseño

Hay diseños que se prestan a un diseño fluido y receptivo mucho más que otros. Un diseño minimalista con un fondo simple puede requerir solo algunos ajustes para volverse fluido. Por lo tanto, puede ser muy tentador imponer este tipo de diseño al cliente, ya que facilitaría notablemente el desarrollo del sitio.

Una de las ventajas competitivas de 352 Media Group es nuestro galardonado diseño. Entonces, aunque inicialmente estaba sucumbiendo a la tentación de un diseño minimalista, cambié de opinión y decidí averiguar cómo podríamos usar el diseño que queríamos de una manera receptiva.

Hay tres formas diferentes de desarrollar un diseño receptivo. He creado nombres para ellos para que sea más fácil discutirlos:

Diseños escalonados

Esta técnica utiliza consultas de medios para entregar diferentes hojas de estilo con resoluciones establecidas. Tradicionalmente, crearía tres diseños diferentes: uno para computadoras de escritorio, uno para tabletas y otro para teléfonos.

Este método fue muy atractivo debido a mi decisión de diseñar un sitio que potencialmente sería bastante complicado de hacer fluido. Esencialmente, podríamos tomar nuestro proceso existente de desarrollo de un sitio y simplemente multiplicarlo por tres. Incluso podríamos usar la detección del lado del servidor para asegurarnos de que solo obtenga el archivo CSS que necesita para su resolución.

El problema con esta técnica es que tienes que elegir las resoluciones para las que vas a optimizar tu sitio. La mayoría de la gente usa números basados ​​en los dispositivos iOS: 768 px para el diseño de la tableta y 320 px para el diseño móvil. Pero con todos los diferentes teléfonos inteligentes y tabletas disponibles, hay toneladas de resoluciones diferentes. Debido a que las aplicaciones que hace Purple Communications están disponibles para muchos teléfonos diferentes, queríamos asegurarnos de que cada usuario tuviera una experiencia óptima. Entonces, si bien creo que esta técnica sería perfecta para un sitio web de aplicaciones de iPhone, no iba a satisfacer nuestras necesidades para este proyecto.

Rejilla fluida

Otra forma de hacer que su sitio sea receptivo es mediante el uso de anchos porcentuales para que todo se escale con la ventana gráfica hasta 0. Con este método, configura su cuadrícula basada en porcentajes que hará el trabajo preliminar principal. Más allá de eso, utiliza consultas de medios para ajustar cosas para diferentes pantallas. Este método tiene una clara ventaja sobre el método escalonado porque el sitio se optimizará para cada resolución, en lugar de solo para unas pocas.

La desventaja aquí es que ciertos diseños pueden ser exponencialmente más difíciles de desarrollar. Consideré este método durante mucho tiempo, tratando de descubrir cómo codificar áreas problemáticas. Utilizamos un método común denominado técnica de puertas correderas que puede permitirle usar una sola imagen para hacer un recipiente de ancho fluido con bordes intrincados. Si no lo está usando, definitivamente mire ese tutorial porque es una técnica fantástica. Pero incluso con eso y algunas otras cosas en nuestro arsenal, aún habría sido bastante difícil de lograr.

Híbrido fluido / escalonado

Al final, me decidí por una combinación de los dos métodos. Utilizaríamos la técnica escalonada para hacer un diseño para escritorio, y luego un gran paso hacia un diseño fluido de menos de 960 px de ancho. Esto significó que para el escritorio, nuestro proceso fue casi el mismo que el de un proyecto normal. Admitimos resoluciones de 1024 × 768 y superiores para escritorio, por lo que hacemos nuestros sitios con el ancho estándar de 960 px (lo que permite una barra de desplazamiento vertical y otros navegadores y sistemas operativos cromados). Cualquier ventana debajo de ese ancho normalmente solo mostraría una barra de desplazamiento.

En lugar de intentar elegir qué resolución tenía más sentido para el tamaño de una tableta, simplemente la configuramos donde cualquier cosa por debajo del ancho del sitio de 960 px activaría el diseño fluido. De esa manera, nadie obtendría la temida barra de desplazamiento horizontal.

Como una pequeña ventaja adicional, una tableta (que tiene al menos 960 px de ancho) que visualiza el sitio en modo horizontal obtiene la versión de escritorio completa. Tenga en cuenta que probablemente querrá hacer algunos pequeños ajustes con las consultas de medios para que los enlaces y botones sean más fáciles de tocar.

Móvil primero

Si ha investigado sobre diseño receptivo, seguramente habrá escuchado el mantra de desarrollar para dispositivos móviles primero, que definitivamente es algo que debe tener en cuenta. Dado que todos hemos estado en la mentalidad de desarrollar sitios para computadoras de escritorio durante tanto tiempo, es muy fácil ver las consultas de medios de manera incorrecta. Podría pensar: «Todo lo que necesito hacer es crear algunas imágenes nuevas y agregar CSS nuevo en una consulta de medios, y mi sitio también funcionará en teléfonos». Si bien esto es cierto, también es completamente al revés.

A pesar de lo asombrosos que se han vuelto los teléfonos inteligentes, todavía no son tan poderosos como las computadoras de escritorio. Además, el contenido se consume con frecuencia sobre la marcha. Pero siguiendo nuestra lógica anterior, estamos optimizando un sitio para dispositivos menos potentes en conexiones más lentas agregando CSS e imágenes. Una vez que lo piensa bien, se da cuenta de que tiene que modificar su flujo de trabajo.

La parte más difícil es hacer que esto funcione para img etiquetas. Si sigue las mejores prácticas, tendrá imágenes optimizadas para diferentes resoluciones. La parte desafiante es asegurarse de descargar solo la imagen que necesita. Este número podría ser un artículo por sí solo, pero afortunadamente Jason Grigsby ya ha compilado una lista de métodos de imagen receptivos y sus pros y contras.

Más allá de eso, todo lo que tenemos que ponernos a trabajar es el CSS. Con nuestra mentalidad de «dispositivos móviles primero», vamos a crear un archivo mobile.css que contiene todo el CSS que los dispositivos móviles necesitan. Este será el único archivo que descarguen los teléfonos. Luego, crearemos un segundo archivo llamado desktop.css que construirá y sobrescribirá los estilos base establecidos en mobile.css. Para asegurarse de que los teléfonos / tabletas obtengan mobile.css únicamente y que los equipos de escritorio obtengan mobile.css y desktop.css, nuestros enlaces se ven así:

<link id="uxCSSMobileFiles" runat="server" type="text/css" href="https://www.webdesignerdepot.com/2012/01/responsive-design-in-the-corporate-world/css/mobile.css" rel="stylesheet" />
<link id="uxCSSFiles" runat="server" type="text/css" media="screen and (min-width: 960px)" href="css/desktop.css" rel="stylesheet" />

Esta combinación ha funcionado hasta ahora para todo lo que he probado, excepto para las versiones de Internet Explorer anteriores a 9. Debido a que el estándar de nuestra empresa es admitir IE7 +, tuvimos que hacer un último ajuste. Notarás que mi código anterior se está ejecutando en el servidor. En el backend, buscamos la versión de IE, y si es menor que 9, cambiamos el atributo de medios a «pantalla, proyección». Esto funcionó mejor para nosotros, pero si no está ejecutando nada del lado del servidor, puede usar respond.js en su lugar.

Esto significa que nuestro CSS de escritorio no estará tan optimizado como lo estaría en un sitio normal. Pero, el único sacrificio que estamos haciendo es descargar un archivo CSS ligero que luego sobrescribimos donde sea necesario. Necesitábamos llegar a un compromiso en alguna parte, y como seguimos cantando «primero el móvil», sabemos que esto es mejor que la alternativa.

Todavía ofreciendo el control del cliente

En 352 Media Group, creemos en darle al cliente el control total sobre su sitio. Una vez que terminamos el desarrollo, entregamos todo el código fuente. También proporcionamos un CMS personalizado que permite al cliente administrar las páginas, la navegación y el mapa del sitio. Al igual que el diseño, este es un estándar con el que no queríamos comprometernos, por lo que tuvimos algunos obstáculos adicionales.

Una de las interfaces más difíciles de transferir al móvil es la navegación. Este es un problema porque también es una de las interfaces más importantes de un sitio. La primera pregunta que debe hacerse es si los usuarios de dispositivos móviles necesitan un acceso rápido a toda la navegación o si solo están interesados ​​en unos pocos. Si necesitan toda la navegación y hay más de cuatro elementos de nivel principal, creo que una de las mejores soluciones es agruparlos en un <select> elemento. Esto utilizará el sistema operativo del teléfono para una interfaz optimizada a la que el usuario ya está acostumbrado.

En Purple Communications, solo había dos elementos de nivel principal que los usuarios de dispositivos móviles miraban principalmente: Productos y servicios y Acerca de nosotros. Por lo tanto, en los teléfonos, solo mostramos esos dos elementos y luego agrupamos el resto en un menú desplegable «Más».

Pero una de las cosas que ofrecemos al cliente es el control sobre su navegación. Para este sitio, lo único sobre lo que no tendrían control era qué elementos colapsaron en el menú, así que nos aseguramos de aclarar eso con ellos primero. Pero más allá de eso, pueden agregar cualquier elemento o subelemento que deseen. Para lograr esto, usamos una segunda copia de la navegación anidada en el último elemento llamado «Más». Lo ocultamos en los escritorios y en los dispositivos móviles estamos ocultando los elementos de nivel superior que no queremos que se muestren. En la lista anidada, ocultamos «Productos y servicios» y «Acerca de» para que los usuarios no los vean dos veces. Esto le da a nuestro cliente un control total sin tener que administrar una navegación móvil separada (lo que se convertiría en una tarea con elementos duplicados).

Para las áreas de contenido, brindamos capacitación al cliente para que conociera las mejores formas de estructurar su contenido. También configuramos algunas clases que podrían usar en cosas como videos de YouTube, botones y llamadas a la acción, lo que garantizaba que las cosas que agregaran se optimizaran para todas las resoluciones.

Creando un marco reutilizable

Lo último que debe tener en cuenta al explorar nuevas tecnologías como el diseño receptivo es asegurarse de que su empresa esté mejor preparada para el futuro. Querrá que todos los que trabajan en el proyecto no solo piensen en el cliente y sus usuarios, sino también en las lecciones que se pueden aplicar a otros proyectos. Esté siempre atento a proyectos como este que pueden poner su pie en la puerta de nuevas áreas para que su empresa siga avanzando junto con la industria.

En 352 Media Group, ya hemos establecido marcos tanto para nuestros programadores como para nuestros desarrolladores front-end. Por ejemplo, dividimos todo nuestro CSS en varios archivos para compartimentar los componentes y mantener a todos organizados. Tenemos archivos separados para estructura, tipografía, formularios, widgets, etc. Cuando se está moviendo hacia nuevas tecnologías, puede tomar lo que parece el camino fácil y simplemente abandonar las cosas que no parecen encajar y crear cosas nuevas para el futuro. Pero al hacerlo, está abandonando años de experiencia que le han funcionado bien hasta ahora.

Anteriormente simplifiqué demasiado nuestro código que vincula los archivos CSS. Podríamos haber requerido que los sitios receptivos usaran esos dos nuevos archivos CSS en lugar del marco normal. Pero en cambio, con un poco de creatividad, descubrimos qué archivos deberían aplicarse a dispositivos móviles, cuáles deberían aplicarse a computadoras de escritorio y cuáles deberían dividirse entre los dos. Pudimos adaptar lo que ya teníamos funcionando en algo que nos funcionará bien en el futuro.