Video All Web Developers Should Have Access to a Device Lab (Video) 60
Today, the trick is to make a site that is fully functional across a wide range of devices with different size screens that a user might decide to view in landscape mode one day and portrait mode the next. Google is happy to share their MiniMobileDeviceLab with you to help set up multi-unit displays. Pete also suggests checking out PageSpeed Insights and Web Fundamentals even if you're a skilled and experienced Web designer, because those two Google sites are chock full of information on how to make sure your site works right on most devices and in most popular browsers. (Alternate Video Link)
Tim: First of all, what is Device Lab?
Interviewee: Well, the Device Lab is something that we wanted to be able to give developers an idea of what their websites would look like across the modern multi-device web. Developers and users are surfing the web not just on desktops and tablets and phones but they’re also using things like TVs. We have Android TV here at Google I/O. So there’s tons of different devices that people might be using and surfing the web on. We want developers to be able to go, “Wow! my site looks amazing”, “I’m really happy that my site looks great”, or “Well, my site maybe needs a little work.” Responsive design is really one of the coolest things that enable sites to work across all these different devices. So we want developers to go start building more responsive websites.
Right now, we’ve got the Google site up which is not exactly the most exciting example of this—but can we pull up any site, Matt? Matt helped me work on this site, he helped build a lot of the infrastructure for this. This is something that really any company which has more than 10 people should be installing in their offices, if they’re doing mobile, web or web development. We use a native Android app that listens for a Google cloud message with a URL. It then fires an Android intent to go ahead and open the URL—it turns out Matt just pushed one—and this is a site that might be a little bit familiar to you. So let’s take a look at how this site looks across all these different devices. On the desktop we’re all pretty familiar with how this looks. It looks about like we expect it to. But as I start looking at some of the devices here, like in Nexus 7—I love this that I’ve got—a quick, easy way to see all my content. I see right off the bat a great article here I can start scrolling through. I see a few ads here and there, I expect to see that kind of things. In this particular case, a nice small logo, we’re not taking up a ton of space. We saw some sites today that they have logos that took up at least like the top quarter of the page, which they don’t think about how that’s going to look.
And here we’ve got easy ways to be able to get into things. We want to be able to sayoh, let’s see if we can—there we go—it’s got a little that’s stuck there. Some sites we’ve come across seem to get really stuck on things. So maybe there is something going on with some scroll events, some scroll handlers. What’s happening? The browser is grabbing those scroll-up events and it’s preventing things from happening. So anytime you’ve got a site that’s doing any kind of scroll stuff, that’s usually a pretty bad sign.
Let’s see what else do we have with this. Overall, the stuff is pretty good—an easy, quick way to log in. The one thing that I’ll say on this one, on Nexus 10 held in vertical mode, this text is a little small. If I’m going to go through and try and pick out or read this, holding this I’m going to have to bring it in a little bit closer. Or Pinch to Zoom. Oh, actually I can’t Pinch to Zoom on this. This is something that we discourage. If you’ve disabled Pinch to Zoom, it means: If that text is too small I can’t read it. Now if I have okay vision, I can read that. But imagine someone who maybe needs bifocals, or somebody who has a harder time reading that—if they may not be able to read that, they’re gone. They’re out of your site, they’re done—it’s over.
So Pinch to Zoom is something that’s important to leave on. So there we go. We got it here for some reason, but we don’t seem to have it on – okay, maybe something is grabbing that Pinch to Zoom. So it is an easy thing to go look at, figure out what’s going on. But otherwise the text is looking reasonable size. The one that I’ve seen on lot of these devices, is when people have their phone in landscape mode—hey, you know what? You’re taking up three quarters of the page before I can actually see any content. I’d like to have something if you’re going to go into that landscape. So do a media query that says this width, orientation, landscape, and make things a little bit smaller so I can get into my content more quickly.
Tim: Now what does it take—on this wall, I think you have 43 Android devices and then 3 iOS?
Interviewee: Yeah, we’ve got...
Tim: Why does it take so many to really get a good handle on how your website looks?
Interviewee: Well, we wanted to make sure that there were lots of different devices and in different orientations. Because you’ve got landscape, portrait—you’ve got devices that are a little bit older. So this one is running an older version of Android, and is running Chrome 18. Not everybody always remembers to update their device. Probably a lot of the folks who are watching right now are always running the latest versions. But think about your family members—the folks when it is a holiday, and you get to go home and visit the family, and you spent how many hours updating everybody’s computer— that’s so much fun!
Tim: That’s what drives the modern economy, I think.
Interviewee: You know what? It really does. So it’s an opportunity to be able to say, “How does this look on different things?”All of these devices have different viewport sizes. I really like this LG, but it’s held in a different orientation than the Nexus 7, even though it’s about the same size. And we’ve come across a bunch of sites that seem to work a little bit oddly—one site that we saw earlier today cut off a whole bunch of text on the right hand side. They prevented scrolling and Pinch to Zoom—you couldn’t see it—it blocked everything out.
Tim: Are there common programming errors that you think are the most common low-hanging fruit that you’d advise people to pay attention to?
Interviewee: Any time a developer asks, “How does my site look? How does my site behave? I’m looking for some tips” the easiest thing I tell them is, go to Page Speed Insights. Go to developers.google.com/ I think it’s page/speedor search for Page Speed Insights and it will come up. You enter your URL in there and it’ll give you the best tips on how you can improve the performance. It’ll give you a score out of 100. Anything over about 80 is really good. On average, this week we’ve seen about an average of about 50, 55. So there’s definitely lots of room for improvement.
Tim: One thing I heard you say earlier today was that images probably should be cached for more than just a few hours.
Interviewee: Absolutely. The common things that we’ve seen this week are people who don’t turn on GZIP compression on their servers—they just forget to turn it on. It’s been supported by every browser since the dawn, almost the dawn of time. Being sure that you’re caching all of your static resources for a reasonable length of time. Things should be cached for at least a year if it’s not going to change. So setting a good long caching period on it. And then the other thing that we’ve seen a lot of today is folks who are going in and they’re not setting they are including all of their JavaScript in their head and all of their CSS in the head. Now it’s okay to put some JavaScript and some CSS in the head, but realistically you don’t need to put everything in there. All of that JavaScript blocks rendering from happening. So if all of your JavaScript is in the top, nothing is going to get rendered until all of that gets pulled down and executed.
Tim: Let’s ask one more thing: Most of these devices are small, they’re hand held.
Interviewee: Yeah.
Tim: But the elephant in the room is this, I’m not sure whether is a 50, 50 some inch television here?
Interviewee: Yeah, so this is a 55” TV that we’ve got set up here, running on a Chromebox. So it gives you an idea of what the desktop experience is like, but we’ve also got an Android TV here. One of the things that really struck me this week with the television experience is, notice that the TV has overscan turned on. We’ve tried to turn it off and we have turned it off a few times, but for whatever reason the TV just keeps kicking back in every time we turn it back on. That means, if you’re developing anything to work on the TV and you’ve got an experience there, you’re going to lose 20, 30, 40 pixels around all your edges. So it means that—one restaurant we looked was called Jopa instead of Nopa. So if we lose a bit of the text it makes things a little bit more awkward.
Tim: Any other parting words that people should keep in mind?
Interviewee: Go check our Page Speed Insights. If you’re really a web developer today, and want to get started doing stuff that works across the multi-device web, go check out web fundamentals at developers.google.com/web/fundamentals—it’s a great resource, a ton of content there to get you going. Whether you are just getting started, or an experienced developer.
Tim: And a lot of people may not have just have room on the wall for quite these many.
Interviewee: Yeah. Unfortunately, not everybody can have 46 devices on the wall, but it’s a great opportunity to see how things look.
Thats great and all... (Score:1)
but people can't be bothered or don't have the budget to make apps compatble with anything other than latest {pick a browser}. What happens when hypothetical boss (*cough*) says "Everything else is unsupported, tough luck".
Re: (Score:1)
What happens when hypothetical boss (*cough*) says "Everything else is unsupported, tough luck".
They lose money.
I went to Honda's web site a while back on my Android tablet to see what their new car prices were like. Whereas many auto manufacturers are sane enough to just have plain HTML+JS in their sites, Honda decided to use Flash. The Flash app downloads, and then says something along the lines of 'an error occurred.'
Works on iPad, because the site switches to.. guess what... plain HTML+JS. Doesn't work on the most popular mobile OS, unless they've fixed it since. Doesn't have an option to say 'scr
Fragmentation (Score:1)
There are less polite terms I want to use instead of "forget 'em."
Here's a free car analogy: scalable websites are like CAFE-required design elements on modern cars. Everything looks the same and ends up less efficient than it could be.
Re: (Score:2)
When you dictate the how and not just the what, you are correct that often "everything looks the same and ends up less efficient than it could be."
Re: (Score:3, Insightful)
Re: (Score:2)
There are less polite terms I want to use instead of "forget 'em."
Here's a free car analogy: scalable websites are like CAFE-required design elements on modern cars. Everything looks the same and ends up less efficient than it could be.
This. And for the ultimate example, I give you Metro. Let's have the same interface across all platforms, and since mobile devices can't do the more efficient input methods, we will instead dumb down the desktop so that it uses the inefficient input methods.
Don't Bother (Score:2, Insightful)
Why would we want more websites on mobile devices? The experience sucks! Are we just trying to justify web developers now?
the outsourcing / IT / PHB can't pay for that (Score:2)
the outsourcing / IT / PHB can't pay for that.
and what about PHB driven IT rules that you need bypass just in some cases to have some then other then IE (hope it's not some old build) much less an mac, some non windows XP or 7 system.
and (Score:5, Informative)
everybody sjould have above average income, and only use renewable sources of energy.
Meanwhile in the real world...
Re: (Score:2)
and give everyone a pony
you lying bro (Score:2, Funny)
Yes it was.
With mobile at less than 1%.... (Score:1)
of the traffic on my company's ~250 different web sites, there's no way I could get a single device approved, much less 46! The article is unrealistic. When mobile traffic one day counts for more than a tiny fraction of a percentage of the traffic, then companies will start to invest in making the web sites work on mobile. As it stands today, I have almost ten times as many people still using IE6 so my time is better spent on IE6 compatibility than on mobile.
Re: (Score:1)
my time is better spent on IE6 compatibility than on mobile
and you wonder why none of your users attempt to use mobile?
Hangouts only works on Chrome (Score:4, Interesting)
This is coming from the company that recently decided that Hangouts only works in their Chrome browser.
Re: (Score:2)
This is coming from the company that recently decided that Hangouts only works in their Chrome browser.
According to this help section on Google Hangout, this is not currently true [google.com].
You say this is a "recent" decision, so I may have missed it. Please give us a citation.
Re: (Score:2)
This is coming from the company that recently decided that Hangouts only works in their Chrome browser.
According to this help section on Google Hangout, this is not currently true [google.com].
You say this is a "recent" decision, so I may have missed it. Please give us a citation.
Looks like you're right. Although, today, when I tried to install it in firefox (version 29), I got this error message [imgur.com], which told me that I needed to download Chrome (it did NOT tell me that my browser was too old).
So I stand corrected, I apologize, but I do cast some of that blame onto their own error message.
Re: (Score:1)
Hangouts (and by extension the Helpouts service since it uses Hangouts) works just fine in FireFox.
Source: I'm a Helpouts service provider. I use FF, not Chrome.
Re: (Score:2)
Hangouts (and by extension the Helpouts service since it uses Hangouts) works just fine in FireFox.
Source: I'm a Helpouts service provider. I use FF, not Chrome.
See my statement above. I apologize for spreading false information, but I DID get that false information from an error message on Google's web page.
Virtual machines (Score:2, Interesting)
What exactly is the point of spending so much money on hardware when you could run >40 virtual machines emulating different Android devices?
Re: (Score:2)
What exactly is the point of spending so much money on hardware when you could run >40 virtual machines emulating different Android devices?
Most companies producing devices with browsers are pretty ass about providing working simulators/emulators for the hardware.
This is OK for one company, like Google or Roxio, to deal with supporting a lot of platforms with all sorts of physical differences from there being no hardware standard for Android devices to which vendors have to adhere, but ... it's not going to address the underlying problem, just because you can make the render device variant with less effort.
Re: (Score:2)
Because emulators do not properly emulate some issues. Keep in mind, most of the time the host is... x86, but the end point being emulated is ARM.
Re: (Score:2)
Re: (Score:2)
a 2Ghz cpu emulating a 1Mhz cpu with amazing accuracy doesn't mean a 2Ghz cpu can emulate a 2Ghz cpu with amazing accuracy.
Re: (Score:2)
What issues? Elaborate.
Especially in a context of a 'device lab' whose main purpose is testing responsive design of web pages.
Re: (Score:2)
http://jakewharton.com/android... [jakewharton.com]
It looks more eye candy than useful to me (Score:2)
- It sits high on a wall in some common area, far from the cubicle of anyone who would want to use the thing for actual testing
- Many of devices are mounted so high you wouldn't even see them without a stepstool let alone be able to interact with them (see hilarious video http://tv.slashdot.org/video/?... [slashdot.org])
- Almost all the devices are Google Play edition devices or Nexus devices and they're all using Chrome for testing, none using stock Browser or Firefox or Dolphin or any other browser. Hardly a good cross
Same problem at Wikipedia (Score:2)
I am part of the Wikipedia Zero initiative, and we need to ensure that http://m.wikipedia.org/ [wikipedia.org] runs on ALL platforms, including the mostly forgotten flip phones with no JavaScript. Which obviously presents the problem of testing. There are some sites (we have an account with one of them) that provides multi-platform testing, but all that means is multiple flavors of Android & IOS... with possibly the latest BB thrown in. Unfortunately, the bigger problem is the older devices, where capabilities were muc
All web devs shouldn't *need* a device lab (Score:2)
Re: (Score:2)
This.
Fuck the device, the browser should behave properly. If it doesn't, too fucking bad.
I am so fucking sick of the Android browser deciding I should or should not be able to zoom on certain pages, deciding to reflow content based on my orientation, etc.
And i absolutely fucking hate sites that do not respect my preference of seeing the real site instead of the shitty mobile version.
Re:All web devs shouldn't *need* a device lab (Score:4, Informative)
Here's another idea. How about we create a whole new format which separates content from presentation, and then the display program can figure out the best way to display it on that device.
We could call the format, I don't know, 'HTML'? And the display program, hmm, maybe a 'web browser'?
Oh, crap. We tried that, and then the developers decided they just MUST be able to specify exaclty where everything is displayed on the screen, which is why they're now having to rebuild all their sites to work on mobile devices.
Good way to ensure job security, I guess.
Re: (Score:2)
While I was going through this video to add titles and intro/outro music etc., then writing the text intro, I kept thinking about the anybrowser movement and the guy I first heard about it from, Jeffrey Zeldman - http://www.zeldman.com/ [zeldman.com]
I think I'll do an interview with him. He is like the original godfather of web design, and a great guy in general.
Re: (Score:1)
No. Designers, artists, and managers decided that everything must look exactly how they pictured it. I don't know any developers who want to tinker with browser hacks and crummy architecture in order to make a website picture perfect. I wish more of us would grow a pair and say 'no' more often.
Responsive Design Mode (Score:2)
Every modern desktop browser has a way to view responsive design easily so you don't need a wall full of screens of different sizes and orientations, all you really need is a few mobile devices running various OS versions and a PC full of VM's so that you can catch platform specific bugs.
Re: (Score:2)
That wall of screen was a tradeshow display -- by Google, of course. But check this link (it's in the intro text) again: https://groups.google.com/foru... [google.com]
The idea isn't that every Web designer in the world should have his or her own wall of screens, but that you and other people who make sites and games and such might collaborate on setting up a group of displays that includes some of the most popular OSes, browsers, and device form factors.
I have always been shocked at how many people who make websites des
Re: (Score:2)
The idea isn't that every Web designer in the world should have his or her own wall of screens, but that you and other people who make sites and games and such might collaborate on setting up a group of displays that includes some of the most popular OSes, browsers, and device form factors.
I did not even imply anything about it being a personal collection. My point was that most of the layout specific problems can be easily seen without ever touching a device beyond your work PC. Mobile app devs need device labs way more than web devs do but this article is targeted at web devs not app devs.
Only if the PC is made by Apple (Score:2)
Re: (Score:2)
Re: (Score:2)
Access, YES. Buy devices, NO. (Score:1)
Re: (Score:1)