Responsive Web Design – Eine Linksammlung
Diese Linksammlung beinhaltet neben Artikeln und Vorträgen die das
Thema inhaltlich beleuchten auch praktische Tools für die Umsetzung.
Artikel & Vorträge:
http://trentwalton.com/2011/07/14/content-choreography/
http://daverupert.com/2013/04/responsive-deliverables/
http://vimeo.com/55076713
http://de.slideshare.net/yiibu/pragmatic-responsive-design
http://alistapart.com/article/responsive-web-design
http://gravitydept.com/blog/magento-imagine-2013-responsive-design-panel/
Blogs & Autoren:
http://trentwalton.com
https://twitter.com/RWD
http://bradfrostweb.com/
http://daverupert.com/
Shops
http://skinnyties.com/
http://vsco.co/store
http://www.unitedpixelworkers.com/
http://bradfrostweb.com/demo/mobile-first/?codekitCB=390071910.751946#
Konzept & Design:
1. Pattern
http://bradfrost.github.io/this-is-responsive/patterns.html
http://bradfrostweb.com/blog/web/responsive-nav-patterns
http://responsivenavigation.net/examples
2. Navigation
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
http://tympanus.net/Blueprints/SlidePushMenus/
http://responsive-nav.com/
3. Best Practice
http://worldwildlife.org/
http://www.bbcgoodfood.com/
http://www.starbucks.com/
http://www.sony.com/index.shtml
http://www.time.com/time/
4. Maps
http://www.mapbox.com/tour/
Tools für Designer
1. Moodboard / StyleTiles
http://styletil.es
http://danielmall.com/articles/rif-element-collages
2. Fonts
3. Icon-Fonts
http://icomoon.io
Hier ein ausführlicher Artikel zum Umgang mit Icomoon:
http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon
http://css-tricks.com/examples/IconFont (Gründe für IconFonts)
http://fontastic.me
http://fortawesome.github.io/Font-Awesome/icons
4. SVG
http://danielmall.com/articles/svg-workflow-for-designers/
Frontend:
1. Bilder
http://www.resrc.it/
http://scottjehl.github.io/picturefill
https://github.com/scottjehl/picturefill
Einsatz von SVG:
http://www.grumpicon.com
Choosing A Responsive Image Solution
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
2. Video:
http://flowplayer.org/demos/
http://alistapart.com/article/creating-intrinsic-ratios-for-video
3. Typografie:
http://fittextjs.com/
http://letteringjs.com/
4. Grids:
https://gridsetapp.com