Responsive Web Design (RWD) MIS 3502 Jeremy Shafer Department of MIS Fox School of Business Temple University

Responsive Web Design (RWD) (1 of 2) What is Responsive Web Design? The idea has been called many things: “flexible”, “fluid”, “elastic” Bottom line: it is a web site (or web interface) that adapts to browser dimensions This is an essential consideration as we live in an environment full of diverse platforms and screen sizes.

Responsive Web Design (RWD) (2 of 2) According to Ethan Marcotte, RWD is three things: A flexible grid Flexible Images Media Queries Ethan Marcotte is a web designer, author, and public speaker. See http://ethanmarcotte.com He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design.

It’ really not as complicated as this. Flexible Grid Layout It’ really not as complicated as this.

Flexible Grid Layout (1) The term “Grid Layout” has its origins in graphic layouts for the printed page. Web developers adopted the concepts and terminology of the grid layout, and adapted it to the dimensions of common devices So, a 800 x 600 resolution screen might be sliced into ten, 80 pixel, columns. For now we only concern ourselves with the width of our display, as vertical scrolling is acceptable to most users.

Flexible Grid Layout (2) 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px

Flexible Grid Layout (3) 100px 100px 100px 100px 100px 100px 100px 100px

Flexible Grid Layout (4) Of course 800x600 is ancient. A more common resolution screen size would be 1024 x 768. Oh no! 1024 is an unwieldy number. Designers identified 960 pixels, with margin on the left and right, as an ideal width to work with conceptually.

960 pixels (1 of 2) Why 960? Well, it is close to 1024, and it has a lot of factors. 960px is neatly divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16 Also, 1024 x 768 was the most common resolution for many years and designers were forced to design for the lowest common denominator.

960 pixels (2 of 2) 80px 80px 80px 80px 80px 80px 80px 80px 80px 80px

Making it Flexible (1 of 4) If we specify our layout in specific pixel widths, then we have a very inflexible layout. We have a layout that is designed for one specific screen size. That’s not practical any more. So, we begin the process of making our grid and flexible grid. We do that by expressing fonts and widths in relative terms. Specifically, percentages and units of em.

Making it Flexible (2 of 4) 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333%

Making it Flexible (3 of 4) What just happened there? We replaced absolute pixel references with percentages. We calculate our percentages as follows: (Item width px) / (Item container px) It’s a good idea to document your reasoning in your css file. Like this: width: 8.33333% /* 80 / 960 */

Making it Flexible (3 of 4) Once again, the formula to remember is: 𝑇𝑎𝑟𝑔𝑒𝑡÷𝐶𝑜𝑛𝑡𝑒𝑥𝑡=𝑅𝑒𝑠𝑢𝑙𝑡

What about EM units? Font sizes are often expressed in pixels as well. By convention, we express fonts in terms of em units. Historically, the term “em” goes back to typography and the size of the letter “M” for a particular font. But I like to think of it in terms of emphasis A 1em font size is to be the default font size on the browser / device being used. A 2em font size is twice as big as that.

(Item size px) / (Context size px) What about EM units? (2) Again, we will replace absolute pixel references with the a relative unit. We calculate our percentages as follows: (Item size px) / (Context size px) It’s (still) a good idea to document your reasoning in your css file. Like this: font-size: 1.25em /* 20 / 16 */

Good rules of thumb … Use “em” units for font-sizes It is often OK to keep vertical dimensions in pixels. Use percentages for everything else.

A few more things to add to your bag of tricks… Don’t use HTML tables for layout Use <div> tags and the CSS float property instead of a table Set up a “clearfix” class to that you can stop the custom float behavior You *can* specify a min-width in pixels to force the float drop You should set the viewport with the following command: <meta name="viewport" content="width=device-width, initial-scale=1.0">

The clearfix trick .clearfix { clear: both; visibility: hidden; height: 0; display: block; } The “display: block;” command means display the element as a block element (like <p>) The clear property specifies the sides of an element where floating elements are not allowed to float. This statement says “clear both sides” please. The visibility property can make an element invisible. But (like the invisible man) it will still take up space on the page. The height: 0; statement means make this element infinitely small … so it won’t take up any space on the page. This is all just a work-around because we couldn’t say “display: none;”

Flexible Images

Flexible Images Note: It’s important to have a containing element! Flexible Images are necessary to scale images fluidly. The CSS attribute that allows us to do this is: max-width: 100%; That is, if we apply that style to an image, then it will expand (or shrink) to the size of its containing element. Like this: <img src="sample.png" style="max-width:100%;"> Note: It’s important to have a containing element!

Flexible Images (2) There are a number of extra steps you need to take in order to support legacy browsers. The older browsers don’t scale the images well. This problem is diminishing, as browsers continue to improve. It was really bad in IE9. If you ever need to justify a decision to not support an old browser, get some metrics. For example: http://www.w3schools.com/browsers/browsers_stats.asp

Media Queries

Media Queries Media queries allow us to override previously declared style sheet attributes using and @media rule. @media rules allow us to customize styles to categories of media, screen dimensions, or both.

This says … when you print this page, don’t display any of the images. Media Queries (2) For example: @media print {     img {         display: none;     } } This says … when you print this page, don’t display any of the images.

Media Queries (3) Another example: @media all and (max-width: 480px) { #header{ height: 20px; } 480px is a good threshold width. Screens below 480px are usually mobile devices. This says when the media is on any device, and width of the whole page (i.e. the viewport) is at most 480px, then apply the following special CSS.

I only care about these two … Media Types Media Type Description all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection Used for projected presentations, like slides screen Used for computer screens tty Used for media using a fixed-pitch character grid, like teletypes and terminals tv Used for television-type devices I only care about these two …

Time for a challenge…