Responsive Web Design (RWD) MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/11/2016

Course Overview New tools Weeks Using a web framework Weeks 6 -8 Using a mobile device IDE Weeks 9-10 The class project (It’s a bake off!) Weeks We are (still) here PDO syntax MVC pattern JavaScript / AJAX JSON RWD Slide 2

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. Slide 3

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

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

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. Slide 6

Flexible Grid Layout (2) Slide 7 100px

Flexible Grid Layout (3) Slide 8 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. Slide 9

960 pixels (1 of 2) Why 960? Well, it is close to 1024, and it has a lot of factors. 960px is 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. Slide 10

960 pixels (2 of 2) Slide 11 80px

Making it Flexible (1 of 3) 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. Slide 12

Making it Flexible (2 of 3) Slide %

Making it Flexible (3 of 3) 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: % /* 12 / 960 */ Slide 14

What’s an EM? Slide 15 “Auntie Em! Auntie Em!”

What’s an EM? 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. On conventional desktop / laptop browser, 1em = 16px. On a smart phone 1em = approx 28px. A 2em font size is twice as big as that. Slide 16

What about EM units? (2) Again, we replaced absolute pixel references with the relative size. 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 */ Slide 17

Slide 18 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.

Slide 19 A few more things to add to your bag of tricks… Don’t use HTML tables for layout Use tags and the CSS float property instead 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

Time for an exercise… Slide 20