Lançamos o novo Hashrocket.com recentemente. Este novo site é um novo design e uma reescrita do front-end – muito do back-end também foi reescrito, mas eu sou um cara de design, então se você quiser uma quebra de back-end, terá que comprar um sorvete para Polito bolo ou algo assim. Aqui estão algumas coisas legais sobre o frontend.
Liquidez
O site Hashrocket foi projetado para ter uma boa aparência em um espectro contínuo de 1200 px de largura até 320 px. Não temos como alvo dispositivos ou larguras específicas – os sites responsivos garantem que um site tenha uma boa aparência em qualquer tamanho.
Os estilos básicos são projetados para a janela de visualização mais ampla e os estilos adicionais os substituem conforme o site fica mais estreito. Descobrimos que é muito mais simples projetar primeiro para layouts amplos mais complexos e, em seguida, remover atributos (colunas, por exemplo) conforme a página se torna mais estreita do que vice-versa.
Você pode aprender mais sobre nossos padrões de design responsivo neste meu post anterior , mas o principal de tudo é que você deve projetar amplo e sobrescrever estreito.
Imagens Retina
Apenas algumas imagens no novo site da Hashrocket são dobradas para retina: o logotipo do cabeçalho, por exemplo, porque eu queria ter certeza de que estava nítido e não sendo redimensionado pelo navegador. Portanto, o logotipo mantém seu tamanho independentemente da largura do dispositivo, e o espaçamento ao redor dele fica mais apertado conforme a janela fica mais estreita.
Os ícones de código aberto na página da comunidade e os formulários de contato são duplicados pelo mesmo motivo – e os ícones sociais em nossa página de rodapé e pessoas são simplesmente caracteres SymbolSet .
Todas as outras imagens no site não são duplicadas para retina. Por exemplo, cada ilustração na página de processo está em uma coluna definida para uma largura de 25% (na verdade 23,5%, graças à margem adicional) – então, embora as próprias imagens tenham 360×190, mesmo no ponto mais largo da página (1200px), eles são renderizados apenas em 282×149. Descobrimos que havia espaço suficiente para as imagens parecerem boas na retina, bem como em todos os tamanhos de navegadores.
O mesmo tipo de coisa se aplica às apresentações de slides nas páginas de detalhes do cliente e na página inicial. A página inicial apresenta uma apresentação de slides em que as imagens são na verdade 1200×600, apesar de serem renderizadas em 862×431 em seu maior tamanho não retina – um compromisso para permitir tamanhos de arquivo decentes sem depender de um segundo conjunto de imagens de apresentação de slides carregadas por meio de uma chamada Javascript ou consulta de mídia.
Acho que isso vai acontecer cada vez mais à medida que a retina se torna o padrão: será mais importante que as imagens tenham proporções exatas do que tamanhos de pixels exatos, porque a precisão dos pixels não será tão preocupante.
Diversão com tamanho de fundo
Os fundos do cabeçalho em nosso site (por exemplo, os astronautas na página da equipe ) estão todos sendo exibidos em tamanho menor do que o nativo e, graças a , eles sempre se ajustam à área de conteúdo adequadamente.background-size
Isso levou algumas tentativas para acertar. A altura da área do cabeçalho depende do conteúdo e a largura é obviamente variável até o celular, então várias imagens de fundo de tamanho específico seriam um problema (e resultariam em transições chocantes conforme você redimensionava a janela do navegador) – e tamanhos de fundo de pixel fixo seriam inconvenientes de manter.
A solução era na verdade muito mais simples do que eu percebi inicialmente. A seção de cabeçalho só tem uma imagem de fundo com uma das – isto é, a largura, a altura. Assim, à medida que a página fica mais estreita, a imagem de fundo fica menor e, se o texto fica mais longo, a imagem de fundo cresce para caber. Na verdade, foi fácil – só demorou um pouco para se acostumar a pensar em uma imagem de fundo como um elemento fluido.background-sizeauto 90%auto90%
O plug-in Cycle2
Nossas apresentações de slides são cortesia do indomável plugin Cycle2 , combinado com o plugin de transição Carousel . O plugin Cycle original (contribuído por nosso próprio Shane Riley ) era sólido e usado com frequência em nossos projetos, mas o Cycle2 adiciona a capacidade de lidar com tamanhos variados, e o faz com muita facilidade.
Veja como isso funciona em nossa página inicial. Primeiro, temos alguns divs envolvendo um conjunto de imagens:
.slides
.pano
- (1..12).to_a.shuffle.each do |i|
= image_tag "img_home_#{i}.jpg"Chamamos o plugin de ciclo. Há um pouco mais acontecendo aqui (eventos, um pouco de fofura para centralizar o primeiro slide), mas esta é a inicialização principal:
this.$el.cycle({
fx: "carousel",
paused: true,
carouselVisible: 3,
carouselFluid: true,
swipe: true
});Aqui está o truque. O plugin de carrossel tem um carouselVisibleparâmetro que controla quantos slides são mostrados de uma vez. É assim que ele calcula a altura do carrossel – nós não definimos isso. No entanto, não queremos 3 slides inteiros visíveis – queremos apenas que as bordas dos slides esquerdo e direito sejam visíveis. Então, fazemos isso:
.slides
overflow: hidden
.pano
margin: 0 -40%A margem negativa em realiza o que queremos. O plug-in Cycle2 ainda está dimensionado para 3 slides, mas estamos apenas deixando que eles escapem pelas bordas..pano
Além disso, com uma certa largura, não queremos mais mostrar as bordas dos slides esquerdo e direito. Então, usando o mixin de consulta de mídia detalhado em meu post mencionado anteriormente sobre isso :
+max-width
.slides
.pano
margin: 0 -100%Voila! Limpo e agradável.
Etc.
Então aí está. É realmente empolgante ter lançado algo que considero um grande avanço em relação ao nosso antigo site. Existem outras partes interessantes por aí – deixarei a implementação do gráfico falso em nossa página inicial como um exercício para o leitor – mas esses foram alguns dos principais truques e técnicas que usamos. Obrigado pela leitura.
(postado originalmente no The Hashrocket Blog )