20 sites Web pseudo-flash fantastiques
Un site Web pseudo-Flash est un site Web qui ressemble, se sent et agit comme un site Web Flash.
Il y a généralement aussi une touche JavaScript pour donner vie aux choses et compléter l'interface.
Le résultat est souvent au-delà de ce que nous attendions de HTML et de CSS, ce qui explique pourquoi nous supposons que le site Web est basé sur Flash. Faites un clic droit, cependant, et vous serez agréablement surpris.
Je suis très intéressé par les sites Web pseudo-Flash et je parle souvent du sujet. Flash a évidemment perdu de son avantage (même si ce n'est pas du tout le cas), et l'accent a été mis sur les technologies de base du Web (HTML, CSS, JavaScript).
Il y a deux raisons à cela. Le premier est technique. SEO plus facile et amélioré, les outils de gestion de contenu tels que WordPress et la prise en charge de périphériques étendus ont encouragé les utilisateurs à pousser les outils standardisés au maximum.
Deuxièmement, beaucoup de personnes savent comment se développer avec ces langages de base et une grande communauté est prête à renoncer aux avantages de Flash pour ces outils familiers.
Avec tant de raisons de repousser les limites et de s’éloigner de Flash, nous sommes en pleine mutation du développement Web. Les sites Web HTML ont commencé comme des entités statiques. Avec l'émergence d'AJAX, nous avons vu comment un document dynamique pouvait modifier nos attentes. Jetez des animations, des transitions et des interactions et vous disposez d'un support radicalement différent.
Quelques victimes heureuses
Ce changement entraîne quelques pertes dont beaucoup de gens (y compris moi) sont les bienvenus. Le premier d'entre eux est la musique de fond. Le faire jouer par défaut sur un site Web standard devient plus difficile pour le développeur. Je n'ai plus besoin de rechercher le bouton pause ou mute pour fermer un site Web.
Deuxièmement, les sites Web risquent moins de détourner votre navigateur maintenant. Certains sites Web basés sur Flash le font toujours en redimensionnant votre fenêtre et en chargeant des interfaces en plein écran. Cependant, les sites Web pseudo-Flash restent heureux à leur place.
Mots de prudence
Comme pour toute tendance, nous devons aborder celle-ci avec prudence. Avant tout, nous avons besoin de maîtrise de soi. Ce n’est pas parce que nous pouvons faire des choses radicales avec le défilement, les animations et les transitions sur la page que nous devrions le faire.
Votre meilleur pari est d'examiner attentivement l'audience, le produit et, peut-être le plus important, l'expérience de l'utilisateur. Dans cette optique, vous pouvez appliquer ces approches de manière stratégique pour améliorer votre site Web.
Exemples de ce style
1. Emilie Crssrd
Bien que beaucoup de choses sur Emilie Crssrd Le site Web fait ressembler à Flash, je vais me concentrer sur un. L'indicateur de chargement ici ressemble à quelque chose que nous trouverions généralement sur un site Web Flash (même si nous le voyons souvent avec les fonctionnalités AJAX). Le mécanisme empêche les images et le contenu non défini de s’installer avant leur chargement complet, garantissant ainsi que les utilisateurs voient le contenu correctement. Le chargeur ici, associé aux transitions sur la page, offre une interface fluide.
2. Stefan Kanchev
Beaucoup de choses sur Stefan Kanchev Le site Web de la société fait également écho aux approches basées sur Flash, et les subtils effets de fondu entrant et sortant des icônes lorsque vous les survolez permettent une belle interaction. Le repère visuel aide les utilisateurs à se concentrer sur un élément à la fois et ajoute un peu de piquant pour donner vie à cette page minimaliste. Un exemple merveilleux de la mise à profit de quelque chose de simple à bon effet.
3. République de marque
Apprécier République de marque Le site Web, il faut interagir avec elle. Le conteneur autour du logo a une petite interaction brillante avec lui. Cet élément basé sur CSS utilise la position de la souris pour modifier dynamiquement les bordures standard, en créant un effet 3D et en s'assurant que le logo se détache sur l'arrière-plan intense. Ce genre de chose améliore l'interface et le ressenti général du site Web sans entraver son fonctionnement. C'est exactement ce que vous voulez: les extras ne doivent pas interférer avec la facilité d'utilisation.
4. Cooper
Tonnelier suit une approche populaire des sites Web à page unique. Au fur et à mesure que vous sélectionnez des éléments dans la navigation, le contenu pertinent est transféré dans la fenêtre d'affichage. Avec les transitions en douceur, le site Web ressemble beaucoup à Flash, mais il est accompli avec des langages Web standard. Aussi bien que le fonctionnement du site Web, cependant, le tout explose sur les appareils mobiles. En tirant parti de ces technologies, nous devons évaluer leur impact sur les appareils non standard et notre public particulier.
5. Flipboard
Flipboard Le site Web très simple a un rotateur de contenu assez standard. Ce qui fait que ce site Web ressemble beaucoup à Flash, c'est la façon dont il évolue. La page s'adapte dynamiquement à votre navigateur (avec quelques limitations), un effet standard dans le monde Flash.
6. Crafty 2010
Crafty 2010 propose un défilement en page très similaire au site Web de Cooper. Dans ce cas, la vue est limitée au contenu sélectionné par l'utilisateur. La «bonne» solution n’est pas non plus. ils démontrent simplement les possibilités illimitées de l'approche. J'apprécie la vivacité de ce site: les animations sont géniales, mais elles ne gênent jamais le contenu. Un bel équilibre entre style et convivialité.
7. 20 choses que j'ai apprises sur les navigateurs et le Web
Le tournage interactif est un effet populaire sur les sites Web Flash, à tel point que des produits entiers ont été créés uniquement pour tirer parti de cette fonctionnalité. Pour sa part, 20 choses que j'ai apprises sur les navigateurs et le Web montre ce qui est possible, en démontrant des effets qui n'étaient autrefois possibles qu'avec Flash. Ce site Web est un travail sérieux et un exemple brillant de site Web basé sur des normes.
8. NL Engenharia
NL Engenharia est un site Web typique pour une entreprise d'architecture. Ce n'est pas nécessairement une mauvaise chose. cela correspond bien à la niche. Il semble qu'il ait été littéralement transplanté de Flash à HTML: navigation par glissière, images plein écran, dimensionnement dynamique, toutes les caractéristiques de Flash. Cela fonctionne, cependant. Le résultat est magnifique et représente bien l'entreprise.
9. Ryan C. Jones
Ryan C. Jones a un beau portfolio de photographies. Le point d'intérêt (les photographies) est mis en évidence. C'est un brillant exemple de ne pas laisser la technologie faire obstacle. Quels que soient les outils utilisés pour le construire, le résultat est un moyen simple et efficace de présenter le travail de cet individu.
10. Studio Gang Architects
À première vue, l’interface créative et l’animation sur Studio Gang Architects regarde terriblement comme Flash. Mais si l'interface est unique et mémorable, je ne peux m'empêcher de me demander si c'est approprié. Pourtant, cela montre ce que l'on peut faire avec un bon HTML ancien.
11. DIST Creative
DIST Creative a exploité le HTML d’une manière absolument incroyable. Avec ses animations, ses indicateurs de chargement et son interface fluide, ce site Web combine la créativité des meilleures mises en page Flash avec des solutions HTML très utilisables. Malgré son approche inhabituelle, il est facile à utiliser et communique le caractère unique de l'agence de création.
12. Messages pour le Japon
Messages pour le Japon n'est pas forcément conçu pour ressembler à "Flash". Mais l'animation et les touches spéciales rendent l'interface simple et rapide à utiliser. Et les éléments interactifs sont importants mais ne gênent pas du tout. C'est un excellent exemple de la façon dont ce type d'esthétique peut améliorer un site Web standard.
13. Atlason
En tant que développeur, vous pouvez difficilement regarder Atlason Le site Web sans un sentiment de crainte. Je ne peux pas imaginer le travail qui a permis de faire cela. J'aime particulièrement le fait que le design remplisse l’écran et utilise très bien l’immobilier disponible. J'aime aussi la façon dont il suit si peu de conventions et est pourtant si simple à utiliser.
14. Bit Byte Bit
Bit d'octet bit regroupe dynamiquement le contenu provenant de plusieurs sources, y compris le blog du propriétaire, le flux Twitter et le compte Forrst. De tels flux de vie sont assez communs, mais ce site Web montre qu'il n'a pas besoin de se sentir statique du tout.
15. FORMULAIRE
FORME adopte une approche similaire à Bit Byte Bit, mais plus orientée image, ce qui est logique compte tenu de la nature de son travail. J'adore ça, tout de suite, non seulement vous voyez le travail de l'agence, mais vous pouvez commencer à filtrer le contenu qui vous concerne. Le portefeuille est directement sur la page d’accueil et reste entièrement fonctionnel, même si le site Web reste facile à utiliser.
16. EEHarbor
Alors que de nombreux sites Web présentés ici utilisent des transitions sur la page pour modifier le contenu sans rafraîchir la page, le chemin EEHarbor est-ce que c'est assez remarquable. La rapidité du site Web est une grande raison de son succès. Vous ne sentez jamais que les animations fantaisistes gênent le contenu. Ils ne contribuent qu'à l'image de haute qualité de l'entreprise.
17. Wells Riley
L'une des plus grandes limites du langage HTML réside dans sa résistance à toute autre chose que les lignes verticales et horizontales droites. Il existe des moyens de contourner ce problème, mais ils présentent des problèmes entre navigateurs. Wells Riley combine une interface totalement distincte avec un léger angle. Le résultat est difficile à obtenir mais en vaut la peine.
18. Manchester Design Symposium
Manchester Design Symposium a une interface super propre et simple. Le site Web à page unique défile verticalement, avec un en-tête fixe. Bien que l'effet ne soit pas particulièrement inhabituel, il semble que quelque chose à ce sujet ressemble à Flash. L'approche simple et l'absence d'animations et de transitions folles créent un contraste intéressant avec la plupart des sites Web extrêmes présentés ici.
19. Sophie Hardach
Sophie Hardach Le site Web contient des animations intéressantes. Divers éléments se déplacent ou s’agrandissent lorsque vous les survolez. Et les vagues le long du fond ajoutent de la vie à une page par ailleurs statique. Un autre design atypique qui fonctionne bien avec les animations JavaScript fluides.
20. Renato Zero
Renato Zero Le site Web d'une page transforme le chargement de contenu en un bel événement. Au lieu que le contenu soit pré-chargé et prêt à l'emploi, chaque section est chargée d'une animation astucieuse au fur et à mesure que vous faites défiler. Les animations sont rapides vous ne vous sentez jamais comme vous les attendez. L'effet ressemble certainement à Flash.
Avons-nous manqué des sites Web HTML incroyables qui ressemblent à Flash?