Show HN: My animated website, rendered entirely in HTML5 Canvas

by santoriv • 11 years ago

23 54 11 years ago

As beautiful as it is, it's also completely unusable for anyone with accessibility options. There's not even a text-only version.

seyz• 11 years ago

Really cool experiment but there're some issues:

- SEO sucks. - You're killing the Web semantic :-)

santoriv10• 11 years ago

For sure. If it was a proper site I would follow the Google Ajax SEO Spec. https://developers.google.com/webmasters/ajax-crawling/docs/...

seanalltogether• 11 years ago

It fails to show anything on Mac Firefox. Here's the console log

TypeError: this._container is null line 177 > eval:1:330345

santoriv10• 11 years ago

Thank you for the report! I'll take a look at that.

p4bl0• 11 years ago

On a recent Firefox (31.5), the page remains white if it is opened in background, but loads fine in the tab in which I open it has the focus.

santoriv10• 11 years ago

Yes.

That is because I pause the rendering engine if the browser tab is not focused. I don't want to consume a bunch of CPU and memory when the user isn't looking at the site.

cvburgess• 11 years ago

While this is fantastic as a demo, I hope this does not become a huge trend. Canvas is almost as bad as flash if you use it this way

santoriv10• 11 years ago

What specifically is bad about it?

striking• 11 years ago

The loss of highlighting text and accessibility (both for the disabled and for the less-tech-enabled). Sure, the site's very pretty. But for someone who just wanted to know whether you had a BS in CS or not, this site is really difficult to use.

I googled your site and found this URL that looked like a PDF (http://ericlesch.com/eric-lesch-resume.pdf), but it didn't work either. You know something's wrong when your users would rather take a PDF than whatever you're doing.

(Also: no robots? Why not? I can't even use Internet Archive to see the past PDF link or the less canvas website, nor can I use Google to search just the text of your site.)

moron4hire2• 11 years ago

I think it's pretty neat, but it's not complete. I can't read the entire field in landscape orientation on my phone (Galaxy Note 3). And it doesn't provide a scroll function to compensate.

IkmoIkmo• 11 years ago

Kills the notion of the semantic web, which kills SEO for your site, but would kill search in general (pending a huge rethink about how search works on the web) if everyone would do it.

Not accessible for anyone with accessibility options.

Probably not going to work well, if at all, for people with JS disabled.

More error-prone, imo. I've had HTML5 canvas projects in the wild for over 1 year working fine, until Chrome updated its browser and it started producing errors for one particular deprecated function. You obviously can build web apps to continue working, but mine didn't out of the box. If you write websites in HTML the chance that your entire website stops loading and working completely due to one issue is extremely small.

Beyond that canvas takes a bit more resources which is an issue for mobile. My canvas projects also always sucked up quite a bit of battery somehow on mobile.

Lastly, there aren't any huge benefits imo. HTML5 & Canvas are awesome, they have their place, but atm more like Flash: Games, (interactive) Advertising banners, complex animations to create a brand experience etc.

But for an actual website? If you can't do it with CSS animations it's probably way too annoying, for example while this website is 'nice', I don't like it. I'd hate to have more websites like this, the animations just get annoying. Animations aren't there to be fancy, they're there to be intuitive. If you have a drop down menu, it may drop down, not because it's fancy but because you understand that it origins from a certain click on an element, and the menu's options are contextually associated with that element. Which is why a slide in or fade in animation would make no sense, it's animating for animation's sake.

lambda2• 11 years ago

It's not searchable.

I can't copy and paste text off of it.

It's not accessible; screen readers can't read anything off of it.

It renders at half the DPI of my screen.

At some point, I wound up on a blank screen with no way to go forward or backward to anything but the "create a free website" banner. Haven't reproduced that to give you repro steps, but it happened.

It was frequently janky on my machine; animations would hang occasionally.

It doesn't work at all on my mobile browser (Firefox); I just get a white screen with the banner at the bottom (it did work on Chrome, but the "Back" button was frequently hard to hit).

All of this could be done by animating actual HTML content using JavaScript or CSS animations, in a way that would degrade gracefully for people who couldn't use those for some reason, and which would render at the full DPI of my screen, be copy/pastable, searchable, accessible, and so on.

By the way, the editor on makemake.io is fairly impressive. But it seems like it would be more appropriate for it to edit HTML with JavaScript or CSS animations, or SVG, rather than a custom rendering engine using Canvas.

afandian4• 11 years ago

Lots wrong with it. Exactly the things that are wrong with Flash. At the risk of repeating what others have said:

None of the text is in HTML which means:

- it can't be used by assistive technology, e.g. for people with reduced visibility. People with partial sight use the web too.

- it doesn't work in reader mode, which is a common feature of web browsers to use standard CSS to read just the content.

- it has none of the benefits of WAI-ARIA

- I can't use services like Google translate

- that archive.org doesn't work

- search engine X can't index it. Maybe Google could one day with the right investment in technology, but there are more search engines than Google.

None of the styling is in CSS which means

- your animation wastes CPU cycles and isn't optimised

- I can't increase the size of the text if I need to if I have poor eyesight (zoom just makes the whole canvas bigger)

- on my phone screen text is unreadably small and I can't do anything about it.

- you're re-inventing layout stuff that browsers do. I found a layout bug[1].

Reinvents stuff that web browsers, not JS should be handling which means:

- I found a navigation bug in a few seconds[2].

- it doesn't work with older browsers. Some people are still using old versions of IE and can't switch.

- that standard web behaviour doesn't work. How do I open a link in a new window?

- it forces me to use the mouse to click things rather than the keyboard (not everyone uses the web the same way you do)

- it doesn't work at all if JS is disabled.

[1] Layout bug: load window with small window size, then resize. Some circles move, some don't.

[2] Navigation bug: back button doesn't work under certain circumstances.

This is a good technical demo, and shows the development skills of the author. Unfortunately it also shows that he has no idea about core web development issues, which on the web is probably more important, especially in a portfolio piece.

xjia• 11 years ago

Reminds me of those Flash websites ten years ago.

geuis• 11 years ago

Completely unusable on mobile. You can't swipe when touching the canvas element and tapping anything doesn't work.

santoriv10• 11 years ago

Touch works on my phone. Which mobile device are you using?

ch47a2• 11 years ago

Everything works fine on my Samsung Note 4.

asherkin2• 11 years ago

Might want to look into hidpi support, the blurry text is painful to read :P

santoriv10• 11 years ago

What device are you using? An iPad Retina or something else?

orangecat• 11 years ago

In my case, a retina iMac with Firefox. See http://www.html5rocks.com/en/tutorials/canvas/hidpi/

TheCoreh• 11 years ago

I'm using a Retina MacBook Pro and it's also blurry for me. You should multiply the canvas "width" and "height" attributes by devicePixelRatio, but keep its size constant using CSS.

asherkin2• 11 years ago

Chrome on a rMBP.

lambda2• 11 years ago

I'm using Firefox on a Retina MacBook Pro, and I get low-DPI rendering; Chrome also does low-DPI rendering, but with better anti-aliasing. The text rendering looks even worse on Safari; it doesn't even appear to do proper hinting, so the widths of characters come out all uneven, though oddly it seems to antialias the largest text, your name, but not any of the rest of the text.

From worst to best, Safari appears to have inconsistent antialiasing and no hinting, Firefox has no antialiasing, while Chrome looks the best with antialiasing. They all look fairly blurry and out of place.

nailer5• 11 years ago

I'm using Chrome 42 on a non-retina MBA and it's blurry for me too.

axmorgan• 11 years ago

- Three seconds animation of your name and "Javascript developer" before I get an option to actually see content? Why?

- The animation makes refreshing work really strange. I can see the buttons, they then disappear and re-appear before I can use the website.

- Can't select text, no copy and paste, going to have to manually type out your email address to contact you? Never mind what it does for accessibility/SEO.

- I had a problem with the back button sometimes taking me to a blank page (forcing a refresh and another watch of the name animation), though this seems to have stopped happening.

Interesting experiment, if only to show why this is a terrible idea.

illesim• 11 years ago

Is it just me, or is there really no easing on the transitions?

thegreatpeter• 11 years ago

The bottom line is, Eric is not catering himself to engineering firms, he's catering himself to marketing agencies and their clients.

This site doesn't follow any specific standards, but {most} agencies won't either, because they're billing their time

afandian4• 11 years ago

I don't understand your second line. If an agency is doing a site for a client and it's not accessible to their customers, then they've failed to do the job. The client wouldn't say "oh, we'll pay you the same amount again to fix it" they'd say "fix it at your own expense".

d55• 11 years ago

http://evangelcathedral.net/

jest3r-• 11 years ago

Is there a way to make the canvas scale to the screen size while keeping aspect ratio?

How would Google index this site?

wtbob• 11 years ago

Not entirely in HTML5 Canvas: apparently it uses JavaScript as well, which means that I see a blank white page with Makemake's footer.

pavlov• 11 years ago

JavaScript is the only way to access the Canvas API, so it's fair to say the site is written "entirely in HTML5 Canvas".

theknarf• 11 years ago

Nothing you showed on that website couldn't be made without the Canvas element.

blkhp192• 11 years ago

What a fantastic example of the wrong way to use animations.

ch47a2• 11 years ago

This comment does not say anything. Explain! What is YOUR correct way to use animations?

blkhp192• 11 years ago

Good animations should draw the user's attention to certain things. If everything animates arbitrarily, it just becomes a distraction.

mck-• 11 years ago

Despite all the criticism in this thread, I do think this (or some form of it) is going to be the future of CVs for web devs. A creative way to stand out from the crowd, and be different from other simple portfolio websites.

To really make a point, CSS 3D websites are even cooler :) some of you might remember acko.net [1]

[1] http://acko.net/blog/zero-to-sixty-in-one-second/

gingerrr• 11 years ago

It's visually clean, but if I were sent this site as a lead on a potential hire, I likely would have closed the tab and gone about my day. A few reasons:

- I don't have immediate action items - regardless of remote resource load times I'm forced to wait for a two-part intro animation to unfold before I can do anything, even on my fourth or fifth visit. I don't have time to wait like this, and I don't want my users to have to wait for superfluous visuals either.

- There's almost no content - I'm not sure what the "progress" bars in the skills section measure and how they were calculated, no description of accomplishments or skills built in experience section

- UX animations are clunky at best and misleading at worst. The rectangle of blue that becomes the "back" button and sets off "Javascript Developer" gracelessly darts back and forth, and why when I press "back" does the carousel effect continue to turn forward?

I recognize this is likely more an opportunity to show off makemake's abilities, but as someone evaluating a potential hire I'm left with a lackluster impression. Apologies if this is too negative - I'm hoping the honesty will offset any lack of tact.

mrieck2• 11 years ago

The editor on makemake.io is very impressive.

You just picked a tough crowd to show this to... everyone here cares about the semantic web and has nothing but contempt for the "all-flash" websites from 15 years ago. You should really try making a CSS3 version that just puts z-indexed img and div tags in an relative positioned container and animates the x/y. Then people could insert their semantic HTML and animate it however they want.

If you go that route you could even allow people to create small widgets/components. Say you want a crazy/animated sidebar but don't want to break the rest of your page... you could just open up your editor and work on just the widget and export code to drop that widget into your page.

Overall I think this is an awesome project. I'm also coding a huge HTML5 editor project you should check out when it launches... http://www.superanimo.com

It's more of a competitor to GoAnimate/PowToons than your startup. I think HTML5 canvas is underutilized in the startup community so I hope both of our projects take off.

santoriv10• 11 years ago

Thanks for the feedback. Do you have an early access/mailing list signup on your site where I can drop my email?

I also thought about doing the same thing in DOM with Famo.us but I found after some experimentation that the performance wasn't good when you had a lot of objects on the page. Canvas animation perf scales reasonably well.

Regarding widgets, I think maybe you are talking about something like http://themeforest.net/item/quasar-wordpress-theme-with-anim...

I think you can also do that sort of thing with Adobe Edge or Google Web Designer.

Anyway, thanks for the feedback. I'd like to see your project when it's completed. :-)

mrieck2• 11 years ago

I'll add you to the small list of people I'll email when SuperAnimo is released.

I don't have a mailing list. I hate signing up to lists that are all talk about an unreleased product... I rather just show people when it's ready. I have a full-time day-job so I can't work on it as much as I want, but I should have a rough version live at the end of next month.

santoriv10• 11 years ago

Thanks everyone for taking a look and giving feedback. Thank you especially to the folks who gave me bug reports that I can take a look at and try to fix.

Most of the technical issues raised are fixable but a few are not.

SEO is fixable by following the Google ajax SEO spec. Accessibility and other issues with selecting and highlighting text are not.

Many of the other criticisms could also be levied at other javascript heavy sites (e.g. Facebook).

It's clear that many people are philosophically opposed to rendering websites in Canvas because it reminds them of Flash and is incompatible with the semantic web.

I guess the proof will be in whether or not web consumers end up thinking it is cool or not. That remains to be seen. Personally I think this approach opens up a lot of interesting possibilities.

Anyway, thanks again for your interest and responses, even if they were largely negative. :-)

Show HN: My animated website, rendered entirely in HTML5 Canvas

Related Stories