SlideShare ist ein Scribd-Unternehmen logo
Wir leben TYPO3




      Responsive mit TYPO3
                  Stolpersteine und Best Practice
Wir leben TYPO3                                   in2code.de
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
Ziel




Wir leben TYPO3          in2code.de
• Erklärung von Responsive Webdesign im
   Allgemeinen
• Responsive Webdesign mit TYPO3
• Stolpersteine
• Best Practice




Wir leben TYPO3                           in2code.de
Was ist
                  RWD wirklich



Wir leben TYPO3                  in2code.de
• 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
Das nun
                  mit TYPO3



Wir leben TYPO3               in2code.de
config. Einstellungen

• Doctype setzen
• AbsRefPrefix setzen
• Charset, locale und language setzen


config für RWD: http://pastebin.com/k3H8n8Zm




Wir leben TYPO3                                in2code.de
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
HTML-Header

• Viewport
• IE-Kompatiblität
• Apple-Device Unterstützung


Header-Einstellungen: http://pastebin.com/VwmpYwX9




Wir leben TYPO3                              in2code.de
Stolpersteine




Wir leben TYPO3                   in2code.de
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
Best Practice




Wir leben TYPO3                   in2code.de
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
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
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
Vorhandene Tools für Responsive

• flexslider
• Compass/Sass
• Masonry
• Fancybox (Lightbox)




Wir leben TYPO3                   in2code.de
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
Fragen?

                      Danke!

                    Martin Huber
                  Thomas Scheibitz


Wir leben TYPO3                      in2code.de

Weitere ähnliche Inhalte

Andere mochten auch

TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Mohamed Said Ouerghi
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?
die.agilen GmbH
 
Haydn Shaw Presentation
Haydn Shaw PresentationHaydn Shaw Presentation
Haydn Shaw Presentation
katnut
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
die.agilen GmbH
 
4 dx update
4 dx update4 dx update
4 dx update
Jessica Bentz
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
die.agilen GmbH
 
United Nations E-Government Survey 2012
United Nations E-Government Survey 2012United Nations E-Government Survey 2012
United Nations E-Government Survey 2012
Department of Economic and Social Affairs (UN DESA)
 
"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementation"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementation
dalarcon503
 
Technology Trends & e-Government
Technology Trends & e-GovernmentTechnology Trends & e-Government
Technology Trends & e-Government
Arab Federation for Digital Economy
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
die.agilen GmbH
 
4 dx
4 dx4 dx
Retrospektiven richtig durchgeführt -
Retrospektiven richtig durchgeführt - Retrospektiven richtig durchgeführt -
Retrospektiven richtig durchgeführt -
die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
die.agilen GmbH
 

Andere mochten auch (20)

TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
Défis et opportunités d'une mise en œuvre conjointe e-Government et Open Gov...
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?
 
Haydn Shaw Presentation
Haydn Shaw PresentationHaydn Shaw Presentation
Haydn Shaw Presentation
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
4 dx update
4 dx update4 dx update
4 dx update
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
United Nations E-Government Survey 2012
United Nations E-Government Survey 2012United Nations E-Government Survey 2012
United Nations E-Government Survey 2012
 
"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementation"4DX weekly meetings" The true 4DX implementation
"4DX weekly meetings" The true 4DX implementation
 
Technology Trends & e-Government
Technology Trends & e-GovernmentTechnology Trends & e-Government
Technology Trends & e-Government
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
4 dx
4 dx4 dx
4 dx
 
Retrospektiven richtig durchgeführt -
Retrospektiven richtig durchgeführt - Retrospektiven richtig durchgeführt -
Retrospektiven richtig durchgeführt -
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 

Ähnlich wie Responsive Web Design mit TYPO3

Workspaces in TYPO3
Workspaces in TYPO3Workspaces in TYPO3
Workspaces in TYPO3
Wolfgang Wagner
 
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty RosenheimVorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Alex Kellner
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
Alex Kellner
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
Wolfgang Wagner
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
Philipp Naderer
 
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Martin Huber
 
TYPO3 Teams
TYPO3 TeamsTYPO3 Teams
TYPO3 Teams
Marcus Schwemer
 
Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0
Alex Kellner
 
Der gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open SourceDer gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open Source
yellowcow
 
Content Marketing für Magento - mit TYPO3 MMDE16
Content Marketing für Magento - mit TYPO3 MMDE16Content Marketing für Magento - mit TYPO3 MMDE16
Content Marketing für Magento - mit TYPO3 MMDE16
Boris Hinzer
 
Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3
tschikarski
 
Neuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-ProjektNeuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-Projekt
Steffen Gebert
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Sven Schultschik
 
Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019
Wolfgang Wagner
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
Sebastian Springer
 
Backendlayout mit FLUID-Templates
Backendlayout mit FLUID-TemplatesBackendlayout mit FLUID-Templates
Backendlayout mit FLUID-Templates
Marcus Schwemer
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Tomas Caspers
 
TYPO3 Translations
TYPO3 Translations TYPO3 Translations
TYPO3 Translations
Marcus Schwemer
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!
JanWeinschenker
 

Ähnlich wie Responsive Web Design mit TYPO3 (20)

Workspaces in TYPO3
Workspaces in TYPO3Workspaces in TYPO3
Workspaces in TYPO3
 
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty RosenheimVorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
 
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
 
TYPO3 Teams
TYPO3 TeamsTYPO3 Teams
TYPO3 Teams
 
Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0
 
Der gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open SourceDer gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open Source
 
Content Marketing für Magento - mit TYPO3 MMDE16
Content Marketing für Magento - mit TYPO3 MMDE16Content Marketing für Magento - mit TYPO3 MMDE16
Content Marketing für Magento - mit TYPO3 MMDE16
 
Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3
 
Neuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-ProjektNeuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-Projekt
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
 
Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
 
Backendlayout mit FLUID-Templates
Backendlayout mit FLUID-TemplatesBackendlayout mit FLUID-Templates
Backendlayout mit FLUID-Templates
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
TYPO3 Translations
TYPO3 Translations TYPO3 Translations
TYPO3 Translations
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!
 

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
  • 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