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