Some happy casualtiesThis shift brings with it a few casualties that many people (including me) welcome. First among these is background music. Having it play by default on a standard website is becoming harder for the developer to pull off. I no longer need to hunt for the pause or mute button to shut a website up. Secondly, websites are less likely to hijack your browser now. Some Flash-based websites still do, by resizing your viewport and loading full-screen interfaces. However, pseudo-Flash websites remain happily in their place.
Words of cautionAs with any trend, we must approach this one with caution. Foremost, we need self-control. Just because we can do radical things with in-page scrolling, animations and transitions doesn’t mean we should. Your best bet is to carefully consider the audience, product and, perhaps most importantly, user experience. With these in mind, you can strategically apply these approaches to enhance your website.
Examples of this style
1. Emilie CrssrdWhile many things on Emilie Crssrd’s website make it look like Flash, I’ll focus on one. The loading indicator here looks like something we would typically find on a Flash website (although we see it a lot with AJAX functionality, too). The mechanism keeps images and unstyled content from popping in before they have fully loaded, ensuring that users see the content properly. The loader here, combined with the in-page transitions, make for a smooth interface.
2. Stefan KanchevMany things on Stefan Kanchev’s website also echo Flash-based approaches, and the subtle fade-in and fade-out of the icons as you mouse over them make for a beautiful interaction. The visual cue helps users focus on one element at a time and adds a bit of sizzle to bring this minimalist page to life. A marvellous example of leveraging something simple to great effect.
3. Brand RepublicTo appreciate Brand Republic’s website, one must interact with it. The container around the logo has a brilliant little interaction to it. This CSS-based element uses the mouse’s position to dynamically alter the standard borders, creating a 3-D effect and ensuring the logo stands out against the intense background. This sort of thing improves the interface and overall feel of the website without getting in the way. That’s exactly what you want: the extras shouldn’t interfere with the usability.
4. CooperCooper follows a popular approach to single-page websites. As you select items in the navigation, the relevant content rolls into the viewport. With the smooth transitions, the website very much feels like Flash, but it is accomplished with standard web languages. As nicely as the website functions, though, the whole thing blows up on mobile devices. When leveraging these technologies, we should assess their impact on non-standard devices and our particular audience.
5. FlipboardFlipboard’s utterly simple website has a pretty standard content rotator. What makes this website feel very Flash-like is how it scales. The page dynamically adapts to fit your browser (with some limitations), a standard effect in the Flash world.
6. Crafty 2010Crafty 2010 provides in-page scrolling very much like Cooper’s website. In this case, the view is limited to the content that the user selects. Neither is the “right” solution; they simply demonstrate the unlimited possibilities of the approach. I appreciate how snappy this website is: the animations are cool, but they never get in the way of the content. A nice balance between style and usability.
7. 20 Things I Learned About Browsers and the WebInteractive page-turning is a popular effect on Flash websites, so much so that whole products have been created just to leverage this functionality. For its part, 20 Things I Learned About Browsers and the Web shows what’s possible, demonstrating effects that were once possible only with Flash. This website is one serious piece of work and a brilliant example of a standards-based website.
8. NL EngenhariaNL Engenharia is a typical website for an architecture firm. That’s not necessarily a bad thing; it just fits the niche well. It looks like it was literally transplanted from Flash to HTML: slide-out navigation, full-screen images, dynamic sizing, all hallmarks of Flash. It works, though. The result is beautiful and represents the firm well.
9. Ryan C. JonesRyan C. Jones has a beautiful photography portfolio. The point of interest (the photographs) is given overwhelming prominence. It’s a brilliant example of not letting the technology get in the way. Regardless of the tools used to build it, the result is a simple and effective way to showcase this individual’s work.
10. Studio Gang ArchitectsAt first glance, the creative interface and animation on Studio Gang Architects look awfully Flash-like. But while the interface is unique and memorable, I can’t help but wonder if it’s appropriate. Still, it demonstrates what can be done with good old-fashioned HTML.
11. DIST CreativeDIST Creative has leveraged HTML in a way that is nothing short of amazing. With its animations, loading indicators and fluid interface, this website combines the creativity of the best Flash layouts with very usable HTML-based solutions. Despite the unusual approach, it is easy to use and communicates the creative agency’s uniqueness.
12. Messages for JapanMessages for Japan is not necessarily meant to look “Flash.” But the animation and special touches make the interface smooth and dead simple to use. And the interactive elements are prominent but don’t get in the way at all. It’s a prime example of how this kind of aesthetic can enhance a standard website.
13. AtlasonAs a developer, you can hardly look at Atlason’s website without a sense of awe. I can’t imagine the work that went into making this. I particularly love that the design fills the screen and makes great use of the available real estate. I also love how it follows so few conventions and yet is still so simple to use.
14. Bit Byte BitBit Byte Bit dynamically aggregates content from multiple sources, including the owner’s blog, Twitter feed and Forrst account. Such lifestreaming feeds are fairly common, but this website shows that it doesn’t need to feel static at all.
15. FORMFORM takes a similar approach to Bit Byte Bit, but more image-oriented, which makes sense given the nature of its work. I love that, right away, you not only see the agency’s work, but can start filtering content that is relevant to you. The portfolio is right on the home page and yet is fully functional, even as the website remains easy to use.
16. EEHarborWhile many of the websites presented here use in-page transitions to change content without refreshing the page, the way EEHarbor does it is quite remarkable. The speed of the website is a big reason for its success. You never feel that the fancy animations get in the way of the content. They only contribute to the high-quality image of the company.
17. Wells RileyOne of the biggest limitations of HTML is its resistance to anything other than straight vertical and horizontal lines. There are ways around this, but they present some cross-browser issues. Wells Riley combines a totally distinct interface with a slight angle. The result is difficult to pull off but well worth it.
18. Manchester Design SymposiumManchester Design Symposium has a super-clean and simple interface. The single-page website scrolls vertically, with a fixed header. While the effect is not particularly unusual, something about it just seems Flash-like. The simple approach and absence of crazy animations and transitions make for an interesting contrast with many of the extreme websites showcased here.
20. Renato ZeroRenato Zero’s one-page website turns content loading into a beautiful event. Instead of the content being pre-loaded and ready to go, each section is loaded with a nifty animation as you scroll down. The animations are fast; you never feel like you’re waiting for them. The effect certainly looks like Flash. Have we missed any amazing HTML websites that look like Flash?
Patrick McNeil is a designer, developer and writer; but above all things he is a passionate educator. He is a Professor of Graphic Design at the University of Missouri St. Louis where he focuses on teaching UX Design methods and front end development techniques. Patrick is also the author of the bestselling book series The Web Designer's Idea Book and the curator of DesignMeltdown.com. For more information about Patrick visit his personal site, pmcneil.com, or follow him on Twitter @designmeltdown.