Diseño receptivo en el mundo corporativo
Cuando ya tiene un plan completo de trabajo con el cliente, puede ser difícil acceder a nuevas tecnologías. El diseño receptivo es una gran frase de moda en este momento, pero no es necesario forzarlo en un cliente a menos que sus usuarios lo vean.
En 352 Media Group, recientemente vimos la oportunidad de hacer un sitio totalmente receptivo para un cliente, Purple Communications. Hacen software para personas con pérdida auditiva que de otra manera no podrían hacer una llamada telefónica. Utilizando su computadora, teléfono, videoteléfono u otro dispositivo electrónico, pueden comunicarse con otras personas mediante 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 compañía ya había hecho sitios móviles antes, pero esta era la primera vez que un sitio serviría tanto a los usuarios de dispositivos móviles como de escritorio. Si está interesado en incorporar algunas características de diseño web receptivas en el sitio web de su empresa o cliente, aquí hay algunos consejos a tener en cuenta:
No comprometer el diseño
Hay diseños que se prestan a un diseño receptivo y fluido mucho más que otros. Un diseño minimalista con un fondo simple solo podría requerir algunos ajustes para volverse fluido. Por lo tanto, puede ser muy tentador impulsar este tipo de diseño en el cliente, ya que haría que el desarrollo del sitio sea notablemente más fácil.
Una de las ventajas competitivas de 352 Media Group es nuestro diseño galardonado. Entonces, aunque al principio estaba sucumbiendo a la tentación de un diseño minimalista, cambié de idea y decidí descubrir cómo podíamos usar el diseño que queríamos de manera receptiva.
Hay tres formas diferentes de desarrollar un diseño receptivo. Creé nombres para ellos para que sean más fáciles de discutir:
Diseños escalonados
Esta técnica utiliza consultas de medios para servir diferentes hojas de estilo a 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 podría ser bastante complicado para hacer fluidos. 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 necesitaba para su resolución.
El problema con esta técnica es que debe elegir para qué resoluciones va a optimizar su sitio. La mayoría de las personas usa números basados en los dispositivos iOS: 768 px para el diseño de la tableta y 320 píxeles para el diseño móvil. Pero con todos los teléfonos inteligentes y tabletas diferentes disponibles, hay toneladas de resoluciones diferentes. Debido a que las aplicaciones que Purple Communications hace están disponibles para muchos teléfonos diferentes, queríamos asegurarnos de que cada usuario tenga una experiencia óptima. Entonces, aunque creo que esta técnica sería perfecta para un sitio web de una aplicación de iPhone, no iba a satisfacer nuestras necesidades para este proyecto.
Cuadrícula de fluido
Otra forma de hacer que su sitio responda es mediante el uso de anchuras de porcentaje para que todo se escale con la vista hasta 0. Con este método, configura su cuadrícula basada en porcentajes que hará la tarea principal. Después de eso, utilizas 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 individual, en lugar de solo un puñado.
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 conocido como el técnica de puertas correderas eso puede permitirle usar una sola imagen para hacer un contenedor de ancho fluido con bordes intrincados. Si no lo estás usando, definitivamente mira ese tutorial porque es una técnica fantástica. Pero incluso con eso y algunas otras cosas en nuestro arsenal, todavía habría sido bastante difícil de lograr.
Híbrido fluido / escalonado
Al final, decidí 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 960px de ancho. Esto significaba que para el escritorio, nuestro proceso era casi el mismo que un proyecto normal. Admitimos resoluciones 1024 × 768 y superiores para computadoras de escritorio, por lo que hacemos que nuestros sitios tengan un ancho estándar de 960px (lo que permite una barra de desplazamiento vertical y otro navegador y sistema operativo chrome). Cualquier ventana gráfica debajo de ese ancho normalmente mostraría una barra de desplazamiento.
En lugar de tratar de elegir qué resolución tenía más sentido para un tamaño de tableta, simplemente lo configuramos en cualquier lugar bajo el ancho del sitio de 960px desencadenaría el diseño fluido. De esa forma, 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) viendo el sitio en modo apaisado obtiene la versión de escritorio completa. Tenga en cuenta que probablemente quiera hacer pequeños ajustes con consultas de medios para hacer que los enlaces y botones sean más fáciles de tocar.
Móvil primero
Si ha realizado alguna investigación sobre diseño receptivo, seguramente habrá escuchado antes el mantra del desarrollo para dispositivos móviles, 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 los medios de la manera incorrecta. Usted podría pensar: "Todo lo que tengo que hacer es crear nuevas imágenes y poner un nuevo CSS 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 increíbles 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 frecuentemente sobre la marcha. Pero al seguir nuestra lógica anterior, estamos optimizando un sitio para dispositivos menos poderosos en conexiones más lentas agregando CSS e imágenes. Una vez que piensas eso, te das cuenta de que tienes que modificar tu 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 más difícil es asegurarse de que solo descargue la imagen que necesita. Este problema podría ser un artículo por sí solo, pero afortunadamente Jason Grigsby ya compiló una lista de métodos de imagen receptiva y sus pros y contras.
Después de eso, todo lo que tenemos que trabajar es el CSS. Con nuestra mentalidad "móvil primero", vamos a crear un archivo mobile.css que contenga todo el CSS que necesita el móvil. Este será el único archivo que descargarán los teléfonos. Luego, crearemos un segundo archivo llamado desktop.css que se basará y sobrescribirá los estilos base establecidos en mobile.css. Para asegurarnos de que los teléfonos / tabletas se lleven a mobile.css y los desktops obtengan tanto mobile.css como desktop.css, nuestros enlaces se ven así:
Esta combinación ha funcionado hasta el momento para todo lo que he probado, excepto para las versiones de Internet Explorer anteriores a 9. Debido a que el estándar de nuestra compañía es compatible con IE7 +, tuvimos que hacer un último ajuste. Notarás que mi código anterior se está ejecutando en el servidor. En el back-end, estamos buscando 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, podría usar responder.js en su lugar.
Esto significa que nuestro CSS de escritorio no estará tan optimizado como lo sería en un sitio normal. Pero, el único sacrificio que estamos haciendo es descargar un archivo CSS liviano que luego sobrescribimos donde necesitamos. Necesitábamos comprometernos 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 control total sobre su sitio. Después de que terminamos el desarrollo, entregamos todo el código fuente. También ofrecemos 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 en el que no queríamos comprometernos, por lo que tuvimos algunos obstáculos adicionales.
Una de las interfaces más difíciles para transferir a dispositivos móviles es la navegación. Este es un problema porque también es una de las interfaces más importantes en un sitio. La primera pregunta que debe hacerse es si los usuarios de dispositivos móviles necesitan 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 elemento. Esto utilizará el sistema operativo del teléfono para una interfaz optimizada para 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 consideraban 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 fue qué elementos colapsaron en el menú, así que nos aseguramos de borrar eso con ellos primero. Pero después de eso, pueden agregar cualquier artículo o sub artículo que deseen. Para lograr esto, utilizamos una segunda copia de la navegación anidada en el último elemento llamado "Más". Lo ocultamos en los escritorios, y en el móvil 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 el control total sin tener que administrar una navegación móvil separada (que se convertiría en una tarea rutinaria con elementos duplicados).
Para las áreas de contenido, proporcionamos capacitación al cliente para que conozcan 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 agregaban se optimizaran para todas las resoluciones.
Creando un marco reutilizable
Lo último a 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 trabajen en el proyecto no solo estén pensando en el cliente y sus usuarios, sino también sobre qué lecciones se pueden aplicar a otros proyectos. Siempre esté atento a proyectos como este que puedan ayudarlo a abrir nuevas áreas para que su empresa siga avanzando junto con la industria.
En 352 Media Group, ya tenemos marcos establecidos tanto para nuestros programadores como para nuestros desarrolladores front-end. Por ejemplo, dividimos todos nuestros CSS en varios archivos para compartimentar los componentes y mantener a todos organizados. Tenemos archivos separados para estructura, tipografía, formularios, widgets, etc. Cuando te estás moviendo a nuevas tecnologías, puedes tomar lo que parece ser el camino fácil y simplemente abandonar cosas que no parecen encajar y crear cosas nuevas para el futuro. Pero al hacerlo, estás abandonando años de experiencia que hasta ahora te han ido bien.
Simplifiqué demasiado nuestro código anterior que vincula los archivos CSS. Podríamos haber requerido que los sitios receptivos usen 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 los dispositivos móviles, que deberían aplicarse al escritorio y cuáles deberían dividirse entre los dos. Pudimos adaptar lo que ya teníamos trabajando en algo que nos funcionará bien en el futuro.