Web site:
http://www.iicm.tugraz.at/keith/
Slides:
http://keithandrews.com/talks/2017/cos-2017-03-11-rwd/
Sat 11 Mar 2017, COS, FH Joanneum, Graz.
A single web site design which dynamically responds (adapts) to the characteristics (screen width, resolution, capabilities, ...) of the user's device.
The same web site at the same URL works and provides an appropriate experience across all devices:
Responsive web design is a combination of:
Responsive Layout: dynamically adjusting the layout to best suit the available window size (reflow at breakpoints, rescale in between).
Responsive Content: dynamically adjusting embedded content (tables, images, videos, charts, adverts, etc.) to best suit the device characteristics (space, resolution, etc.).
Responsive Interaction: dynamically adjusting interaction and navigation elements (menus, buttons, search boxes, etc.) to best suit the device characteristics (size, touch, voice, etc.).
Progressive enhancement: selectively adding support for additional features such as location, orientation, tilt, and gestures.
Detect features not devices!
http://smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/
http://mattandrews.info/talks/port80-2013/
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Same URL | Same HTML | |
---|---|---|
Responsive | y | y |
Adaptive | y | n |
Separate | n | n |
Based on Google's definitions at
https://developers.google.com/webmasters/mobile-sites/mobile-seo/
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/
http://guypo.com/rwd-2014/
[as opposed to graceful degradation]
http://alistapart.com/article/understandingprogressiveenhancement
/* 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) { ... }
http://www.frankieroberto.com/responsive_text
http://mobile.smashingmagazine.com/2012/02/27/ever-justification-for-responsive-text/
max-width: 60em;or use CSS3 text wrapping:
text-overflow: ellipsis;or use CSS3 columns:
-webkit-column-count: 2; -webkit-column-rule: 0.1em solid #bbb; -webkit-column-gap: 2em; -moz-column-count: 2; -moz-column-rule: 0.1em solid #bbb; -moz-column-gap: 2em;
line-height: 1.2; word-spacing: -0.1em; letter-spacing: -0.05em;
body { hyphens: auto; } code, var, kbd, samp, listing, plaintext, xmp, abbr { hyphens: none; }
p { text-align: justify; } /* but turn it off for narrower screens */ @media only screen and (max-width: 40rem) { p { text-align: left; } }
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/
width: auto; max-height: 20em;
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" />
Today, we can use the picturefill polyfill:
http://scottjehl.github.io/picturefill/
@media print and (min-resolution: 300dpi) {...}
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://fronteers.nl/congres/
Videos available on Vimeo channel:
http://vimeo.com/fronteers
http://aneventapart.com/
Videos available:
http://aneventapart.com/news/tag/video
https://webexpo.net/prague2016/
Videos linked from program:
https://webexpo.net/prague2016/program/
http://mobilism.nl/
Videos available:
http://mobilism.nl/2015/coverage
http://bdconf.com/
Videos available on Vimeo channel
http://vimeo.com/bdconf
http://webdirections.org/
Videos available:
http://webdirections.org/videos/
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
http://mattandrews.info/talks/port80-2013/
Web site:
http://www.iicm.tugraz.at/keith/
Slides:
http://keithandrews.com/talks/2017/cos-2017-03-11-rwd/