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: –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 –Specify different CSS rules based on device (min-width: 700px) and (orientation: landscape) {... }