Practice English Speaking&Listening with: UX - Responsive Design Implementation

- [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.

(silence)

Let me see.

(silence)

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.

(silence)

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.

(silence)

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.

(silence)

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.

(silence)

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.

(Silence)

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.

(Silence)

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.

(laughs)

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.

(Silence)

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.