All language subtitles for 9. Responsive Design Overview

Responsive design is a broad topic that can cover a large number of different factors.

This is a topic that is going to play a role in almost every future feature that we develop from here

on out.

We are going to be making all of our features responsive and taking considerations for all screen sizes

as we work so in this video.

I'm going to walk you through sort of the mindset of how I came to understand responsive design and

how we're able to apply that to building material UI applications.

Now I was aware that there were different approaches to responsive design and I wasn't even entirely

sure of what responsive design precisely was.

And so the first part of kind of understanding the mindset you need for Responsive design and how will

then translate those considerations into code.

The first step is learning about the different design styles.

Obviously the web didn't just come into existence in the 90s in the same way that we use it and know

of it today and that of course means the throughout the years that it has existed and evolved.

There have been different approaches and schools of thought as to best practices for building websites

the evolution of these design styles has led to better user experiences access to new features and compatibility

for all devices.

I think it's important to understand these different design styles and why we will be using responsive

design so the original design style that people worked with was the fixed design fixed.

Design uses explicit fixed pixel sizes for all of the elements and styles resulting in one layout regardless

of the user's screen size this definitely results in the worst user experience and it can cause horizontal

scrolling distortion.

Hidden elements or even broken functionality all of which really impacts the user experience of your

Web site and overall the perception of your brand.

Here you can see these diagrams I've put together and on the left you can see the desktop mockup of

a website with a header and footer and some content in between and on the right.

You can see what the mobile version of this site would look like.

If you'll pay attention to the very bottom of the screen you'll also notice that we have the style sheet

does CSX under each diagram and that's to show that all of these styles are coming from this one singular

style sheet.

Now you can see that since a fixed design is using specific fixed pixel sizes on the desktop side it

looks fine because that is why it was built for and so it renders normally on mobile.

However you can see with the indication of the dark boxes covering most of the mockup that on a smaller

screen size the only portion of the website that would be visible is that a tiny section in the middle

because the elements are at a fixed size and are made to be viewed on a larger screen.

The user is going to have to scroll horizontally and zoom in around the screen to be able to view the

content like I said this can cause a lot of problems and even break some of the functionality.

This didn't used to be as much of a problem back in the early days of the web when mobile devices either

weren't around or were in very low usage during their early adoption.

Over time however as more than half of Internet traffic now comes from mobile devices people needed

to start taking considerations to provide a better mobile experience.

This led to the development of the adaptive design you can see here that we have are similar.

Desktop a mockup on the left with our similar style sheet does CSX but here on the right we now have

a condensed smaller proportionate version of the Web site for mobile one thing to note however is that

you can see that this is coming from these style she mobile dash a style she dash one dot CSX.

So what sets adaptive design apart is the adaptive design provides a different style she depending on

what type of device is making the request you have probably seen this on the web before.

When you go to a Web site and you'll see that it serves up either a mobile version A M. da whatever

Web site or a tablet version for the Web site and each one has its own specified styles this is definitely

a big step up and a much better user experience than a fixed design because now elements are able to

be viewed all at once on the screen and in the correct relative size users will much more easily be

able to navigate the site and determine which content is relevant for them the downsides however are

that you now have to build a separate style sheet for every specific kind of device.

If you need to support a large number of devices you can see how this would immediately become extremely

tedious and require a large amount of manual testing and my Newt modification an implication of this

approach however is that when new devices come out or old devices are updated say when the iPhone 5

was released introducing a larger screen and then when the iPhone 6 and 6 Plus were released.

Introducing even larger screens.

Developers of adaptive Web site designs would have then had to create entirely new style sheets for

these new devices even though this may have been a lot of work.

This was a very successful approach and was definitely the better option until something new came around.

That of course brings us to responsive design.

Now this may look very similar to the previous screen but obviously with a few small but very important

distinctions.

First you'll notice at the very bottom they own both mockups.

We have just the style sheet dot CSX so similarly to a fixed design we're only using one style sheet.

But unlike in fixed design here we're going to be implementing a fluid design by structuring the applications

elements and layouts based on responsive units instead of fixed pixels fluid design allows elements

to be rendered based on the screen size that they're on resulting in one consistent but responsive style.

The other big part of responsive design besides fluid design is using media queries to change these

styles based on the screen size.

So not only are these styles responsive to the screen because of responsive units but by using media

queries to change these styles themselves and apply or remove styles depending on the screen size allows

you to fine tune your look first certain device ranges without having to explicitly hard code values

for every possible device.

Responsive designs can also rearrange themselves or move elements around based on the different screen

sizes to display content in whatever makes the most sense for each given context.

For example on desktop you may want to use the full size of a picture to include the most detail.

But on mobile where you're more constrained you might need to use a more vertical section of the most

important information you could use a media query to detect the different screen sizes and serve a different

image depending on which screen size it matches.

For example here in our diagram you can see that the yellow squares from the desktop instead of on the

mobile version from adaptive design where they were still laid out horizontally but just squished down.

Now on a responsive design we can actually change their layout entirely to now be stacked on top of

one another and laid out horizontally and more thin responsive design definitely provides the best user

experience to the broadest number of people by assuring the appropriate layout for any type of device

Google now rates Web sites mobile first and a responsive design web sites are actually rewarded the

highest so there is a pretty concrete incentive for learning and implementing responsive design thankfully.

This is what material UI is based around and what it enables us to do in a very intuitive way.

So let's go over a few of the best practices for Responsive design even though I may have kind of touched

on a couple of those already so the first best practice to really keep in mind is relative units.

So with anything you are building the elements need to use relative units.

This automatically re sizes elements depending on the screens that they're on and ensures a consistent

look across devices examples of responsive units are percentages.

M REM V H which stands for viewport height and is based on obviously the height of the device and viewport

wit or the W which is based on the width of the device using these units makes proportional designs

that look great everywhere instead of fixed designs that might look good somewhere.

Then of course like I said was media queries and a material UI provides a great media query system that

actually uses the react hook API.

And so this is a very helpful feature that makes it really convenient to use media queries not only

in our J.S. S. styles but also within our JavaScript itself.

You'll see how this enables as some really powerful and interesting behavior when we start getting into

the draw for the header after we get good at using media queries to change our style depending on the

screen size We'll then use media queries to finish up our header when the header is fully responsive

will then be ready to move on to the footer where I'll introduce the grid system if you're familiar

with the bootstrap grid system or other similar CSX grid systems then this shouldn't be too hard for

you to get your head around if you haven't had any experience with grid systems before.

That's OK.

I actually never really got it until I learned it from material UI and I think that the way that they

have it set up and the way that they can integrate the grid system with the media queries and the theming

system really makes it intuitive and comprehensive we use the grid system for laying out the content

on our page and then telling that content how to re size or reorder itself based on different screen

sizes the grid system also really standardize is alignment and makes it really easy to create a consistent

and cohesive feel to your application.

Did doesn't look like a bunch of stuff just thrown on a screen.

By the end of this course you'll definitely be an expert in using the grid system to create complex

professional responsive designs and the last core tenant for my best practices of responsive design

would have to be testing testing and testing this really cannot be overstated.

The key to a completely responsive and really perfected and polished design is extensive and Thoreau

testing.

Now I know when I talked about adaptive design we talked about how you would have to go in and hard

code all the values for each device which created a ton of extra work.

And so I said with responsive design we get away from that.

Well that is true but that doesn't mean that we can just set a bunch of stuff up and know that it will

all the sudden work on anything.

And the reason I already know a lot of these styles or numbers that we need to set to get the layout

to look correctly is because I've already built this before and because I've gone ahead and made sure

that the values I'm going to be using are going to be the correct ones.

I was only able to figure that out in the first place by going through and trying out different values

and slowly moving things in one way or another until it's as close to what I had wanted as possible

this also involved lots of testing on other devices.

So pulling up my development server on my phone or on my iPad or using the Google Developer Tools to

simulate running on those different devices we're going to get into how to do that and how you'll be

able to make sure that you can go through and test your application to make sure that it runs perfectly

on any device.

Responsive design will make sure that once you figure out your correct values for each style that it

will then look correct on every screen size.

Figuring out what values those exactly are though it's kind of the name of the game so remember whenever

you're going to build your own applications that you're going to have to take a lot of time to tweak

things and try things and just start arbitrary values using responsive units and as slowly increment

or decrement as necessary so those are some of the main best practices that I think are most important

to keep in mind.

For responsive design but we need to also remember our goals when we're setting out to implement responsive

design in our applications those goals are to first and foremost look perfect on all screen sizes.

We want our design to never cause someone to go Oh it doesn't look like they planned for that or Oh

that wasn't supposed to happen.

We want our design to flow so well and to be so responsive that users don't even notice it because it's

delivering such an integrated and optimized experience.

The next goal very much relates to the first goal of being orientation independent.

That was a goal I really set out to achieve when I was building this Web site for the first time and

I kept reminding myself that if you're going in and having to set up all these different styles for

different orientations like setting all of these different exceptions to handle whenever a device is

in landscape mode versus portrait well then you really haven't implemented responsive design correctly.

If your web site was truly and perfectly responsive and you really set things up correctly then your

content should be able to just resize and readjust itself based on the screen size available.

This means that when a devices in landscape mode and it has the extra space your content should just

adjust automatically without having to be told whether or not the device is actually in the landscape

or portrait.

There are a couple exceptions to this and a couple edge cases where you don't have any choice but to

put in a little exception.

But if you find yourself doing this very often then I will say you're probably not on the right track

and really need to rethink how you're implementing your responsive design or maybe even the responsive

units that you're using for different elements the last goal may seem very similar to the other two

but I think there is an important distinction and that is to be re sizable.

That was another thing that I was telling myself when I was building this Web site that if the Web site

can not be shrunken down in the browser.

So taking it safe from full screen to the smallest possible window size and at every point in between

the Web site should flow and adjust accordingly without any weird flashes of content without any distortion

without hiding any elements and without breaking any functionality it should just perfectly resize as

the window reads sizes in real time.

So that is very similar to looking perfect on all screen sizes but you can't change the size of the

screen on your phone.

Not unless you turn it sideways or maybe if you have multitasking and share the screen with two apps

but you can't make the physical screen size smaller or bigger whereas on a computer you can resize the

browser window to any size imaginable.

And a truly responsive website design is going to be able to handle any of those cases.

So ensuring that we maintain that standard for our design as well is going to be another goal.

So if we keep all of these goals in the back of our mind and maintain all of the best practices that

I've walked you through I really think that you're going to take a ton away just about responsive design

and the best practices there.

All while building the rest of our application so whenever we're building other features or other elements

we'll always be incorporating responsive design to make sure that it looks great everywhere.

And that's really going to help just drill the concept into your head and make it second nature to you.

All right.

So keep all that in mind when we move on to some of the material UI documentation pages that talk about

responsive design in the next video.