Responsive Webdesign

Links

• grochtdreis.de
• webkrauts.de
• stuffandnonsense.co.uk
• myrainbownursery.co.uk
• www.enochs.co.uk

Links

• www.snackoclock.net/2012/08/simple-box-sizing-border-box-fallback-for-ie
• palantir.net/blog/responsive-design-s-dirty-little-secret
• zengrids.com
• pittsburghkids.org

Links

• www.csszengarden.com
• www.quirksmode.org/mobile/viewports.html
• adactio.com/journal/5088
• github.com/scottjehl/iOS-Orientationchange-Fix
• dev.w3.org/csswg/css-device-adapt
• timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design
• blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw
• www.mydevice.io/devices/
• github.com/scottjehl/Respond
• code.google.com/p/css3-mediaqueries-js
• restivejs.com
• github.com/obihill/restive.js
• wurfl.sourceforge.net
• handsetdetection.com
• deviceatlas.com
• detectmobilebrowsers.com
• www.lukew.com/ff/entry.asp?1392
• de.slideshare.net/dmolsenwvu/the-server-side-of-responsive-web-design
• www.smashingmagazine.com/2014/07/01/server-side-device-detection-with-javascript/

Links

• www.smashingmagazine.com/2011/01/17/productive-web-design-with-adobe-illustrator
• inkscape.org
• alistapart.com/article/style-tiles-and-how-they-work
• styletil.es
• color.adobe.com
• www.colourlovers.com/photocopa
• itunes.apple.com/de/app/adobe-capture-cc/id1040200189
• www.flickr.com/photos/58816914@N05/5648418982
• color.adobe.com/de/create/color-wheel/
• styletil.es/downloads/Style_Tile_Template.psd.zip
• github.com/Pardot/Responsive-Boilerplate-for-Style-Tiles
• www.republicofquality.com/style-tiles
• sourceforge.net/projects/wampserver
• sourceforge.net/projects/mamp
• sourceforge.net/projects/xampp
• die-netzialisten.de/wp-content/uploads/2012/05/SkizzenblattRWD.pdf
• interfacesketch.com
• zurb.com/playground/responsive-sketchsheets
• sneakpeekit.com/
• appsketchbook.com
• www.balsamiq.com/products/mockups
• pencil.evolus.vn
• www.omnigroup.com/products/omnigraffle
• www.axure.com
• proto.io
• www.libreoffice.org
• getbootstrap.com
• foundation.zurb.com
• getwirefy.com
• purecss.io
• www.thinkintags.com
• www.webflow.com
• creative.adobe.com/products/reflow/
• www.thinkintags.com/docs
• github.com/elliance/metaframe/
• evernote.com/intl/de
• markup.su/highlighter
• ush.herokuapp.com
• tohtml.com/html
• www.dexy.it
• vimeo.com/26417064

Links

• bradfrostweb.com/blog/post/designing-with-dynamic-content/
• github.com/andypike/surprise_lipsum
• patternlab.io
• mustache.github.io
• services.google.com/fh/files/misc/multiscreenworld_final.pdf
• www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes
• mediaqueri.es
• www.eurekalert.org/pub_releases/2013-05/hfhs-sbm051513.php
• hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how
• mobile-patterns.com
• developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
• developer.android.com/design/index.html
• go.microsoft.com/?linkid=9713252
• de.slideshare.net/khoitoanvn/multi-screenmobliewhitepaper-researchstudies-34552157
• trentwalton.com/2012/10/03/a-new-microsoft-com
• de.slideshare.net/jcleveley/mobilism-2013-a-story-of-how-we-built-responsive-bbc-news
• github.com/thefella/Responsive-type-references
• typecast.com
• ffffallback.com
• fontdragr.com
• pxtoem.com
• dpi.lv
• webdesign.maratz.com/lab/responsivetypography/realtime
• github.com/Wilto/Molten-Leading
• wilto.github.io/Molten-Leading
• nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height
• code.google.com/p/hyphenator
• simplefocus.com/flowtype
• fittextjs.com

Links

• www.w3.org/TR/WCAG
• www.einfach-fuer-alle.de/wcag2.0
• colororacle.org
• contrast-ratio.org
• snook.ca/technical/colour_contrast/colour.html
• www.w3.org/TR/ambient-light
• rwd-praxis.de/light
• dev.w3.org/csswg/mediaqueries4/#light-level
• exisweb.net/mobile-menu-abtest
• developers.google.com/webmasters/state-of-the-web/2005/classes
• diveintohtml5.info
• www.w3.org/TR/html5
• www.html5rocks.com
• html5doctor.com
• www.selfhtml5.org
• www.smashingmagazine.com/2011/11/18/html5-semantics
• www.w3.org/TR/html5/sections.html
• smacss.com
• www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss
• www.html5rocks.com/en/tutorials/forms/html5forms/
• www.wufoo.com/html5
• www.w3.org/TR/wai-aria/roles#landmark_roles
• www.hessendscher.de/wai-aria
• www.w3.org/TR/wai-aria
• www.w3.org/TR/wai-aria-practices

Links

• www.lukew.com/ff/entry.asp?933
• www.abookapart.com/products/mobile-first
• flyniki.de
• mobile.flyniki.com
• www.balsamiq.com/products/mockups
• necolas.github.io/normalize.css
• fonts.google.com/
• www.paulirish.com/2012/box-sizing-border-box-ftw
• screensiz.es/
• alistapart.com
• www.smashingmagazine.com
• vasilis.nl/nerd//code/measure-help/
• de.slideshare.net/yiibu/pragmatic-responsive-design
• www.lukew.com/ff/entry.asp?1514
• futurefriend.ly
• trentwalton.com
• www.readability.com
• www.designmadeingermany.de/magazin/5
• modernizr.com
• foodsense.is
• zurb.com/playground/projects/off-canvas/offcanvas-1.html
• zurb.com/playground/projects/off-canvas/offcanvas-2.html
• zurb.com/playground/projects/off-canvas/offcanvas-3.html
• zurb.com/playground/projects/off-canvas/offcanvas-4.html
• zurb.com/playground/off-canvas-layouts
• codepen.io/bradfrost
• bradfrost.github.io/this-is-responsive/resources.html
• gridpak.com
• www.caniuse.com
• www.w3.org/TR/css3-flexbox
• www.w3.org/TR/css3-grid-layout

Links

• gridinator.com
• html5boilerplate.com/
• html5bones.com
• www.initializr.com
• usablica.github.io/front-end-frameworks/compare.html
• designmodo.com/bootstrap-vs-foundation/
• matthewhartman.github.io/base
• imperavi.com/kube
• gumbyframework.com
• www.profoundgrid.com
• goldilocksapproach.com
• getwirefy.com
• www.thinkintags.com
• www.yaml.de
• foundation.zurb.com
• foundation.zurb.com/sites/docs/kitchen-sink.html
• dragsponsive.com
• getbootstrap.com
• tilomitra.github.io/cssextras
• yui.github.io/skinbuilder/?mode=pure
• www.purecss.io
• jquery.com/download
• www.browserleaks.com/modernizr
• modernizr.com/docs
• modernizr.com/
• rubyinstaller.org
• thesassway.com/beginner/getting-started-with-sass-and-compass
• foundation.zurb.com/docs/components/grid.html
• thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
• addons.mozilla.org/en-US/firefox/addon/firecompass-for-firebug/
• thesassway.com/intermediate/using-source-maps-with-sass
• youtu.be/tQdbJHtu6kU
• jakearchibald.github.io/sass-ie/
• breakpoint-sass.com
• github.com/at-import/breakpoint/wiki

Links

• github.com/izilla/jQuery-touchMenuHover
• tinynav.viljamis.com
• responsive-nav.com
• github.com/viljamis/responsive-nav.js
• github.com/dbushell/Responsive-Off-Canvas-Menu
• www.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website
• www.smashingmagazine.com/2014/02/24/off-the-beaten-canvas-exploring-the-potential-of-the-off-canvas-pattern
• github.com/cloudfour/offCanvasMenu
• github.com/ftlabs/fastclick
• github.com/leifcr/jquery-csswatch
• osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
• osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.min.js
• jasonweaver.name/lab/flexiblenavigation/
• github.com/indyplanets/flexnav
• tympanus.net/codrops/category/playground
• tympanus.net/codrops/2013/08/13/multi-level-push-menu
• slicknav.com
• bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
• bradfrost.github.io/this-is-responsive/patterns.html#navigation

Links

• css-tricks.com/the-difference-between-nth-child-and-nth-of-type
• css-tricks.com/how-nth-child-works
• nth-test.com
• lea.verou.me/css3patterns
• www.svgeneration.com
• caniuse.com/svg-filters
• hairproject.ch
• css-tricks.com/perfect-full-page-background-image
• github.com/srobbin/jquery-backstretch
• github.com/danmillar/jquery-anystretch
• www.spritecow.com
• spriteme.org
• compass-style.org
• compass-style.org/help/tutorials/spriting
• compass-style.org/reference/compass/helpers/sprites
• www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials
• tinypng.org
• svgimages.com/
• github.com/SirPepe/SpecGraph
• developer.mozilla.org/en-US/docs/Web/SVG
• www.smashingmagazine.com/2012/01/16/resolution-independence-with-svg
• www.sitepoint.com/a-farewell-to-css3-gradients
• css-tricks.com/mega-list-svg-information
• sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html
• sarasoueidan.com/blog/svg-coordinate-systems
• benhowdle.im/svgeezy
• lynn.ru/examples/svg/en.html
• www.drweb.de/magazin/svg-fallback-fuer-aeltere-browser-tipps-zur-alternativen-auszeichnung-ohne-javascript-49478
• iconizr.com
• www.grumpicon.com
• github.com/FWeinb/grunt-svgstore
• www.flaticon.com
• blattchat.com/2013/07/13/fun-with-svg-filters
• caniuse.com/#feat=svg-filters
• css-tricks.com/examples/IconFont/
• fontawesome.io
• css-tricks.com/flat-icons-icon-fonts
• fontello.com
• fontastic.me
• iconvau.lt
• icomoon.io
• glyphsapp.com
• github.com/filamentgroup/a-font-garde
• symbolset.com
• alistapart.com/article/the-era-of-symbol-fonts
• en.wikipedia.org/wiki/FlashPix
• responsiveimages.org
• html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
• html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element
• www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing
• blog.cloudfour.com/the-real-conflict-behind-picture-and-srcset
• www.peterkroener.de/die-responsive-images-story
• caniuse.com/#feat=picture
• caniuse.com/#feat=srcset
• github.com/scottjehl/picturefill
• github.com/adamdbradley/focal-point
• www.w3.org/TR/netinfo-api/#the-connection-interface
• www.netvlies.nl/blog/design-interactie/retina-revolution
• adaptive-images.com
• adaptive-images.com/download.htm

Links

• github.com/viljamis/ResponsiveSlides.js
• responsiveslides.com
• responsiveslides.com/themes/themes.html
• www.woothemes.com/flexslider
• www.photoswipe.com
• tympanus.net/Development/Elastislide/index.html
• leastjs.com
• fancyapps.com/fancybox
• medium.com/coding-design/presenting-fluidbox-9c7fe9db92c7
• codepen.io/terrymun/full/JKHwp
• osvaldas.info/image-lightbox-responsive-touch-friendly
• osvaldas.info/examples/image-lightbox-responsive-touch-friendly/
• github.com/stowball/jQuery-rwdImageMaps
• caniuse.com/#search=video
• html5doctor.com/multimedia-troubleshooting
• www.mirovideoconverter.com
• www.advancesharp.com/Blog/1021/html5-video-and-browser-compatibility
• html5rocks.com/de/tutorials/video/basics
• fitvidsjs.com
• toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js
• github.com/davatron5000/FitVids.js/blob/master/README.md
• www.videojs.com
• github.com/bradvin/FooTable
• fooplugins.com/footable-demos
• github.com/filamentgroup/tablesaw
• filamentgroup.github.io/tablesaw/demo/swipe.html
• zurb.com/playground/responsive-tables
• gergeo.se/RWD-Table-Patterns
• github.com/kazmeyer/ResponsiveTabAccordion
• html5pattern.com
• html5pattern.com/Make_Your_Own
• www.danielfett.de/internet-und-opensource,artikel,regulaere-ausdruecke
• www.wufoo.com/html5
• mobitest.akamai.com
• www.guypo.com/real-world-rwd-performance-take-2
• css-tricks.com/examples/MediaQueriesSidebar
• css-tricks.com/css-media-queries
• gist.github.com/scottjehl/983328
• filamentgroup.com/lab/ajax_includes_modular_content
• gist.github.com/aarongustafson/5877063
• www.sitepoint.com/selective-content-loading
• developer.mozilla.org/en-US/docs/Web/API/window.matchMedia
• github.com/paulirish/matchMedia.js
• adactio.com/journal/5429
• www.google.com/webdesigner
• www.responsiveads.com
• www.creativebloq.com/netmag/responsive-web-design-and-advertising-advertiser-perspective-6135595
• www.youtube.com/watch?v=5Af6RwPnyrQ#t=23
• www.bostonglobe.com
• github.com/madgex/lazy-ads
• zurb.com/playground/responsive-ads
• adsense.blogspot.de/2013/07/the-responsive-web-adsense.html
• support.google.com/adsense/answer/3213689?hl=de
• support.google.com/adsense/answer/3543893?hl=de
• webgilde.com/en/adsense-responsive-ad
• webplatform.adobe.com/css-regions-polyfill
• css-tricks.com/content-folding
• webplatform.adobe.com/regions
• github.com/FremyCompany/css-regions-polyfill
• www.golem.de/news/webstandards-haben-css-regions-eine-zukunft-1401-104204.html
• github.com/filamentgroup/AppendAround
• www.campaignmonitor.com/resources/will-it-work/email-clients
• litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot
• zurb.com/ink
• zurb.com/ink/inliner.php
• www.campaignmonitor.com/templates
• litmus.com/blog/go-responsive-with-these-7-free-email-templates-from-stamplia
• litmus.com/email-builder
• github.com/mailchimp/email-blueprints
• htmlemailboilerplate.com
• responsiveemailpatterns.com
• litmus.com
• www.emailonacid.com
• mailchimp.com/resources/email-design-guide
• www.campaignmonitor.com/resources/will-it-work
• www.campaignmonitor.com/guides
• www.campaignmonitor.com/gallery
• reallygoodemails.com

Links

• validator.w3.org
• www.totalvalidator.com
• developers.google.com/web/tools/chrome-devtools/device-mode/
• lab.maltewassermann.com/viewport-resizer
• www.responsinator.com
• outof.me/responsive-inspector-beta-released
• breakpointtester.com/
• quirktools.com/screenfly
• www.opera.com/de/developer/mobile-emulator
• ami.responsivedesign.is
• opendevicelab.com
• www.adobe.com/de/products/edge-inspect.html
• people.apache.org/~pmuellr/weinre/docs/latest
• www.wampserver.com/en
• www.apachefriends.org/de/xampp.html
• github.com/viljamis/Remote-Preview
• vanamco.com/ghostlab
• developer.apple.com/xcode
• developer.android.com/studio/index.html
• dev.windowsphone.com/en-us/downloadsdk
• developer.amazon.com/sdk/fire.html
• developers.google.com/speed/docs/insights/using_firefox
• developer.yahoo.com/yslow
• timkadlec.com/2013/01/setting-a-performance-budget/
• timkadlec.com/2014/05/performance-budgeting-with-grunt/
• bauhaus.info
• faz.net
• rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html
• www.perun.net/2012/02/06/performance-optimierung-dynamische-vs-statische-buttons-was-sagt-google-dazu
• ia.net/blog/sweep-the-sleaze
• twitter.com/smashingmag/status/204955763368660992
• www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html
• github.com/dbushell/Socialite
• dopiaza.org/tools/datauri/index.php
• websemantics.co.uk/online_tools/image_to_data_uri_convertor
• github.com/nzakas/cssembed
• www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files
• christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries
• github.com/scottjehl/eCSSential
• code.google.com/p/minify
• httpd.apache.org/docs/2.4/mod/mod_deflate.html
• developers.google.com/speed/docs/best-practices/caching
• petercollingridge.appspot.com/svg-editor
• github.com/svg/svgo
• typekit.com
• www.fontsquirrel.com
• fontello.com
• github.com/johnsmclay/icnfnt
• www.motobit.com/util/base64-decoder-encoder.asp
• yuilibrary.com/yui/docs/api/modules/imageloader.html
• yuilibrary.com/yui/docs/api/modules/get.html
• www.appelsiini.net/projects/lazyload
• luis-almeida.github.io/unveil
• css-tricks.com/authoring-critical-fold-css
• github.com/at-import/jacket
• github.com/filamentgroup/loadCSS

Links