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
Common feedback of poorly performing sites/apps is "This is terrible on my phone!" All too often web sites/apps are built to meet the needs of desktop users and then distilled down to what will 'look' nice on a mobile device. In this series we will illustrate what it really means to build mobile first.
New Terms:
Mobile first -- development process where the target medium is mobile devices and networks
Emulators -- Software tools that attempt to replicate devices and conditions within the scope of a desktop environment
Media query -- A CSS function that allows selectors to only be rendered in the browser based on specified conditions
jQuery -- A popular JavaScript library
Above the Fold -- Essential assets (CSS, JS, and images) that the user required in their first interaction and are visible without scrolling.
Further Reading:
Progressive Performance (Chrome Dev Summit 2016)
Built-in Browser Support for Responsive Images
Above the fold in the web
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
When building a new website or
app, teams that do not put
0:00
mobile optimization first and foremost,
there's typically a common feedback
0:04
from someone in the organization who opens
it on their phone for the first time.
0:09
This is so slow.
0:14
Why is it so slow?
0:16
This is crushing to hear.
0:19
I am sure they try their
hardest to make this site or
0:21
app as awesome as possible, but
in the end they fell short.
0:23
What is also common, and this is not
the fault of the development team or
0:28
designers.
0:32
The site or app was built with
desktop users in mind first.
0:33
Then, as the project progressed,
0:38
the conversation turns to how the new
site or app will look on a mobile device.
0:40
So developers of the site using
any number of tricks in CSS and
0:45
JavaScript, trying to hide or
alter UI and functionality
0:50
begin to distill the site down to what
will look nice on a mobile device.
0:55
But as we learn in the last section,
1:00
the more code you add the less
performance your site or app becomes.
1:02
So while this starts to look
better on mobile devices
1:07
your performance is taking a huge hit.
1:10
You are essentially walking
backwards at this point.
1:13
How do we reverse this?
1:18
What does it really mean
to be mobile first?
1:19
There aren't really any tricks or
1:23
complicated processes
needed to be mobile first.
1:24
You simply have to consider the experience
of the mobile user before you build for
1:28
the desktop.
1:32
This is both the technical and
UX problem to solve.
1:33
When you develop an app for
the desktop user first,
1:37
you view the output on your desktop
computer using a large screen,
1:40
fast processor and
consistent data connection.
1:44
So in being mobile first, you have to
be more aware of the capabilities,
1:47
resources and
constraints of the mobile users.
1:51
The two areas that really need special
attention are speed and data connection.
1:55
What about speed?
2:02
Well, it appears that
processors in mobile devices
2:03
are almost as fast as
those on your laptop,
2:05
this is not 100% accurate as the processor
architecture is completely different.
2:08
It's rare that your mobile device will
ever be operating at full capacity
2:14
as this consumes too much power.
2:18
Creates too much heat, and
reduces the performance of the device, and
2:21
will kill your battery
in just a few minutes.
2:25
What about data connections?
2:29
Again, developing locally
on your desktop and
2:30
viewing in a browser on
the same device is super fast.
2:34
Mobile devices, while many come
with really fast WiFi connections,
2:38
still can't process a connection
as fast as a desktop.
2:41
When comparing mobile wireless
data to internal wired data
2:47
mobile wireless is unreliable and
inconsistent, to say the least.
2:51
While there are great
desktop emulators out there,
2:56
they still never truly represent what
a real handheld experience is like.
2:59
So it's best to test how your app feels
on a real device as much as possible.
3:04
Being truly mobile first is not
simply writing some media queries and
3:10
making it look awesome.
3:13
You need to build your app with
the mindset there will not be
3:15
a desktop version.
3:19
By doing so,
you will set your expectations and
3:21
your performance budgets appropriately.
3:23
And those budgets will be low.
3:26
Challenge yourself when considering
frameworks and libraries.
3:28
Do you really need jQuery?
3:33
Do you really need to
install all the CSS right
3:35
away when you might only use 30% of it.
3:38
When developing mobile first,
there's some constraints
3:41
that we just can not over come
due to limitations in technology.
3:44
This is when we start to talk
more about perceived performance.
3:48
When the user is involved in
that initial interaction or
3:52
initiating more requests, we then load
the remaining resources in the background.
3:55
The goal here is to get the first
meaningful paint as soon as possible.
4:01
Part of this process is to think
about what is the above the fold or
4:07
above the scroll experience for
your users.
4:13
Above the fold is really saying
what are the essential assets, CSS,
4:17
JavaScript or images that the user
needs in that first interaction, and
4:21
are visible without scrolling?
4:26
This will dictate what code is critical
to load the initial experience and
4:29
what will be loaded later when requested.
4:34
With CSS, for example, and
we will discuss this more at length later.
4:37
There are processes we can
use to load essential CSS and
4:41
line the HTML document itself that
eliminates a request and speeds things up.
4:45
One critical factor in getting
to the first meaningful paint
4:52
is how well you manage images.
4:55
Be selective about the images you add, and
4:58
be specific about the images
you ask your users to download.
5:00
For mobile first use only sizes of adds
that make sense on a small device, or
5:04
use SVG that can be enlarged
with a little code later on.
5:09
Techniques like the picture element, or
background images, contained within media
5:15
queries only load images when
the browser meets that specification.
5:20
This ensures that the user is only
downloading the asset needed,
5:26
optimizing their experience,
reducing the number of HTTP requests
5:30
in minimizing the amount of data
being sent and reducing latency.
5:36
Another key factor is getting your user
to the first available interaction.
5:42
Consider what is the minimum Java Script
needed that will allow a user to
5:47
interact with the app.
5:50
Fact is that if a user can't
tap on something, it's broken.
5:52
We don't want broken apps.
5:57
We will cover this more
in detail later on, but
5:59
review what JavaScript
libraries you are using and
6:02
consider loading them from CDNs or
using service workers to speed things up.
6:05
Find ways to make your code modular and
6:11
only load functionality that is
limited in scope to that experience.
6:14
When targeting mobile first, the array of
browsers to support is much less than for
6:19
desktops, so having to add code for
6:24
cross browser compatibility issues, while
not a 100% removed, is extremely rare.
6:26
And that means, less code.
6:31
And that's a good thing.
6:34
Mobile is harder than
desktop especially for
6:36
the first time and
it's really easy to make a slow site.
6:38
But even just trying a little just
changing our perspective of the starting
6:43
point and knowing how to better test and
budget you will already get a faster site.
6:46
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