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]

6 Comments

Add a Comment

Your email address will not be published. Required fields are marked *