Web site:
http://www.iicm.tugraz.at/keith/
Slides:
http://keithandrews.com/talks/2015/uxgraz-2015-01-27/rwd.html
Tue 27 Jan 2015, UX Graz Meetup.
A single web site design which dynamically responds (adapts) to the characteristics (screen width, resolution, capabilities) of the display device.
The same web site at the same URL works and provides an appropriate experience across all devices:
2nd Edition, 03 Dec 2014!
http://mattandrews.info/talks/port80-2013/
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Lists of responsive web sites:
mediaqueri.es
http://designmodo.com/responsive-design-examples/
Individual examples of responsive web sites:
bostonglobe.com
smashingmagazine.com
time.com
engadget.com
http://bbc.co.uk/bbcone/
http://channel4.com/news/
http://theguardian.com/uk?view=mobile
http://gov.uk/
http://ted.com/
http://awwwards.com/
/* settings for window-width: narrow */ @media only all and (max-width: 40em) { ... } /* settings for window-width: medium */ @media only all and (min-width: 40em) and (max-width: 60em) { ... } /* settings for window-width: wide */ @media only all and (min-width: 60em) { ... }
Responsive design approaches:
[rather than graceful degradation]
http://www.frankieroberto.com/responsive_text
http://mobile.smashingmagazine.com/2012/02/27/ever-justification-for-responsive-text/
http://elvery.net/demo/responsive-tables/
https://filamentgroup.github.io/tablesaw/demo/kitchensink.html
http://jsbin.com/apane6/14
http://filamentgroup.com/examples/rwd-table-patterns/
http://css-tricks.com/examples/ResponsiveTables/responsive.php
http://mobifreaks.com/user-interface/responsive-and-seo-friendly-data-tables/
http://view.jquerymobile.com/1.3.1/dist/demos/examples/tables/movie-list.html
http://dbushell.com/2012/01/05/responsive-tables-2/
http://codepen.io/JasonAGross/full/rjmyx
http://zurb.com/playground/responsive-tables
http://libcodes.com/codes/css3-rainbow-responsive-price-tables
http://bradczerniak.com/responsivetables/
http://iipimage.sourceforge.net/2012/08/responsive-images-using-iipimage/
http://www.iandevlin.com/blog/2013/10/responsive-web-design/resimagecrop-a-responsive-image-solution
picture element --> RespImg Syntax proposal (src-n)
http://tabatkins.github.io/specs/respimg/Overview.html
<img alt="Photo of Keith." src-1="(max-width: 300px) keith-s.jpg" src-2="(max-width: 600px) keith-m.jpg" src="keith-l.jpg" />
picturefill polyfill
@media print and (min-resolution: 300dpi) {...}
Media Queries Inside SVG:
http://blog.cloudfour.com/media-queries-in-svg-images/
http://people.opera.com/andreasb/demos/demos_svgopen2009/update/svgscalelogo.html
http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/
http://www.hongkiat.com/blog/responsive-web-nav/
http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/
@media all and (orientation: landscape) {...}
http://bdconf.com/
Videos available on Vimeo channel
http://vimeo.com/bdconf
http://fronteers.nl/congres/2013
Videos available on Vimeo channel:
http://vimeo.com/fronteers
http://webdirections.org/
Videos available:
http://webdirections.org/videos/
http://mobilism.nl/
Videos available:
http://mobilism.nl/2013/coverage
http://aneventapart.com/
Videos available:
http://aneventapart.com/news/tag/video
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
http://mattandrews.info/talks/port80-2013/
Prof. Keith Andrews
IICM, Graz University of Technology, Austria
Web site:
http://www.iicm.tugraz.at/keith/
Slides:
http://keithandrews.com/talks/2015/uxgraz-2015-01-27/rwd.html