Presentando TriRig 2.0

Hoy lanzo un proyecto secreto que se ha mantenido casi completamente en secreto. Hasta hace muy poco no se hizo público el más mínimo indicio de esta noticia durante los meses que estuvimos trabajando en ella. Se acaban de dar los toques finales y este producto finalmente está listo para su lanzamiento.

Me refiero, por supuesto, al nuevo diseño web de TriRig.com. Este es casi el tercer aniversario de TriRig.com. Nuestro nuevo año técnicamente termina el 1 de julio, pero no podía esperar para revelar el nuevo sitio, así que este es nuestro regalo anticipado de aniversario para ustedes. Y aunque el lanzamiento de hoy no involucra un producto que puedas tener en tus manos, puede ser aún más crítico para nuestros lectores. Lo que está en juego hoy es lo más fundamental de TriRig: el sitio mismo.

Muchos de ustedes han expresado algunas palabras amables sobre el diseño existente. Entonces, ¿por qué nos meteríamos con eso? Bueno, en general no lo hicimos. Probablemente notarás que todo luce básicamente igual. Pero están sucediendo MUCHAS cosas: todo el sitio fue reescrito de arriba hacia abajo. Y si estás leyendo esto en un iPhone, inmediatamente te darás cuenta de por qué.

Locura Móvil
La llegada de la omnipresente navegación web móvil ha sido tradicionalmente un obstáculo para los propietarios de sitios web. ¿Cuál es la mejor ruta a tomar? ¿Deberías crear un sitio específico para dispositivos móviles? ¿Para qué plataforma optimizas? Hay muchos tipos diferentes de pantallas incluso entre dispositivos móviles, y sus densidades de resolución están por todas partes.

El camino que toman la mayoría de los administradores, francamente, apesta. Los sitios específicos para móviles suelen ser un gran dolor de cabeza, ya que ofrecen sólo una fracción de la funcionalidad completa del sitio y tratan desesperadamente de ofrecer al menos la mayoría del contenido importante. Algunos diseñadores simplemente optan por omitir el sitio móvil por completo, permitiendo a los usuarios navegar por el sitio de escritorio en sus dispositivos móviles. Eso es lo que hemos hecho en TriRig durante los últimos tres años, pero también tiene sus inconvenientes. Las páginas son difíciles de leer y navegar, el texto es increíblemente pequeño hasta que haces zoom en una sección específica (y una vez que lo haces, es como intentar leer un periódico con un telescopio).

Los usuarios están igualmente confundidos. Realizamos una encuesta en marzo, preguntando si aquellos de ustedes que navegan en dispositivos móviles les gustaría ver un sitio específico para dispositivos móviles. Y estabas bastante dividido en tus respuestas. Algunos de ustedes querían una página específica para el teléfono. Algunos de ustedes querían una página específica para tabletas. Otro grupo, casi tan grande, votó que prefieren navegar por sitios de escritorio en sus dispositivos móviles. Sospecho que esto se debe a lo malas que suelen ser las experiencias de navegación específicas para dispositivos móviles. Pero esto es TriRig, y el principio fundamental de este sitio es que podemos hacerlo mejor que el status quo. Creo que existe una solución, esperando a ser desarrollada. Así que eso es lo que hemos estado haciendo. Y creo que te encantará el resultado.

Unidad de Diseño

Aquí hay una página de tamaño completo, casi sin cambios desde la última versión de nuestro diseño v1.
Al final, realmente creo que el futuro del diseño web no es una experiencia de navegación dividida que requiera que te familiarices con una interfaz de usuario diferente para cada dispositivo que utilices. Más bien, creo que los desarrolladores web deberían centrarse en crear páginas dinámicas que se adapten a los dispositivos que utilizamos. Una página para gobernarlos a todos, por así decirlo.

Eso es exactamente lo que nos propusimos crear.

El nuevo TriRig es una experiencia de navegación completamente dinámica y escalable que se adaptará a cualquier pantalla en la que se navegue, según el tamaño de la ventana del navegador. Puedes ver la escala dinámica por ti mismo. Simplemente coloque esta página en una ventana de tamaño variable y comience lentamente a reducir el ancho del navegador. A medida que cambie el tamaño de la página, comenzará a ver que todo se reduce. Las imágenes, los vídeos y los elementos de la página se escalan proporcionalmente para evitar la aparición de una temida barra de desplazamiento horizontal. El texto mantiene el mismo tamaño para seguir siendo perfectamente legible.

Por supuesto, en algún momento ya no es ideal simplemente aplastar todo y mantener la misma estructura de página: simplemente estarías intentando encajar demasiado en una pantalla. Esto es particularmente cierto para la navegación en teléfonos inteligentes, donde el tamaño de la pantalla es lo suficientemente pequeño como para que realmente solo se obtenga una columna de texto utilizable. Entonces, en un punto de interrupción de 768 px e inferior, los elementos de la página de TriRig se reorganizan. La barra lateral salta debajo del contenido principal, dejando más espacio para leer en esos dispositivos pequeños. Puede verlo usted mismo: simplemente continúe reduciendo la ventana de su navegador y de repente verá desaparecer la barra lateral. En realidad, no desapareció, simplemente se movió debajo del texto del artículo principal para darle más espacio para leer. Esta es la estructura que permanece en su lugar para todos los tamaños de pantalla más pequeños. Todo continúa reduciéndose como lo hacía antes, para mantener todo visible. En tamaños de pantalla realmente pequeños, la barra de navegación en la parte superior se colapsa en un menú desplegable, lo que ahorra valioso espacio en la pantalla y al mismo tiempo mantiene esa navegación simple y familiar del sitio.

Y así es como se ve esa misma página cuando se reduce un poco: observe que TODO el mismo contenido y función aún están intactos. La barra lateral acaba de moverse debajo del artículo principal.
Ah, sí, y debido a que TriRig fue diseñado originalmente como un sitio basado en bases de datos, el nuevo diseño se aplica a cada página del sitio, desde el primer artículo que publicamos.

Lo que es tan importante de este diseño (en mi opinión) es que, si bien la experiencia de navegación está optimizada para cada tamaño de pantalla, todo el contenido de cada página del sitio está disponible sin importar en qué dispositivo esté navegando. Puede que esté en una ubicación ligeramente diferente, pero estará disponible de todos modos.

Ciertamente, esta no es la única forma de resolver el problema de la disparidad de visualización para crear una experiencia de navegación más coherente. Y tal vez no sea la mejor manera. Pero es lo mejor que se me ocurrió en este momento. Y en mi opinión, es mucho mejor que la forma desordenada y ad hoc en la que se comportan actualmente muchos sitios. No pierde ni una pizca del contenido del sitio y no tiene que aprender una nueva interfaz de usuario para disfrutar de TriRig en su teléfono, tableta o cualquier otro dispositivo.

Zurbificado
Nada de esta bondad de escalamiento dinámico habría sucedido sin el increíble trabajo de un grupo llamado Zurb. Crearon una herramienta de código abierto llamada Foundation que hace que sea relativamente sencillo codificar todas las funciones que describí anteriormente. Para los fanáticos de la codificación, Foundation es esencialmente solo una hoja de estilo CSS y el Javascript que la acompaña y que pone a su disposición una gran cantidad de prácticas clases predefinidas y herramientas JS. Hace que sea realmente fácil pensar en los términos que describí anteriormente y crear páginas que se ajusten a ellos.

En anchos muy estrechos, la barra de navegación se colapsa en un menú expandible, una característica conveniente para teléfonos móviles con espacio de visualización limitado.
TriRig sigue siendo un software completamente codificado a mano: siempre ha existido como unas pocas docenas de scripts php que definen todos los elementos de la interfaz de usuario, una base de datos SQL que almacena y sirve todo el contenido del sitio y algunos otros pequeños fragmentos de código que sirve para diversos propósitos. Y ahora Foundation proporciona la base sobre la que se apilan esos elementos. Siempre he sido extremadamente egoísta con mis activos y nunca quise entregar TriRig a ningún tipo de plantilla de caja negra o CMS que no pudiera controlar por completo. Entonces, prácticamente la totalidad de TriRig está completamente escrita a mano en un editor de texto simple (yo uso Notepad++). Foundation me resultaba atractiva porque me proporcionaba las herramientas que quería sin tener que renunciar a ningún control. Los dos scripts de Foundation son completamente editables por el usuario y han sido modificados bastante para mantener la apariencia original de TriRig.

Conclusiones
¿Qué significa todo esto para usted, el usuario? Bueno, tal vez no mucho. Si no eres un experto en tecnología, puedes seguir navegando sin siquiera pensar en cómo funciona todo esto. Ese es todo el punto. Navegar por TriRig ahora es más fácil, sin importar en qué dispositivo lo hagas. Pero, de nuevo, si no eres un experto en tecnología, probablemente no estés leyendo TriRig en primer lugar. Algunos de ustedes (alrededor del cinco por ciento) todavía usan Internet Explorer versión 8 o inferior, y esos navegadores no son compatibles con los scripts de Foundation. Esos navegadores utilizan de forma predeterminada la versión para teléfonos inteligentes del sitio; la barra de navegación se contrae en un menú y el contenido de la barra lateral se muestra debajo del contenido principal. Entonces, para aquellos de ustedes con IE8 y versiones inferiores, TriRig aún se puede utilizar, pero no es ideal. Desafortunadamente, decidí que el enorme beneficio para el otro 95% de ustedes en navegadores más modernos valió la pena.

¿Qué opinas del rediseño? ¿Crees que hemos encontrado una buena solución para el uso web moderno? ¿Hay peculiaridades extrañas que estás viendo y que debemos abordar? Nos encantaría escuchar tu opinión en la sección de comentarios a continuación.