This document discusses responsive design and provides resources on the topic. It begins with an introduction to responsive design and links to early examples from 2010. It then lists frameworks for building responsive sites, such as 320 and Up. Various responsive design concepts are covered like CSS media queries, flexible grids, and responsive images and videos. Frameworks like Twitter Bootstrap are mentioned. Emerging mobile trends around apps like Flipboard are also discussed.

1. Responsive Design
about.me/markustripp
@markustripp

2. about
Markus Tripp, 38, Salzburg, Linz
Sony, Netociety, Wikitude,Yasssu, Fabasoft

3. the boston globe
Der Durchbruch
http://www.bostonglobe.com

4. begin
A LIST apart: May 25, 2010, Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/

5. 320andup
Erstes Framework
http://stuffandnonsense.co.uk/projects/320andup/

6. Simon Collison
Frühes Beispiel
http://colly.com/

7. A book apart
http://www.abookapart.com/products/responsive-web-design

8. Beispiele
Ultimate Responsive Web Design Roundup
http://www.webdesignerdepot.com/2011/09/the-ultimate-
responsive-web-design-roundup/

9. konzepte
CSS Media Queries, Flexible Grid, Images,
Videos, ...

10. media queries
@media only screen and
(max-width: 980px) and
(min-width: 500px) {
body {background: black};
}

11. flexible media
Bilder
http://filamentgroup.com/examples/responsive-images/
Videos
http://webdesignerwall.com/demo/elastic-videos/
Text
http://fittextjs.com/

12. twitter bootstrap
Responsive HTML5 User Interface
http://twitter.github.com/bootstrap/

13. m-trends
Flipboard iPhone, Google+
native apps, mobile web,
responsive design, mobile hybrid

14. Flipboard
Video
http://scobleizer.com/2011/12/12/viral-coefficients-store-
feature-branding-influencers-cool-apps-on-ios-first/
iPad
http://www.youtube.com/watch?v=11pQ5sb5wME&t=6m30s
iPhone
http://www.youtube.com/watch?v=11pQ5sb5wME&t=9m20s

15. Danke
about.me/markustripp
@markustripp