Now, a typical approach that's recommended if you're going to
develop a good user interface that runs across multiple devices
in this responsive design approach, is to take a Mobile-First approach.
The idea is you first figure out how to design a good user experience on
a mobile device, smartphone form factor basically, and
then you progressively think about adding more, taking advantage of
the larger screen, and greater capabilities of a desktop interface.
The idea is that mobile devices have the most limitations,
typically screen sizes and perhaps bandwidth and therefore,
you want to make sure you design within these parameters first, and
by doing so, it helps you prioritize content.
You can ask yourself, what is the most important content,
and I got to make sure that I fit that in well.
And then as I have more and more space, I can add in the secondary and
tertiary content.
So that is the idea of this Mobile-First approach.
And it's probably worth mentioning
that we don't want Mobile-First to devolve into mobile only.
We want to make sure that as we move up to a larger form factor,
a larger screen size we take advantage of that.
And so I'm going to show you a few examples next that will give
ideas of what you might change as screen size increases,
how you might respond to that, and thus exploit the capabilities and respect
the constraints of the screen size that you're dealing with at any given time.
One other thing before I do that, I should emphasize, you do want to make sure
that you do use a research those that you understand that the task that people
are typically going to perform or that they really want to perform
at a mobile device, or at a desktop interface, are the same.
Maybe they're different, and if so you should take that into account as well.
Okay, let's see a couple examples.
So I want to start out by showing you the BBC web app, and
this is how it looks on my smartphone, and I want to show you a couple of things,
or point out a couple of things.
So you can see across the top area, there's the BBC logo, and
we see a few navigation items.
News, Sports, More and then we see a search icon and
a place where I can type in a search query.
We see one large image, and then we see a few headlines below that,
so it's a single column format.