Let's look at the most obvious challenge to mobile design: screen size. How do you build a site that works for all of these different screen sizes?

To begin with, the coding of your website must be responsive. Responsiveness is the ability of a site to automatically optimize its layout for the size of the screen on which it's being viewed.

Today, responsiveness is a given. To see responsiveness in action, open a popular website on a desktop computer with a nice big monitor. Then drag the edge of your browser from the full screen to a width of about three inches. See how the site's content rearranges itself to fit the shrinking frame? That's happening because the site is programmed to be responsive.

There are many ways in which a responsive website can adapt to changing screen or window size. Elements can be rearranged to stack vertically as the screen narrows. Some content may be hidden until clicked on and photos can be cropped or resized to fit.

Notice that these changes don't always happen smoothly. There are points at which the design jumps to a new layout. For example, three columns of text and images suddenly become two. And then two jump to one. These are called break points.

What you don't see is every element of a layout just shrinking. Because if that's all that happened, almost everything would quickly become too small to be useful.

How many columns you start with, where the break points are, minimum font size for your text---these are all the choices that are essential to proper responsive design. And there are lots of elements to consider.

And in the next video, we'll go through a list of the most important ones.