6 ms·
Show HN: My animated website, rendered entirely in HTML5 Canvas
- geuis 12y agoCompletely unusable on mobile. You can't swipe when touching the canvas element and tapping anything doesn't work.
- digitalgravy 12y agoAs beautiful as it is, it's also completely unusable for anyone with accessibility options. There's not even a text-only version.
- seyz 12y agoReally cool experiment but there're some issues: - SEO sucks. - You're killing the Web semantic :-)
- santoriv 12y agoFor sure. If it was a proper site I would follow the Google Ajax SEO Spec. https://developers.google.com/webmasters/ajax-crawling/docs/specification https://developers.google.com/webmasters/ajax-crawling/docs/...
- seanalltogether 12y agoIt fails to show anything on Mac Firefox. Here's the console log TypeError: this._container is null line 177 > eval:1:330345
- cvburgess 12y agoWhile 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
- santoriv 12y agoWhat specifically is bad about it?
- striking 12y agoThe 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 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.)
- santoriv 12y agoThe robots.txt is an oversight on my part. I need to get the site working so it's crawlable using the google ajax SEO spec. The loss of highlighting text and accessibility is unfortunately unavoidable if you are using Canvas or WebGL for rendering. That's the price you pay for having better animation performance - so it's a tradeoff. And no, I don't have a BS in CS. ;-)
- moron4hire 12y agoI 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.
- santoriv 12y ago
- xjia 12y agoReminds me of those Flash websites ten years ago.
- asherkin 12y agoMight want to look into hidpi support, the blurry text is painful to read :P
- santoriv 12y agoWhat device are you using? An iPad Retina or something else?
- orangecat 12y agoIn my case, a retina iMac with Firefox. See http://www.html5rocks.com/en/tutorials/canvas/hidpi/ http://www.html5rocks.com/en/tutorials/canvas/hidpi/
- TheCoreh 12y agoI'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.
- asherkin 12y agoChrome on a rMBP.
- lambda 12y agoI'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.
- nailer 12y agoI'm using Chrome 42 on a non-retina MBA and it's blurry for me too.
- axmorgan 12y 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 12y agoIs it just me, or is there really no easing on the transitions?
- thegreatpeter 12y agoThe 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
- afandian 12y agoI 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 12y agohttp://evangelcathedral.net/ http://evangelcathedral.net/
- jest3r- 12y agoIs there a way to make the canvas scale to the screen size while keeping aspect ratio? How would Google index this site?
- wtbob 12y agoNot entirely in HTML5 Canvas: apparently it uses JavaScript as well, which means that I see a blank white page with Makemake's footer.
- pavlov 12y agoJavaScript is the only way to access the Canvas API, so it's fair to say the site is written "entirely in HTML5 Canvas".
- theknarf 12y agoNothing you showed on that website couldn't be made without the Canvas element.
- blkhp19 12y agoWhat a fantastic example of the wrong way to use animations.
- mck- 12y agoDespite 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/ http://acko.net/blog/zero-to-sixty-in-one-second/
- gingerrr 12y agoIt'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.
- mrieck 12y agoThe 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 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.
- santoriv 12y agoThanks 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-animation-builder/6126939 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. :-)
- mrieck 12y agoI'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.
- santoriv 12y agoThanks 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. :-)