What is Responsive Design?

Loading...

來自 University of Michigan 的課程

Advanced Styling with Responsive Design

1324 個評分

University of Michigan

Advanced Styling with Responsive Design

1324 個評分

課程 4（共 5 門，Specialization Web Design for Everybody (Basics of Web Development and Coding)）

It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of design has completely changed. People viewing your site will now expect that it will perform regardless of the platform (smartphone, tablet, laptop, or desktop computer). This ability to respond to any platform is called responsive design. This course will expand upon the basic knowledge of CSS3 to include topics such as wireframes, fluid design, media queries, and the use of existing styling paradigms such as Bootstrap. After the course, learners will be able to: ** Explain the mobile-first paradigm and the importance of wireframes in the design phase ** Create sites that behave across a range of platforms ** Utilize existing design frameworks such as Bootstrap This is the fourth course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on adding interactivity with the JavaScript Programming Language and completing a capstone project.

從本節課中

Week One: Style with Responsive Design

What does it mean to have responsive design for your site? How can you tell if your existing site is responsive? This week we will begin with the theories behind the "mobile-first paradigm" - the idea that your mobile site should provide everything needed, not a pared-down version of a good page. We end the week by taking the first concrete step of using fluid measurements in your CSS.

What is Responsive Design?5:16

Testing Existing Sites6:11

Benefits of Responsive Design4:57

Fluid Measurements7:25

Code With Me: Fluid Measurements5:35

與講師見面

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Professor
School of Information

Hi, everybody, so you're here and I'm here, and

we're here to talk about responsive design.

But one of the first questions should be, what is responsive web design?

And what it is, is it's designing your web site with the idea that people will

be viewing it from multiple screen sizes and different resolutions as well.

So we want to make sure that our side is going to, what we call work,

under any platform, any browser size or any orientation.

And by orientation I mean whether you turn your phone up or to the side.

And same for the tablet.

The most important lesson is that you want to make sure that the user has the power.

Don't dictate to them what they can and can't do.

So let me give you an example.

A lot of times when you're looking at a site on a smaller screen such as your

phone you get a lot less content.

And while it's true their smaller space it's not that there should be less things

you can do everything should just be laid out a little bit more intelligently.

You have to remember that people are doing more and

more things on their phone that they've never done before.

We often think now about watching videos, but

we also have to think about filling out applications, or coding.

There's going to be a lot of things that we don't even know yet that exist, so

we want to be as flexible as possible.

The most important thing is never assume that the user won't need access

to specific functionality.

I think we've all been there when we're looking at a website on a smaller device

and we just can't find the thing that we're looking for.

Or even worse, there's these pictures or buttons or different things we can't even

move them out of the way with our fingers because the site just won't work for us.

So here are some of the concepts that we're going to be considering

throughout this entire course.

Three concepts that I want you to keep in the back of your mind.

And I'm hoping at the end of this course you'll be able to say,

yeah I think I've got that, and the first one is called media queries,

and what media queries do is that they can detect the view port size and

other information about the device that the browser is on.

The next thing that we're going to want to talk about is this idea of

flexible grid-based layout for relative sizing.

And relative means, depending on how large the screen is,

that's how big your grid is going to be as well.

And finally we want to think about flexible images.

All these things add up, so that when you go to the page,

the user doesn't need to waste their time scrolling back and forth or

trying to resize things to be able to see everything.

We want it to happen really automatically.

So let's take a look at some examples that have great responsive design.

So the first place I'm going to take you is a website called mediaqueri.es.

This site has a really nice collection of different sites that it's found

that really kind of find that key to responsive design.

So let's go ahead and take a look at, I'll scroll down a few.

How about this one right here?

CapRadio, go any place.

So this site right now, when I'm looking at the large screen,

you can see that there's a definite look to the layout.

As I resize the screen, as if I'm looking perhaps on a tablet, and

I reload it you can see that things have moved over.

The navigation bar is now over to the left when it wasn't there before.

I'm going to go ahead and make it smaller still.

I don't even need to refresh.

And now you might see something that looks much more close.

To that look and feel of something you would see on the phone.

The navigation bar has completely disappeared,

and there's this little pop up and down.

These different sites just don't make everything smaller, let me make it bigger,

they actually think about the best way to lay out the content, so

that you can still find everything that's there without having to look too much.

Now, you can use that site to see examples of great responsive design,

but what if I also wanted to show you an example of kind of bad responsible design.

Unfortunately, when you Google that out, or

you look for that on your search engine, nobody really wants to

advertise the fact that they're really bad at web design ,so I found one for you.

It's the Internal Revenue Service.

And what we have here is a site that not only looks the same, but

is laid out the same no matter what type of screen you're looking at.

So it looks okay right here, but when I make the screen much smaller,

you can see that it didn't really do anything.

Now I actually have to physically scroll back and forth to see things.

The navigation bar hasn't changed.

You have the same size pictures.

This is just an example of really bad responsive design.

So let's work together over the next few weeks to make sure that you are avoiding

those same types of traps, and we're going to get started coding right away.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取