Mobile Playbook by Google(themobileplaybook.com)
themobileplaybook.com
Mobile Playbook by Google
http://www.themobileplaybook.com/
72 コメント
I can't decide which part of that site is more hideous. The actively hostile user interface or the buzzword-laden "content".
Can you expand on the "actively hostile" comment? I thought it was a technically and aesthetically impressive implementation but I'm no designer.
Other people already posted different annoyances, but my issues with that page were:
The animations are choppy to a distracting level on Chrome 22 running on a reasonably beefy desktop machine.
The font size is unreadably small, and due to the three column layout it doesn't degrade well when zoomed. It'd be merely crappy if zooming required vertical scrolling. It's disabling all methods of vertical scrolling entirely that really make this design special.
It replaces normal page navigation with a custom version, which is already bad. They then compound that error by mapping that custom navigation to the wrong keys. An example: maybe you'd like to check one of the footnotes they have. In a sensible design those would be hyperlinks, but for whatever reason that wasn't done. Ok, so I guess you need to go to the end of the document to see the footnotes. Wouldn't still be too bad, but they forgot to map the "End" key. So the only way to get to the end of the document is with the slider. And after doing that, how do you return to the original position? Well, I'd expect to be able to do Alt-Left for that. Except that this keybinding has been overridden too, and you need to instead click on the back button.
Doing this kind of stuff might be just about acceptable in a web app. But this isn't an app. It's a document. And they've managed to break the only two things that matter for a document. I need to be able to read it, and I need to be able to navigate it.
The animations are choppy to a distracting level on Chrome 22 running on a reasonably beefy desktop machine.
The font size is unreadably small, and due to the three column layout it doesn't degrade well when zoomed. It'd be merely crappy if zooming required vertical scrolling. It's disabling all methods of vertical scrolling entirely that really make this design special.
It replaces normal page navigation with a custom version, which is already bad. They then compound that error by mapping that custom navigation to the wrong keys. An example: maybe you'd like to check one of the footnotes they have. In a sensible design those would be hyperlinks, but for whatever reason that wasn't done. Ok, so I guess you need to go to the end of the document to see the footnotes. Wouldn't still be too bad, but they forgot to map the "End" key. So the only way to get to the end of the document is with the slider. And after doing that, how do you return to the original position? Well, I'd expect to be able to do Alt-Left for that. Except that this keybinding has been overridden too, and you need to instead click on the back button.
Doing this kind of stuff might be just about acceptable in a web app. But this isn't an app. It's a document. And they've managed to break the only two things that matter for a document. I need to be able to read it, and I need to be able to navigate it.
FYI, the animations look great to me in Chrome 22 on a year-old Dell laptop. The font size is smaller than I would have used, but I wouldn't describe it as "unreadable".
There are some other big problems, though. They've obviously never heard of Unobtrusive Javascript[1]. Try opening the site without Javascript. And the HTML/CSS is garbage. What a joke.
[1]: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
There are some other big problems, though. They've obviously never heard of Unobtrusive Javascript[1]. Try opening the site without Javascript. And the HTML/CSS is garbage. What a joke.
[1]: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
My vision isn't very good. The text becomes comfortable to read at around 175%-200% zoom level. The default size is so far outside that range that I have no qualms about describing it as unreadable, even if it's not literally true and I could read it with sufficient concentration.
Just to be clear, I don't think the problem is the tiny font size as such. It's the tiny size combined with gratuitously unscrollable and unscalable layout. It's a similar problem to many default themes for blogs disabling zooming on mobile browsers for no good reason. This got so bad that the Android browser sprouted an accessibility option to force zooming to always be enabled.
Just to be clear, I don't think the problem is the tiny font size as such. It's the tiny size combined with gratuitously unscrollable and unscalable layout. It's a similar problem to many default themes for blogs disabling zooming on mobile browsers for no good reason. This got so bad that the Android browser sprouted an accessibility option to force zooming to always be enabled.
I'm using Chrome 22 on a 2 year-old MBP, and it works fine. The only complaint I have is that it breaks the back button, which Google is usually pretty good about. All told, it's a slick bit of CSS/JS that looks like a native PP slide deck, but with more functionality.
When I try to read the text in the upper left, I keep getting distracted by animated numbers falling into the bottom right.
"Please update your browser and come back to visit us."
Try selecting some text. :)
It looks, feels and reads like someone used a PowerPoint to HTML5 converter to make that site,and as others pointed out, seems to have issues supporting browsers.
> the buzzword-laden "content".
People who use "embrace" for more than 2 times in the first 4-5 slides should be sent to shoveling coal. The same goes for "value proposition".
People who use "embrace" for more than 2 times in the first 4-5 slides should be sent to shoveling coal. The same goes for "value proposition".
[deleted]
A tip for anyone trying to view this on a smartphone:
If I load the page on my Android phone with the stock gingerbread browser in portrait, I get what I can only guess is the desktop page. If I load it in landscape, I get the tablet page asking me to rotate to landscape. If you then rotate back to portrait and refresh, you may be lucky enough to get the mobile phone page. It may also be completely random.
Ironic how difficult it is to load this content on a mobile device.
If I load the page on my Android phone with the stock gingerbread browser in portrait, I get what I can only guess is the desktop page. If I load it in landscape, I get the tablet page asking me to rotate to landscape. If you then rotate back to portrait and refresh, you may be lucky enough to get the mobile phone page. It may also be completely random.
Ironic how difficult it is to load this content on a mobile device.
Weird. The phone version looks fine in the Android browser or Chrome here, but my phone is on ICS.
Get this message on the latest version of Opera.
>Greetings, Mobile Champion!
>We noticed that you're using an unsupported browser. But have no fear, you can view themobileplaybook.com from the latest versions of Chrome, Internet Explorer, Firefox, or Safari. Please update your browser and come back to visit us.
>Alternatively, we suggest checking out the site from your tablet if you have one or from your smartphone device.
What galls me about these messages is the insinuation to the Opera users that their browser is somehow outdated and that we need to update or upgrade it. If you can't be assed to test on Opera at least change the message to asking to use a different browser, not to "upgrade" to one.
>Greetings, Mobile Champion!
>We noticed that you're using an unsupported browser. But have no fear, you can view themobileplaybook.com from the latest versions of Chrome, Internet Explorer, Firefox, or Safari. Please update your browser and come back to visit us.
>Alternatively, we suggest checking out the site from your tablet if you have one or from your smartphone device.
What galls me about these messages is the insinuation to the Opera users that their browser is somehow outdated and that we need to update or upgrade it. If you can't be assed to test on Opera at least change the message to asking to use a different browser, not to "upgrade" to one.
Oh, that's hilarious. https://www.google.com/search?q=themobileplaybook.com shows that same "greeting" as a preview, and the cached version is completely blank (because there's no content in their markup, just scripted crap). It just goes to show that if such anti-semantic authoring were the norm, Google's search engine wouldn't even exist. Talk about pulling the ladder up behind you....
Look, if you use Opera then that's awesome. You have your reasons. It's got a lot of users, and that's also great.
But developers reasonably make decisions about which browsers to optimize for and which ones NOT to optimize for. They're not insulting you for your browser choice: they're just being reasonable about how they spend their time.
We should always be open to new things so I won't sit here and say "you should just use Chrome because it's awesome and incredibly fast", and if they're differentiated enough they'll become standards everyone supports. Opera is not. And you're not a martyr.
But developers reasonably make decisions about which browsers to optimize for and which ones NOT to optimize for. They're not insulting you for your browser choice: they're just being reasonable about how they spend their time.
We should always be open to new things so I won't sit here and say "you should just use Chrome because it's awesome and incredibly fast", and if they're differentiated enough they'll become standards everyone supports. Opera is not. And you're not a martyr.
First, it's Google we're talking about here, not some cash starved startup.
Second, you seem to have not completely read my post. It was more about the "update" and "upgrade" language. How would people on Linux feel if they tried to download a program and and it told them to "upgrade" to Windows to get it working?
>"We should always be open to new things so I won't sit here and say "you should just use Chrome because it's awesome and incredibly fast"
You should try Opera, it is awesome and incredibly fast :)
>and if they're differentiated enough they'll become standards everyone supports. Opera is not.
What is not differentiated enough and Opera is not what?
Opera is pretty good at following standards, it's no IE for sure.
Again, it's okay if web developers don't have the time to test and support Opera, just don't tell its users to update or upgrade to other browsers. Even "Best viewed in Internet Explorer" is less condescending We didn't get rid of that and Flash to end up back again in this browser sniffing mess.
Second, you seem to have not completely read my post. It was more about the "update" and "upgrade" language. How would people on Linux feel if they tried to download a program and and it told them to "upgrade" to Windows to get it working?
>"We should always be open to new things so I won't sit here and say "you should just use Chrome because it's awesome and incredibly fast"
You should try Opera, it is awesome and incredibly fast :)
>and if they're differentiated enough they'll become standards everyone supports. Opera is not.
What is not differentiated enough and Opera is not what?
Opera is pretty good at following standards, it's no IE for sure.
Again, it's okay if web developers don't have the time to test and support Opera, just don't tell its users to update or upgrade to other browsers. Even "Best viewed in Internet Explorer" is less condescending We didn't get rid of that and Flash to end up back again in this browser sniffing mess.
I use Opera on slow connections, huge fan. Chrome before Chrome in my opinion (but now we have Chrome so.....)
But yeah "best viewed on Internet Explorer" is always a treat isn't it! The word "update" was probably a little weak.
But yeah "best viewed on Internet Explorer" is always a treat isn't it! The word "update" was probably a little weak.
I suggest the community downvote comments like this. I'd like to see a published community guideline encouraging people to not make meta comments. The vast majority of readers don't use Opera, and a personal quest to see Opera treated as a first class browser doesn't belong in this thread.
This is a cheap and easy way to score points.
This is a cheap and easy way to score points.
We're here to either discuss the site design or the content. Seeing as the content is marketing speak apparently targeted at executives I think we're here to discuss the design. A design that excludes Opera is an interesting topic because we're supposed to be living in a standards compliant paradise nowadays.
This is incorrect in Asia - the fastest growing mobile market in the world. Opera is very, very big in India - it also comes preinstalled in many dumbphones.
http://www.quirksmode.org/blog/archives/2012/07/q1_and_2_201...
On a personal note, I do want to mention that your comment leans a bit too much towards dogma. I dont want to start a flamewar (and go offtopic), but please have a downvote cookie.
Returning to on-topic, I am able to use the site fine with Opera Mobile on Gingerbread.
http://www.quirksmode.org/blog/archives/2012/07/q1_and_2_201...
On a personal note, I do want to mention that your comment leans a bit too much towards dogma. I dont want to start a flamewar (and go offtopic), but please have a downvote cookie.
Returning to on-topic, I am able to use the site fine with Opera Mobile on Gingerbread.
Opera is by far one of the best browsers for Android in my opinion. Firefox frustrated me considerably as every time I horizontally scrolled I would open a side bar for managing favourites sites / tabs. This may have been changed in newer versions of firefox for the Android unfortunately I can't run it as Firefox consistently crashes on CM10 (not sure if this is a bug on Firefox's behalf or CM 10)
(edit)I have a feeling quite a few people probably use Opera browser on their handsets...
(edit)I have a feeling quite a few people probably use Opera browser on their handsets...
The irony that you would talk about opera in response to my comment is staggering.
Forgive me, I fail to see the irony in talking about Opera in response to a comment regarding the Opera browser....
What would've happened to Chrome if every website treated it like they're treating Opera now from the beginning?
WHEN THEY TAKE OPERA THEY WILL TAKE YOUR FIREFOX
Additionally, this new trend of testing for browser strings deserves our scrutiny.
Additionally, this new trend of testing for browser strings deserves our scrutiny.
I wish it was new, but the UA has been abused pretty much since we have the web. See http://webaim.org/blog/user-agent-string-history/
Other commenters have said this as well, but I think this Mobile Playbook site is amazingly cool and kudos to the developers who put this together. Disappointed that the top HN comment right now is a complaint about Opera not being supported.
Same here, so I switched over to Chrome (Canary) and got exactly the same error. This is why UI sniffing is such a bad idea.
Hilarious - I just noticed the same issue, and then found this thread... Opera has been the best for power browsers since before I remember... some people just don't get it!
edit. After additional reading, I see the larger issue... Opera users are more like behind-the-scenes admins - we aren't really in the consumer/end-user category, and for this we just need to deal with some hardships like not being included in browser compatibility lists for all sites... that's a fact I'm OK with now. Cheers!
edit. After additional reading, I see the larger issue... Opera users are more like behind-the-scenes admins - we aren't really in the consumer/end-user category, and for this we just need to deal with some hardships like not being included in browser compatibility lists for all sites... that's a fact I'm OK with now. Cheers!
What's even funnier is that it doesn't block the PS Vita browser like that, but then the actual page it loads is completely broken.
The PS Vita browser is an oldish Webkit build with JS 1.7, half-implemented HTML5, and a handful of features disabled. Its user agent is something like "Mozilla/5.0 (Playstation Vita 1.50) AppleWebKit/531.22.8 (KHTML, like Gecko) Silk/3.2", and it probably advertises a feature set close to Chrome builds from about a year ago.
I'm not too surprised that it doesn't support this gimmicky site, nor that it slipped through the feature/agent sniffing.
I'm not too surprised that it doesn't support this gimmicky site, nor that it slipped through the feature/agent sniffing.
I don't use Opera. But based on your C&P of the message, I don't see the word "upgrade" used anywhere. The message reads please update your browser.
The URL has /upgrade/ at the end. http://www.themobileplaybook.com/en-us/upgrade/
Interesting that the tablet on the lower left is an iPad.
Uh, no it isn't. I guess you buy into the belief that Apple has trademarked the black square with a screen tablet.
Actually, it's not just any tablet.. It's actually an iPad with safari browser open. Look at the image without the overlay (http://www.themobileplaybook.com/assets/images/cover_tablet....)
The page transition is jarring in Chrome.
This would appear to infringe on RIM's Playbook trademark: http://tess2.uspto.gov/bin/showfield?f=doc&state=4001:25...
LOL. People have been using The ____ Playbook for years.
Checking the USPTO web site, it shows the "Blackberry Playbook" and "Playbook" applications as being "status: suspended". Did they even manage to get the US trademark on that?
Checking the USPTO web site, it shows the "Blackberry Playbook" and "Playbook" applications as being "status: suspended". Did they even manage to get the US trademark on that?
And yet their presentation do not work on standard ICS browser :)) Getting "Greetings, Mobile Champion!...." message.
The android browser is, in general, terrible. Google has partially redeemed themselves by shipping chrome as the default on JB, but right now android is the thing holding back the mobile web.
Unfortunately, Jelly Bean doesn't use Chrome for internal webviews. I'm playing around with a Phonegap wrapped HTML5 app and I'm blown away by how much better iOS Safari is. I though Google were supposed to be the web guys?
In the Fireside chat at I/O they said that the JB webview was entirely Chromium based and at parity with Chrome at the time, but would not be updated on Chrome's release cycle.
Apparently, BlackBerry 10's browser for HTML5 based apps is going to blow both of them away.
I'm not sure how it's going to blow safari away. Safari is roughly equivalent to the current state of the art in desktop browsers (the only glaring omission I can think of is indexedDB). If BB10 goes beyond that, it's going to be unusable anyways because it's all going to be BB specific.
HTML5test.com says you're wrong.
http://html5test.com/compare/browser/bb10/chromecanary/safar...
http://html5test.com/compare/browser/bb10/chromecanary/safar...
Safari could be doing more in allowing webapps to function like native ones- it has the full screen, add to home functionality, but it's not well understood or known. There's no way to register protocols to launch a full screen web app, and a series of hacks are required to stop the entire app doing the elastic "bounce" when you scroll the wrong way.
Safari is good, but it could be a lot better. But I'd expect Google to be leading this charge, not Apple. But Android has basically zero integration options for webapps.
Safari is good, but it could be a lot better. But I'd expect Google to be leading this charge, not Apple. But Android has basically zero integration options for webapps.
It doesn't matter. This presentation not for devs, but for managers to convince them to invest into mobile technology and yet Google do not tries to do that just right there. That what was surprising for me.
[deleted]
It won't load without JS enabled. Plus it is very buggy when it does load on up to date browsers. Google's JS has been getting buggy this past few months. Even Gmail, which was rock solid.
Goog does a good job illustrating just how "different" mobile is.
In our experience at ConversionVoodoo.com over the past couple of years a properly mobile optimized site for a direct-response style business is a difference of 2x, for traditional ecommerce it's 1.5x, for content it's as much as 3x!
In other words make absolutely, positively sure that mobile optimization becomes an organizational priority if you're seeing more than 15% mobile traffic.
In our experience at ConversionVoodoo.com over the past couple of years a properly mobile optimized site for a direct-response style business is a difference of 2x, for traditional ecommerce it's 1.5x, for content it's as much as 3x!
In other words make absolutely, positively sure that mobile optimization becomes an organizational priority if you're seeing more than 15% mobile traffic.
Their mobile site tester[1] is doesn't do much. All is does is show one page of the website you entered in a mobile browser then it asks you if it showed up correctly. The report is pretty much some canned messages about how to improve a mobile website. Maybe I'm expecting too much but after the effort that they put into the presentation I hoped for a little bit more out the mobile site "tester."
1 - http://www.howtogomo.com/en/d/test-your-site/
1 - http://www.howtogomo.com/en/d/test-your-site/
Just because I was curious, I looked up some mobile site testers. These do a much better job than the Google one:
http://validator.w3.org/mobile/
http://mobiready.com
An excellent campaign from the champion Google. If I were an entrepreneur, I would suck it all up.
hilarious.
I first followed the link to this presentation on my iPad 3rd generation. It actually provided a pretty decent experience in that form factor. That said using this site in Google Chrome 22 does suck. Apparently the app designers don't yet understand responsive design / progressive enhancement. Yes it's hard, but I'd expect a presentation such as this to show how to do all the right things.
Read something really simple, informative, and beautiful created by Google. Go to Hacker News to read people bitch about how they'd have done it differently and better.
The information was displayed and curated extremely well and the UI was perfect to me. Like reading a book: nothing to mess around with, just turn the pages.
On some browsers was it messy? That's web dev y'all. We always assume everything large companies publish will be perfect and cross-everything optimized, but being big doesn't mean the process for creating creative work is any different.
Fine with the bitching, good to see the issues people have (best kind of education) but can't we all at least be happy with having all these great statistics in one highly credible place?
On some browsers was it messy? That's web dev y'all. We always assume everything large companies publish will be perfect and cross-everything optimized, but being big doesn't mean the process for creating creative work is any different.
Fine with the bitching, good to see the issues people have (best kind of education) but can't we all at least be happy with having all these great statistics in one highly credible place?
It's not simple, it's so absurdly overcomplicated and obsessed with one of many possible renderings that they've made the content inaccessible to most browsers we've ever had, apparently including the default browser on most Android phones (ICS didn't bundle Chrome). Their own search engine can't preview or cache it properly. They should regard widespread authoring like this as an existential threat to the web of openly interoperable hypertext and discourage it however they can.
"Inaccessible to most browsers we've ever had" does not move me. What about most browsers the likely readers are using now? That's what moves me.
It's beautiful but I can't stand the page transition animation. It's too slow to the point of annoying - I had to force my eyes to look away from the transition, away from the screen, as otherwise my eyes would try to focus on the blurry moving text which 1) hurts my brain to focus at, 2) disrupts my train of thought as it disturbs my focus (both mentally and physically).
How I wish that tablets provides a way to do the same thing that page up/page down does with just a tap. I found swiping up/down for jumping to the next/previous page distracting for exactly the reason I stated above that I put a bookmarklet on my tablet browser to do the page up/page down when I single tap on a non-html-linkified entity.
How I wish that tablets provides a way to do the same thing that page up/page down does with just a tap. I found swiping up/down for jumping to the next/previous page distracting for exactly the reason I stated above that I put a bookmarklet on my tablet browser to do the page up/page down when I single tap on a non-html-linkified entity.
It doesn't block page transitions on all of the assets on the next page loading. I click the next button and get to wait 30 seconds while all the images show up.
Honestly this is exactly the type of site design we should be moving away from. Fully scripted, so can't be search engine indexed or read without scripting, doesn't even work on many browsers, takes longer to load because of the way the pages are designed, multiple columns so hard to zoom in if the text is too small on your screen, breaks the back button, and so on. This is nothing but a text based presentation, why not keep the page simple, without any extras, and let me read it like a normal web page?
I opened the source, and whole text is there, so at least it can be indexed.
On the main page (viewed from PC) they advertise a nice-looking tablet version, yet on my ASUS tablet with Android 4.1 and Chrome as a browser, I get the crappy mobile version of the site. Interesting.
It's nice and pretty.
Now on an ipad3 it's slightly laggy. Transitions are slightly slow, and every interface element feels a bit "almost there" in term of responsivness.
Then, downloading the pdf and viewing the same content in a native viewer is liberatingly smooth, fast, responsive, albeit without the animations and custom controls.
This demo seems very apropriate to experience the gap between "html5 and JS everything" and "single purposed and optimised" presentation formats.
Now on an ipad3 it's slightly laggy. Transitions are slightly slow, and every interface element feels a bit "almost there" in term of responsivness.
Then, downloading the pdf and viewing the same content in a native viewer is liberatingly smooth, fast, responsive, albeit without the animations and custom controls.
This demo seems very apropriate to experience the gap between "html5 and JS everything" and "single purposed and optimised" presentation formats.
if (isNexus7 == true) { istablet = false; }