Slides from T3DD13 Workshop - Responsive Images Rendering

862 views

Published on

Slides for the workshop at the TYPO3 Developer Days in Hamburg 2013: Implementing Responsive Images. Please see https://notes.typo3.org/p/t3dd_rwd and http://forge.typo3.org/issues/50075

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
862
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Slides from T3DD13 Workshop - Responsive Images Rendering

  1. 1. 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
  2. 2. Carla Froitzheim T3 enthusiast since 2003 @cfroitzheim
  3. 3. 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
  4. 4. Sebastian Fischer Senior TYPO3 Developer @garbast www.evoweb.de
  5. 5. TYPO3 Sail 2013 - 14. - 21.09. 2013 Palma de Mallorca Ingo Schmitt CTO, BCC TYPO3 Association lifetime photoshop ban @ischmitt blog.marketing-factory.de
  6. 6. Photo by Micah Taylor, Creative Commons
  7. 7. 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
  8. 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
  9. 9. RWD 10 This  is  not  the  web!
  10. 10. RWD 11 10 This  is  the  web  now:
  11. 11. one <HTML> to rule them all
  12. 12. fluid, portion based grids mobile first progressive enhancements design concept
  13. 13. size in relative units flexible images
  14. 14. media queries @media CSS3
  15. 15. modernizr jQuery javascript
  16. 16. images dynamical rendered on viewport capabilities adaptive images
  17. 17. commons.wikimedia.org Ikiwaner
  18. 18. current Solutions
  19. 19. In detail Rendering in detail Frontend (Karoline) typoscript (Carla) php-rendering (Sebastian) 20
  20. 20. Development https://notes.typo3.org/p/t3dd_rwd Virtualbox Extensionpack t3dd.ova ssh localhost -p 2222 http://localhost:8080/ 21
  21. 21. goals for today
  22. 22. presentation
  23. 23. todos
  24. 24. 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
  25. 25. 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

×