responsive web design mit typo3
DESCRIPTION
Tipps und Tricks zur Umsetzung von Responsive Webdesign mit dem OpenSource CMS TYPO3. Mit vielen Snippets (Typoscript, CSS, HTML).TRANSCRIPT
![Page 1: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/1.jpg)
in2code.deWir leben TYPO3
Wir leben TYPO3
Responsive mit TYPO3 Stolpersteine und Best Practice
![Page 2: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/2.jpg)
in2code.deWir leben TYPO3
Was machen die bei in2code
Wir unterstützen TYPO3-,
Internet- und Full-Service
Agenturen genauso wie große
und mittelgroße Firmen, die
auf TYPO3 Spezialwissen
angewiesen sind.
![Page 3: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/3.jpg)
in2code.deWir leben TYPO3
Ziel
![Page 4: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/4.jpg)
in2code.deWir leben TYPO3
• Erklärung von Responsive Webdesign im
Allgemeinen
• Responsive Webdesign mit TYPO3
• Stolpersteine
• Best Practice
![Page 5: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/5.jpg)
in2code.deWir leben TYPO3
Was ist RWD wirklich
![Page 6: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/6.jpg)
in2code.deWir leben TYPO3
• Was sind Mediaqueries und was passiert eigentlich
• Für was dienen Breakpoints
• Welche Frameworks gibt es und wann brauche ich eins
• Unterschiede zwischen Width und Device-Width
![Page 7: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/7.jpg)
in2code.deWir leben TYPO3
Das nun mit TYPO3
![Page 8: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/8.jpg)
in2code.deWir leben TYPO3
• Doctype setzen
• AbsRefPrefix setzen
• Charset, locale und language setzen
config für RWD: http://pastebin.com/k3H8n8Zm
config. Einstellungen
![Page 9: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/9.jpg)
in2code.deWir leben TYPO3
HTML-Rendering im Frontend von TYPO3 ändern:
• Keine Größenangaben in DIV-Containern mitgeben
• Bildbeschreibungen mit Breiten versehen
RWD-Setup: http://pastebin.com/3t3CsY3P
Markup Rendering
![Page 10: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/10.jpg)
in2code.deWir leben TYPO3
• Viewport
• IE-Kompatiblität
• Apple-Device Unterstützung
Header-Einstellungen: http://pastebin.com/VwmpYwX9
HTML-Header
![Page 11: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/11.jpg)
in2code.deWir leben TYPO3
Stolpersteine
![Page 12: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/12.jpg)
in2code.deWir leben TYPO3
• Videos
• Tabellen
• Bildunterschriften
• Performance (wg. doppeltem HTML, zu große Bilder)
• Redakteur sieht echte Bildgröße nicht
• Touch/No-Touch: Bedienung unterschiedlich
• Devices: Nutzerverhalten unterschiedlich
Das kann Kopfzerbrechen bereiten
![Page 13: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/13.jpg)
in2code.deWir leben TYPO3
Best Practice
![Page 14: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/14.jpg)
in2code.deWir leben TYPO3
• TUM: http://www.tum.de
• TUM-Lehre: http://www.lehre.tum.de
• Quest-Club: http://www.quest-club.de
• Bilfinger: http://www.bilfinger.com
Umgesetzte Projekte zum Spicken
![Page 15: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/15.jpg)
in2code.deWir leben TYPO3
• Bilder und Videos richtig darstellen:
http://pastebin.com/xBCj3bKN
Hinweis: Videos benötigen 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 abhängig.
Einige Techniken:
http://css-tricks.com/responsive-data-table-roundup/
CSS Snippets
![Page 16: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/16.jpg)
in2code.deWir leben TYPO3
• Schriftgröße zukünftig in REM
• Keine ID‘s 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)
Grundsätzliche CSS-Dinge
![Page 17: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/17.jpg)
in2code.deWir leben TYPO3
• flexslider
• Compass/Sass
• Masonry
• Fancybox (Lightbox)
Vorhandene Tools für Responsive
![Page 18: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/18.jpg)
in2code.deWir leben TYPO3
• EXT:responsive_typo3: http://
forge.typo3.org/projects/extension-responsive_typo3/wi
ki
• Adaptive Images: http://adaptive-images.com/
• Bessere Konfiguration von TYPO3 um Bilder
wenigstens spaltenabhängig zu berechnen:
http://pastebin.com/823brGde
Lösungen für Probleme mit großen Bildern
![Page 19: Responsive Web Design mit TYPO3](https://reader035.vdocuments.net/reader035/viewer/2022062307/555f2ee2d8b42a65118b47e7/html5/thumbnails/19.jpg)
in2code.deWir leben TYPO3
Fragen?
Danke!
Martin HuberThomas Scheibitz