20 fantásticos sites de pseudo-Flash
Um site pseudo-Flash é aquele que parece, se sente e age como um site em Flash, mas na verdade é construído em HTML e CSS bons e antiquados.
Normalmente, há também uma pitada de JavaScript para dar vida às coisas e completar a interface.
O resultado é muitas vezes além do que esperávamos de HTML e CSS, e é por isso que podemos supor que o site é baseado em Flash. No entanto, clique com o botão direito e ficará agradavelmente surpreendido.
Estou muito interessado em sites pseudo-Flash, e falo sobre o tema com freqüência. O Flash obviamente perdeu parte de sua vantagem (embora não tenha desaparecido), e o foco mudou para as principais tecnologias da Web (HTML, CSS, JavaScript).
Há duas razões para isso. O primeiro é técnico. Ferramentas mais fáceis e aprimoradas de SEO, CMS como WordPress e amplo suporte a dispositivos incentivaram as pessoas a empurrar as ferramentas padronizadas ao máximo.
Em segundo lugar, muito mais pessoas sabem como se desenvolver com essas linguagens básicas, e uma grande comunidade está disposta a renunciar aos benefícios do Flash para essas ferramentas familiares.
Com tantas razões para empurrar o envelope e se afastar do Flash, estamos no meio de uma enorme mudança no desenvolvimento web. Os sites em HTML começaram como entidades estáticas. Com o surgimento do AJAX, testemunhamos como um documento dinâmico poderia alterar nossas expectativas. Acrescente animações, transições e interações e você terá um meio radicalmente diferente.
Algumas baixas felizes
Essa mudança traz consigo algumas baixas que muitas pessoas (incluindo eu) são bem-vindas. A primeira delas é a música de fundo. Jogar por padrão em um site padrão está se tornando mais difícil para o desenvolvedor. Eu não preciso mais procurar o botão de pausa ou mudo para fechar um site.
Em segundo lugar, os sites são menos propensos a seqüestrar seu navegador agora. Alguns sites baseados em Flash ainda fazem isso, redimensionando sua viewport e carregando interfaces de tela inteira. No entanto, sites pseudo-Flash permanecem felizes em seu lugar.
Palavras de cautela
Tal como acontece com qualquer tendência, devemos abordar esta questão com cautela. Acima de tudo, precisamos de autocontrole. Só porque podemos fazer coisas radicais com rolagem na página, animações e transições não significa que devemos.
Sua melhor aposta é considerar cuidadosamente o público, o produto e, talvez o mais importante, a experiência do usuário. Com isso em mente, você pode aplicar estrategicamente essas abordagens para aprimorar seu website.
Exemplos deste estilo
1. Emilie Crssrd
Enquanto muitas coisas Emilie Crssrd O site da Web faz com que pareça o Flash, vou me concentrar em um. O indicador de carregamento aqui parece algo que normalmente encontraríamos em um site em Flash (embora também o vejamos muito com a funcionalidade AJAX). O mecanismo impede que as imagens e o conteúdo não-estilizado sejam exibidos antes de serem totalmente carregados, garantindo que os usuários vejam o conteúdo corretamente. O carregador aqui, combinado com as transições na página, cria uma interface suave.
2. Stefan Kanchev
Muitas coisas em Stefan Kanchev O website também reproduz abordagens baseadas em Flash, e o sutil fade-in e fade-out dos ícones à medida que você passa sobre eles cria uma bela interação. A sugestão visual ajuda os usuários a se concentrar em um elemento por vez e adiciona um pouco de chiado para dar vida a essa página minimalista. Um exemplo maravilhoso de alavancar algo simples para um grande efeito.
3. República da Marca
Apreciar República de marca No site, é preciso interagir com ele. O contêiner ao redor do logotipo tem uma pequena interação brilhante. Este elemento baseado em CSS usa a posição do mouse para alterar dinamicamente as bordas padrão, criando um efeito 3-D e garantindo que o logotipo se destaque contra o fundo intenso. Esse tipo de coisa melhora a interface e a sensação geral do site sem atrapalhar. Isso é exatamente o que você quer: os extras não devem interferir na usabilidade.
4. Cooper
Tanoeiro segue uma abordagem popular para sites de uma única página. Quando você seleciona itens na navegação, o conteúdo relevante é transferido para a viewport. Com as transições suaves, o site se parece muito com o Flash, mas é feito com linguagens padrão da web. Por mais que o site funcione, a coisa toda explode em dispositivos móveis. Ao aproveitar essas tecnologias, devemos avaliar seu impacto em dispositivos não padrão e em nosso público específico.
5. Flipboard
Flipboard O site totalmente simples tem um roteador de conteúdo bastante padronizado. O que faz com que esse site pareça muito semelhante ao Flash é como ele é dimensionado. A página se adapta dinamicamente ao seu navegador (com algumas limitações), um efeito padrão no mundo do Flash.
6. Crafty 2010
Crafty 2010 fornece rolagem na página muito parecida com o site da Cooper. Nesse caso, a exibição é limitada ao conteúdo que o usuário seleciona. Nem é a solução "certa"; eles simplesmente demonstram as possibilidades ilimitadas da abordagem. Eu aprecio o quão ágil este site é: as animações são legais, mas elas nunca atrapalham o conteúdo. Um bom equilíbrio entre estilo e usabilidade.
7. 20 coisas que aprendi sobre navegadores e a Web
A troca de página interativa é um efeito popular em sites em Flash, tanto que produtos inteiros foram criados apenas para aproveitar essa funcionalidade. Por seu lado, 20 coisas que aprendi sobre navegadores e a Web mostra o que é possível, demonstrando efeitos que antes eram possíveis apenas com o Flash. Este site é um trabalho sério e um exemplo brilhante de um site baseado em padrões.
8. NL Engenharia
NL Engenharia é um site típico para uma empresa de arquitetura. Isso não é necessariamente uma coisa ruim; apenas se encaixa bem no nicho. Parece que foi literalmente transplantado do Flash para HTML: navegação deslizante, imagens em tela cheia, dimensionamento dinâmico, todas as características do Flash. Funciona, no entanto. O resultado é lindo e representa bem a empresa.
9. Ryan C. Jones
Ryan C. Jones tem um belo portfólio de fotografia. O ponto de interesse (as fotografias) recebe um destaque esmagador. É um excelente exemplo de não deixar a tecnologia atrapalhar. Independentemente das ferramentas usadas para construí-lo, o resultado é uma maneira simples e eficaz de mostrar o trabalho desse indivíduo.
10. Studio Gang Architects
À primeira vista, a interface criativa e animação em Studio Gang Architects olhe terrivelmente como o Flash. Mas enquanto a interface é única e memorável, não posso deixar de me perguntar se é apropriado. Ainda assim, demonstra o que pode ser feito com um bom HTML antiquado.
11. Criativo DIST
Criativo DIST alavancou HTML de uma forma que é nada menos que incrível. Com suas animações, indicadores de carga e interface fluida, este site combina a criatividade dos melhores layouts Flash com soluções baseadas em HTML muito úteis. Apesar da abordagem incomum, é fácil de usar e comunica a singularidade da agência de criação.
12. Mensagens para o Japão
Mensagens para o Japão não é necessariamente destinado a olhar "Flash". Mas a animação e os toques especiais tornam a interface suave e simples de usar. E os elementos interativos são proeminentes, mas não atrapalham. É um excelente exemplo de como esse tipo de estética pode melhorar um site padrão.
13. Atlason
Como desenvolvedor, você dificilmente pode olhar Atlason Web site sem um sentimento de espanto. Eu não posso imaginar o trabalho que foi feito para fazer isso. Eu particularmente adoro que o design preencha a tela e faça grande uso dos imóveis disponíveis. Eu também adoro como segue tão poucas convenções e ainda é tão simples de usar.
14. Bit de Byte
Bit de bit de byte agrega dinamicamente o conteúdo de várias fontes, incluindo o blog do proprietário, o feed do Twitter e a conta da Forrst. Esses feeds de lifestreaming são bastante comuns, mas este site mostra que ele não precisa se sentir estático.
15. FORMULÁRIO
FORMATO adota uma abordagem semelhante ao Bit Byte Bit, mas mais orientada a imagens, o que faz sentido, dada a natureza de seu trabalho. Adoro isso, você não apenas vê o trabalho da agência, mas pode começar a filtrar o conteúdo que é relevante para você. O portfólio está na página inicial e ainda é totalmente funcional, mesmo com o site sendo fácil de usar.
16. EEHarbor
Embora muitos dos sites apresentados aqui usem transições na página para alterar o conteúdo sem atualizar a página, o caminho EEHarbor Isso é bastante notável. A velocidade do site é uma grande razão para seu sucesso. Você nunca sente que as animações extravagantes atrapalham o conteúdo. Eles só contribuem para a imagem de alta qualidade da empresa.
17. Wells Riley
Uma das maiores limitações do HTML é sua resistência a qualquer outra coisa além de linhas retas verticais e horizontais. Existem maneiras de contornar isso, mas eles apresentam alguns problemas entre navegadores. Wells Riley combina uma interface totalmente distinta com um leve ângulo. O resultado é difícil de conseguir, mas vale a pena.
18. Manchester Design Symposium
Simpósio de Design de Manchester tem uma interface super limpa e simples. O site de página única rola verticalmente, com um cabeçalho fixo. Enquanto o efeito não é particularmente incomum, algo sobre isso parece apenas Flash. A abordagem simples e a ausência de animações e transições loucas criam um contraste interessante com muitos dos sites extremos mostrados aqui.
19. Sophie Hardach
Sophie Hardach O site da Web tem algumas animações interessantes. Vários elementos se movem ou aumentam conforme você passa por cima deles. E as ondas ao longo do fundo adicionam um pouco de vida a uma página de outra forma estática. Outro design atípico que funciona bem com as animações JavaScript suaves.
20. Renato Zero
Renato Zero O site de uma página transforma o carregamento de conteúdo em um belo evento. Em vez de o conteúdo ser pré-carregado e pronto para ser usado, cada seção é carregada com uma animada animação quando você rola para baixo. As animações são rápidas; Você nunca se sente como se estivesse esperando por eles. O efeito certamente se parece com o Flash.
Perdemos alguns sites HTML incríveis que parecem com o Flash?