The principle issues of responsive web design involves dealing 'responsively' with: web page layout; screen size; orientation and navigation across a variety of 'devices' such as: mobile (smart phones), pads, tablets and personal computers.
This is no small task and often has been approached by building multiple web pages -- one for each type of device. Clearly there should be some unifying technologies or techniques that allow a single web page to detect and respond to the many variations. The two most cited contribution to this discussion are two books:
These both qualify as required reading. Over the past five years various other authors and developers have honed this topic along various dimension of technology and design -- but the principles from the two works above are generally accepted.
How is this to be done? With CSS!
This sequence of topics in this course necessitates having covering the basics of HTML, then CCS and lastly Responsive Design. So having finished these essential elements we can now turn our attention to responsiveness.
liquid (aka fluid)
The address the issues of various screen sizes (i.e., screen resolutions) across a variety of devices, the central issues is to be able to adjust the size of things relative to the space available. Traditional page layout designs used fixed pixel measurements to size the web page elements (e.g., ...style="width:200px;"...). Any element using this fixed pixel dimension would, however, consume different amounts of the screen real estate on different devices with various pixel resolutions. The CSS attribute that allows to easily address this issue is to specify a page element's size using a percentage rather than a fixed pixel width (e.g., ... style="width:20%; ...). This could apply to an element's size properties: like width or height as well as an element's page location like top or left or an element's characteristics like font-size, border-width, etc.
For example, use this slider to change the size (using width:some_number%;) of the image below:
Width: 15% 50%
HTML element for the image below is now:
<img src="ballpit.jpg" id="bp1" style="width:;">
Note that if you change your browser window size the image changes size -- and maintains the same relative screen area.
CCS3 provides some addition measurements to assist in sizing HTML elements.
There are four useful viewpoint attributes: vh; vh; vmin; and vamx.
some numbervw
means viewport width percentage: e.g., 1vw is 1% of viewport width
means viewport width percentage: e.g., 1.8vw is 1.8% of viewport width
some numbervh
means viewport height percentage: e.g., 1vh is 1% of viewport height
means viewport height percentage: e.g., 1.8vh is 1.8% of viewport height
some numbervmin
means the smallest viewport percentage which ever is smaller of vw or vh:
e.g., 1vmin is 1% of viewport width or height whichever is smaller
some numbervmax
means the largest viewport percentage which ever is larger if vw or vh:
e.g., 1vmax is 1% of viewport width or height whichever is larger
This browser viewport values are currently:
Note below what would happen if we used a border.
The offset width is two pixels larger since .offsetWidth includes the border. See the box-sizing correction below.
And additional use of these viewport attributes is the sizing of fonts for readability. Various authors discuss this:
Laura Franz: 45 to 85 characters (including spaces and punctuation) per line for web pages (2015)
Mike Anderson: 66 "The 66-character line(counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.” The Elements of Typographic Style Applied to the Web
"As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user's preference."
and
"Do not specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print).Use relative length units such as percent or (better) em"
Xavier Alexandre says: If good measure is the goal, why not set container width in ems? A character width is around half an em, so a 45-75 characters line is around 23-37ems.
Let us take Xavier's recommendation and note that the font-size for the body of this document is:
font-size:1em; Choose Line Width: 23em 37 em
Current Width:30.0 em
Byte Count: Approximate Line Count: lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar, justo quis tincidunt accumsan, lectus risus facilisis urna, sit amet convallis ex eros nec massa. Nam eros eros, venenatis ut tristique volutpat, ornare eget dolor. Aenean auctor volutpat accumsan. Etiam ut lectus iaculis, hendrerit turpis ut, pulvinar velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dui tellus, fringilla sed rutrum interdum, convallis vel dolor. Nam rutrum, orci lacinia aliquet faucibus, erat lectus luctus neque, in finibus arcu lorem vitae sapien. Sed convallis augue arcu, non sagittis nunc consectetur non. In sed euismod erat, non pulvinar sem. Praesent maximus neque sed eros convallis egestas.
media queries
A CSS media query is essentially an "if statement" that tests a condition. If the condition (query) is true then specific CSS is applied.
media query for orientation
By loading different stylesheets
based on the orientation, we can have different page layouts for the two basic screen orientations in CSS:
@media screen and (orientation: portrait) { ... }
or
@media screen and (orientation: landscape) { ... }
For demonstration purposes I have made different style sheets components to be applied to the two different values of orientation to be applied to a DIV block containing a representation of a page with:
a header -- always full width at the top
a navigation bar:
for portrait -- full width on beneath the header
for landscape -- in a left side bar
a content section:
for portrait -- full width underneath the navigation bar
for landscape -- in a right side bar
a footer -- always full width at the bottom
Your current screen orientation is now: unknown [Resize your browser window to detect the change in orientation]
Sed urna augue, facilisis ut elit in, tristique vulputate ante. Etiam et volutpat est, id semper ligula. Suspendisse potenti. Donec consectetur, odio nec elementum pulvinar, leo sem accumsan purus, eu aliquet orci purus non nulla. Ut sit amet pretium tellus, et placerat nulla. Phasellus arcu justo, feugiat et odio nec, imperdiet pellentesque mi. Morbi maximus porttitor mauris tincidunt vulputate. Fusce eu odio eget ante vestibulum luctus. Pellentesque turpis urna, interdum at tincidunt non, finibus nec diam. Donec vel mi magna. Nullam in euismod risus, in euismod elit. Fusce sollicitudin leo id ornare pretium.
Vivamus eget nibh rutrum, finibus sem posuere, scelerisque mi. Nunc laoreet risus vel tristique auctor. Ut porta quis sapien sit amet tincidunt. Quisque lobortis nisl quis risus tristique faucibus. Aliquam eget massa auctor, pharetra massa eu, blandit leo. Nullam non diam lectus. Nunc faucibus, ante laoreet vehicula finibus, dui lacus aliquet dui, eget dignissim purus dui vitae ipsum.
footer
The relevant css for this orientation detection is:
#nlist {list-style-type: none; /* remove bullets on ul tags*/
margin: 0;
padding: 0;
}
#nobullet {text-decoration:none;} /* remove underline on links*/
/* for landscape below: */
/* the navigation "bar" is on the left side 150 of 500 */
/* the content box "cont" is on the right side 330 of 500 */
/* the list items "nlistitem" are blocks 120px wide */
@media screen and (orientation: landscape){
#bar {width:150px;display:inline-block;vertical-align:top;}
#cont {width:330px;display:inline-block;vertical-align:top;}
#nlistitem {
display: block;
width: 120px;
background-color:LightGray;
padding: 4px 0 4px 16px;
margin: 4px 0px 4px 4px;
}
}
/* for portrait orientatation below: */
/* the navigation "bar" is on the full width 500 px */
/* the content box "cont" is on the full width 500 px below "bar" */
/* the list items "nlistitem" are inline flow 60px wide */
@media screen and (orientation: portrait){
#bar {width:500px;display:inline-block;vertical-align:top;}
#cont {width:484px;display:inline-block;vertical-align:top;}
#nlistitem {
display: inline;
width: 60px;
background-color:LightGray;
padding: 4px 16px 4px 16px;
margin: 0px 0px 8px 4px;
}
}
media query for screen sizes
The measurement of the space available for rendering normally uses either the feature:
screen [for the currently available space within the application, e.g., browser]
or
device [for the available space on the device]
There are normally four dimensional size media attributes:
min-width : value [CSS applied when screen or device width > min-width]
max-width : value [CSS applied when screen or device width < max-width]
min-height: value [CSS applied when screen or device height > min-height]
max-height: value [CSS applied when screen or device height < max-height]
The attributes width and height are normally prefixed by min- or max- to avoid having to use the < or > signs. The media query construction allows variations such as:
@media screen and (min-width: 500px) {...}
@media device and (min-width: 500px) and (min-height:500px) {...}
[above, the and requires ALL conditions to be true]
@media screen and (min-width: 500px), (min-height:500px), max-width:100px {...}
[above, a comma separated query constitutes the uses of "OR" -- so if any one of them is true
the CSS applies]
@media screen and (min-width: 500px) and not (min-height:500px) {...}
[above, a not is allowed outside the parenthesis to negate the condition]
media query breakpoints
So how does one deal with specifications for all the common devices one may encounter?
The simple answer is that you have to take each different device into account and provide alternative CSS for each one using queries such as those above. These separate specifications are called breakpoints. A lot of work? Yes, but you can also take advantage of excellent pages such as reponsivedesign.is to find complete here:
Such a lengthy list as the one above -- which has 24 device specifications -- is an inevitable outcome of the complexity of making the user experience consistent across all devices. Further the list of considerations must be changed regularly as new devices enter the marketplace.
Layout Options
Central to any webpage layout is the the spatial organization of page elements. Responsive design utilizes several techniques to arrange the page elements. The three common issues are:
1. Grid Layout using negative margins
2. Grid Layout affected by box-sizing: border-box 3. Grid Layout using flexbox
These approaches use CSS to accomplish the layout task. Others approaches are available (e.g., javascript control of CSS properties) but these are the ones most common discussed.
The entire process of responsive design has received a considerable amount of attention and been largely attributed to the original proposals made by:
Ethan Marcotte's 2011 book Responsive Web Design (now in 2nd edition)
Luke Wroblewski's 2011 book Mobile First
The features of the CSS-based are constantly in flux and are being updated and modified rapidly. This approach is very popular and will continue to impact the web design. And flexbox is clearly the superior way to do this.
These are but a few of the many criticisms. I have some of my own.
Everything that responsive design does with pure CSS -- I can do better with javascipt.
I can get pixel perfect results using the DOM and javascript and can do it directly to the page under a wide variety of detectable circumstances.
The unmanageable and unreadable media queries have logic and length that both defy my understanding and patience as a programmer.
The CSS junkies have taken a helpful tool and tried to make a programming language out of it. They have attempted to make a silk purse out of a sow's ear -- CCS is not javascript -- not by a stretch. CSS lacks the flow control tools of "if" and "loop" of real programming languages and has an even more minimal list of sequential processes. It is CSS is part of a markup language -- not a programming language.
The general parametric case seems to escape these CSS designers.
I think it is their lack of mathematical expertise or sophistication. If I am confronted with a 'shape and zoom' issue (which is what all this "responsive design" is), then all i need to do is parameterize the shape and provide mathematical proportions to create the zoom in-out effects. It is not 'rocket surgery' or 'brain science', it is writing the general case solution (i.e., an equation or relationship) and then make parameters that implement the general case.
Form follows function
I seldom start with form and most always start with the function of the thing I am wishing to build. This is not always true -- but most of the time. I prefer to ask: "What does it do?" rather than "What does it look like?". I generally put off the painting and trim work until after I have the structure built and know it is functional.
I am constantly amazed that nearly every example of responsive design I have seen doesn't do anything. It looks nice and maybe has some links judiciously placed -- but it just sits there and is pleasing to my eye -- much like the high school prom queen [Fill in your appropriate memory here].