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
in2code.deWir leben TYPO3
Wir leben TYPO3
Responsive mit TYPO3 Stolpersteine und Best Practice
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.
in2code.deWir leben TYPO3
Ziel
in2code.deWir leben TYPO3
• Erklärung von Responsive Webdesign im
Allgemeinen
• Responsive Webdesign mit TYPO3
• Stolpersteine
• Best Practice
in2code.deWir leben TYPO3
Was ist RWD wirklich
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
in2code.deWir leben TYPO3
Das nun mit TYPO3
in2code.deWir leben TYPO3
• Doctype setzen
• AbsRefPrefix setzen
• Charset, locale und language setzen
config für RWD: http://pastebin.com/k3H8n8Zm
config. Einstellungen
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
in2code.deWir leben TYPO3
• Viewport
• IE-Kompatiblität
• Apple-Device Unterstützung
Header-Einstellungen: http://pastebin.com/VwmpYwX9
HTML-Header
in2code.deWir leben TYPO3
Stolpersteine
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
in2code.deWir leben TYPO3
Best Practice
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
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
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
in2code.deWir leben TYPO3
• flexslider
• Compass/Sass
• Masonry
• Fancybox (Lightbox)
Vorhandene Tools für Responsive
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
in2code.deWir leben TYPO3
Fragen?
Danke!
Martin HuberThomas Scheibitz