Responsive Web Design

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

https://alistapart.com/article/responsive-web-design

https://developers.google.com/web/fundamentals/design-and-ux/responsive/

https://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Responsive Web Design describes websites in which their design and development respond to the user’s behavior and environment ( screen size, platform and orientation). Responsive Web Design is achieved by creating flexible grids and layouts, images and a good use of CSS media queries. These websites should accommodate resolution, image size and scripting abilities.

Fluid images are created by hiding and revealing portions of images, creating sliding composite images and foreground images that scale with the layout. The most popular option is img{max-width:100%} which loads the image at it’s original size and grows narrower with the browser. However this option is not supported in IE. Another option is the Filament Group’s technique, <img src=”smallres.jpg” data-full src=”largeres.jpg”> This code not only resizes the images proportionately but also shrinks the image resolution so that there is no waste space.