Responsive Web Design mit TYPO3

  • Published on
    22-May-2015

  • View
    14.622

  • Download
    0

Embed Size (px)

DESCRIPTION

Tipps und Tricks zur Umsetzung von Responsive Webdesign mit dem OpenSource CMS TYPO3. Mit vielen Snippets (Typoscript, CSS, HTML).

Transcript

<ul><li> 1. Wir leben TYPO3Responsive mit TYPO3Stolpersteine und Best PracticeWir leben TYPO3 in2code.de</li></ul> <p> 2. Was machen die bei in2codeWir untersttzen TYPO3-, Internet- und Full-ServiceAgenturen genauso wie groeund mittelgroe Firmen, dieauf TYPO3 Spezialwissenangewiesen sind.Wir leben TYPO3in2code.de 3. ZielWir leben TYPO3in2code.de 4. Erklrung von Responsive Webdesign im Allgemeinen Responsive Webdesign mit TYPO3 Stolpersteine Best PracticeWir leben TYPO3 in2code.de 5. Was istRWD wirklichWir leben TYPO3in2code.de 6. Was sind Mediaqueries und was passiert eigentlich Fr was dienen Breakpoints Welche Frameworks gibt es und wann brauche ich eins Unterschiede zwischen Width und Device-WidthWir leben TYPO3in2code.de 7. Das nunmit TYPO3Wir leben TYPO3 in2code.de 8. config. Einstellungen Doctype setzen AbsRefPrefix setzen Charset, locale und language setzenconfig fr RWD: http://pastebin.com/k3H8n8ZmWir leben TYPO3in2code.de 9. Markup RenderingHTML-Rendering im Frontend von TYPO3 ndern: Keine Grenangaben in DIV-Containern mitgeben Bildbeschreibungen mit Breiten versehenRWD-Setup: http://pastebin.com/3t3CsY3PWir leben TYPO3 in2code.de 10. HTML-Header Viewport IE-Kompatiblitt Apple-Device UntersttzungHeader-Einstellungen: http://pastebin.com/VwmpYwX9Wir leben TYPO3in2code.de 11. StolpersteineWir leben TYPO3 in2code.de 12. Das kann Kopfzerbrechen bereiten Videos Tabellen Bildunterschriften Performance (wg. doppeltem HTML, zu groe Bilder) Redakteur sieht echte Bildgre nicht Touch/No-Touch: Bedienung unterschiedlich Devices: Nutzerverhalten unterschiedlichWir leben TYPO3 in2code.de 13. Best PracticeWir leben TYPO3 in2code.de 14. Umgesetzte Projekte zum Spicken TUM: http://www.tum.de TUM-Lehre: http://www.lehre.tum.de Quest-Club: http://www.quest-club.de Bilfinger: http://www.bilfinger.comWir leben TYPO3in2code.de 15. CSS Snippets Bilder und Videos richtig darstellen: http://pastebin.com/xBCj3bKN Hinweis: Videos bentigen noch eine eigene Klasse (z.B. .video aus dem Snippet) ber Frames in TYPO3 Mediaqueries-Beispiele: http://pastebin.com/AA0Vua6h Tabellen: Pain-in-the-ass!!! Am Besten keine Tabellen nutzen! Wenn doch ist es sehr vom Fall abhngig. Einige Techniken: http://css-tricks.com/responsive-data-table-roundup/Wir leben TYPO3 in2code.de 16. Grundstzliche CSS-Dinge Schriftgre zuknftig in REM Keine IDs verwenden, nur Klassen Position: relativ und absolute: immer top/bottom und left/right angeben (IE) Floats mit Wrapper der ein overflow:hidden hat aufheben (spart einen Clearfix)Wir leben TYPO3in2code.de 17. Vorhandene Tools fr Responsive flexslider Compass/Sass Masonry Fancybox (Lightbox)Wir leben TYPO3 in2code.de 18. Lsungen fr Probleme mit groen Bildern EXT:responsive_typo3: http://forge.typo3.org/projects/extension- responsive_typo3/wiki Adaptive Images: http://adaptive-images.com/ Bessere Konfiguration von TYPO3 um Bilder wenigstens spaltenabhngig zu berechnen: http://pastebin.com/823brGdeWir leben TYPO3in2code.de 19. Fragen?Danke!Martin HuberThomas ScheibitzWir leben TYPO3in2code.de</p>