- [Amara] Hi, and welcome back.
This is a multi-part video series on responsive design.
And for this section, we will focus on implementation
of the design work.
So not only in the generation of assets
but also how to hand these off to engineers
and what those assets should look like.
With responsive design, as we mentioned earlier,
we're designing across different devices.
And they have what we call breakpoints.
So breakpoint is essentially a dimension
that you defined as the threshold,
so the point at which something will transform
or change based on the device.
So an example of this would be the navigation bar.
We'll look at that.
For Facebook, the navigation bar will span 100%
of an iPhone device.
And it may measure out at 720 pixels.
But then when you increase it more than 720
but less than maybe 1280, for example,
the design of it may morph and look slightly different
based on that device size.
So the breakpoint is really that measurement
between one device and another that you specify.
And the unfortunate thing is that there actually
aren't a set of universal breakpoints
that are published.
This was something that I found really odd
as a designer when I first started working
in this methodology.
And it really then goes back to knowing your customer
and getting a sense of the types of devices they use
and at which points do their perceptions
or their expectations differ the further
that the screen size is increased.
So this can be conducted through some generalized research.
I have one research linked here
called the Global Analytics Stat Counter.
You may also take an audit of the people
who currently use your app or website
and try to aggregate information on common devices
or common screen sizes.
There's no universal guidelines
mostly because of this proliferation
of sizes and pixel densities and devices
and brands, as well.
So because of these variants in the marketplace,
it then falls onto the designer
to understand those usage patterns
and to design around them.
So ultimately we need to learn how
to aggregate that data to inform your specifications.
And I provide an example here
of some common breakpoints that you can consider.
So here between phones, tablets and phablets,
and desktops or laptops you'll see
the 320, you know anything zero to 320,
although a phone is at zero pixels,
but this is just a model.
Anything up to 320 is essentially a phone,
and anything up to 720 are the larger tablets,
the larger phones.
And then anything beyond 1024 is desktops and laptops.
So all the in-between space is really the breakpoints
that which you design for.
So your content starts morphing between,
for example tablets, desktops,
so between 720 and 1024.
But the minute it switches to 1024 or higher,
your Navigation mail is different.
And the same way if you reduce backwards.
If you go to Global Analytics Stat Counter
you will things, see different components
that you can kind of drill into.
So you can look at the different browsers
that are being used worldwide.
You can search the market share segmentation,
the operating system market share,
the fourth one down,
so three across two down.
It says screen resolution sizes
and that would be I think
the important data that you can use
to help define those responsive design breakpoints.
If you go right underneath that you'll see
the different usage data between
the different generalized devices.
So between mobile and table versus desktop.
And here I'll actually open it,
so that you can see what that looks like.
So in this link I deep linked
to the browser market share worldwide.
So the way to read this...
This data is aggregated across multiple websites
and based on tracking information.
So with GDPR and some of the privacy laws
that are surrounding it and kinda bleeding
over into the US.
This data may start becoming limited
just based on the people who opt into it
and the availability on those websites.
So with that in mind knowing the data limitations,
we're looking at, worldwide,
64% of users worldwide use Chrome,
17% use Safari, 4% use Firefox.
And now we also have some other browsers
available as well.
So this should give you an idea
of which operating systems are most
are most prevalent, maybe not most important.
And it doesn't have to be best operating system
but just gives you an idea again of usage patterns.
So if I were to scroll down here
and look at mobile versus tablet versus desktop,
it will then go to that page.
And here's some new insights
across different digital properties worldwide,
is that 52% of content is consumed on mobile.
And 45% is on desktop and almost 3% is on tablet.
So here you're even looking
at the emphasis of content across
these different sizes or at least
the different types of devices.
And this is worldwide.
What's great about this
is that you can even segment by country as well.
So usage patterns in Africa may differ
from North America may differ
even specifically for the United States.
So again, knowing your customer is super important.
This is one way to gather information
on your specific market share
but make sure you also check in
with people that you interview
or conduct research on to better
understand those patterns and habits.
Let me see.
So here are just some screen shots of those figures
to give you an idea of the type of output
and you'll see if you go to the status counter.
Another way to think about break points,
this looks a lot more complicated than it actually is
but you'll actually see the width here on this,
it looks like a time line
but it's actually just a width graph.
So here anything up to 240 on the left
is really a minor break point
for those smaller devices.
And the further you go out,
the larger your screen is
but then also here this one helps explain
what's a major break point.
So the major break point is where
your interface drastically reformulates itself
for the next device size up.
And then also the minor break points
are all the adjustments in between
to accommodate different device sizes
in tablets for example.
So if you have a really small tablet for kids,
then the design might be a little more squished
or a little bit more narrow,
but as you upgrade to like industrial designed sized
tablets you'll have more screen real estate
so there'll be another minor break point
within your spread out done
a little bit more evenly.
So this is just a visual representation,
not necessarily something scientific
that you would implement in your design specifications
but should give you an idea
of not only the major points
at which your product kinda morphs itself
but also gonna be in between steps as well
based on the width and the pixel density
and just the size of your device overall.
So this was a quick snapshot as well
from GA statcounter
and again this is worldwide based
on the websites that have
this analytic data built into it
doesn't represent all of the data
across all the different countries and websites,
so again keep that in mind as you apply
this type of information to your design work.
Now but here we're looking at
you know, practically 13 or 14% of folks
who use a device that renders digital content
between 360 and 640.
So that's a pretty small or low resolution cell phone.
And here on design computers or engineering computers
where we have much higher pixel density
but also much larger screen sizes
we're looking at 7.6%.
So I find that students fall into this trap a lot,
especially with web design,
where they design for their monitor size
or their screen size,
and again not using the information available to them
to design for screen sizes that reflect their user base.
So don't fall into that trap
but use this type of information to inform
your best screen sizes to design for.
You may also have limitations that you encounter
based on your prototyping software
or your design software.
So they may kind of prescribe
these different sizes based on popular
devices of that time.
But you are always free to deviate
from that if your research specifies
that it makes for a better experience.
As you create blueprints or specifications
or redlines for your engineering staff,
make sure you steer clear of what we call absolute values.
So an absolute value is a number
that has a fixed measurement associated with it.
So in this case, saying that your screen width size
or the design that lives in your screen size,
is exactly 1280.
So if you design it that way, for example,
you will have a 1280 design that starts on your phone
but then bleeds right off of it.
The same thing for tablet as well.
So that pixel, that specific pixel measurement
is not as helpful for people who are looking
to build your product.
And you can see here that I also kinda repeat
that for the different design elements.
What we want to do is actually use relative values instead.
So a unit of measurement that is fluid and can change
based on the container size.
So here you will see for the desktop design,
we're looking at 90% width of that header
and then 40 pixels.
That again is a specific absolute value
so we wouldn't use that
but here on the right side we actually have 45%.
And then this little graphic in the middle is 10%.
So what we're telling our engineer team,
is that with width of this design
should only span 90% of the screen size.
And similarly that image on the right should only span 45%
so a little under half of the width of your screen.
And you can see that with these relative values
you can extend your design specifications
across different devices without having to measure
each pixel as needed between the different devices.
There are plenty of debates and different measurements
that you can design for.
I think the most important is either EM's of pixels,
I'm sorry EM's or percentages.
Percentage is actually probably the easiest
in mapping into conceptualize from my design standpoint.
But EM's may be a little more specific
for your engineering team.
So pixel, a pixel's a pixel (laughs)
but depending on the screen size and density
that may be adjusted based on your design assets.
Because they're fixed, it's very difficult to scale those
so again keep in the mind the 1280 width.
Showing a design on mobile that's 1280
will mean that most of it is actually cut off.
Where as a medium size monitor will be able
to render the 1280 and then if you look
at the 1920's then your design
actually only spans two thirds of the screen
and the rest of it is blank.
And the other unit of measurement
that is more commonly used is the EM measurement.
So this is very similar to print design
and kinda the basics of typography
where we're looking at the measurements
of the size of the font itself.
So from the top of the fonts' capital height,
so if it's a capital m, the top,
the tippy top of that m,
as well as all the way to the bottom
of it's lowest descenders.
Well the descender is anything
that falls below of that line.
So for instance the bottom of a g,
that little tail that hangs off the g
that would technically be a descender.
With a capital m there is no descender
because it ends kind of on that line.
This is a unit of proportion
that translates your pixel designs into
this scalable kind of,
it's very similar to a percent
but it's a different unit of measurement
that design, that you can design relative
to text that you're using in your product design work.
So this becomes really important
when it comes to proportions
in your design work.
So as designers we are very kind of hypnotized
and possessed by typography so designing
around type becomes an important element
for web design but being able to scale
content based on that text becomes
even more important.
We have root EM which is another measurement
and then we also have percents which is something
that we just covered in the previous slide.
We also have ways for you to convert
your kind of static or absolute font size
into pixels, into points and into EM's and percentages.
Again I would use this as a guide and not so much the
leading scientific way of measuring
between the different sizes.
You will still want to personalize
and customize your specifications to your product.
So this can be a reference for you,
but make sure that you actually do
the measurements yourself just to make sure
that they represent the accuracy
that you need for your product and I also provide the link
here at the bottom for you to reference after.
So one of the most heated things about responsive design
is actually how to create the guidelines for our engineers.
So it's not enough to just send them a bunch
of flattened design files and screen shots of how something
should look in the app,
it's very important to accompany those designs
with guidelines on how to implement
or at least your idea of how it would be implemented.
Because obviously we all have different methodologies
and technologies available to them.
So there's a couple of different terms for this
that kind of float around.
We have guidelines,
we have specifications,
we have redlines
and there's probably a bunch of other terms
that I don't even know of.
At Amazon we actually call them redlines
because a long time ago when we used
to have print designed or more prevalent print design
we would actually use red pens to red line
on a physical specification doc.
I did a lot of redlines,
I also did blue lines
which is something else completely.
So these redlines are specifications or guidelines,
are used by your engineering team to,
again, inform the way that they build the product.
For you, your responsibility as a designer
is to create annotated screen shots
that explain the design.
So for instance if we were looking
at this phone screen and it had an app on it
you would point out this is the header
and this is the expectations of the header
and these are the different elements
that live in it.
And when you tap it, you go somewhere else for example.
So actually marking your screen shots
and explaining the different components on the site
or in the app.
You'll also provide flow charts
that help explain the customer journey or the user journey.
So this is also used as a specification doc
so that they know how to build the product
and in which order.
So not only the order in which they build
but also the order in which it shows up in your product.
So being able to specify this flow chart
gives them a way to build upon
the existing designs that you've established.
You will also provide a prototype as well.
So this is helpful so that they get a sense
of the look and feel of your product.
And if you have a prototype that's rendered
appropriately for a mobile phone
they can even download it or access it on their own
so that they get a sense of how it works
and how the content flows from one screen to another.
And what I've found to be the most
the best use of time really
is to film a video walk through of that product.
So your getting some practice doing that in this class.
But showing them a video is another way
to demonstrate the prototype
but then also to walk to them through
what we call a happy path.
So in the case that everything worked out
the way that it's suppose to
you would tap on something on the home screen
and it would take you another screen
and you take this interaction
and go to another screen.
So this is a way to avoid people getting stuck
in the prototype or not understanding
your intentions behind some of your design work.
So this is an example of an annotated screen shot.
I can't load anything from work because it's confidential
but this pretty much mirrors what it would look like
if I were to hand something off at Amazon.
So here I actually have the screen shot
that's loaded on to the screen.
There might be a PDF or an InDesign doc
or Illustrators, just pretty much
whatever design software I have at my disposal.
I think I've used Word also.
So here I have the screen shot and I've labeled
different components that live on the screen
with a little circle and the letter
and then on the right side here,
I have the explanations of all those content
and I not only specify what it is
but here I also include notes
on how it should behave or where it should go.
And any of the technical specifications
that I find are important.
So if I'm providing relative values here
or if I'm providing colors or hex codes.
This is the area in which I would do it
versus delivering that content as needed
or in an ad hoc manner.
So our next video will cover responsive design
user interface kits.
So these are things that you can download
that are completely turnkey
and should help streamline your design process.