Errata, Praxisbeispiele und Links aus der 1. Auflage (2014)
Vorwort
Errata
Keine Fehler bekannt.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Kein Praxisbeispiel-Code in diesem Kapitel.
Kapitel 1: Denken in flexiblen Strukturen
Errata
Seite 34 (Link-Korrektur)
Das genannte Widget für OS X von Jasper Haggenburg ist unter dem genannten Link nicht mehr verfügbar.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Links
- alistapart.com/article/responsive-web-design
- www.themaninblue.com/experiment/ResolutionLayout
- trentwalton.com/2012/10/03/a-new-microsoft-com
- rainypixels.com/words/the-story-of-the-new-microsoft-com
- www.windwaerts.de
- www.time.com/time
- alistapart.com
- mediaqueri.es
- responsivedeck.com
- zurb.com/responsive
- www.mobify.com/blog/70-stunning-responsive-sites-for-your-inspiration
- hoverstud.io/calculator
- www.rwdcalc.com
- 960.gs
- unsemantic.com
- sundaybestdesigns.com
- stuffandnonsense.co.uk
Kapitel 2: Umsetzung eines fixen Designs in ein flexibles Layout
Errata
Seite 53 und 54 (Quellcode)
Statt min-width muss es in beiden Fällen max-width heißen (der Quellcode auf der DVD ist korrekt).
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Kapitel 3: Die Schlüsseltechnologie Media Queries
Errata
Keine Fehler bekannt.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Kein Praxisbeispiel-Code in diesem Kapitel.
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
- github.com/scottjehl/Respond
- code.google.com/p/css3-mediaqueries-js
Kapitel 4: Ein responsiver Workflow
Errata
Seite 96 (Link-Korrektur)
Der Link des Webservice von Kuler zum Erstellen von Color Themes hat sich geändert.
Seite 99 (Link-Korrektur)
Interface Sketch hat eine neue Adresse.
Seite 102 (Link-Korrektur)
Der Download des Frameworks Bootstrap erfolgt über eine eigene Website.
Seite 109 (Link-Korrektur)
Der Webservice Code2Evernote ist nicht mehr erreichbar.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Kein Praxisbeispiel-Code in diesem Kapitel.
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
- kuler.adobe.com
- www.colourlovers.com/photocopa
- itunes.apple.com/us/app/adobe-kuler/id632313714
- www.flickr.com/photos/58816914@N05/5648418982
- kuler.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
- www.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
- www.thinkintags.com/docs
- evernote.com/intl/de
- markup.su/highlighter
- ush.herokuapp.com
- tohtml.com/html
- forodin.com/code2evernote
- www.dexy.it
- vimeo.com/26417064
Kapitel 5: Design und Typografie
Errata
Seite 121 (Link-Korrektur)
Der abgedruckte Link zum Artikel des Smashing Magazine unter uxdesign.smashingmagazine.com/ ist jetzt über www.smashingmagazine.com/ erreichbar.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Links
- github.com/bradfrost/patternlab
- 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
- 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
- fittextjs.com
Kapitel 6: Semantik und Barrierefreiheit
Errata
Seite 156 und 158 (Link-Korrekturen)
Die abgedruckten Links zu den Artikel des Smashing Magazine unter coding.smashingmagazine.com/ sind jetzt über www.smashingmagazine.com/ erreichbar.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
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
- leaverou.github.io/contrast-ratio
- snook.ca/technical/colour_contrast/colour.html
- www.w3.org/TR/ambient-light
- rwd-praxis.de/light
- 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/html/wg/drafts/html/master/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
Kapitel-Überschrift
Die Überschrift lautet korrekt "Responsive Layout-Patterns" (ohne "Desktop First").
Seite 166 (Link-Korrektur)
Flyniki hat relauncht und verwendet jetzt eine andere Adressen. Die abgedruckte Mobil-URL leitet jetzt weiter auf die Mobile Website von AirBerlin.
Seite 205 (Link-Korrektur)
CanIuse ist im Buch falsch geschrieben.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Links
- www.lukew.com/ff/entry.asp?933
- www.abookapart.com/products/mobile-first
- www.flyniki.com/de-DE/start.php
- mobile.flyniki.com
- www.balsamiq.com/products/mockups
- necolas.github.io/normalize.css
- www.google.com/fonts
- www.paulirish.com/2012/box-sizing-border-box-ftw
- alistapart.com
- www.smashingmagazine.com
- 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
Kapitel 8: Frameworks für responsives Design
Errata
Seite 226
Die Linearisierung bei GroundworkCSS wird bei 480px ausgelöst - nicht bei 48px (Dank an Peter Müller).
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Links
- gridinator.com
- html5boilerplate.com/mobile
- html5bones.com
- www.initializr.com
- usablica.github.io/front-end-frameworks/compare.html
- getbootstrap.com
- matthewhartman.github.io/base
- imperavi.com/kube
- gumbyframework.com
- www.profoundgrid.com
- goldilocksapproach.com
- inuitcss.com
- www.thinkintags.com
- tilomitra.github.io/cssextras
- yui.github.io/skinbuilder/?mode=pure
- jquery.com/download
- zeptojs.com
- www.browserleaks.com/modernizr
- modernizr.com/docs
- www.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
Kapitel 9: Navigationskonzepte
Errata
Seite 265 (Link-Korrektur)
Der abgedruckte Link zum Artikel des Smashing Magazine unter coding.smashingmagazine.com/ ist jetzt über www.smashingmagazine.com/ erreichbar.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
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
- 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
- tympanus.net/codrops/category/playground
- tympanus.net/codrops/2013/08/13/multi-level-push-menu
- bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
- bradfrost.github.io/this-is-responsive/patterns.html#navigation
Kapitel 10: Flexible Bildelemente
Errata
Seite 296 (Link-Korrektur)
Das Tutorial zum Erstellen von Sprites mit Compass im Webmasterarchiv gibt es leider nicht mehr. Beim Aufruf des abgedruckten Links erfolgt eine Weiterleitung auf Werbeseiten. Alternativ gibt es ein Tutorial hier.
Seite 298 (Grammatik)
Das Sprite, das für hochauflösende Displays angelegt wurde, ist jetzt von sogar kleiner als das Original in Standardgröße.
Seite 297, 305, 316 (Link-Korrekturen)
Die abgedruckten Links zu den Artikel des Smashing Magazine unter coding.smashingmagazine.com/ und mobile.smashingmagazine.com/ sind jetzt über www.smashingmagazine.com/ erreichbar.
Seite 303 (Quellcode)
Statt <object src="vektorgrafik.svg"> muss es heißen <object data="vektorgrafik.svg">
Seite 305 (Quellcode)
Wir haben Hier zwar erklärt, dass Sie das Modernizr-Objekt abfragen müssen, um für Browser die SVG nicht kennen alternativ Bilder eines anderen Formats bereitzustellen, aber nicht beschrieben wie das geht:
<script>
if (!Modernizr.svg) {
...
}
</script>
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
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
- github.com/SirPepe/SpecGraph
- benhowdle.im/svgeezy
- lynn.ru/examples/svg/en.html
- blattchat.com/2013/07/13/fun-with-svg-filters
- caniuse.com/svg-filters
- www.svgbasics.com
- www.smashingmagazine.com/2012/01/16/resolution-independence-with-svg
- www.sitepoint.com/a-farewell-to-css3-gradients
- css-tricks.com/examples/IconFont/
- css-tricks.com/flat-icons-icon-fonts
- fontello.com
- fontastic.me
- iconvau.lt
- icomoon.io
- glyphsapp.com
- symbolset.com
- alistapart.com/article/the-era-of-symbol-fonts
- en.wikipedia.org/wiki/FlashPix
- responsiveimages.org
- www.w3.org/TR/html-picture-element
- www.w3.org/TR/html-srcset/
- www.w3.org/TR/netinfo-api/#the-connection-interface
- 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
- webstandard.kulando.de/post/2012/08/20/retina-display-mit-css-background-image-und-image-set-zu-scharfen-bildern
- blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images
- github.com/scottjehl/picturefill
- jquerypicture.com
- github.com/borismus/srcset-polyfill
- www.netvlies.nl/blog/design-interactie/retina-revolution
- adaptive-images.com
Kapitel 11: Mehr flexible Inhalte
Errata
Seite 373 (Codebeispiel ganz unten)
body: after {
content: 'tablet';
Die Hochkommata um 'tablet' fehlen im unteren Code-Beispiel.
Seite 374 (Link zum Artikel zum Beispiel)
Der direkte Link zur Quelle lautet: adactio.com/journal/5429.
Seite 378 (Link-Korrektur)
Der Artikel über die effektiven Preise pro tausend Seiten-Impressions (eCPM) auf mobilen Geräten (von netmagazine.com) ist jetzt über www.creativebloq.com erreichbar.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
- Ausgangszustand für flexible Inhalte
- Responsive Slides
- Flexslider Slideshow
- Flexslider Thumbnailgalerie
- Flexslider Carousel
- Responsive Imagemaps (nicht responsive Version)
- HTML5-Videos
- Video (iFrame) - nicht flexibel
- Video (iFrame)
- Fidvids
- Flexible Maps
- Tabellen (nicht flexibel)
- Tabellen (hide on mobile)
- Tabellen (TH-Labels im CSS)
- Tabellen (TH-Labels im data-Attribut)
- Footable
- Tab-Akkordeon
- Kontaktformular
- Website Title-Icon
- Conditional Loading
- CSS Regions
- Append Around
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
- kamilczujowski.github.io/least
- github.com/stowball/jQuery-rwdImageMaps
- caniuse.com/#search=video
- html5doctor.com/multimedia-troubleshooting
- www.advancesharp.com/Blog/1021/html5-video-and-browser-compatibility
- www.html5rocks.com/de/tutorials/video/basics
- fitvidsjs.com
- github.com/davatron5000/FitVids.js/blob/master/README.md
- github.com/bradvin/FooTable
- fooplugins.com/footable-demos
- 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
- gist.github.com/aarongustafson/5877063
- filamentgroup.com/lab/ajax_includes_modular_content
- www.sitepoint.com/selective-content-loading
- developer.mozilla.org/en-US/docs/Web/API/window.matchMedia
- github.com/paulirish/matchMedia.js
- adactio.com/journal
- www.responsiveads.com
- www.responsiveads.com/ad-formats-showcase
- www.creativebloq.com/netmag/responsive-web-design-and-advertising-advertiser-perspective-6135595
- www.bostonglobe.com
- www.labnol.org/internet/google-adsense-responsive-design/25252
- css-tricks.com/content-folding
- html.adobe.com/webplatform/layout/regions
- github.com/filamentgroup/AppendAround
Kapitel 12: Qualitätssicherung und Optimierung
Errata
Seite 395 (Schreibfehler und Link-Korrektur)
Wenn Sie die den Chrome-Inspector aktivieren, …
Sie finden das Chrome-Plugin Adobe Edge Inspect jetzt hier.
Seite 405 (Link-Korrektur)
Die Website inside.godaddy.com existiert nicht mehr. Sie finden das Beispiel zu Lazy Social Buttons on Hover auf Github.
Seite 414 (Link-Korrektur)
Wenn die Website von ICNFNT nicht erreichbar ist, finden Sie das Projekt auch auf Github.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
- Combine Scripts (PHP-Dateien: CSS und JS)
- Webfonts mit Subsets
- Lazy Loading
Links
- validator.w3.org
- www.totalvalidator.com
- lab.maltewassermann.com/viewport-resizer
- www.responsinator.com
- outof.me/responsive-inspector-beta-released
- quirktools.com/screenfly
- screenqueri.es
- www.opera.com/de/developer/mobile-emulator
- ami.responsivedesign.is
- opendevicelab.com
- creative.adobe.com/de/products/inspect
- 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
- faz.net
- rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html
- zeptojs.com
- mobilegeeks.de
- www.perun.net/2012/02/06/performance-optimierung-dynamische-vs-statische-buttons-was-sagt-google-dazu
- www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html
- github.com/godaddy/lazy-social-buttons
- 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
- www.icnfnt.com
- fontello.com
- www.motobit.com/util/base64-decoder-encoder.asp
- yuilibrary.com/yui/docs/api/modules/imageloader.html
- yuilibrary.com/yui/docs/api/modules/get.html
- luis-almeida.github.io/unveil
Kapitel 13: Fazit
Errata
Keine Fehler bekannt.
Haben Sie einen Fehler bemerkt? Schreiben Sie uns an errata.2019@rwd-praxis.de.
Praxisbeispiele
Kein Praxisbeispiel-Code in diesem Kapitel.