8 ms·

McDonald's HTML5 promotion site

50 points by zachwill 13y ago

rjohnk 13y ago
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]
- NKCSS 13y ago
  On my iPad, IT infini-scrolls and stutters, so not on all devices ;)
- mehmehshoe 13y ago
  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.
bicx 13y ago
I like how they replicate the jiggle of belly fat. Quite fitting! But in all honesty, that's a pretty slick UI.
spicyj 13y ago
After seeing the title, I was hoping that McDonald's was promoting HTML5…
- Achshar 13y ago
  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.
liquidise 13y ago
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.
jmduke 13y ago
I have absolutely no idea how I'm supposed to navigate this page. Really pretty, though.
- ollysb 13y ago
  You have to use click and drag to move around, scrolling probably would have been a bit more obvious...
  - D9u 13y ago
    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...
apalmer 13y ago
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
- stephengillie 13y ago
  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.
- doormat23 13y ago
  unfortunately it because the servers are getting pretty hammered at the mo :/
- austenallred 13y ago
  I'm on a 100 mbit up/down connection, and it was still really slow.
- gleenn 13y ago
  Funny, I was literally just thinking it was incredibly snappy for all the large images, and fairly intricate styling.
- johnpolacek 13y ago
  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 13y ago
    > 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.
rayhano 13y ago
Any idea who is responsible for coding this?
- zachwill 13y ago
  Looks like Goodboy Digital made it: http://www.goodboydigital.com/ http://www.goodboydigital.com/
scottshea 13y ago
Whatever you do, do not submit McLibel as a favorite moment. They have no sense of humor about it.
shank8 13y ago
my CPU went from 5% to 95% after viewing though haha
- melling 13y ago
  What type of system? I went from 1% to 9% on a new I5 machine. It was about the same in Chrome and Firefox.
quackerhacker 13y ago
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!
krapp 13y ago
...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...
- windsurfer 13y ago
  You're just missing the point. This site is designed to be fun and engaging. The physics and sound accomplish that goal.
  - krapp 13y ago
    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.
    - kristopolous 13y ago
      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.
      - pekk 13y ago
        Which will only seem more attractive for another 10 years.
- shantanubala 13y ago
  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.
chrislloyd 13y ago
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 13y ago
  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.
alxndr 13y ago
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_id" http://www1.staging.mcdonalds.com/gtw/displayimage.do?image_... not recognized and ignored."
- alxndr 13y ago
  Wow, it's loading 30 pngs to be frames for animations. No longer impressed by the animation...
websitescenes 13y ago
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 13y ago
  Just trying to save some lives here. As might as well wrap your lips around a cow's butt hole.
deleted 13y ago
[deleted]
jgv 13y ago
after 5 minutes of loading I was left with this http://cl.ly/image/1u1K2b3i3g28 http://cl.ly/image/1u1K2b3i3g28
- JaggedJax 13y ago
  I'm getting the same thing here. Is this using WebSockets? The network I'm on blocks pretty much every non-essential port.
lnanek2 13y ago
...mostly white page with lots of broken image squares...
glasses 13y ago
Great now my browser is fat after visiting mcdonalds. Feels like i'm smacking a fat belly

50 points by zachwill 13y ago

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]

NKCSS 13y ago
On my iPad, IT infini-scrolls and stutters, so not on all devices ;)
mehmehshoe 13y ago
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.

bicx 13y ago

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

spicyj 13y ago

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

Achshar 13y ago
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.

liquidise 13y ago

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.

jmduke 13y ago

I have absolutely no idea how I'm supposed to navigate this page. Really pretty, though.

ollysb 13y ago
You have to use click and drag to move around, scrolling probably would have been a bit more obvious...
- D9u 13y ago
  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...

apalmer 13y ago

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

stephengillie 13y ago
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.
doormat23 13y ago
unfortunately it because the servers are getting pretty hammered at the mo :/
austenallred 13y ago
I'm on a 100 mbit up/down connection, and it was still really slow.
gleenn 13y ago
Funny, I was literally just thinking it was incredibly snappy for all the large images, and fairly intricate styling.
johnpolacek 13y ago
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 13y ago
  > 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.

rayhano 13y ago

Any idea who is responsible for coding this?

zachwill 13y ago
Looks like Goodboy Digital made it: http://www.goodboydigital.com/ http://www.goodboydigital.com/

scottshea 13y ago

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

shank8 13y ago

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

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

quackerhacker 13y ago

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!

krapp 13y ago

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

windsurfer 13y ago
You're just missing the point. This site is designed to be fun and engaging. The physics and sound accomplish that goal.
- krapp 13y ago
  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.
  - kristopolous 13y ago
    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.
    - pekk 13y ago
      Which will only seem more attractive for another 10 years.
shantanubala 13y ago
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.

chrislloyd 13y ago

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 13y ago
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.

alxndr 13y ago

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_id" http://www1.staging.mcdonalds.com/gtw/displayimage.do?image_... not recognized and ignored."

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

websitescenes 13y ago

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 13y ago
Just trying to save some lives here. As might as well wrap your lips around a cow's butt hole.

deleted 13y ago

[deleted]

jgv 13y ago

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

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

lnanek2 13y ago

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

glasses 13y ago

Great now my browser is fat after visiting mcdonalds. Feels like i'm smacking a fat belly