Responsive web design

Responsive web design tutorial (slides)

Layout, images, content

Not just desktop world need to display on multi devices - explosion screen resolutions and ratios

High resolution displays, lower bandwidth displays - media queries to detect browser width, device with, pixel density

Layouts:

• Proportional Sizing - percentage based layout 
• 'adaptive' content - see additional elements as screen real estate increases

Performance and expect page to load quickly is expectation Responsive means revenue - example O'Neill clothing

Universalmind.com responsive web site - resize and layout changes
Microsoft.com is responsive - sidebar moves to top
Boston Globe one of first responsive  sites

Ethan Marcotte - article at a List Apart  on responsive design May 2010 : Not appropriate to write separate site for different devices,  Fluid grids (poportional instead of working with fixed size, scale across different devices),  Flexible images  (flex to size of view port, serving up different sized  images based on device or screen)

based on size List a Part article on responsive design , Use of media queries to accomplish this - Mobile first design (core elements) - viewport scales out , additional content added . Detect browser width, detect aspect ratio, screen or print, with print some features hidden
http://reference.sitepoint.com/css/mediaqueries#mediaqueries__tbl_media-queries_media-features

http://www.ibm.com/developerworks/library/wa-cssqueries/#resources

rule if screen is 480px :

@media screen and (min-width :480px) {}

load different style sheet based on width

Here we scale out to 980px if mobile device with view meta tag (scale is zoom factor)
<meta name="viewport" content="width-device-width, initial-scale=1.0" >

Some sites turn off the scaling feauture

Even if you CSS display of none, the items still exist in DOM but not viewable

ie does not support media queries prior to ie9

@media query Style sheet based on ie version  (known as conditional comments)

<!-- [if lt IE 9]-->

For browsers that do not support media queries, See respond.js can use min with and max width

media query from javascript using window.matchmedia. also window.innerwidth, and window.devicePixelRatio


Responsive Layouts (porportional sizing) - think in percentages of layout, adaptive content, divide grid into block (i.e twelths) frameworks bootstrap 3, Others include Zurb, 320 and Up..rock hammer

Flex box html5 for responsive layout - layout either horizontally or verticaly , verticaly centering

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ie10 Grid kit tool set Responsive images

Codepen.io

Grid Layout

http://bradfrost.github.io/this-is-responsive/patterns.html

http://bradfrost.github.io/this-is-responsive/resources.html

http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

http://www.sitepoint.com/books/responsive1/