20 Fantastic pseudo-Flash websites

A pseudo-Flash website is one that looks, feels and acts like a Flash website but is in fact built on good old-fashioned HTML and CSS.

There is usually also a dash of JavaScript to bring things to life and round out the interface.

The result is often beyond what we have come to expect of HTML and CSS, which is why we might assume the website is Flash-based. Right-click, though, and you will be pleasantly surprised.

I am keenly interested in pseudo-Flash websites, and I talk about the topic frequently. Flash has obviously lost some of its edge (though is by no means gone), and the focus has shifted to the core technologies of the web (HTML, CSS, JavaScript).

There are two reasons for this. The first is technical. Easier and improved SEO, CMS tools like WordPress and broad device support have encouraged people to push the standardized tools to the max.

Secondly, a lot more people know how to develop with these basic languages, and a large community is willing to forgo the benefits of Flash for these familiar tools.

With so many reasons to push the envelope and move away from Flash, we are in the midst of a massive shift in web development. HTML websites started off as static entities. With the emergence of AJAX, we witnessed how a dynamic document could alter our expectations. Throw in animations, transitions and interaction and you have a radically different medium.

Some happy casualties

This 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 caution

As 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 Crssrd

While 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 Kanchev

Many 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 Republic

To 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. Cooper

Cooper 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. Flipboard

Flipboard’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 2010

Crafty 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 Web

Interactive 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 Engenharia

NL 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. Jones

Ryan 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 Architects

At 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 Creative

DIST 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 Japan

Messages 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. Atlason

As 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 Bit

Bit 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. FORM

FORM 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. EEHarbor

While 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 Riley

One 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 Symposium

Manchester 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.

19. Sophie Hardach

Sophie Hardach’s website has some interesting animations. Various elements move or enlarge as you hover over them. And the waves along the bottom add some life to an otherwise static page. Another atypical design that works well with the smooth JavaScript animations.

20. Renato Zero

Renato 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

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.