Date post: | 22-May-2015 |
Category: |
Technology |
Upload: | martin-huber |
View: | 14,634 times |
Download: | 0 times |
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