Responsive vs. Adaptive Web Design

• A responsive web design will "fluidly change and respond to fit any screen or device size"

• An adaptive design will "change to fit a predetermined set of screen and device sizes"

Responsive Design• Set the boundaries

– Maintains left, right, top, bottom

– Only works with absolute positioned divs

• Use percentages

• Adjust with "calc"*– Can be used anywhere in CSS

– Compatibility can be an issue

Centering Elements• Relative divs are centered with margins

at "auto"– Margin: top right bottom left

• Absolute divs must combine both positioning and margins– Left: 50%;

– Margin: 0 0 0 –halfwidth;

Setting Element Sizes• Define a resizing function

function resizewin() {winw = $(window).innerWidth();winh = $

(window).innerHeight(); // Use this to resize specific elements

var bsize = winw + "px " + winh + "px";$("body").css("background-size", bsize);

}

• Call initially, and whenever the window is resized$(document).ready(function(){

resizewin();$(window).resize(function(e) {resizewin();});

});

Setting Element Sizes• Different media styles

– Sizes: height, width, min-height, max-width– Orientation: landscape, portrait– Aspect-ratio: horizontal/vertical– Resolution: dpi, dpcm, dppx– Color: bits per color component

• Two ways to include in your page:– Link to different CSS files based on device size<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

– Specify different CSS rules based on device size@media (min-width: 700px) and (orientation: landscape) { ... }