Tip:
Highlight text to annotate it
X
[MUSIC PLAYING]
Hi, I'm Nick Butcher, an engineer on the Android
Developer Relations team.
And I'm here today with a design byte to talk to you
about the fundamentals of responsive design and how to
employ them in your Android application design.
So Android is not a one-size-fits-all OS.
It comes in many different sizes and shapes, from small
phones to large tablets, TVs, and beyond.
The great news is that Android has been built from the ground
up to embrace this variety and give you tools in order to
deal with it.
So from the very beginning, Android has allowed you to
scale your user interface up and down
between different devices.
The problem is that scaling approaches will
only get you so far.
So I'm going to take you through some of the common
pitfalls we see with this relying on scaling approaches,
and then I'm going to go through some alternative ways
of dealing with this.
So the first problem we see commonly is one of having
excessive line lengths.
So in this application, the text and images are running
the full width of the device's screen.
On a smaller phone-sized device, this might be fine.
But as you get beyond a certain size, this becomes
uncomfortable.
Especially when you're looking at lines lengths of text, you
want to be aiming for between 45 and 75 characters of text
in order to maintain a comfortable reading experience
so the user can easily can across it.
In this application, we can see that this is clearly
exceeding that.
The next problem we commonly see is one
of unbalanced content.
So in this example, we can see there's a lot of content
clustered up in the top left of the screen, and then
leaving huge amounts of white space across
the rest of the screen.
This leads to a very unbalanced feeling, which
makes your application feel completely unoptimized for
this device.
And the last problem we commonly see is more of a
missed opportunity almost of not making the best use of the
real estate available to you.
So in this example, we might have an application which
shows many photos.
And as we can see, these tiny little thumbnails are all
grouped over to one side.
It really is a shame not to make use of these beautiful
big screens when all this extra real estate is
available to you.
So you want to be avoiding this.
So these are some of the common pitfalls we see in
relying on scaling approaches.
And the answer to dealing with these problems really is to
adopt a responsive mobile design to respond to the
device's characteristics.
So here are three techniques you can use
in order to do this.
So the first technique is simply one of combination.
This is, if you have extra room, combining things from
different screens onto a single screen in order to fill
up the space.
So in this example, we've got a typical master detail view,
which on a phone would be on two separate screens.
So clicking through from a list item, for example, might
show subsequent details.
On a larger device with sufficient width, we might
show both of these things at once.
This will avoid the problem of having those excessive line
lengths and make better use of the screen real estate.
The second technique is one that we call Macro Reflow.
So this is taking the major building blocks of your
application and reflowing them or rearranging them on the
screen in order to make better use of the space.
So in this example, we simply move something like a large
header image and the body text, instead of being
vertically stacked above each other, to be horizontally
stacked next to each other.
So this will give the image more space to show off the
larger amount of screen real estate as well as avoiding
those excessive line lengths when it's
in a landscape device.
So this is not only useful for different-sized devices, you
can also use this kind of trick when changing on the
same device between different orientations.
And the last technique I want to go through is something we
call Micro Reflow.
So this technique really focuses on the individual
blocks within your design, and it delegates responsibility to
those individual blocks to optimize themselves given a
certain amount of space.
So a couple examples of doing that--
on the left here, we have a list type application which,
given sufficient space, might lead to those excessive line
lengths or very unbalanced views.
So instead of that, each individual list item knows
that given a certain amount of space how to draw itself.
So once it gets over a certain size, a certain amount of
width available to the device, It'll change its
representation.
Instead of being a list item, it might change to, say, a
grid representation.
So this will allow you to fill the space better.
The second example is if there is simply no way to introduce
more content, you can introduce a
margin point instead.
So in this form type application on the right, when
we go beyond the phone and past a certain size, when
there just isn't any more content we can show on screen,
we simply introduce a margin point so it doesn't end up
being excessively long or excessively unbalanced.
So those are just a few techniques that you can employ
in your design of our applications.
Over the rest of this series, I'm going to go through some
DevBytes, which is going to teach developers out there how
to actually build these layouts.
Thanks very much.