Part 1 of 5 | Next
By Lon Hosford
Designing for mobile first is very easy if you have a single column of text and add the CSS img {height: auto; width: 100%; } to make the images flexible. But ultimately you design multiple column layouts and graphics that may not be suitable for dynamic resizing across the wide width spectrum of viewing screens that your visitor may be using. 
In particular for smaller devices you really do not want to exceed the device width. More importantly you do not want the device web browser scaling your fine layout and design into something hard to appreciate and even to read.
Responsive Web Page Design
To handle different viewing widths and device web browser defaults you are introduced to responsive web design.
Responsive design can be a very confusing subject with various approaches, techniques and even interpretations as to what it means. One dimension is designing different experiences for different target viewing devices but achieving the same content and action goals of the web page visit. Wow that is a lot when you figure the hundreds of viewing devices around. The other dimension is the implementation on the technical plain in HTML and CSS and is the main focus of these articles.
Mobile First Responsive Design Demo
[iframe https://www.youtube.com/embed/8CFfFDxMSR0 640 360]
Source Files for the video series: Download
Responsive Design Approach Filtering
On the technical side there are many approaches using HTML and CSS. A lot depends on design and what you can capitalize based on the features of the target devices such as aspect ratio, resolution, color, width and height to name a few. That is a lot of variables to design around when you consider the number of devices, their differences and even a simple feature of screen orientation. So you need to know when anyone of those has merit for detection and thus a design change to take advantage. For example a higher resolution might offer showing a better quality video or image.
So you need to filter and have a base point. With that in mind, one feature that transcends across all of these choices is device viewport widths. Designing for device viewport widths makes a great base point for simplicity of design and of implementation.
Designing for the Smallest Targeted Viewport Width
This series of articles presents one approach that focuses on planning for device widths and designing for the smallest width first. We can call this the mobile first approach. But it really designing for the smallest targeted viewport width. I will explore the viewport in one article, but the viewport is basically what you see if you position a window on your computer partially offscreen. You could say the smallest viewport width is one pixel, but really it is more what you want to put your time and effort into designing. Rather you need to be more selective about the target design viewport widths.
Dealing with the Endpoint Viewport Widths
You are going to have to think about the viewport width below your smallest target and the viewport width above the largest. Generally for the smallest viewport width you have a single column flexible layout using the smallest fonts that present text in a reasonable manner and images that are resized. I like to call that the base. I should be able to see the base from a small width to the largest width monitor resolution I can find. At the extremes it may not be very aesthetic, but it does allow content consumption.
For the largest target viewport width you are going to cap the content width.
Finally you are going to have two or three or more if you want to work harder, target viewport widths to make a design. In between those targets, your design is likely to be flexible. The target viewport widths are also called breakpoints.
[ad name=”Google Adsense”]
For example you may have the first viewport width set at 320 pixels, the second at 768 pixels, the third at 1024 pixels. You design for each needs to be flexible up to the next breakpoint. That handles the variety of devices between the breakpoints. The final breakpoint will work the same but it has a limit. The first breakpoint you could also specify a minimum scaling limit, but I would recommend you target the smallest width to simplify your work.
This series assumes you are new to responsible design using CSS but have a general experience with CSS that you can recognize it and query the Internet for additional learning as you need it. If not here are some resources that I have found helpful:
[ad name=”Pearson Web Dev Books”]
Project File Review
We will use a paired down HTML and CSS file for this series. This video reviews what is already set up.
[iframe https://www.youtube.com/embed/Glh4eGcMaRI 640 360]
Source Files for the video series: Download
