SlideShare ist ein Scribd-Unternehmen logo
Marketing Factory Consulting GmbH – Alle Rechte vorbehalten – © 2013
Workshop: Implementing rendering for responsive images
Carla Froitzheim, Karoline Steinfatt, Sebastian Fischer, Ingo Schmitt
Marketing Factory Consulting GmbH
1
Carla Froitzheim
T3 enthusiast since 2003
@cfroitzheim
Karoline Steinfatt
@dieMelanie
blog.marketing-factory.de
#barcamps #republica #wwnrw
#wwruhr #twittwoch #odp #typo3
#t3ug #webgrrls #campixx
#seostammtisch #nipponconnection
#tweetups #foursquareday #t3dd
#smw #dmw #btconf #insidrr
Sebastian Fischer
Senior TYPO3 Developer
@garbast
www.evoweb.de
TYPO3 Sail 2013 - 14. - 21.09. 2013
Palma de Mallorca
Ingo Schmitt
CTO, BCC TYPO3 Association
lifetime photoshop ban
@ischmitt
blog.marketing-factory.de
Slides from T3DD13 Workshop - Responsive Images Rendering
Photo by Micah Taylor, Creative Commons
Agenda
Opening
Introduction Responsive Webdesign
TYPO3 and Responsive Webdesign
Groups: RWD in Detail for Frontend,
typoscript and php-rendering
Defining goals for today
Teams: Implementing goals
Presentation
Next Steps and Todos
8
Responsive web design is a web design
approach aimed at crafting sites to provide an
optimal viewing experience—easy reading and
navigation with a minimum of resizing,
panning, and scrolling—across a wide range of
devices (from desktop computer monitors to
mobile phones). (wikipedia)
#RWD
Responsive Webdesign
RWD
10
This	
  is	
  not	
  the	
  web!
RWD
11
10
This	
  is	
  the	
  web	
  now:
one
<HTML>
to rule them all
fluid, portion based grids
mobile first
progressive enhancements
design concept
size in relative units
flexible images
media queries
@media
CSS3
modernizr
jQuery
javascript
images dynamical rendered on
viewport capabilities
adaptive images
commons.wikimedia.org Ikiwaner
current Solutions
In detail
Rendering in detail
Frontend (Karoline)
typoscript (Carla)
php-rendering (Sebastian)
20
Development
https://notes.typo3.org/p/t3dd_rwd
Virtualbox
Extensionpack
t3dd.ova
ssh localhost -p 2222
http://localhost:8080/
21
goals for today
presentation
todos
26
Contact
Marketing Factory Consulting GmbH
Marienstraße 14
40212 Düsseldorf
Tel +49 (0)211 / 36 11 76 - 0
Tel +49 (0)211 / 36 11 76 - 99
is@marketing-factory.de
www.marketing-factory.de
10.04.2013Marketing Factory Consulting GmbH – Alle Rechte vorbehalten – © 2013
Disclaimer
Disclaimer
Alle im vorliegenden Konzept präsentierten Ansätze und Ideen sind ausschließlich für
den Auftraggeber bestimmt.
Das Konzept und das Recht zur Nutzung bleibt Eigentum von Marketing Factory
Consulting. Die Verwertung, Vervielfältigung, Nachbildung und Verbreitung der
Konzeption ist nur mit Zustimmung zulässig.
Werden die Ideen nicht verwertet, dann ist Marketing Factory Consulting berechtigt,
die Inhalte ganz oder teilweise für andere Zwecke einzusetzen.
© Marketing Factory Consulting GmbH 2013

Weitere ähnliche Inhalte

Andere mochten auch

Becas utpl modalidad presencial
Becas utpl modalidad presencialBecas utpl modalidad presencial
Becas utpl modalidad presencial
Junior Morocho
 
非接触型デジタル名刺
非接触型デジタル名刺非接触型デジタル名刺
非接触型デジタル名刺
CREATIVEHOPE / C-LAB
 
Job Reader
Job ReaderJob Reader
Ofício circular 153 2013 dfda-ba
Ofício circular 153 2013 dfda-baOfício circular 153 2013 dfda-ba
Ofício circular 153 2013 dfda-ba
Itapé Point
 
「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」
「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」
「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」
Yuki Anzai
 
Presentacion final
Presentacion finalPresentacion final
Presentacion final
Selivy Bautista
 
Dell inspiron 1520バッテリー【送料無料】デルバッテリー
Dell inspiron 1520バッテリー【送料無料】デルバッテリーDell inspiron 1520バッテリー【送料無料】デルバッテリー
Dell inspiron 1520バッテリー【送料無料】デルバッテリー
Followpower Liu
 
Magica
MagicaMagica
Magica
Rita Steter
 
Miramonte floor plans
Miramonte floor plansMiramonte floor plans
Miramonte floor plans
Joey Levy
 
Recull d’imatges casal 2013
Recull d’imatges casal 2013Recull d’imatges casal 2013
Recull d’imatges casal 2013
mediasinguerlin
 
Diário Gráfico Rafaela C 5B
Diário Gráfico Rafaela C 5BDiário Gráfico Rafaela C 5B
Diário Gráfico Rafaela C 5B
In Pi
 
Almacenanmiento virtual
Almacenanmiento virtualAlmacenanmiento virtual
Almacenanmiento virtual
Fernando Uchuari
 

Andere mochten auch (20)

Becas utpl modalidad presencial
Becas utpl modalidad presencialBecas utpl modalidad presencial
Becas utpl modalidad presencial
 
非接触型デジタル名刺
非接触型デジタル名刺非接触型デジタル名刺
非接触型デジタル名刺
 
Logos ipn
Logos  ipnLogos  ipn
Logos ipn
 
Presentation4
Presentation4Presentation4
Presentation4
 
Programa feria Pacanga 2013
Programa feria Pacanga 2013Programa feria Pacanga 2013
Programa feria Pacanga 2013
 
Curso hidraulica
Curso hidraulicaCurso hidraulica
Curso hidraulica
 
Job Reader
Job ReaderJob Reader
Job Reader
 
Ofício circular 153 2013 dfda-ba
Ofício circular 153 2013 dfda-baOfício circular 153 2013 dfda-ba
Ofício circular 153 2013 dfda-ba
 
「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」
「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」
「Android アプリのガチ開 発者が Mobile Backend Starter を使ってみた」
 
Crear grupos en hotmail
Crear grupos en hotmailCrear grupos en hotmail
Crear grupos en hotmail
 
Mascotas IETISD. Decsi
Mascotas IETISD. DecsiMascotas IETISD. Decsi
Mascotas IETISD. Decsi
 
Presentacion final
Presentacion finalPresentacion final
Presentacion final
 
Dell inspiron 1520バッテリー【送料無料】デルバッテリー
Dell inspiron 1520バッテリー【送料無料】デルバッテリーDell inspiron 1520バッテリー【送料無料】デルバッテリー
Dell inspiron 1520バッテリー【送料無料】デルバッテリー
 
Magica
MagicaMagica
Magica
 
Basic maths
Basic mathsBasic maths
Basic maths
 
Miramonte floor plans
Miramonte floor plansMiramonte floor plans
Miramonte floor plans
 
Recull d’imatges casal 2013
Recull d’imatges casal 2013Recull d’imatges casal 2013
Recull d’imatges casal 2013
 
Diário Gráfico Rafaela C 5B
Diário Gráfico Rafaela C 5BDiário Gráfico Rafaela C 5B
Diário Gráfico Rafaela C 5B
 
Almacenanmiento virtual
Almacenanmiento virtualAlmacenanmiento virtual
Almacenanmiento virtual
 
Iwasaki graphic
Iwasaki graphicIwasaki graphic
Iwasaki graphic
 

Ähnlich wie Slides from T3DD13 Workshop - Responsive Images Rendering

Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017
Jürg Kobel
 
Projektmanagement für Printprodukte
Projektmanagement für PrintprodukteProjektmanagement für Printprodukte
Projektmanagement für Printprodukte
Jörg Friedrich
 
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt GladbeckVortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
AppPlusMobile.info
 
Best Practices für erfolgreiche Vertriebskommunikation.
Best Practices für erfolgreiche Vertriebskommunikation.Best Practices für erfolgreiche Vertriebskommunikation.
Best Practices für erfolgreiche Vertriebskommunikation.
Communote GmbH
 
Influencer Relations: Aufbau vs. Invest?
Influencer Relations: Aufbau vs. Invest?Influencer Relations: Aufbau vs. Invest?
Influencer Relations: Aufbau vs. Invest?
akom360
 
PromoMasters beim IT-Karrieretag 2016 in Salzburg
PromoMasters beim IT-Karrieretag 2016 in SalzburgPromoMasters beim IT-Karrieretag 2016 in Salzburg
PromoMasters beim IT-Karrieretag 2016 in Salzburg
JOBshui Personalmarketing & Employer Branding
 
Digitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichen
Digitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichenDigitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichen
Digitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichen
Patrick Hünemohr
 
Careerdate - Infomaterial Januar 2015
Careerdate - Infomaterial Januar 2015Careerdate - Infomaterial Januar 2015
Careerdate - Infomaterial Januar 2015
Careerdate
 
OOP München 2013 - Scrum & Kanban im Agenturgeschäft
OOP München 2013 - Scrum & Kanban im AgenturgeschäftOOP München 2013 - Scrum & Kanban im Agenturgeschäft
OOP München 2013 - Scrum & Kanban im Agenturgeschäft
Paul Herwarth von Bittenfeld
 
Thorsten Ulmer - Profil
Thorsten Ulmer - Profil Thorsten Ulmer - Profil
Thorsten Ulmer - Profil
Thorsten Ulmer
 
Unternehmenskommunikation 2.0
Unternehmenskommunikation 2.0Unternehmenskommunikation 2.0
Unternehmenskommunikation 2.0
Changezweinull
 
Der CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit MathauerDer CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit Mathauer
csmo10
 
Die mobile Website als Beispiel für mobile Marketing
Die mobile Website als Beispiel für mobile MarketingDie mobile Website als Beispiel für mobile Marketing
Die mobile Website als Beispiel für mobile Marketing
Connected-Blog
 
Social Media Praxistage im Oktober 2013
Social Media Praxistage im Oktober 2013Social Media Praxistage im Oktober 2013
Social Media Praxistage im Oktober 2013
SCM – School for Communication and Management
 
P&M Agenturvorstellung
P&M AgenturvorstellungP&M Agenturvorstellung
P&M Agenturvorstellung
Michael Haack
 
P&M Agentur Software + Consulting GmbH
P&M Agentur Software + Consulting GmbHP&M Agentur Software + Consulting GmbH
P&M Agentur Software + Consulting GmbH
Michael Haack
 
Von Social-Media zu einem integrierten Informationsmanagement im Unternehmen
Von Social-Media zu einem integrierten Informationsmanagement im UnternehmenVon Social-Media zu einem integrierten Informationsmanagement im Unternehmen
Von Social-Media zu einem integrierten Informationsmanagement im Unternehmen
Bastian Karweg
 
Geprüfter "Digital Publisher" (Projektmanagement)
Geprüfter "Digital Publisher" (Projektmanagement)Geprüfter "Digital Publisher" (Projektmanagement)
Geprüfter "Digital Publisher" (Projektmanagement)
Jörg Friedrich
 
1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueck1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueck
Martina Müller
 

Ähnlich wie Slides from T3DD13 Workshop - Responsive Images Rendering (20)

Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017
 
Projektmanagement für Printprodukte
Projektmanagement für PrintprodukteProjektmanagement für Printprodukte
Projektmanagement für Printprodukte
 
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt GladbeckVortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
 
Best Practices für erfolgreiche Vertriebskommunikation.
Best Practices für erfolgreiche Vertriebskommunikation.Best Practices für erfolgreiche Vertriebskommunikation.
Best Practices für erfolgreiche Vertriebskommunikation.
 
Influencer Relations: Aufbau vs. Invest?
Influencer Relations: Aufbau vs. Invest?Influencer Relations: Aufbau vs. Invest?
Influencer Relations: Aufbau vs. Invest?
 
20091014 Social Media Sympra Jodeleit
20091014 Social Media Sympra Jodeleit20091014 Social Media Sympra Jodeleit
20091014 Social Media Sympra Jodeleit
 
PromoMasters beim IT-Karrieretag 2016 in Salzburg
PromoMasters beim IT-Karrieretag 2016 in SalzburgPromoMasters beim IT-Karrieretag 2016 in Salzburg
PromoMasters beim IT-Karrieretag 2016 in Salzburg
 
Digitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichen
Digitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichenDigitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichen
Digitales Geomarketing - neue Zielgruppen im direkten Umfeld erreichen
 
Careerdate - Infomaterial Januar 2015
Careerdate - Infomaterial Januar 2015Careerdate - Infomaterial Januar 2015
Careerdate - Infomaterial Januar 2015
 
OOP München 2013 - Scrum & Kanban im Agenturgeschäft
OOP München 2013 - Scrum & Kanban im AgenturgeschäftOOP München 2013 - Scrum & Kanban im Agenturgeschäft
OOP München 2013 - Scrum & Kanban im Agenturgeschäft
 
Thorsten Ulmer - Profil
Thorsten Ulmer - Profil Thorsten Ulmer - Profil
Thorsten Ulmer - Profil
 
Unternehmenskommunikation 2.0
Unternehmenskommunikation 2.0Unternehmenskommunikation 2.0
Unternehmenskommunikation 2.0
 
Der CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit MathauerDer CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit Mathauer
 
Die mobile Website als Beispiel für mobile Marketing
Die mobile Website als Beispiel für mobile MarketingDie mobile Website als Beispiel für mobile Marketing
Die mobile Website als Beispiel für mobile Marketing
 
Social Media Praxistage im Oktober 2013
Social Media Praxistage im Oktober 2013Social Media Praxistage im Oktober 2013
Social Media Praxistage im Oktober 2013
 
P&M Agenturvorstellung
P&M AgenturvorstellungP&M Agenturvorstellung
P&M Agenturvorstellung
 
P&M Agentur Software + Consulting GmbH
P&M Agentur Software + Consulting GmbHP&M Agentur Software + Consulting GmbH
P&M Agentur Software + Consulting GmbH
 
Von Social-Media zu einem integrierten Informationsmanagement im Unternehmen
Von Social-Media zu einem integrierten Informationsmanagement im UnternehmenVon Social-Media zu einem integrierten Informationsmanagement im Unternehmen
Von Social-Media zu einem integrierten Informationsmanagement im Unternehmen
 
Geprüfter "Digital Publisher" (Projektmanagement)
Geprüfter "Digital Publisher" (Projektmanagement)Geprüfter "Digital Publisher" (Projektmanagement)
Geprüfter "Digital Publisher" (Projektmanagement)
 
1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueck1 innovationsforum-hotel koeln-erndtebrueck
1 innovationsforum-hotel koeln-erndtebrueck
 

Mehr von Ingo Schmitt

Metrics for TYPO3
Metrics for TYPO3Metrics for TYPO3
Metrics for TYPO3
Ingo Schmitt
 
TYPO3 Security Basics
TYPO3 Security BasicsTYPO3 Security Basics
TYPO3 Security Basics
Ingo Schmitt
 
TYPO3 Security Basics
TYPO3 Security BasicsTYPO3 Security Basics
TYPO3 Security Basics
Ingo Schmitt
 
TYPO3 Security Basics
TYPO3 Security BasicsTYPO3 Security Basics
TYPO3 Security Basics
Ingo Schmitt
 
Schnelle Webapplikationen: Status Quo heute... ... und wohin geht die Reise
Schnelle Webapplikationen: Status Quo heute...  ... und wohin geht die Reise Schnelle Webapplikationen: Status Quo heute...  ... und wohin geht die Reise
Schnelle Webapplikationen: Status Quo heute... ... und wohin geht die Reise
Ingo Schmitt
 
TYPO3 in the cloud
TYPO3 in the cloudTYPO3 in the cloud
TYPO3 in the cloud
Ingo Schmitt
 

Mehr von Ingo Schmitt (6)

Metrics for TYPO3
Metrics for TYPO3Metrics for TYPO3
Metrics for TYPO3
 
TYPO3 Security Basics
TYPO3 Security BasicsTYPO3 Security Basics
TYPO3 Security Basics
 
TYPO3 Security Basics
TYPO3 Security BasicsTYPO3 Security Basics
TYPO3 Security Basics
 
TYPO3 Security Basics
TYPO3 Security BasicsTYPO3 Security Basics
TYPO3 Security Basics
 
Schnelle Webapplikationen: Status Quo heute... ... und wohin geht die Reise
Schnelle Webapplikationen: Status Quo heute...  ... und wohin geht die Reise Schnelle Webapplikationen: Status Quo heute...  ... und wohin geht die Reise
Schnelle Webapplikationen: Status Quo heute... ... und wohin geht die Reise
 
TYPO3 in the cloud
TYPO3 in the cloudTYPO3 in the cloud
TYPO3 in the cloud
 

Slides from T3DD13 Workshop - Responsive Images Rendering