Posted
by
Roblimo
on Tuesday July 08, 2014 @03:41PM
from the still-working-on-making-website-standards-after-all-these-years dept.

This interview with Googler Pete LePage took place at Google I/O 2014, where Pete and coworker Matt Gaunt set up a Device Lab with 46 different devices on their display wall. The point wasn't to show off Google's coolness as much as it was to let developers see how their websites displayed on as wide a range of mobile devices as possible. This is reminiscent of the last century's Any Browser campaign, which was set up to encourage developers to make sites that worked right in any browser instead of having a WWW full of sites "best viewed in Exploroscape" that displayed poorly in other browsers.

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.

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.