Designing for Mobile

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

Designing for Mobile Part 2: Screen Size and Responsive Design

23 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