Responsive Web Design mit TYPO3
•Als PPTX, PDF herunterladen•
5 gefällt mir•17,237 views
Tipps und Tricks zur Umsetzung von Responsive Webdesign mit dem OpenSource CMS TYPO3. Mit vielen Snippets (Typoscript, CSS, HTML).
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Responsive Web Design mit TYPO3
Ähnlich wie Responsive Web Design mit TYPO3 (20)
Responsive Web Design mit TYPO3
- 1. Wir leben TYPO3 Responsive mit TYPO3 Stolpersteine und Best Practice Wir leben TYPO3 in2code.de
- 2. 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. Wir leben TYPO3 in2code.de
- 3. Ziel Wir leben TYPO3 in2code.de
- 4. • Erklärung von Responsive Webdesign im Allgemeinen • Responsive Webdesign mit TYPO3 • Stolpersteine • Best Practice Wir leben TYPO3 in2code.de
- 5. Was ist RWD wirklich Wir leben TYPO3 in2code.de
- 6. • 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 Wir leben TYPO3 in2code.de
- 7. Das nun mit TYPO3 Wir leben TYPO3 in2code.de
- 8. config. Einstellungen • Doctype setzen • AbsRefPrefix setzen • Charset, locale und language setzen config für RWD: http://pastebin.com/k3H8n8Zm Wir leben TYPO3 in2code.de
- 9. Markup Rendering HTML-Rendering im Frontend von TYPO3 ändern: • Keine Größenangaben in DIV-Containern mitgeben • Bildbeschreibungen mit Breiten versehen RWD-Setup: http://pastebin.com/3t3CsY3P Wir leben TYPO3 in2code.de
- 10. HTML-Header • Viewport • IE-Kompatiblität • Apple-Device Unterstützung Header-Einstellungen: http://pastebin.com/VwmpYwX9 Wir leben TYPO3 in2code.de
- 11. Stolpersteine Wir leben TYPO3 in2code.de
- 12. Das kann Kopfzerbrechen bereiten • 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 Wir leben TYPO3 in2code.de
- 13. Best Practice Wir 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.com Wir leben TYPO3 in2code.de
- 15. CSS Snippets • 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/ Wir leben TYPO3 in2code.de
- 16. Grundsätzliche CSS-Dinge • 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) Wir leben TYPO3 in2code.de
- 17. Vorhandene Tools für Responsive • flexslider • Compass/Sass • Masonry • Fancybox (Lightbox) Wir leben TYPO3 in2code.de
- 18. Lösungen für Probleme mit großen 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 spaltenabhängig zu berechnen: http://pastebin.com/823brGde Wir leben TYPO3 in2code.de
- 19. Fragen? Danke! Martin Huber Thomas Scheibitz Wir leben TYPO3 in2code.de