Responsive-Web Design (RWD)

Goal: learn how to build mobile first websites using the mobile first approach: design using sketch sheets, media queries, and breakpoints to allow design to be responsive to mobile, tablet and desktop.

Create a navigation that is focused and user friendly.

Understand the performance implications of using svg vs jpg, vs encode Data URIs for external resource extraction.

#Progress Understanding the difference methods of responsive, adaptive, and fluid design.
Responsive : using css, html to shrink, hide, enlarge, wrap content/text, alter images to be viewed on any platform. This is mode through media queries that determine the width or height of the devicel; also uses relative units to determine placement and sizing of elements on the UI screen.

Adaptive : this approach uses static layouts to render the correct view for the correct device. For example, some common breakpoints would be: 320, 480, 760, 960, 1200, 1600; these would load the corresponding page for the device.

** Fluid **: this approach takes the percentage of each of the elements displayed and adjusts it accordingly to the screen.