Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
More and more users are now going online through mobile devices. One of the key concerns for designers is the large array of devices being used and the various screen sizes found on each one.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
More and more users are now going online
through mobile devices.
0:04
The numbers increase every year especially
when
0:09
new iPhones, iPads and Droids hit the
market.
0:11
In addition, many users are now
exclusively using mobiles to get online.
0:15
All this means that users need access to
content and
0:20
features wherever they go, regardless of
how they view it.
0:24
Now we can't assume that they're gonna go
to a
0:29
laptop or other home computer to get
anything they missed.
0:31
In fact, if something doesn't work on your
site or app,
0:34
you have to assume they're going to go to
a competitor instead.
0:37
>> If, if you see the consumption of
internet right now.
0:41
A lot of it comes from mobile devices, and
0:45
when I say mobile I just don't mean a
smartphone.
0:47
I also mean tablets, which are everywhere
now, and
0:50
if you are building a site or an app, and
you're just simply focused on the
0:55
desktop, then you're losing out on a huge
percentage of people that are
1:00
going to be consuming your app, or your
site, through a mobile device.
1:06
And that's why I think a mobile-first
approach is important,
1:10
because you're focused on the small screen
first, so you can see what's important.
1:16
What should I really, at the core of my
app, or site, put on the small screen,
1:21
that'll be useful to my users, you know,
the consumers of this site, or app?
1:27
And then, you can scale up and you can
always add more features and
1:34
functionality, but it's the taking away of
1:37
features and functionality that's so
keenly important.
1:40
It's important to consider the small
screen first, so that you can focus on the
1:43
core components of your app, or your site,
1:47
because it's easier to add, rather than
subtract.
1:50
>> Industry data tells us that the vast
majority of mobile users are
1:55
using one of the two major operating
systems: Apple's iOS or Google's Android.
1:59
However, the number of devices running on
these
2:05
two operating systems grows every year,
meaning, if you're
2:07
a designer or a developer, there are a
number
2:11
of different screen sizes and resolutions
to worry about.
2:13
While apps are designed specifically for
one of the mobile
2:18
operating systems, websites can be
affected by the different devices.
2:21
It's important to understand that trying
to
2:26
control every aspect of how your website
design
2:27
appears such as the text, the spacing, the
buttons and more, is just not worth it.
2:30
Designers must accept that device
differences and limitations
2:36
are going to affect the look of their
site.
2:41
But the key here is that it should not
affect how it works.
2:43
If you want to know for sure how things
2:49
will work and look, it's important to look
for yourself.
2:50
Loading up your site on a phone or tablet
can be an
2:54
eye-opening experience, and it should be
2:57
part of your design and development
process.
2:59
But nobody has access to every device on
the market, so also
3:01
considering running your site through a
mobile emulator is a good idea.
3:05
With many mobile devices, there are many
emulators to try.
3:10
But pay attention to the major ones,
especially
3:13
the ones you know your customers are
using.
3:16
Testing and viewing your site on a mobile
device can give you an
3:20
immediate understanding of how easy or
difficult your site will be to use.
3:23
Certain features like the navigation may
be affected, and online
3:28
forms might cause some trouble if they
haven't been formatted correctly.
3:32
Using responsive web design concepts,
designers can anticipate the smaller
3:37
screen sizes, and display the site in a
different way.
3:42
For example, many responsive designs alter
the
3:45
layout by stacking the sections
vertically, allowing
3:48
users to scroll up and down to better view
content and find what they need.
3:51
Others display a different navigation menu
or some
3:57
abbreviated content to better fit the
smaller area.
4:00
However, depending on the site, there may
some features that users just cannot live
4:05
without, and they require a number of
4:09
choices, or text fields, or additional
interaction.
4:11
It's going to be up to you to figure it
out.
4:15
Is this a feature necessary on a mobile
device?
4:18
Can it be simplified?
4:21
In fact, many designers have switched to
4:23
a mobile-first philosophy that allows them
to think
4:25
of a way to solve the problem
4:29
first, before designing the classic
laptop-friendly website design.
4:30
More often than not, if you can design a
feature,
4:36
or other kind of interaction for mobile
devices first, then if
4:38
users view it on a laptop or a device with
4:42
a bigger screen, it should still look and
work just fine.
4:44
>> So a really great example of a
4:50
navigation pattern these days, a lot of
apps
4:52
and mobile versions of sites are using
that,
4:55
is that collapsible and expandable nav in
the header.
4:57
So that, that's important because these
5:02
days with mobile apps especially, the
navigation
5:03
should not be the main feature for getting
things done, especially in an app.
5:07
It should be more of an affordance, right?
5:11
You should be able to move around the
5:14
app with other affordances or through
other methods.
5:15
So, I think by collapsing the navigation
in the top header, it gives us more a
5:19
chance to use the app and sort of explore
our own way of, of finding content.
5:24
>> Regardless of the device and screen
size, your site is going to get seen.
5:30
So it's important to test it out to ensure
that it looks good and works well.
5:35
While you may have designed a beautiful
site on a laptop, mobile
5:40
users just may not experience that exact
same thing on their phone.
5:44
So be prepared.
5:48
Accepting these limitations of these
devices can
5:50
free you to better design for them.
5:54
And take advantage of the fact that the
5:57
number of people using them, grows every
single day.
5:58
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up