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