Apresentando o TriRig 2.0

Hoje, estou lançando um projeto secreto que tem sido mantido quase completamente em segredo. Até muito recentemente, nem a menor pista dessa notícia foi tornada pública durante os meses em que estivemos trabalhando nele. Os retoques finais acabaram de ser dados, e este produto está finalmente pronto para lançamento.

Estou falando, é claro, sobre o novo web design do TriRig.com. Este é quase o terceiro aniversário do TriRig.com. Nosso novo ano tecnicamente vira em 1º de julho, mas eu mal podia esperar para revelar o novo site, então este é nosso presente de aniversário antecipado para você. E embora o lançamento de hoje não envolva um produto que você possa segurar em suas mãos, ele pode ser ainda mais crítico para nossos leitores. O que está em jogo hoje é a coisa mais fundamental sobre o TriRig - o site em si.

Muitos de vocês expressaram algumas palavras gentis sobre o design existente. Então por que mexeríamos com isso? Bem, na maioria das vezes não fizemos isso. Você provavelmente notará que as coisas parecem basicamente as mesmas. Mas há MUITA coisa acontecendo - o site inteiro foi reescrito de cima para baixo. E se você estiver lendo isso em um iPhone, perceberá imediatamente o porquê.

Loucura Móvel
O advento da navegação onipresente na web móvel tem sido tradicionalmente um obstáculo para os proprietários de sites. Qual é o melhor caminho a seguir? Você deve criar um site específico para dispositivos móveis? Para qual plataforma você otimiza? Existem muitos tipos diferentes de telas, mesmo entre dispositivos móveis, e suas densidades de resolução estão por todo o mapa.

O caminho que a maioria dos administradores toma, francamente, é péssimo. Sites específicos para dispositivos móveis são muitas vezes um grande pé no saco, entregando apenas uma fração da funcionalidade completa do site e tentando desesperadamente entregar pelo menos a maioria do conteúdo importante. Alguns designers simplesmente optam por pular o site para dispositivos móveis completamente, deixando os usuários navegarem no site para desktop em seus dispositivos móveis. É o que temos feito na TriRig nos últimos três anos, mas também tem suas desvantagens. As páginas são difíceis de ler e navegar, o texto é impossivelmente pequeno até que você dê zoom em uma seção específica (e quando você faz isso, é como tentar ler um jornal com um telescópio).

Os usuários estão igualmente confusos. Fizemos uma pesquisa em março, perguntando se aqueles entre vocês que navegam em dispositivos móveis gostariam de ver um site específico para dispositivos móveis. E vocês ficaram bastante divididos em suas respostas. Alguns de vocês queriam uma página específica para telefones. Alguns de vocês queriam uma página específica para tablets. Outro grupo, quase tão grande, votou que prefere navegar em sites de desktop em seus dispositivos móveis. Suspeito que isso se deva ao quão ruins as experiências de navegação específicas para dispositivos móveis geralmente são. Mas este é o TriRig, e o princípio fundador deste site é que podemos fazer melhor do que o status quo. Acredito que haja uma solução por aí, esperando para ser desenvolvida. Então é isso que temos feito. E acho que vocês vão adorar o resultado.

Design Unitário

Aqui está uma página em tamanho real, quase inalterada em relação à última iteração do nosso design v1.
No final, eu realmente acredito que o futuro do web design não é uma experiência de navegação dividida que requer que você se familiarize com uma interface de usuário diferente para cada dispositivo que você usa. Em vez disso, acredito que os desenvolvedores web devem se concentrar em fazer páginas dinâmicas que se adaptem aos dispositivos que estamos usando. Uma página para governar todos eles, se você preferir.

Então foi exatamente isso que nos propusemos a criar.

O novo TriRig é uma experiência de navegação completamente dinâmica e escalável que se adaptará a qualquer tela em que for navegado, com base no tamanho da janela do navegador. Você pode ver o dimensionamento dinâmico por si mesmo. Basta colocar esta página em uma janela redimensionável e começar a reduzir lentamente a largura do navegador. Conforme você redimensiona a página, começará a ver tudo diminuir. Imagens, vídeos e elementos da página são dimensionados proporcionalmente, para evitar a aparência de uma temida barra de rolagem horizontal. O texto permanece do mesmo tamanho para permanecer perfeitamente legível.

Claro, em algum momento não é mais ideal simplesmente espremer tudo e manter a mesma estrutura de página - você estaria simplesmente tentando encaixar muita coisa em uma tela. Isso é particularmente verdadeiro para navegação em smartphones, onde o tamanho da tela é pequeno o suficiente para que você realmente tenha apenas uma coluna de texto utilizável. Então, em um ponto de interrupção de 768px e abaixo, os elementos de página do TriRig se reorganizam. A barra lateral salta abaixo do conteúdo principal, deixando mais espaço para leitura nesses dispositivos pequenos. Você pode ver isso sozinho - basta continuar a reduzir a janela do navegador e, de repente, verá a barra lateral desaparecer. Na verdade, ela não desapareceu, apenas se moveu para baixo do texto do artigo principal para dar mais espaço para você ler. Esta é a estrutura que permanece no lugar para todos os tamanhos de tela menores. Tudo continua a diminuir como antes, para manter tudo visível. Em tamanhos de tela realmente pequenos, a barra de navegação na parte superior se recolhe em um menu suspenso, economizando espaço valioso na tela, mantendo aquela navegação simples e familiar do site.

E aqui está a mesma página que parece quando reduzida um pouco - observe que TODO o mesmo conteúdo e função ainda estão intactos. A barra lateral acabou de se mover para baixo do artigo principal.
Ah, sim, e como o TriRig foi originalmente projetado como um site baseado em banco de dados, o novo design se aplica a todas as páginas do site, desde o primeiro artigo que publicamos.

O que é tão importante sobre esse design (na minha opinião) é que, embora a experiência de navegação seja otimizada para todos os tamanhos de tela, todo o conteúdo de cada página do site está disponível, não importa em qual dispositivo você esteja navegando. Pode estar em um local ligeiramente diferente, mas estará disponível mesmo assim.

Certamente esta não é a única maneira de resolver o problema da disparidade de exibição para criar uma experiência de navegação mais coesa. E talvez não seja a melhor maneira. Mas é o melhor que consegui pensar no momento. E, na minha opinião, é muito melhor do que a maneira aleatória e ad-hoc com que muitos sites se comportam atualmente. Você não perde um pingo do conteúdo do site e não precisa aprender uma nova interface de usuário para aproveitar o TriRig em seu telefone, tablet ou qualquer outro dispositivo.

Zurbificado
Nada dessa bondade de escala dinâmica teria acontecido sem o trabalho incrível de um grupo chamado Zurb. Eles montaram uma ferramenta de código aberto chamada Foundation que torna relativamente simples codificar todos os recursos que descrevi acima. Para os geeks de codificação entre vocês, a Foundation é essencialmente apenas uma folha de estilo CSS e Javascript acompanhante que coloca um monte de classes predefinidas convenientes e ferramentas JS à sua disposição. Isso torna muito fácil pensar nos termos que descrevi acima e montar páginas que estejam em conformidade com eles.

Em larguras muito estreitas, a barra de navegação se transforma em um menu expansível - um recurso conveniente para celulares com espaço de exibição limitado.
O TriRig continua sendo um software completamente codificado à mão - ele sempre existiu como algumas dezenas de scripts php que definem todos os elementos da interface do usuário, um banco de dados SQL que armazena e serve todo o conteúdo do site e alguns outros pequenos pedaços de código que atendem a vários propósitos. E agora o Foundation fornece a base sobre a qual esses elementos são empilhados. Sempre fui extremamente egoísta com meus ativos e nunca quis entregar o TriRig a nenhum tipo de modelo de caixa preta ou CMS que eu não pudesse controlar completamente. Então, virtualmente, a totalidade do TriRig é completamente escrita à mão em um editor de texto simples (eu uso o Notepad++). O Foundation era atraente para mim porque fornecia as ferramentas que eu queria sem exigir que eu desistisse de nenhum controle. Os dois scripts do Foundation são completamente editáveis ​​pelo usuário e foram bastante modificados para manter a aparência e o comportamento originais do TriRig.

Conclusões
O que tudo isso significa para você, o usuário? Bem, talvez não muito. Se você não é um especialista em tecnologia, pode continuar navegando sem nem pensar em como tudo isso funciona. Esse é o ponto principal. Navegar no TriRig é mais fácil agora, não importa em qual dispositivo você esteja fazendo isso. Mas, novamente, se você não é um especialista em tecnologia, provavelmente não está lendo o TriRig em primeiro lugar. Há alguns de vocês (cerca de cinco por cento) ainda usando o Internet Explorer versão 8 ou inferior, e esses navegadores não são compatíveis com os scripts da Foundation. Esses navegadores usam como padrão a versão do site para smartphone; a barra de navegação é recolhida em um menu, e o conteúdo da barra lateral é mostrado abaixo do conteúdo principal. Então, para aqueles de vocês no IE8 e anteriores, o TriRig ainda é utilizável, mas não é o ideal. Infelizmente, eu simplesmente decidi que o enorme benefício para os outros 95% de vocês em navegadores mais modernos valeu a pena.

O que você acha do redesenho? Você acha que encontramos uma boa solução para o uso moderno da web? Há peculiaridades estranhas que você está vendo que precisamos abordar? Gostaríamos de ouvir suas opiniões na seção de comentários abaixo.