Designing for Mobile

6 Videos
Introduction 01:48 Screen Size and Responsive Design 01:33 The Smaller Screen - Optics and Layout 02:04 The Customer on the Move 03:00 The Bigger Picture 02:06 Conclusions 02:24
Select Series

Designing for Mobile Part 2: Screen Size and Responsive Design

6 views • May 01, 2020

Designing for Mobile
Part 2: Screen Size and Responsive Design


Responsive Design has become industry standard. In this video, you'll learn exactly what it is and what it means for viewing your website on screens of various sizes.
Transcript 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.
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.

Other videos you may like

Want to get Started?

Tell us about your project
Contact Us