McDonald's HTML5 promotion site | Hacker News Reader

McDonald's HTML5 promotion site

mcdonalds.co.uk

50 pointszachwill41 comments

The creator of this (Mat Groves) is also behind [pixi.js](https://github.com/GoodBoyDigital/pixi.js).

As an aside, I love the sound effects. I actually wish more websites played subtle "pops" and "clicks" when I interact with them. I can't quantify this, but I think those types of sound effects are one of the reasons why mobile apps feel so snappy. Clear is a good example.

I'm surprised that I haven't heard anybody complain about sound on mobile apps. I have two theories as to why this is:

1. The context is different. People use computers in quiet offices where they're expected to be working. Zips & zaps doesn't sound like Excel. 2. The mute button is physically closer. Muting an iPad feels much less interruptive than clicking the sound icon and dragging the slider down.

I'm seeing more and more front-end developers learning the fundamentals of animation and illustration. I predict that I'll start seeing the same with sound design too.

Thankfully pretty much all mobile apps with sounds have a way to disable them. The sounds don't make the apps seem any nappier to me, because the apps are indeed nappier. The sounds are just annoying.

I think websites don't do this more because reliable sounds support is spotty and there are painful memories from the past.

I liked it as a demo, but was incredibly slow to load for me, and I dont see anything that indicates a large amount of data is being loaded

All I see is the Win8 spinny dots. I can't tell if it's actually going to load something, or if a connection is being blocked (by my gamut of ad and data prevention plugins) and I'm waiting for a timeout.

unfortunately it because the servers are getting pretty hammered at the mo :/

I'm on a 100 mbit up/down connection, and it was still really slow.

Funny, I was literally just thinking it was incredibly snappy for all the large images, and fairly intricate styling.

If you look at the source, you can see why it is slow. Tons of js linked in there, right in the <head>, no minification. They even embed jQuery twice on there (1.3.2 then later on 1.6.2). Also, lots of inline styles on the page. Looks like they are using a CMS, not sure which one though.

Nevertheless, that 3D rollover effect and infinite scroll in all directions is pretty fun.

> If you look at the source, you can see why it is slow.

Good hunch, but not quite correct. To see why it is slow, you need to look at the Network Tab in your browser's debugger window. Their server is choking on requests.

Partially correct, the number of requests (all that JS, CSS and images) without minification and compression enabled is making this not only twice the size (in Kb) that it needs to be, but the waterfall of blocked requests is terrible. See http://scans.zoompf.com/s/7180a12152cdf3dbd5087c2f7d09813d/r... for a cursory look at the optimization opportunities. I did LOL at the HTML comment near the end:

...it's stuff like this that makes me think i'll never be able to cut it as a professional web developer... I would never even consider making something this bloated. I'd complain that the UI is a terrible, pointless bit of eye candy that adds no value to anything. 'You shouldn't need a physics engine to navigate a website', I would protest, and then they would show me the door...

You're just missing the point. This site is designed to be fun and engaging. The physics and sound accomplish that goal.

Yeah, I guess you're right.

Maybe i'm just a curmudgeon. It is a neat effect though. But I don't like that html5 seems to be repeating what I didn't like about Flash based sites when they were a thing.

I'm pretty convinced that design is trending towards the web circa 1995 with custom fonts, larger hit-points, better white-space control, and a more attractive color palette.

Which will only seem more attractive for another 10 years.

Keep in mind that McDonald's is an established brand. They don't have to explain what "McDonald's" is anymore -- they're past that point. Now, they have to convince you to eat there by associating themselves with health-conscious imagery and family-oriented messaging.

This is an attempt to make McDonald's seem more "fun" than the average restaurant.

Most companies looking to build a web site are trying to solve a totally different problem because most companies are still trying to explain who they are. You definitely don't need a physics engine to explain who you are.

Unless you're a physicist... :)

Slow initial load for me as well...there is alot of assets in the head that aren't loaded async.

This is kind of a pet peeve of mine for sites that are utilizing so much HTML5...why not use appcache manifests? I understand setting caches directly through the instance, but it might just be me, this is one of my favorite features in server load reduction!

I like how they replicate the jiggle of belly fat. Quite fitting! But in all honesty, that's a pretty slick UI.

After seeing the title, I was hoping that McDonald's was promoting HTML5…

Well they are. Most devs can instantly tell if a site is flash or html5. And anyone who visits the site will know it's html5. So even if someone had any doubts earlier, they now know for sure that html5 is mainstream and flash's days on web are almost over.

Edit: ah, now it's loading. I mistook ten seconds with a white background to be a fatal error, not noticing the hundreds of files it was trying to download... It's hitting files named "test.php" and trying to grab an "undefined.mp3". Slick animation, but nothing else about this is impressive.

"Viewport argument key "http://www1.staging.mcdonalds.com/gtw/displayimage.do?image_... not recognized and ignored."

Wow, it's loading 30 pngs to be frames for animations. No longer impressed by the animation...

Finally, a major corporation webpage that can be viewed on a tablet!

[Edit: I should say major food or otherwise non-tech consumer-facing webpage]

On my iPad, IT infini-scrolls and stutters, so not on all devices ;)

Good point about tablet viewing. I will try that out later. Honestly on a decent sized laptop screen, the site kept my attention for about 10 seconds before I started to think how busy and complex it was.

Any idea who is responsible for coding this?

Looks like Goodboy Digital made it: http://www.goodboydigital.com/

Whatever you do, do not submit McLibel as a favorite moment. They have no sense of humor about it.

This is a pretty sweet view.

I find it had to track what i haven't looked at while dragging around in various directions. I would really like a little semi-transparent overlay in the corner, with a rectangle showing what portion of the UI i am current viewing for reference.

Great now my browser is fat after visiting mcdonalds.

Feels like i'm smacking a fat belly

I have absolutely no idea how I'm supposed to navigate this page.

Really pretty, though.

You have to use click and drag to move around, scrolling probably would have been a bit more obvious...

Keyboard arrows, /\ moves left, and \/ moves right, but that's all that works for me, besides the touch pad which is the only way I could scroll up, and, or, down...

I also expected more media for such a long load time, however, the animations are kind of neat, but I'm not rushing out to McDonald's any time soon...

after 5 minutes of loading I was left with this http://cl.ly/image/1u1K2b3i3g28

I'm getting the same thing here. Is this using WebSockets? The network I'm on blocks pretty much every non-essential port.

...mostly white page with lots of broken image squares...

Way off topic and I know I'll get down votes but I have to say it: If you eat McDonald's, you will die an early painful death.

Just trying to save some lives here. As might as well wrap your lips around a cow's butt hole.

my CPU went from 5% to 95% after viewing though haha

What type of system? I went from 1% to 9% on a new I5 machine. It was about the same in Chrome and Firefox.

Reply on news.ycombinator.com