Errata, Praxisbeispiele und Links aus der 3. Auflage (2017)
Vorwort
Errata
Keine Fehler bekannt.
Praxisbeispiele
Kein Praxisbeispiel-Code in diesem Kapitel.
Links
- stuffandnonsense.co.uk
- hiddendangersproject.com
- trinipedia.com
Kapitel 1: Denken in flexiblen Strukturen
Errata
Keine Fehler bekannt.
Links
- alistapart.com/article/responsive-web-design
- www.themaninblue.com/experiment/ResolutionLayout
- flickr.com/photos/55350999@N07
- trentwalton.com/2012/10/03/a-new-microsoft-com
- rainypixels.com/words/the-story-of-the-new-microsoft-com
- www.windwaerts.de
- www.smashingmagazine.com
- alistapart.com
- mediaqueri.es
- zurb.com/responsive
- www.dtelepathy.com/blog/design/responsive-design-great-ux
- www.mobify.com/insights/70-stunning-responsive-websites-for-your-inspiration/
- 960.gs
- unsemantic.com
- stuffandnonsense.co.uk
Kapitel 2: Schnelleinstieg: Responsive Umsetzung eines fixen Layouts
Errata
Keine Fehler bekannt.
Links
- www.palantir.net/blog/responsive-design-s-dirty-little-secret
- zengrids.com
Kapitel 3: Die Schlüsseltechnologie Media Queries
Errata
Keine Fehler bekannt.
Praxisbeispiele
Kein Praxisbeispiel-Code in diesem Kapitel.
Links
- www.csszengarden.com
- drafts.csswg.org/mediaqueries-4/#mq-features
- caniuse.com/#feat=css-media-resolution
- www.w3.org/TR/mediaqueries-4/#mq-only
- www.quirksmode.org/mobile/viewports.html
- timkadlec.com/2013/01/windows-phone-8-and-device-width/
- www.w3.org/TR/css-device-adapt-1/#atviewport-rule
- cloudfour.com/thinks/the-ems-have-it-proportional-media-queries-ftw/
- www.mydevice.io/devices/
- github.com/twbs/mq4-hover-shim
- css-tricks.com/touch-devices-not-judged-size/
- elementqueries.com
- github.com/Snugug/eq.js
- alistapart.com/article/container-queries-once-more-unto-the-breach
- restivejs.com
- github.com/obihill/restive.js
- wurfl.sourceforge.net
- web.wurfl.io/
- handsetdetection.com
- deviceatlas.com
- detectmobilebrowsers.com
- www.smashingmagazine.com/2014/07/01/server-side-device-detection-with-javascript/
- www.smashingmagazine.com/2013/04/improve-mobile-support-with-server-side-enhanced-responsive-design/
- de.slideshare.net/dmolsenwvu/the-server-side-of-responsive-web-design
- httpwg.org/http-extensions/client-hints.html
- www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
Kapitel 4: Ein responsiver Workflow
Errata
Keine Fehler bekannt.
Links
- www.adobe.com/de/products/illustrator.html
- inkscape.org
- www.sketchapp.com
- www.smashingmagazine.com/2015/04/using-sketch-for-responsive-web-design-case-study/
- www.adobe.com/de/products/experience-design.html
- www.adobe.com/de/products/muse.html
- alistapart.com/article/style-tiles-and-how-they-work
- styletil.es
- github.com/ebinion/style-tiles-for-sketch
- color.adobe.com
- www.colourlovers.com/photocopa
- www.adobe.com/de/products/capture.html
- www.flickr.com/photos/58816914@N05/5648418982
- color.adobe.com/de/create/color-wheel
- styletil.es/downloads/Style_Tile_Template.psd.zip
- www.hongkiat.com/blog/style-guides-style-tiles/
- github.com/Pardot/Responsive-Boilerplate-for-Style-Tiles
- github.com/namanyayg/webstiles
- interfacesketch.com
- zurb.com/playground/responsive-sketchsheets
- sneakpeekit.com
- appsketchbook.com
- www.balsamiq.com/products/mockups
- pencil.evolus.vn
- www.omnigroup.com/omnigraffle/
- www.axure.com
- proto.io
- www.adobe.com/de/products/experience-design.html
- de.libreoffice.org/discover/impress/
- getbootstrap.com
- foundation.zurb.com
- bootstrapstudio.io/
- mobirise.com/
- getwirefy.com
- purecss.io
- www.webflow.com
- github.com/papalozarou/loznotes
- rizzo.lonelyplanet.com/styleguide/
- styleguides.io
- jacobrask.github.io/styledocco/
- pxgrid.github.io/aigis/
- trulia.github.io/hologram/
- github.com/adactio/Pattern-Primer
- prismjs.com
Kapitel 5: Design und Typografie
Errata
Keine Fehler bekannt.
Links
- bradfrostweb.com/blog/post/designing-with-dynamic-content
- github.com/andypike/surprise_lipsum
- patternlab.io
- github.com/pattern-lab/edition-node-gulp
- mustache.github.io
- browsersync.io
- github.com/pattern-lab/patternlab-php
- medium.com/ge-design/ges-predix-design-system-8236d47b0891
- rizzo.lonelyplanet.com/styleguide
- ux.mailchimp.com/patterns
- getuikit.com
- www.patternfly.org
- fractal.build
- github.com/davidhund/styleguide-generators
- services.google.com/fh/files/misc/multiscreenworld_final.pdf
- www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
- www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes
- mediaqueri.es
- jquerymobile.com
- labs.rampinteractive.co.uk/touchSwipe/demos/index.html
- hammerjs.github.io
- www.eurekalert.org/pub_releases/2013-05/hfhs-sbm051513.php
- www.stucox.com/blog/you-cant-detect-a-touchscreen/
- css-tricks.com/touch-devices-not-judged-size/
- mobile-patterns.com
- developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
- developer.android.com/design/index.html
- blogs.windows.com/buildingapps/2010/07/27/windows-phone-7-design-resources-ui-guide-and-design-templates/
- 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
- www.smashingmagazine.com/2013/06/adapting-to-a-responsive-design-case-study/
- github.com/thefella/Responsive-type-references
- typecast.com
- ffffallback.com
- fontdragr.com
- caniuse.com/#search=vw
- pxtoem.com
- dpi.lv
- webdesign.maratz.com/lab/responsivetypography/realtime
- nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height
- github.com/mnater/hyphenator
Kapitel 6: Semantik und Barrierefreiheit
Errata
Keine Fehler bekannt.
Praxisbeispiele
- Responsives Design mittels Lichtsensor (bsp_06-01)
- Demovideo zum Lichtsensor-Beispiel (bsp_06-01)
- HTML5-Formulare: Input-Types (bsp_06-02)
Das Beispiel zum "Licht-responsiven Webdesign" hat eine eigene Demosite, ein kurzes Video und einen Artikel im Weihnachtskalender 2013 der Webkrauts.
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
- www.rwd-praxis.de/light/
- sitesforprofit.com/mobile-menu-abtest
- sitesforprofit.com/menu-eats-hamburger
- sitesforprofit.com/hamburger-is-ok
- 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
Kapitel 7: Responsive Layout-Patterns
Errata
Keine Fehler bekannt.
Praxisbeispiele
- Basisversion (Mobile-First Praxisbeispiel) (bsp_07-01)
- Tabletversion (Mobile-First Praxisbeispiel) (bsp_07-02)
- Kleine Desktopversion (Mobile-First Praxisbeispiel) (bsp_07-03)
- Große Desktopversion (Mobile-First Praxisbeispiel) (bsp_07-04)
- Flexbox-Layout (bsp_07-05)
- Flexbox-Layout Content Switch (bsp_07-06)
- CSS-Grid-Layout (bsp_07-07)
Links
- www.rwd-praxis.de
- www.lukew.com/ff/entry.asp?933
- abookapart.com/products/mobile-first
- www.balsamiq.com/products/mockups
- necolas.github.io/normalize.css
- fonts.google.com
- www.paulirish.com/2012/box-sizing-border-box-ftw
- mydevice.io/devices/
- 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.designmadeingermany.de/magazin/5
- www.smashingmagazine.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
- msdn.microsoft.com/library/dn265027.aspx
- caniuse.com/#search=flex
- www.w3.org/TR/css-flexbox/
- css-tricks.com/snippets/css/a-guide-to-flexbox/
- caniuse.com/#search=grid
- www.w3.org/TR/css3-grid-layout/
- cssgridgarden.com
Kapitel 8: Frameworks für responsives Design
Errata
Keine Fehler bekannt.
Links
- gridpak.com
- gridinator.com
- html5boilerplate.com
- html5bones.com
- www.initializr.com
- usablica.github.io/front-end-frameworks/compare.html
- dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6/
- semantic-ui.com
- nt1m.github.io/material-framework/
- milligram.github.io/index.html
- flexboxgrid.com
- getwirefy.com
- alloyui.com
- foundation.zurb.com
- zurb.com/building-blocks
- foundation.zurb.com/sites/docs/responsive-navigation.html
- dragsponsive.com
- getbootstrap.com
- bootstrapstudio.io
- tilomitra.github.io/cssextras
- yui.github.io/skinbuilder/?mode=pure
- www.purecss.io
- github.com/yahoo/rework-pure-grids
- simplegrid.io
- jquery.com/download
- www.browserleaks.com/modernizr
- modernizr.com/docs
- modernizr.com/
- www.smashingmagazine.com/2015/12/introduction-to-postcss/
- 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
- thesassway.com/intermediate/using-source-maps-with-sass
- youtu.be/tQdbJHtu6kU
- breakpoint-sass.com
- github.com/at-import/breakpoint
- github.com/at-import/breakpoint/wiki
Kapitel 9: Navigationskonzepte
Errata
Keine Fehler bekannt.
Praxisbeispiele
- Basis-Layout für weitere Beispiele (Mobile-First) (bsp_09-00)
- Mini-Navigation (bsp_09-01)
- Priority-Navigation (GreedyNav.js) (bsp_09-02)
- Select-Navigation (bsp_09-03)
- Footer-Navigation (bsp_09-04)
- Toggle-Navigation (CSS) (bsp_09-05)
- Toggle-Navigation (ResponsiveNav) (bsp_09-06)
- Off-Canvas-Navigation (Pushy) (bsp_09-07)
- Slideout-Navigation (slideout.js) (bsp_09-08)
- Multilevel-Navigation (ohne doubleTapToGo) (bsp_09-09)
- Multilevel-Navigation (doubleTapToGo) (bsp_09-10)
- Multilevel-Navigation (Flexnav) (bsp_09-11)
Links
- trentwalton.com
- www.regent-college.edu
- www.ncsbn.org
- github.com/gijsroge/priority-navigation
- github.com/lukejacksonn/GreedyNav
- retreats4geeks.com/
- tinynav.viljamis.com
- builtwithmomentum.com
- responsive-nav.com
- github.com/viljamis/responsive-nav.js
- www.bodum.com
- www.christopheryee.ca/pushy/
- github.com/christophery/pushy
- github.com/Mango/slideout
- 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
- jasonweaver.name/lab/flexiblenavigation/
- github.com/indyplanets/flexnav
- slicknav.com
- tympanus.net/codrops/2015/11/17/multi-level-menu
- tympanus.net/codrops/2013/08/13/multi-level-push-menu
- bradfrost.com/blog/web/complex-navigation-patterns-for-responsive-design/
- bradfrost.github.io/this-is-responsive/patterns.html#navigation
Kapitel 10: Flexible Bildelemente
Errata
Keine Fehler bekannt.
Praxisbeispiele
- Basis-Layout für weitere Beispiele (Mobile-First) (bsp_10-00)
- Flexible Bilder (bsp_10-01)
- Bilder beschneiden (bsp_10-02)
- Flexible Teaserboxen (bsp_10-03)
- Gekachelte Hintergrundmuster (Grafik mit Transparenz und BG-Color) (bsp_10-04)
- CSS3-Hintergrundmuster (bsp_10-05)
- SVG-Hintergrundmuster (bsp_10-06)
- Vollflächige Hintergrundbilder (Fullpage-Parallax) (bsp_10-07)
- Vollflächige Teaserbilder (Promoboxen) (bsp_10-08)
- Skalierbare Background-Icons (einzeln und als CSS-Sprite) (bsp_10-09)
- Responsive Icons aus Icon-Font (bsp_10-10)
- Ligaturen-Icons + Demo (bsp_10-11)
- SVG-Sprite-Icons (interne Einbindung) (bsp_10-12)
- SVG-Sprite-Icons (interne Einbindung mit externen CSS) (bsp_10-13)
- SVG-Sprite-Icons (externe Einbindung) (bsp_10-14)
- SVG-Infografik vs. GIF-Infografik (bsp_10-15)
- Flowerish 1: SVG-Illustration direkt im HTML (bsp_10-16)
- Flowerish 2: SVG-Einbindungsarten (mit externem CSS) (bsp_10-17)
- Flowerish 3: SVG-Einbindungsarten (mit Inline-Styles im SVG) (bsp_10-18)
- SVG-Weichzeichnungs-Filter (bsp_10-19)
- srcset-Syntax für responsive Bilder (bsp_10-20)
- Intelligente Bildausschnitte mit Focalpoint (bsp_10-21)
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
- lea.verou.me/css3patterns/#arrows
- www.svgeneration.com
- caniuse.com/svg-filters
- www.gunsnroses.com
- tinypng.org
- fontello.com
- icomoon.io/app
- iconizr.com
- www.grumpicon.com
- github.com/FWeinb/grunt-svgstore
- www.flaticon.com
- github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
- www.spritecow.com
- css-tricks.com/examples/IconFont
- fontawesome.io
- www.s-ings.com/typicons/
- www.entypo.com
- www.fontsquirrel.com
- fontello.com
- fontastic.me
- icomoon.io
- glyphsapp.com
- modernizr.com/download?fontface-setclasses&q=font
- www.fileformat.info/info/unicode/block/private_use_area/utf8test.htm
- github.com/filamentgroup/a-font-garde
- icomoon.io/app
- symbolset.com
- alistapart.com/article/the-era-of-symbol-fonts
- jakearchibald.github.io/svgomg/
- github.com/jonathantneal/svg4everybody
- www.svgimages.com
- github.com/SirPepe/SpecGraph
- developer.mozilla.org/en-US/docs/Web/SVG
- sarasoueidan.com
- www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css
- css-tricks.com/mega-list-svg-information
- sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html
- sarasoueidan.com/blog/svg-coordinate-systems
- www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
- caniuse.com/#feat=svg-filters
- usecases.responsiveimages.org
- html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
- www.w3.org/TR/netinfo-api/#the-connection-interface
- html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element
- github.com/adamdbradley/focal-point
- css-tricks.com/using-webp-images/
- github.com/scottjehl/picturefill
- www.peterkroener.de/die-responsive-images-story
- cloudfour.com/thinks/the-real-conflict-behind-picture-and-srcset/
- httpwg.org/http-extensions/client-hints.html
- ericportis.com/etc/w_auto_demo/
- cloudinary.com/blog/automatic_responsive_images_with_client_hints
- www.netvlies.nl/blog/design-interactie/retina-revolution
- www.responsivebreakpoints.com/
- cloudinary.com/pricing
- 29a.ch/2014/04/03/smartcrop-content-aware-image-cropping
- github.com/andismith/grunt-responsive-images/
- www.andismith.com/grunt-responsive-images/
- www.npmjs.com/package/gulp-lwip
- github.com/scalableminds/gulp-image-resize
- www.npmjs.com/package/gulp-responsive
- www.imagemagick.org
- www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/
- www.thumbor.org
- adaptive-images.com
- web.wurfl.io/#image-engine
- docs.scientiamobile.com/documentation/image-engine/image-engine-getting-started
- cloudinary.com/documentation/image_transformations
- css-tricks.com/responsive-images-wordpress-cloudinary-part-1/
- docs.imgix.com/tutorials/responsive-images-client-hints?_ga=1.268627825.1849652972.1472144896
- docs.google.com/spreadsheets/d/1e4qdGEoq7tqDCnY7iSSnl3OFoWkzhRfVAly-73A3uCc/
Kapitel 11: Mehr flexible Inhalte
Errata
Keine Fehler bekannt.
Praxisbeispiele
- Basis-Layout für weitere Beispiele (Mobile-First) (bsp_11-00)
- Slick-Slider: Bildergalerie (bsp_11-01)
- Slick-Slider: Bilder-Carousels (bsp_11-02)
- Slick-Slider: Text-Slider (bsp_11-03)
- Responsive Lightbox (bsp_11-04)
- Responsive Imagemaps (bsp_11-05)
- HTML5-Videos (bsp_11-06)
- Nicht ganz responsive Video-Einbindungen (bsp_11-07a)
- Intrinsic-Ratio-Trick für responsive Video-Einbindungen (bsp_11-07b)
- Video-Seitenverhältnisse mit FitVids.js (bsp_11-08)
- HTML5-Videoplayer mit video.js (bsp_11-09)
- Flexible Google-Maps im iframe (bsp_11-10)
- Flexible Google-Maps mit Google-API (bsp_11-11)
- Scrollbare Tabellen (bsp_11-12)
- Tabellen mit CSS umstrukturieren (per data-Attribut) (bsp_11-13)
- Tabellen mit Foo-Table-Plugin (bsp_11-14)
- Flexibles "Tab-Reiter-Akkordeon" (bsp_11-15)
- Formulare (bsp_11-16)
- Inhalte per CSS ein- und ausblenden (Conditional Content) (bsp_11-17)
- Append Around: Inhalte neu anordnen (bsp_11-18)
Links
- kenwheeler.github.io/slick/
- github.com/kenwheeler/slick/
- responsiveslides.com
- tympanus.net/Development/Elastislide/
- www.woothemes.com/flexslider
- leastjs.com
- osvaldas.info/examples/image-lightbox-responsive-touch-friendly/
- medium.com/coding-design/9c7fe9db92c7
- jsfiddle.net/teddyrised/Lxzz29c2/embedded/result/#Result
- www.photoswipe.com
- fancyapps.com/fancybox
- fancyapps.com/fancybox/3/
- github.com/stowball/jQuery-rwdImageMaps
- caniuse.com/#search=video
- html5doctor.com/multimedia-troubleshooting
- easyhtml5video.com/de/
- developer.jwplayer.com/articles/html5-report/#tag-attributes-apis
- www.html5rocks.com/de/tutorials/video/basics/
- fitvidsjs.com
- toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js
- dollarshaveclub.github.io/reframe.js/
- github.com/davatron5000/FitVids.js/blob/master/README.md
- www.videojs.com
- docs.videojs.com/index.html
- ina-foss.github.io/amalia.js/
- www.mediaelementjs.com/
- support.google.com/maps/answer/144361?hl=de
- developers.google.com/maps/documentation/javascript/tutorial?hl=de
- github.com/filamentgroup/tablesaw
- filamentgroup.github.io/tablesaw/demo/swipe.html
- gergeo.se/RWD-Table-Patterns
- github.com/fooplugins/FooTable
- fooplugins.github.io/FooTable/docs/getting-started.html
- influxweb.github.io/cornerstoneUX.smartTabs/
- html5pattern.com
- html5pattern.com/Make_Your_Own
- danielfett.de/de/tutorials/tutorial-regulare-ausdrucke/
- www.wufoo.com/html5
- mobitest.akamai.com
- www.guypo.com/real-world-rwd-performance-take-2
- github.com/filamentgroup/AppendAround
- de.wikipedia.org/wiki/Werbebanner#Standardgr.C3.B6.C3.9Fen
- www.responsiveads.com
- www.youtube.com/watch?v=5Af6RwPnyrQ#t=23
- www.google.com/webdesigner
- inflagrantedelicto.memoryspiral.com/2016/02/responsive-scaling-in-animate-cc/
- www.bostonglobe.com
- github.com/madgex/lazy-ads
- zurb.com/playground/responsive-ads
- litmus.com/blog/mobile-market-share-drops-for-the-first-time-since-january-to-54
- foundation.zurb.com/emails.html
- foundation.zurb.com/emails/inliner-v2.html
- www.campaignmonitor.com/templates
- litmus.com/blog/25-free-responsive-hybrid-mobile-aware-email-templates
- tedgoas.github.io/Cerberus/
- responsiveemailpatterns.com
- mjml.io
- www.smashingmagazine.com/2017/01/making-responsive-html-email-coding-easy-with-mjml/
- 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
Kapitel 12: Testing und Qualitätssicherung
Errata
Keine Fehler bekannt.
Praxisbeispiele
Links
- validator.w3.org
- www.totalvalidator.com
- breakpointtester.com
- www.opera.com/de/developer/mobile-emulator
- ami.responsivedesign.is
- opendevicelab.com
- developer.apple.com/xcode/
- developer.android.com/studio/index.html
- developer.microsoft.com/en-us/windows/downloads
- www.microsoft.com/de-de/download/details.aspx?id=35471
- developer.amazon.com/fire-tablets
- adobe.com/de/products/edge-inspect.html
- blog.enterfra.me/2015/05/05/weinre-remote-debugging-server/
- people.apache.org/~pmuellr/weinre/docs/latest
- vanamco.com/ghostlab
- browsersync.io
- www.npmjs.com
- www.browserstack.com
- saucelabs.com
- www.browserling.com
- www.browsera.com
- www.seleniumhq.org
- www.youtube.com/watch?v=kCJwwRXUTdo
- galenframework.com
- mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices
- addons.mozilla.org/en-US/firefox/addon/selenium-ide/
- github.com/Heydon/forceFeed
- github.com/straker/css-style-guide-audit
- en.bem.info
- css-tricks.com/bem-101
- smacss.com
- davidwalsh.name/uncss
- github.com/addyosmani/grunt-uncss
- gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/
- uncss-online.com
- symdiff.github.io
- addons.mozilla.org/en-us/firefox/addon/dust-me-selectors
- gruntjs.com
- gulpjs.com
- www.hongkiat.com/blog/gulp-vs-grunt/
- www.npmjs.com/package/postcss-bem-linter
- www.npmjs.com/package/gulp-imagemin
- css-tricks.com/gulp-for-beginners/
- magazin.phlow.de/webdesign/gulp/
- www.holgerkoenemann.de/gulp-basics-ein-einsteiger-tutorial/
- css-tricks.com/organizing-grunt-tasks/
- web-und-die-welt.de/web/grunt-fuer-optimierte-frontend-entwicklung/
- gulpjs.com/plugins/
- gruntjs.com/plugins
- yeoman.io/blog/performance-optimization.html
Kapitel 13: Performanceoptimierung
Errata
Keine Fehler bekannt.
Links
- blog.optimizely.com/2016/07/13/how-does-page-load-time-impact-engagement
- www.quanta-computing.com/etam
- glinden.blogspot.de/2006/11/marissa-mayer-at-web-20.html
- developers.google.com/search/docs/guides/use-AMP-HTML
- wordpress.org/plugins/amp/
- instantarticles.fb.com
- www.apple.com/news/
- developers.google.com/web/progressive-web-apps/
- timkadlec.com/2013/01/setting-a-performance-budget/
- www.youtube.com/watch?v=yqejmZrtmNg
- timkadlec.com/2014/05/performance-budgeting-with-grunt/
- developer.yahoo.com/yslow
- developers.google.com/speed/pagespeed/insights
- www.webpagetest.org
- bauhaus.info
- spiegel.de
- www.perun.net/2012/02/06/performance-optimierung-dynamische-vs-statische-buttons-was-sagt-google-dazu
- ia.net/topics/sweep-the-sleaze
- twitter.com/smashingmag/status/204955763368660992
- www.heise.de/ct/artikel/Shariff-Social-Media-Buttons-mit-Datenschutz-2467514.html
- github.com/dbushell/Socialite
- dopiaza.org/tools/datauri/index.php
- websemantics.uk/tools/image-to-data-uri-converter/
- github.com/JosephClay/sass-inline-image
- www.npmjs.com/package/grunt-image-embed
- github.com/borodean/postcss-assets
- github.com/mrclay/minify
- github.com/jakubpawlowicz/clean-css
- github.com/scniro/gulp-clean-css
- httpd.apache.org/docs/2.4/mod/mod_deflate.html
- w3techs.com/technologies/details/ce-http2/all/all
- www.smashingmagazine.com/2016/02/getting-ready-for-http2/
- www.drweb.de/magazin/wordpress-und-http2-einfuehrung-77471/
- developers.google.com/speed/docs/insights/LeverageBrowserCaching#url-fingerprinting-verwenden
- developers.google.com/speed/docs/best-practices/caching
- jakearchibald.com/2016/caching-best-practices
- tinypng.org
- yeoman.io/blog/performance-optimization.html
- petercollingridge.appspot.com/svg-editor
- jakearchibald.github.io/svgomg/
- github.com/svg/svgo
- typekit.com
- www.fontsquirrel.com
- fontello.com
- github.com/johnsmclay/icnfnt
- www.base64encode.org
- css-tricks.com/authoring-critical-fold-css
- jonassebastianohlsson.com/criticalpathcssgenerator/
- criticalcss.com/
- github.com/addyosmani/critical
- github.com/addyosmani/critical-path-css-demo#tutorial
- github.com/filamentgroup/criticalCSS
- github.com/filamentgroup/loadCSS
- nimius.net/de/blog/artikel/critical-css/
- github.com/aFarkas/lazysizes
- gist.github.com/scottjehl/983328
- filamentgroup.com/lab/ajax_includes_modular_content
- gist.github.com/aarongustafson/5877063
- www.sitepoint.com/selective-content-loading
- github.com/aFarkas/lazysizes/tree/gh-pages/plugins/include
- developer.mozilla.org/en-US/docs/Web/API/window.matchMedia
- adactio.com/journal/5429
- github.com/aFarkas/lazysizes#lqipblurry-image-placeholderblur-up-image-technique
- manu.ninja/dominant-colors-for-lazy-loading-images
- wordpress.org/plugins/dominant-colors-lazy-loading
- github.com/Lorti/dominant-colors-lazy-loading-wordpress-plugin
Kapitel 14: Fazit
Errata
Keine Fehler bekannt.
Praxisbeispiele
Kein Praxisbeispiel-Code in diesem Kapitel.