IRC responsive design chat

Channel - #ResponsiveWebDesign

www.slideshare.net/chrisdavidmills/adapt-media-queries-and-viewport
http://www.slideshare.net/chrisdavidmills/adapt-and-respond-keeping-responsive-into-the-future

TOC to use

www.slideshare.net/chrisdavidmills/adapt-media-queries-and-viewport

Slide 5 - content for adaptive design

Slide 10 - three options for creative responsive sites/a mobile experience

Slide 15 - The core responsive technologies
	* liquid layouts
	* media types
	* media queries
	* viewport
	* adaptive images

Show http://people.opera.com/cmills/mediaquery/

Slide 22 - basics of media queries - ask audience if they want to head these basics

Slide 30 - choosing breakpoints

Slide 32 - most common media queries to use

Slide 34 - mobiles lie/viewport/device adaptation

Slide 45 - Other responsive design problems

	* responsive replaced elements
	Again, show Show http://people.opera.com/cmills/mediaquery/ - also mention object-fit

	* bandwidth/loading of resources

	mobile first
	responsive images

http://dev.opera.com/articles/view/responsive-images-problem/ - go through a few of these methods

	responsive video

	* resolution

Mention high resolution solutions.
Reference http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
show

http://people.opera.com/andreasb/viewport/ex05.html
http://people.opera.com/andreasb/viewport/ex06.html

	* processing power
	* control mechanisms


http://www.slideshare.net/chrisdavidmills/adapt-and-respond-keeping-responsive-into-the-future

Slide 54 - providing alternatives for older browsers

* Rely on graceful degradation
* Don't use new shiny stuff at all
* Use polyfills
* Use modernizr

http://people.opera.com/cmills/css3book/animated-form.html
http://people.opera.com/cmills/css3book/two-faced-cheek-modernizr.html

You can now do similar things with @supports

http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-supports

examples - see the examples in the spec

Support in chrome and Opera mobile 12


Slide 66 - Flexbox

show slides

Also show http://dev.opera.com/articles/view/flexbox-basics/

http://devfiles.myopera.com/articles/10532/flexbox-example-fixed-width.html
http://devfiles.myopera.com/articles/10532/flexbox-example.html

Slide 79 - multicol

show slides

also show http://dev.opera.com/articles/view/css3-multi-column-layout/

Slide 83 - match media

Slide 84 - CSS4 media queries