Navigation

20 Fantastic pseudo-Flash websites

HTML, Resources, Web Design | Jul 6, 2011

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.


Patrick McNeil is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Have we missed any amazing HTML websites that look like Flash?

Share this post
Comments (no login required)
  • http://www.katherinedizio.com Kate

    Nice!

    I for one, do not ‘hate’ flash.  I do hate that flash is not as widely accepted on other platforms. If it were, I don’t think as many people would claim to ‘hate’ flash.  The cross-compatability is the major issue, in my eyes.

    Flash is especially good for designers, artists, etc to showcase their work.  Some people don’t *want* people to be able to right click on their website!

    It’s nice to see the ‘pseudo’ flash…at least it’s a nod that it isn’t the design or functionality of flash that can be sticky and ‘unpreferred.’  Good article!

  • Anonymous

    And the Flash bashing continues. Good old html and css, as opposed to what? Evil, icky Flash? And you say “a dash of javascript.” Correction: a ton of javascript. No less. Html+css+javascript = flash doc + actionscript. Either will perform poorly in the hands of a bad developer. And guess what? That’s most developers. It’s called being average. I’m also getting tired of so many html5-canvas+css3+javascript sites or games that are horrible slow and resource hogs, as opposed to fast-n-fluid Flash.

    • http://www.facebook.com/save.the.penguins Adrian von Gegerfelt

      It’s true that you get less browser incompatibilities when using Flash, since all the bugs you have to worry about are Flash’s own (though they are countless). But Flash is still not “fast-n-fluid” – it’s all up to which flash plugin you use, in which browser, on which OS. The same with CSS3+Javascript, actually.

      So for a website, I prefer a design that is SEO, degrades cracefully and is native code.

      HOLD ON! :) –> But I see myself as an above average dev – so your point about “most devs” hold true in my eyes. Neither is superior if you don’t work the code as it should.

    • http://www.oldworldcreative.com Evan Skuthorpe

      Well said.

      The thing is, as with any new bit of tech, most people (people I don’t like) are gimmick loving, bandwagon jumping buffoons. As the technology of HTML5 Canvas settles down people will learn to use it affectively and properly. Just give it time…

  • http://twitter.com/bfred_it Federico Brigante

    FFFF* did you notice how the menu is made pseudo-3D on Brand Republic’s (3) website?
    Via borders.That’s genius.

  • http://twitter.com/joyoge Designers Community

    nice list, thanks for share.

  • http://www.drivvedwebbyra.se Drivved Webbyra

    Well i like Flash in some cases! It will take the creative inside u sometimes and also its great fun. But for a user prospective I dont like it!

  • Fireball70

    Kate. None of the above sites no cross-compatability. The only connection with flash that I see is animation…Animation is only one of many advantages that flash have vs javascript and html 5…

  • http://www.wsd.co.il/ RanHazut

    The “Brand Republic” website always keeps to amaze me, great designs all the time.

  • Anonymous

    Some of them are really nice. Also there are some bad ones load even slower than a heavy flash site, and they forgot the skip button.

  • http://www.facebook.com/save.the.penguins Adrian von Gegerfelt

    Calling these sites “psuedo-Flash” is a big insult. It’s not Flash. It’s good web design – using browser native code – CSS+JS.

    Is the Mona Lisa a “psuedo Sketch book” craft?

    This is not about if Flash is good or bad – I leave that for a different discussion :)

  • closdesign

    A lot of the there pages are not actually Flash, just really good Javascript. http://www.20thingsilearned.com is Javascript. Very slick too. So is the Emilie Crssrd’s site. I know you say pseudo Flash. Is this what you are hinting at?. Using nicely done Javascript effects to mimic Flash? 

  • http://www.123webdesignbournemouth.co.uk Web Design Bournemouth

    Some funky stuff here indeed.  Very nice layouts.

    @ Kate – I don’t think people ‘hate’ flash – it’s just that it’s been typically more difficult to get decent SEO rankings with it.

    I’ve seen some absolutely spanking Flash sites over the years, and it’s difficult/impossible to get that level of visual appeal and functionality any other way, and keep the file size down.

    But maybe as HTML 5 and CSS 3 advance, and then when we get the next generation of code, Flash might well go the way of the dodo.

    Anyway – some cracking efforts above.

    Darren.

  • Tina Zennand

    100% agree with Konrad)