6 ms·

Google's Digital Creative Guidebook

158 points by evolve2k 14y ago

flixic 14y ago
Google's recent websites for marketing - this and http://www.themobileplaybook.com/ http://www.themobileplaybook.com/ - really stand out. Their production value is just amazing, and in case of Mobile Playbook, content is great too.
- mgcross 14y ago
  They're great if you're using desktop or iOS, but fall short if you use Google's own devices. The mobile playbook serves a phone view to the Nexus 7 tablet, and a broken desktop view to the Nexus 4.
- flog 14y ago
  It honestly is amazing. I'm a front end dev, and have worked on some big and gorgeous sites, but damn... I've been working on startups for a couple of years and feel like the web has moved massively in that time... who ever is making this stuff is amazing (although I assume this isn't a single man effort) Who else is feeling inadequate ;)
  - sspross 14y ago
    me :)
- chj 14y ago
  I wish they could develop a ebook publish platform with this technology. Handily beats Amazon's cloud reader.
- maayank 14y ago
  Both "books" strike me as sparse content veiled by (superb) visuals.
  - yen223 14y ago
    Sometimes style is substance.
blowski 14y ago
Jakob Nielsen would have a field day with this.
- mbesto 14y ago
  Correct me if I'm wrong, but the purpose of this isn't necessarily to be useable but rather attention grabbing.
fredley 14y ago
Great fun, but I'd quite like to link to a certain 'tab' and send it in an email. Sadly, it looks like I'll have to email instructions on how to get to that 'tab', which will be tedious.
lachlanj 14y ago
I'm getting a 404. Looks like this has been removed?
- lachlanj 14y ago
  My bad, it's just 404'ing from mobile
  - mgcross 14y ago
    It's their bad; phone tries to redirect to the mobile subdomain, while tablet gets the proper "mobile coming soon" placeholder.
GotAnyMegadeth 14y ago
It appears your computer doesn't support CSS3 3D Transforms...
- jrabone 14y ago
  Yes, Google, that's because you've blacklisted my perfectly good graphics driver and broken it for me (Chrome/Linux/Nvidia). Well played. How about next time you give ME that choice? (I know about the workarounds. It's not my machine, I don't have root or sudo, and I can't be bothered to find out where Chrome is hidden on this mess of NFS-mounted filesystems. It used to work, now it doesn't. Story of the web.)
  - jamesmiller5 14y ago
    There is a flag to unblacklist your graphics driver in chrome. I have had to use it when experimenting with WebGL. Go to chrome://flags and enable Override software rendering list.
- bo1024 14y ago
  Same here. Can anyone detail why? Browser, OS, hardware....
chj 14y ago
Wow, this is truly an eye opener. Not as fast as I would like to see (running chrome on MBP 15 retina), but it's so beautiful.
rpm4321 14y ago
It looks really impressive and I realize this is a creative showpiece, but is anyone else getting tired of all this "swiping" being forced upon users who aren't even using touchscreens? Between this and Microsoft's Metro swipes, it's getting a little ridiculous. I really hope this doesn't become an even bigger trend because it's horrible for usability.
- silverbax88 14y ago
  Agreed - the swiping is an issue for the desktop, which still dominates consumer and pro usage.
- mgcross 14y ago
  Yes, especially considering that this particular piece isn't available on touchscreens. The click-and-drag experience is even worse with a laptop trackpad.
- oms1005 14y ago
  You could use the left/right arrow keys if you want.
- andrewfelix 14y ago
  I don't think it's quite tired yet. This is a gorgeous execution of the technique, especially considering the interactive elements (Play close attention the maps portion...really nice 3D effect there). As far as marketing goes I think it beats out the typical static landing page.
martinp 14y ago
I was looking at the source when I noticed that the formatting of http://creativeguidebook.appspot.com/js/fbk.min.js http://creativeguidebook.appspot.com/js/fbk.min.js actually spells out "WE ARE HIVE". [1] [1] http://www.wearehive.co.uk http://www.wearehive.co.uk
- mobweb 14y ago
  Awesome. Does anybody have an idea how this is done?
  - thomasxiii 14y ago
    http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/ http://coding.smashingmagazine.com/2012/04/17/beercamp-an-ex...
    - mobweb 14y ago
      Thank you, but I was actually asking about the "WE ARE HIVE" being spelled out as spaces in the minified JS file linked above. It seems to be gone now, though. :(
- pixelbath 14y ago
  Perhaps I'm being thick here, but I wasn't able to find anywhere this is spelled out. Care to elaborate? Also, fun fact: Copying/pasting the code in that minified file either results in weirdness or complete crashing from Notepad++, depending on the file encoding setting.
  - Cub3 14y ago
    I'm in the same boat, any ideas?
    - pixelbath 14y ago
      I added several line breaks within the first 200-or-so characters, which allowed me to paste the code fine.
mrbill 14y ago
"It appears your computer doesn't support CSS3 3D Transforms..." - and I'm running Google's own browser.
randallu 14y ago
Cool, looks oddly familiar: http://2012.beercamp.com/ http://2012.beercamp.com/
rohern 14y ago
All I can think is that they are violating Apple's patent on page-turning. So much for not being evil, Google...
8ig8 14y ago
Does it say anything about "Mobile First"? I'm not able to get past "The mobile optimised Creative Sandbox is coming soon..." on my iPad.
- mgcross 14y ago
  Don't feel bad, on my Nexus 4 I'm redirected to a mobile subdomain and 404'd. But you probably mean something along the lines of: "Increasingly, users are accessing the web from a mobile, therefore it's critical that your presence on the web is optimized for mobile devices. Studies have shown that 2/3rds of users will not return to a site that is not optimized for mobile." That was floated next to a Flash video embed with no fallback. But here's the fallback on YouTube: http://www.youtube.com/watch?v=Ja7abx3OPOQ http://www.youtube.com/watch?v=Ja7abx3OPOQ It was easy to find once I opened the whole presentation in a desktop browser with Flash support, click-dragged back to the page, clicked the magnifying glass icon to spawn the popup, then the More Info tab, then the YouTube icon in the lower-left corner of the video to 'view on YouTube'. I'd send you a link, but there isn't one. It's all one URL. And you're probably not part of the 1/3 that will return to a site that isn't optimized for mobile anyway.
  - guiambros 14y ago
    :) To add to the irony, it didn't work for me on Chrome v23. True, not the first time I see Chrome struggling to read fancy HTML5 sites (Google's Exquisite Forest was another one, and some areas on Chrome Web Lab are definitely better experienced with Firefox). And yeah, I had to install flash in order to run the videos on this site...

158 points by evolve2k 14y ago

Google's recent websites for marketing - this and http://www.themobileplaybook.com/ http://www.themobileplaybook.com/ - really stand out. Their production value is just amazing, and in case of Mobile Playbook, content is great too.

mgcross 14y ago
They're great if you're using desktop or iOS, but fall short if you use Google's own devices. The mobile playbook serves a phone view to the Nexus 7 tablet, and a broken desktop view to the Nexus 4.
flog 14y ago
It honestly is amazing. I'm a front end dev, and have worked on some big and gorgeous sites, but damn... I've been working on startups for a couple of years and feel like the web has moved massively in that time... who ever is making this stuff is amazing (although I assume this isn't a single man effort) Who else is feeling inadequate ;)
- sspross 14y ago
  me :)
chj 14y ago
I wish they could develop a ebook publish platform with this technology. Handily beats Amazon's cloud reader.
maayank 14y ago
Both "books" strike me as sparse content veiled by (superb) visuals.
- yen223 14y ago
  Sometimes style is substance.

blowski 14y ago

Jakob Nielsen would have a field day with this.

mbesto 14y ago
Correct me if I'm wrong, but the purpose of this isn't necessarily to be useable but rather attention grabbing.

fredley 14y ago

Great fun, but I'd quite like to link to a certain 'tab' and send it in an email. Sadly, it looks like I'll have to email instructions on how to get to that 'tab', which will be tedious.

lachlanj 14y ago

I'm getting a 404. Looks like this has been removed?

lachlanj 14y ago
My bad, it's just 404'ing from mobile
- mgcross 14y ago
  It's their bad; phone tries to redirect to the mobile subdomain, while tablet gets the proper "mobile coming soon" placeholder.

GotAnyMegadeth 14y ago

It appears your computer doesn't support CSS3 3D Transforms...

jrabone 14y ago
Yes, Google, that's because you've blacklisted my perfectly good graphics driver and broken it for me (Chrome/Linux/Nvidia). Well played. How about next time you give ME that choice? (I know about the workarounds. It's not my machine, I don't have root or sudo, and I can't be bothered to find out where Chrome is hidden on this mess of NFS-mounted filesystems. It used to work, now it doesn't. Story of the web.)
- jamesmiller5 14y ago
  There is a flag to unblacklist your graphics driver in chrome. I have had to use it when experimenting with WebGL. Go to chrome://flags and enable Override software rendering list.
bo1024 14y ago
Same here. Can anyone detail why? Browser, OS, hardware....

chj 14y ago

Wow, this is truly an eye opener. Not as fast as I would like to see (running chrome on MBP 15 retina), but it's so beautiful.

rpm4321 14y ago

It looks really impressive and I realize this is a creative showpiece, but is anyone else getting tired of all this "swiping" being forced upon users who aren't even using touchscreens? Between this and Microsoft's Metro swipes, it's getting a little ridiculous. I really hope this doesn't become an even bigger trend because it's horrible for usability.

silverbax88 14y ago
Agreed - the swiping is an issue for the desktop, which still dominates consumer and pro usage.
mgcross 14y ago
Yes, especially considering that this particular piece isn't available on touchscreens. The click-and-drag experience is even worse with a laptop trackpad.
oms1005 14y ago
You could use the left/right arrow keys if you want.
andrewfelix 14y ago
I don't think it's quite tired yet. This is a gorgeous execution of the technique, especially considering the interactive elements (Play close attention the maps portion...really nice 3D effect there). As far as marketing goes I think it beats out the typical static landing page.

martinp 14y ago

I was looking at the source when I noticed that the formatting of http://creativeguidebook.appspot.com/js/fbk.min.js http://creativeguidebook.appspot.com/js/fbk.min.js actually spells out "WE ARE HIVE". [1] [1] http://www.wearehive.co.uk http://www.wearehive.co.uk

mobweb 14y ago
Awesome. Does anybody have an idea how this is done?
- thomasxiii 14y ago
  http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/ http://coding.smashingmagazine.com/2012/04/17/beercamp-an-ex...
  - mobweb 14y ago
    Thank you, but I was actually asking about the "WE ARE HIVE" being spelled out as spaces in the minified JS file linked above. It seems to be gone now, though. :(
pixelbath 14y ago
Perhaps I'm being thick here, but I wasn't able to find anywhere this is spelled out. Care to elaborate? Also, fun fact: Copying/pasting the code in that minified file either results in weirdness or complete crashing from Notepad++, depending on the file encoding setting.
- Cub3 14y ago
  I'm in the same boat, any ideas?
  - pixelbath 14y ago
    I added several line breaks within the first 200-or-so characters, which allowed me to paste the code fine.

mrbill 14y ago

"It appears your computer doesn't support CSS3 3D Transforms..." - and I'm running Google's own browser.

randallu 14y ago

Cool, looks oddly familiar: http://2012.beercamp.com/ http://2012.beercamp.com/

rohern 14y ago

All I can think is that they are violating Apple's patent on page-turning. So much for not being evil, Google...

8ig8 14y ago

Does it say anything about "Mobile First"? I'm not able to get past "The mobile optimised Creative Sandbox is coming soon..." on my iPad.

mgcross 14y ago
Don't feel bad, on my Nexus 4 I'm redirected to a mobile subdomain and 404'd. But you probably mean something along the lines of: "Increasingly, users are accessing the web from a mobile, therefore it's critical that your presence on the web is optimized for mobile devices. Studies have shown that 2/3rds of users will not return to a site that is not optimized for mobile." That was floated next to a Flash video embed with no fallback. But here's the fallback on YouTube: http://www.youtube.com/watch?v=Ja7abx3OPOQ http://www.youtube.com/watch?v=Ja7abx3OPOQ It was easy to find once I opened the whole presentation in a desktop browser with Flash support, click-dragged back to the page, clicked the magnifying glass icon to spawn the popup, then the More Info tab, then the YouTube icon in the lower-left corner of the video to 'view on YouTube'. I'd send you a link, but there isn't one. It's all one URL. And you're probably not part of the 1/3 that will return to a site that isn't optimized for mobile anyway.
- guiambros 14y ago
  :) To add to the irony, it didn't work for me on Chrome v23. True, not the first time I see Chrome struggling to read fancy HTML5 sites (Google's Exquisite Forest was another one, and some areas on Chrome Web Lab are definitely better experienced with Firefox). And yeah, I had to install flash in order to run the videos on this site...