Android Design in Action: Responsive Design

ROMAN NURIK: Hello, and welcome to
Android Design in Action.
My name is Roman Nurik, With me here today is--
ADAM KOCH: Hi guys, Adam Koch.
And over in London--
NICK BUTCHER: Hi, Nick Butcher.
ROMAN NURIK: So today, unlike most days on the show--
most Tuesdays on the show-- we're not actually going to be
talking about redesigns.
So for those of you who have never seen this show, we
usually take a look at apps that have been nominated--
usually the developer nominates themselves--
and take a look at how we can reimagine some of the screens
in those apps to fit better with Android styling, and just
be a better experience for users overall.
And then we take that, and we pass it off to developers and
see if they like it.
And if they do, then sometimes they make the changes.
And sometimes, they don't.
And for those of you who have been watching, basically,
developers can come back on Thursday and let us know what
they think of the show.
And that's the Developer Strikes Back, where developers
strike back show.
This week, however, we're not doing any of that.
Because of the massive technical failures that
plagued the guys in Mountain View for the Friday app
clinic, we decided to take a slightly different approach to
this episode today.
So today, we're going to be talking
about responsive design.
So let's jump into what responsive design is.
Now, for several people, this is the first time they're
hearing of the concept of responsive design.
And Ethan Marcotte--
and sorry, Ethan, if I'm mispronouncing your name--
Ethan Marcotte coined the term a few years ago in an article
that talked about responsive web design.
And basically, you can see from the quote here-- this is
from the article--
it's really about taking a website and making sure that
it scales across any medium, be it phone, tablet, browser,
different screen sizes, and pretty much any
other device type.
So taking a single layout or a single piece of content and
making sure that it scales according to its medium.
So that's responsive web design in
a super small nutshell.
So responsive web design applies to
mobile apps, as well.
And so today, we're going to be talking about responsive
design and how it applies to Android devices.
Before we jump in, Adam, Nick, any comments?
Any thoughts?
NICK BUTCHER: Yeah, as you were saying, we're focusing on
responsive design, because this week, we're having a big
focus on tablets.
We've just launched some quality guidelines on how to
make a high-quality tablet application.
And, for me, having an application which scales well
on the huge variety of devices, that is the Android
landscape, is a big, big part of that quality.
So I think this is a really important topic.
ADAM KOCH: And one quick thing I wanted to mention was I
really believe if you kind of think about these responsive
web design or responsive Android development from the
beginning of your development cycle when building Android
apps, it can help you get that tablet app or create designs
that just really make it easier to suit all different
screens out there.
So rather than just designing from the ground up, if you
just think about all these things from the beginning, it
really helps.
ROMAN NURIK: And before we jump in again, just to talk a
little bit about the format, we're not really going to be
talking about development best practices.
We do have several training sessions on
developer.android.com on how to actually
implement these concepts.
But what we will do is we will look into existing apps that
are out there and see how they treat or how they implement
these responsive designs, how they kind of scale fluidly
across the different device types.
So let's jump in.
First, we're going to take a look at Calendar.
So this is the built-in calendar application that
comes with many devices, like the Galaxy Nexus, the Nexus 7,
the Motorola Zoom.
And this is an example of the screen that lets you create a
new calendar entry.
So on the phone here, you see that--
and I'm going to go zoom in for a second--
on the phone, you see that you have a kind of Done, Cancel
bar at the top, which is basically replacing the Action
bar, and the different entry fields, like the Calendar,
Event Title, the Date, Time, things like that.
Pretty typical stuff.
And then on the Nexus 7, you'll see that it's switched
over into kind of a multi-column layout where on
the left column, you have the labels of the different text
entry fields.
And on the right, you have the fields themselves.
And then on the 10-inch tablet in landscape--
I'm going to zoom in here.
Sorry about that.
You'll notice that it's basically the same screen as
the screen in portrait, except it has wider margins.
So basically, they've decided that, let's make sure that the
content, the text fields never go past a pretty common
number, around 45 to 75 characters.
Let's make sure that you can never see more than that all
at once so that the line lengths aren't too long.
So to fit that constraint, let's introduce
margins along the sides.
So that's, in a gist, in a nutshell, what the Calendar
app's Create Event screen looks like.
Guys, any thoughts on other things that they've done
really well here to make sure that this is responsive?
NICK BUTCHER: I'd probably just like
to call out as well--
we talk a lot on this show about Holo, about the visual
language of Android, the Holo visual theme, and that it has
its own certain flat look and feel.
And I just wanted to call out why that-- it's not an
accident that that kind of design scheme
was chosen for Android.
And I think this set of screens here really
demonstrates how Holo helps you to create a user interface
which scales nicely by using typography and spacing
appropriately to give your application structure, which
you can clearly see in these three screens.
That there isn't a lot of Chrome subdividing boxes and
so on, text boxes and so on.
It really is the content which defines the
structure of the page.
And that really, really helps it to scale.
You haven't got lots and lots and lots of different bitmap
assets or graphical assets or gradients all over the place,
which may look strange when scaled up and wouldn't really
help you out in this field.
So I think this is one of my major takeaways from looking
at the Calendar application is how Holo really, really, helps
out this app to scale across these screen sizes.
ADAM KOCH: And one quick point for me, if you look at the
white space on the margins--
let's see, if we zoom in here.
So you can see on the phone, you've got some white space on
the left and right.
And then if you go up to the Nexus 7, you'll see there's
slightly more white space.
And then if you go across to the landscape zoom, you'll see
they've actually got more white space here that sort of
makes everything fill out the larger screen size there.
ROMAN NURIK: It's important to know that when you're creating
or defining these margins that you still stick to a grid.
And as you can see in our design guide under the Metrics
and Grids section, we have this concept of a 16-DIP grid
and a 48-DIP rhythm.
So using increments of 16 DIPs, so 32 DIP or 48 or 64,
that can still introduce structure into your layouts
without constraining you to just using very small margins.
So 32 DIPs, 48 DIPs, that's great to use for larger
devices, such as tablets.
NICK BUTCHER: Yes.
A naive implementation of this kind of screen might have just
stretched the input fields all the way across, which would
look pretty ungainly on the 10-inch.
So I think it's approaching your screen design when you're
designing an app.
And if you see something which is so barren, thinking about,
hey, how is that going to look on a much wider display, like
a 10-inch in landscape, for example, and bearing in mind
where you might want to start introducing
these margin points.
ROMAN NURIK: So let's move on to the next app.
So this will be the first third-party app
that we look at.
And this is Pattrn.
Nick, you want to talk a little bit about Pattrn?
NICK BUTCHER: Sure.
So Pattrn is a great little app for finding wallpapers for
your device.
It's by a UK developer called Lucas who works for Mozilla.
And I think they've done a great job of really making the
content adapt.
Luckily for them, they have almost a dream application for
this kind of scenario where the content-- the patterned
wallpapers--
have no kind of concept of aspect ratio or
anything like that.
They actually kind of tile, so it works really well that they
can change for different aspect ratios, which might not
be the case for some apps.
But as you can see, in the three screens we're showing
here, on the phone, they're relying on three tabs to go
through the three major views of the data.
But when they get beyond a certain point and have more
space, they actually break that out away from the tab
navigation into having this sidebar, which I think works
really well.
Rather than just stretching the content to be overly wide,
it actually gives you easier navigation, as well as
servicing more information.
So you can see there on the Nexus 7, for example, it
services recent searches.
So it's kind of one tap away.
Rather than having to tap into the search field and then get
shown the recent history, it might prompt you to click on a
recent search, which is really great.
The other thing, if you look at the difference between,
say, the phone and the 7-inch tablet, is they've actually
hinted the text size and paddings to be slightly larger
to just feel more comfortable at that certain size.
And then--
ROMAN NURIK: And it looks like-- sorry, Nick--
it looks like on a tablet, they have just a slightly
wider margin.
I don't know if it's an increment of 16 DIPs, like we
talked about, but it's definitely noticeably larger
to the left and to the right of the patterns.
NICK BUTCHER: Yeah, and then just last thing I can say,
when you step out from the 7- to the 10-inch and have even
more space available, they break out into this kind of
grid view where they show more potential wallpapers
on screen at once.
So it's kind of reimagining the content, the
representation of the content.
So it's the same content but laid out in a completely
different way to just make much better use of the space.
ROMAN NURIK: Yeah, and I just wanted to comment on one
missed opportunity.
And this is very minor, but if you look at the handset
version in landscape-- we don't have a screenshot here--
but Lucas also uses a single column for the patterns.
So since he's already got multi-column implemented, it
seems like it would be fairly trivial to switch that over to
a multi-column-- like a
two-column layout in landscape.
That might work really well.
OK.
So let's move on to the next app, unless you guys have any
more comments.
ADAM KOCH: Just one question.
I haven't actually used this app that much, but what's
under the You tab for the handset version?
[INAUDIBLE].
ROMAN NURIK: Nick--
I actually don't remember myself.

I think it was Favorites and something else.
But it was a combination of either one.
ADAM KOCH: So I guess it's just interesting to note how
they've definitely changed the structure just a little bit on
the handset version just so they can fit it into the three
standard tabs there and make it still look nice.
ROMAN NURIK: Yeah.
OK, let's move on.
So we should do a time check.
OK.
So the next app is Pocket.
And Pocket is-- actually, I think it's called Pocket,
Formerly Read it Later.
Pocket is basically a--
it's a saved list of articles.
So if you're browsing an RSS feed, and you don't want to
read it right now, you just go off and save it to Pocket.
And they have an intent that you can share to and all those
good things.
So this is kind of the main screen in Pocket that lets you
see the list of your saved articles.
So you'll see that on the phone, they have a simple list
with thumbnails on the right.
Now, when you scale that up to a 7-inch tablet, they have a
two-column grid, and if you turn that over into landscape,
you'll see that there's a three-column grid.
And you'll notice that it's completely different, but it's
the same content, right?
It's more of like a tile view rather than a simple
horizontal linear layout.
And then if you look at the 10-inch tablet, they've
basically graduated into more of a quote, unquote,
"magazine" layout, similar to how the Google Play client
application lays out the different tiles in the
featured sections.
So the interesting thing to me is that they've done a lot of
work here to tweak font sizes.
So you'll notice that the title sizes on the 10-inch
tablet are slightly larger than on the 7-inch tablet.
And then the fact that they've basically implemented this
layout three times, once as a list, another as a grid view,
which is probably a simplified version of the magazine layout
on the right.
But they also have the magazine layout, which we
don't have framework support for.
One of the things I should note is that they may have
cheated a little bit.
They may be using WebView in HTML5 and CSS3 stuff to do the
layout, which is perfectly awesome.
The only issue is that there's some minor performance
penalties--
well, maybe not minor, but there are some performance
penalties involved.
But overall, it looks just wonderful.
Yeah, so that's in a nutshell.
The other thing I wanted to mention is that they kept the
action bar the same.
And this is totally fine.
You don't necessarily have to switch the action bar and make
it taller, make things wider.
The framework actually does all those things for you.
It'll make your icon slightly wider, the action
bar slightly taller.
So it'll do all those things for you.
In this case, I think that they've probably implemented a
custom action bar, so it's not happening there.
But note that the action bar is pretty much the same across
tablet and phone, in terms of behavior and rough
proportions.
NICK BUTCHER: One of my favorite things that they've
done on here as well is that you can see on the phone and
tablet, they've prioritized the search, bringing it out
right at the top of the content view so you can search
and filter, whereas on the tablet, they have kind of
demoted that.
So less important.
I think it's under the action overflow there, which I think
is really interesting.
I think it's shown that they've thought about how
someone's going to use this application slightly
differently on a tablet, that they have the same content
available, but it's a different representation.
They're kind of designing for a different use case where
someone might have more time and might be in more of an
explorative mode.

ROMAN NURIK: Any other comments?
OK, so let's move on to--
I believe the--
oh, no, there's TED.
Talk about TED, Adam.
ADAM KOCH: Yeah, so the TED app-- hopefully, some of you
are familiar with the TED app and all of the great content,
video talks that they have.
So I like this example just because it's fairly simple.
You don't have to do anything crazy or complicated in order
to support different form factors and have it look nice
and feel nice still.
So if you look at the three different form factors that
were posted up here, you've got the handset in portrait
mode, where they have the big thumbnail at the top and then
three subtabs down at the bottom to show the different
views related to that video.
And then you move to Nexus 7, which looks fairly similar.
They've added some extra white space.
Let's just zoom in here a little bit.
They've added some extra white space, notably around the
tabs, as well, which is interesting.
But otherwise, it's fairly similar.
Extra white space, slightly bumped up font size.
And then, if you move to the landscape 10-inch--
let me zoom across here--
you'll notice that they've moved from the sort of stacked
layout of their fragments to being side by side.
But essentially, it's the same fragments.
You can clearly tell they've reused the
same fragments there.
One interesting thing for their video thumbnail here is
they've moved the title from being a transparent overlay to
beneath the actual video, because there's more room, and
they can really bring out the nice video thumbnails,
allocating a little bit more space for that.
Guys, you have any comments?
ROMAN NURIK: I just wanted to mention one thing about the
overall structure of the screen.
It reminds me of the YouTube playback screen on Android.
And I think that that's actually a good thing.
I think that users, when they buy their Android device, they
pop open YouTube, they instantly become familiar with
how it behaves.
And I'm guessing if you rotate into
landscape, it's full screen.
They're very familiar with how it behaves, kind of the tab
structure at the bottom on the phone that lets you switch
between the different pieces of detail
information about the video.
And then in tablet, they basically do something, again,
very similar to YouTube.
They pop that over to the right.
And this is almost like a natural way to do something
with the new space that you have.
But I just that added extra bit of similarity to the
YouTube app makes it instantly familiar to users.
Nick, anything else before we move on?
NICK BUTCHER: I would say they've done a great job of
playing with the spacing as well.
I think you can see that they definitely hint at the spacing
when you go from phone up to 7-inch to make it just feel
that much more comfortable on that sized device.
So it's the kind of thing where you might have just
tried the phone layout on the 7-inch device and thought,
hey, that's good enough.
But they've actually gone the extra mile to say, actually,
it feels a little bit cramped or would benefit from a little
bit more spacing here.
So they've gone the extra mile to really optimize for the
different device sizes, which is great.
ADAM KOCH: Yeah, it's worth noting as well that they don't
have a landscape layout for this particular screen on
handset devices.
Actually, I'm not sure if they actually have landscape for
any of the screens on handset.
But for a video app, especially for a video detail
screen like this, I think that's OK sometimes, because
people sort of expect that when they rotate, the video
will be playing full screen instead.
There's not really enough room to do much else there.
That's TED.
ROMAN NURIK: OK, so let's move on to, I
believe, the last app.
So we're kind of cheating here, because this is an app
that we all worked on.
This is the Google I/O 2012 application.
So basically, this app, if you attended the conference, it
lets you see what sessions are playing.
It lets you create a personalized schedule.
It also syncs across your different devices, which,
again, is very important for a multi-device user that has
multiple devices, having seamless sync across those.
So what we've done here is basically--
on phone, there isn't that much horizontal space.
So we have three tabs for the different core pieces of
functionality.
That's kind of the interaction side where you interact with
other people on Google+ that are also attending the
conference.
The My Schedule or My Agenda area, and then the exploration
phase, where you can look at the map or take a look at
individual tracks.
So the interesting thing that we've done here is we split it
up from tabs to multiple panes across tablets.
So in portrait, actually, both of these devices--
7-inch and the 10-inch device--
in portrait, they would show this kind of two-column
layout, where two of the panes are stacked in one column.
And in the landscape, they switch to a wider
three-column layout.
One of the key differences between the 7-inch and 10-inch
layouts here is that the margins here on a
7-inch are 16 DIP.
And here on a tablet that's 10 inches, they're 32 DIP.
And that actually gives a little bit more breathing room
for the content on this 10-inch device.
And you'll notice this on the next screen as well, once we
get to it, that this adds a sense of spacing and
separation of the two pieces of content, or in here, the
three different pieces of content.
Any thoughts, guys?
NICK BUTCHER: It's a beautiful app.
ADAM KOCH: Whoever designed this is amazing--
[CLEARS THROAT]
Roman.
ROMAN NURIK: One thing I forgot to mention is that you
can't see this in the screenshot, but these tabs on
phone, as you swipe across them, there's actually a
16-DIP divider that has-- it's actually just empty space.
That divider is the same grey background as is on the
tablet-- so in this area.
So if you have multiple devices, there's a subtle hint
that these are actually part of the same screen.
So as you slide on a phone, like I said, you see that grey
background giving you, again, that sense of separation.
ADAM KOCH: One last thing.
One thing I really like, personally, is on the tablet
layouts, the sort of alignment of the headings of each of the
different fragments, it just makes the
app feel really nice.
And as Roman was saying, it's got this sort of padding, the
equal padding there between the different sections here
and also the little ticker, which I can't remember what
it's called.
ROMAN NURIK: The What's On fragment?
ADAM KOCH: Yeah, the What's On fragment.
It just sort of-- the alignment there
looks really nice.
Makes everything look really consistent.
ROMAN NURIK: One thing that we haven't done here is use
Roboto Thin or Roboto Light, which we probably should have.
So in case you want to make the title stand out even more,
get even more attention--
I'm not convinced that it's necessary here, but you could
use a large point size and Roboto Thin to give an elegant
header to each of these panes.
OK, so let's move on to the second screen in this app.
And this is basically the session detail screen.
So once I get into a specific session, like in this case,
the session that Chris and Ellie gave on Android apps and
Google Play where they announced the
new publisher console.
Once I get into the screen, there's a bunch of information
that I may want to see, a bunch of actions that I may
want to take on the session.
For example, I may want to add it or remove it from my
schedule, share it with people, see a map of it,
things like that.
I may want to +1 it up here.
And I may want to see the list of speakers, learn more about
Chris or Ellie, and then there's a few
links at the bottom.
So what we've done here is this is a single screen on--
well, the session detail and the list of sessions, which is
a previous screen.
This is a single screen on phones, whereas on tablets,
it's combined into a multi-pane layout.
This is kind of the very common master detail layout
that's used in almost all of our system apps.
You'll notice that in portrait--
it's not really visible here.
We kind of need animations.
We don't have the fancy technology to show this.
But in portrait, it's kind of a sliding screen.
So that left pane collapses once you start interacting
with the right detail pane.
And then pressing the Up button slides it in again, or
it's just actually sliding on the screen.
And then in 10-inch tablets on landscape, we have all that
space available, so we don't need that collapsing behavior.
So it's always visible.

Any thoughts, guys, on other things we should point out?
NICK BUTCHER: I really the treatment on the 7-inch here,
where it's not quite wide enough to have the same
displays you have on the 10-inch, to have all the
information permanently on screen.
So it's a nice solution with the sliding in and out to give
you a lot of the benefits of having both on screen.
I like the quick interaction between swapping between the
current sessions, rather than having to do it on the phone,
where you have to keep on going up and down, back up to
see the other adjacent schedules.
ADAM KOCH: Yeah, one minor thing, which I like, is
there's this concept of links related to
a particular session.
So these are dynamic links related to a session that fall
below on the handset and--
let me see if I can zoom--
in Nexus 7 version.
But then if you go to the 10-inch version in landscape,
you'll see they sort of fall alongside the content instead.
So it's just--
NICK BUTCHER: Yeah, that gives a great way to get a natural
margin point, as well, so that the details don't get too
wide, I think.
ROMAN NURIK: I think one of the natural points here is
really just about text length and white space.
You really want to optimize to minimize large, large swaths
of white space, where there's just nothing on screen.
You don't want to throw information along one of the
edges of the screen or the corners.
And then, like I said about the line lengths, you want to
really optimize around a certain number of characters
per line, because any larger and it's a little less easy to
read in terms of your eye having to
jump to the next line.
And then any smaller, it's kind of like a newspaper,
where if there's only two or three words per line, it
becomes really tedious reading a vertically
long piece of text.
So really that's one of the optimization points, is to
make sure that the text itself is very legible and that the
white space is adequately filled.
One last thing I wanted to point out is just a common
thread across these-- you'll notice that the green
background maintains some of the branding for the track.
So you'll notice that the action bar icon here is
colored green to indicate you're looking at Android.
And then the green is persistent across the
different tablets.
All right.
So with that, let's move on to our last section, since we
have four minutes left.
Wow, we're on time, guys.
That's awesome.
Since we have four minutes left, let's jump into Android
Design News.
So the first bit of news-- and this is not really news.
Sorry for lying to people.
So this is actually an article from Kirill Grouchnikov, who's
one of the engineers on one of Google's very popular apps.
He wrote a series of articles on responsive mobile design.
They're more like, I guess, developer focused, but they do
focus a lot about the different switching points,
the margin points, as Nick was alluding to, and how you make
those decisions, and then, basically, how that affects
your different layouts on tablets.
A little caveat that this is a little over a year old.
So some of the thinking is the older version or the
predecessor of what our current design thinking is.
But it's a phenomenal intro to responsive mobile design.
Moving on.
Nick, I think this is yours.
NICK BUTCHER: Yeah, this is fantastic to see that this is
one of the applications, which we took a look at two weeks
back, called Glimmr, which is an application for viewing
photos from Flickr.
And just want to say good job to the developer, Paul Bourke,
who's taken the designs and implemented them already.
You can see the change here in the before and after of his
first screen.
So no longer is it just a plain login, but he actually
shows up some content right from the beginning, and it
looks really nice.
I think he's done a wonderful job.
So good job, Paul.
ROMAN NURIK: Yeah, totally.
Well, good job, Nick, as well, for
inspiring the initial designs.
Next is The Verge.
Nick, do you want to talk about that, as well?
NICK BUTCHER: Yeah, sure.
So The Verge, popular gadget, my go-to gadget news site, has
just done a Holo redesign.
So you can see here, they've stayed pretty faithful to the
Holo look and feel while marrying it to their branding
quite successfully, I feel.
So generally, a really nice job.
A few issues with the navigation in the application.
But they've done a good job, and I'm also really pleased to
see them use the drawer navigation
pattern pretty correctly.
So that's very good to see.

ROMAN NURIK: Next we have ActionBarSherlock.
And this is more focused toward developers.
But ActionBarSherlock is a library by the very famous
Jake Wharton.
It's a library that lets you use the action bar in all of
its glory on devices that don't really have Honeycomb or
Ice Cream Sandwich yet-- for example, Gingerbread devices.
And the latest version--
version 4.2--
adds, I believe, it's preliminary support for
SearchView.
So if you've been designing around SearchView because you
must support Gingerbread, this may be a good way to
backport that view.
And I think that's it for this week.
I think we're one minute early.
But again, thanks for tuning in.
And we hope to see you next time where we will actually be
doing redesigns of video player apps that are reviewed
this Friday, I believe, on the app clinic.
Thanks again.
As always, I'm Roman Nurik.
ADAM KOCH: Adam Koch.
NICK BUTCHER: Nick Butcher.
ROMAN NURIK: Signing off.
See you guys later.
ADAM KOCH: Thanks, guys.
Bye.
[MUSIC PLAYING]