20 fantásticos sitios web de pseudo-flash
Un sitio web pseudo-Flash es uno que se ve, se siente y actúa como un sitio web Flash, pero de hecho se basa en HTML y CSS antiguos.
Por lo general, también hay una pizca de JavaScript para dar vida a las cosas y completar la interfaz.
El resultado es a menudo más allá de lo que esperábamos de HTML y CSS, por lo que podemos suponer que el sitio web está basado en Flash. Haga clic derecho, sin embargo, y quedará gratamente sorprendido.
Estoy muy interesado en sitios web pseudo-Flash, y hablo sobre el tema con frecuencia. Flash obviamente ha perdido algo de su ventaja (aunque de ninguna manera se ha ido), y el enfoque se ha desplazado a las tecnologías centrales de la web (HTML, CSS, JavaScript).
Hay dos razones para esto. El primero es técnico. Un SEO más fácil y mejorado, las herramientas de CMS como WordPress y el amplio soporte de dispositivos han alentado a las personas a llevar las herramientas estandarizadas al máximo.
En segundo lugar, mucha más gente sabe cómo desarrollarse con estos idiomas básicos, y una gran comunidad está dispuesta a renunciar a los beneficios de Flash para estas herramientas familiares.
Con tantas razones para ir más allá y alejarse de Flash, estamos en medio de un cambio masivo en el desarrollo web. Los sitios web HTML comenzaron como entidades estáticas. Con la aparición de AJAX, fuimos testigos de cómo un documento dinámico podría alterar nuestras expectativas. Lanza animaciones, transiciones e interacciones y tienes un medio radicalmente diferente.
Algunas bajas felices
Este cambio trae consigo algunas bajas que muchas personas (incluyéndome a mí) dan la bienvenida. El primero de ellos es la música de fondo. Tenerlo jugar por defecto en un sitio web estándar es cada vez más difícil para el desarrollador. Ya no necesito buscar el botón de pausa o silencio para cerrar un sitio web.
En segundo lugar, los sitios web son menos propensos a secuestrar su navegador ahora. Algunos sitios web basados en Flash aún lo hacen, al redimensionar su ventana gráfica y cargar interfaces de pantalla completa. Sin embargo, los sitios web pseudo-Flash permanecen felices en su lugar.
Palabras de precaución
Al igual que con cualquier tendencia, debemos acercarnos a esta con precaución. Ante todo, necesitamos autocontrol. El hecho de que podamos hacer cosas radicales con el desplazamiento en la página, las animaciones y las transiciones no significa que debamos.
Su mejor apuesta es considerar cuidadosamente la audiencia, el producto y, quizás lo más importante, la experiencia del usuario. Con esto en mente, puede aplicar estratégicamente estos enfoques para mejorar su sitio web.
Ejemplos de este estilo
1. Emilie Crssrd
Mientras que muchas cosas en Emilie Crssrd El sitio web lo hace parecer Flash, me centraré en uno. El indicador de carga aquí parece algo que normalmente encontraríamos en un sitio web Flash (aunque también lo vemos mucho con la funcionalidad AJAX). El mecanismo evita que las imágenes y el contenido sin estilo aparezcan antes de que se carguen por completo, asegurando que los usuarios vean el contenido correctamente. El cargador aquí, combinado con las transiciones dentro de la página, crea una interfaz fluida.
2. Stefan Kanchev
Muchas cosas en Stefan Kanchev El sitio web también hace eco de los enfoques basados en Flash, y el desvanecimiento y el fundido sutil de los íconos a medida que el mouse sobre ellos crea una bella interacción. La señal visual ayuda a los usuarios a centrarse en un elemento a la vez y agrega un poco de chispa para dar vida a esta página minimalista. Un maravilloso ejemplo de aprovechar algo simple con gran efecto.
3. Marca Republic
Apreciar Brand Republic 'S sitio web, uno debe interactuar con él. El contenedor alrededor del logotipo tiene una pequeña interacción brillante. Este elemento basado en CSS utiliza la posición del mouse para modificar dinámicamente los bordes estándar, creando un efecto 3-D y asegurando que el logotipo se destaca sobre el fondo intenso. Este tipo de cosas mejora la interfaz y la sensación general del sitio web sin interponerse en el camino. Eso es exactamente lo que quiere: los extras no deberían interferir con la usabilidad.
4. Cooper
cobre sigue un enfoque popular para sitios web de una sola página. A medida que selecciona elementos en la navegación, el contenido relevante se desplaza hacia la ventana gráfica. Con las transiciones suaves, el sitio web se parece mucho a Flash, pero se logra con los lenguajes web estándar. Sin embargo, al igual que funciona el sitio web, todo explota en los dispositivos móviles. Al aprovechar estas tecnologías, debemos evaluar su impacto en los dispositivos no estándar y en nuestra audiencia particular.
5. Flipboard
Flipboard El sitio web completamente simple tiene un rotador de contenido bastante estándar. Lo que hace que este sitio web se sienta muy similar a un Flash es cómo se escala. La página se adapta dinámicamente para adaptarse a su navegador (con algunas limitaciones), un efecto estándar en el mundo Flash.
6. Crafty 2010
Crafty 2010 proporciona un desplazamiento en la página muy parecido al sitio web de Cooper. En este caso, la vista se limita al contenido que el usuario selecciona. Tampoco es la solución "correcta"; simplemente demuestran las posibilidades ilimitadas del enfoque. Aprecio cuán rápido es este sitio web: las animaciones son geniales, pero nunca interfieren en el contenido. Un buen equilibrio entre estilo y usabilidad.
7. 20 cosas que aprendí sobre los navegadores y la Web
El cambio de página interactivo es un efecto popular en los sitios web Flash, tanto así que se han creado productos completos solo para aprovechar esta funcionalidad. Por su parte, 20 cosas que aprendí sobre los navegadores y la Web muestra lo que es posible, demostrando los efectos que alguna vez fueron posibles solo con Flash. Este sitio web es una pieza seria de trabajo y un brillante ejemplo de un sitio web basado en estándares.
8. NL Engenharia
NL Engenharia es un sitio web típico para una firma de arquitectura. Eso no es necesariamente algo malo; simplemente se ajusta bien al nicho. Parece que fue literalmente trasplantado de Flash a HTML: navegación deslizable, imágenes de pantalla completa, tamaño dinámico, todas las características de Flash. Sin embargo, funciona El resultado es hermoso y representa bien a la empresa.
9. Ryan C. Jones
Ryan C. Jones tiene una hermosa cartera de fotografía. El punto de interés (las fotografías) se le da prominencia abrumadora. Es un ejemplo brillante de no dejar que la tecnología interfiera. Independientemente de las herramientas utilizadas para construirlo, el resultado es una manera simple y efectiva de mostrar el trabajo de este individuo.
10. Studio Gang Architects
A primera vista, la interfaz creativa y la animación en Studio Gang Architects se ve muy parecido a un flash. Pero aunque la interfaz es única y memorable, no puedo evitar preguntarme si es apropiado. Aún así, demuestra lo que se puede hacer con un buen HTML antiguo.
11. DIST Creative
DIST Creative ha aprovechado el HTML de una manera increíble. Con sus animaciones, indicadores de carga e interfaz fluida, este sitio web combina la creatividad de los mejores diseños de Flash con soluciones HTML muy útiles. A pesar del enfoque inusual, es fácil de usar y comunica la singularidad de la agencia creativa.
12. Mensajes para Japón
Mensajes para Japón no necesariamente debe verse como "Flash". Pero la animación y los toques especiales hacen que la interfaz sea lisa y fácil de usar. Y los elementos interactivos son prominentes, pero no se interponen en absoluto. Es un excelente ejemplo de cómo este tipo de estética puede mejorar un sitio web estándar.
13. Atlason
Como desarrollador, casi no puedes mirar Atlason El sitio web sin un sentimiento de asombro. No me puedo imaginar el trabajo que se hizo para hacer esto. Particularmente me encanta que el diseño llene la pantalla y haga un gran uso de los bienes inmuebles disponibles. También me encanta cómo sigue tan pocas convenciones y aún así es tan simple de usar.
14. Bit Bit Byte
Bit Byte Bit Agrega dinámicamente contenido de múltiples fuentes, incluido el blog del propietario, el feed de Twitter y la cuenta de Forrst. Tales feeds de lifestreaming son bastante comunes, pero este sitio web muestra que no necesita sentirse estático en absoluto.
15. FORMA
FORMAR adopta un enfoque similar al Bit Bit Bit, pero más orientado a la imagen, lo que tiene sentido dada la naturaleza de su trabajo. Me encanta, de inmediato, no solo ves el trabajo de la agencia, sino que puedes comenzar a filtrar contenido que sea relevante para ti. La cartera está justo en la página de inicio y, sin embargo, es completamente funcional, incluso si el sitio web sigue siendo fácil de usar.
16. EEHarbor
Si bien muchos de los sitios web presentados aquí usan transiciones in-page para cambiar el contenido sin actualizar la página, el camino EEHarbor ¿es bastante notable? La velocidad del sitio web es una gran razón para su éxito. Nunca crees que las animaciones extravagantes se interpongan en el camino del contenido. Solo contribuyen a la imagen de alta calidad de la empresa.
17. Wells Riley
Una de las mayores limitaciones de HTML es su resistencia a cualquier cosa que no sean líneas verticales y horizontales rectas. Hay formas de evitar esto, pero presentan algunos problemas entre navegadores. Wells Riley combina una interfaz totalmente distinta con un ligero ángulo. El resultado es difícil de lograr pero vale la pena.
18. Manchester Design Symposium
Simposio de diseño de Manchester tiene una interfaz súper limpia y simple. El sitio web de una sola página se desplaza verticalmente, con un encabezado fijo. Si bien el efecto no es particularmente inusual, algo al respecto parece ser similar a un flash. El enfoque simple y la ausencia de animaciones y transiciones locas hacen un interesante contraste con muchos de los sitios web extremos que se muestran aquí.
19. Sophie Hardach
Sophie Hardach El sitio web tiene algunas animaciones interesantes. Varios elementos se mueven o agrandan al pasar el cursor sobre ellos. Y las olas a lo largo de la parte inferior le dan vida a una página que de otro modo sería estática. Otro diseño atípico que funciona bien con las animaciones suaves de JavaScript.
20. Renato Zero
Renato Zero El sitio web de una página convierte la carga de contenido en un hermoso evento. En lugar de que el contenido esté precargado y listo para usar, cada sección se carga con una animación ingeniosa a medida que se desplaza hacia abajo. Las animaciones son rápidas; nunca sientes que estás esperando por ellos. El efecto ciertamente se parece a Flash.
¿Nos hemos perdido algún sitio web HTML increíble que se parezca a Flash?