Responsive Web Design – Eine Linksammlung

28. Juni 2013 at 09:00

 


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

http://thatcoolguy.github.io/gridless-boilerplate/