
McDonald's HTML5 promotion site - zachwill
http://www.mcdonalds.co.uk/ukhome/promotions.html
======
chrislloyd
The creator of this (Mat Groves) is also behind
[pixi.js]([https://github.com/GoodBoyDigital/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.

~~~
lucian1900
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.

------
apalmer
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

~~~
johnpolacek
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.

~~~
breck
> 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.

~~~
seriocomic
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...](http://scans.zoompf.com/s/7180a12152cdf3dbd5087c2f7d09813d/report.html)
for a cursory look at the optimization opportunities. I did LOL at the HTML
comment near the end:

<!-- JavaScript at the bottom for fast page loading -->

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

~~~
shantanubala
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.

~~~
Bosence
Unless you're a physicist... :)

------
quackerhacker
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!

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

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

~~~
Achshar
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.

------
alxndr
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_...](http://www1.staging.mcdonalds.com/gtw/displayimage.do?image_id")
not recognized and ignored."

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

------
rjohnk
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]

~~~
mehmehshoe
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.

------
rayhano
Any idea who is responsible for coding this?

~~~
zachwill
Looks like Goodboy Digital made it:
[http://www.goodboydigital.com/](http://www.goodboydigital.com/)

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

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

------
glasses
Great now my browser is fat after visiting mcdonalds.

Feels like i'm smacking a fat belly

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

Really pretty, though.

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

~~~
D9u
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...

------
jgv
after 5 minutes of loading I was left with this
[http://cl.ly/image/1u1K2b3i3g28](http://cl.ly/image/1u1K2b3i3g28)

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

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

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

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

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

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

