E' oramai assolutamente necessario realizzare siti web che si adattano a dispositivi con risoluzioni e dimensioni diverse come desktop, tablet e smartphone. In questo talk si affronterà il Responsive Design, come progettare per più dispositivi un sito in modo che il layout si adatti alla larghezza dello schermo dell'utente. E mostrerà come sviluppare un sito web Responsive con TYPO3.

1. Responsive Web Design
con
TYPO3
alfredo furnò
T3Camp Italia Bologna 16/17 Novembre
Il terzo evento italiano dedicato al CMS Typo3 2012

2. Responsive Web Design
alfredo furnò
Systems Development Specialist
Organizing technology to meet business goals with
Open Source Solutions
for Small Business
Pag. 2 http://www.t3campitalia.it/

3. Responsive Web Design
Linux Magazine
N° 39 Marzo 2004
sviluppo web
Content management
professionale
Introduzione a Typo3, il più
completo sistema in PhP
per la gestione dei
contenuti web
Pag. 3 http://www.t3campitalia.it/

4. Responsive Web Design
Che cos'è il
Responsive Design
?
Pag. 4 http://www.t3campitalia.it/

5. Responsive Web Design
Responsive Web Design
Il termine Responsive Web Design (RWD) viene utilizzato
per indicare una particolare tecnica di Web design per la
realizzazione di siti web in modo che le pagine adattino
automaticamente il layout per fornire una visualizzazione
ottimale in funzione dell'ambiente nei quali vengono
visualizzati (pc su desktop con diverse risoluzioni, tablet,
smartphone, cellulari di vecchia generazione, web tv)
riducendo al minimo all'utente la necessità di
ridimensionamento e scorrimento, in particolare quello
orizzontale.
Da Wikipedia, l'enciclopedia libera.
Pag. 5 http://www.t3campitalia.it/

6. Responsive Web Design
http://www.alistapart.com/articles/responsive-web-design/
Pag. 6 http://www.t3campitalia.it/

7. Responsive Web Design
http://www.italianalistapart.com/articoli/17-numero-7-8-giugno-2010/71-web-design-reattivo/
Pag. 7 http://www.t3campitalia.it/

8. Responsive Web Design 8
Obiettivo
Creare siti web che rispondono al dispositivo dell'utente
in base a dimensione dello schermo, risoluzione e
funzioni.
http://www.t3campitalia.it/

9. Responsive Web Design 9
http://www.t3campitalia.it/

10. Responsive Web Design 10
http://www.t3campitalia.it/

11. Responsive Web Design
?
Pag. http://www.t3campitalia.it/

12. Responsive Web Design 12
http://www.t3campitalia.it/

13. Responsive Web Design 13
http://www.t3campitalia.it/

14. Responsive Web Design
Punti di forza
del
Responsive Web
Design
Pag. http://www.t3campitalia.it/

15. Responsive Web Design
One url
+
Single content
+
One code
+
Css3 media
query
=
multiple device
Pag. http://www.t3campitalia.it/

16. Responsive Web Design
Vantaggi
● Saves Money
● Saves Time
● Improved Seo
● Better Performance
● Wider Browser Support
Pag. http://www.t3campitalia.it/

17. Responsive Web Design
Raccomandato
da
Pag. http://www.t3campitalia.it/

18. Responsive Web Design 20
“Google recommends webmasters follow the
industry best practice of using responsive web
design, namely serving the same HTML for all
devices and using only CSS media queries to
decide the rendering on each device.”
https://developers.google.com/webmasters/smartphone-sites
http://www.t3campitalia.it/

19. Responsive Web Design
Tool
Pag. http://www.t3campitalia.it/

20. Responsive Web Design
Framework & Boilerplate
● The Goldilocks Approach - http://goldilocksapproach.com
● Skeleton - http://www.getskeleton.com
● Yamb - http://www.prowebdesign.ro/yamb
● Gridless - http://thatcoolguy.github.com/gridless-boilerplate
Pag. http://www.t3campitalia.it/

21. Responsive Web Design
Responsinator
http://www.responsinator.com
Responsinator permette di testare il layout di siti
web su dispositivi mobili differenti come:
● iPhone
● iPad
● Android
● Kindle
Per ogni dispositivo é possibile analizzare in layout in
modalità portrait e landscape.
Pag. http://www.t3campitalia.it/

22. Responsive Web Design 24
Responsinator
http://www.responsinator.com
● iPhone 3+4 portrait 320 x 480
● iPhone 3+4 landscape 480 x 320
● iPhone 5 portrait 320 x 568
● iPhone 5 landscape 568 x 320
● Crappy Android portrait 240 x 320
● Crappy Android landscape 320 x 240
● Android (Samsung Galaxy) portrait 380 by 685
● Android (Samsung Galaxy) landscape 685 by 380
● iPad portrait 768 x 1024
● iPad landscape 1024 x 768
● Kindle portrait 600 x 1024
● Kindle landscape 1024 x 600
http://www.t3campitalia.it/

23. Responsive Web Design
TYPO3
Pag. http://www.t3campitalia.it/

24. Responsive Web Design 26
Risorse su TYPO3 & Responsive Web Design
● TYPO3 6.0 - Back to the Future
http://typo3.org/news/article/typo3-60-back-to-the-future/
● Responsive Design mit TYPO3 – Türchen 22
http://typo3blogger.de/responsive-design-mit-typo3/
● Responsive Webdesign mit YAML, TYPO3 und TemplaVoilà!
http://www.melschmidt.de/web-artikel/responsive-webdesign-mit-typo3-templavoila-und-yaml/
http://www.t3campitalia.it/

25. Responsive Web Design 27
Typoscript
# Doctype
config.doctype = html_5
# Viewport Meta Tag
page.headerData.10=TEXT
page.headerData.10.value (
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
)
tt_content.image.20 {
1.params = class="flexible"
}
tt_content.textpic.20 {
1.params = class="flexible"
}
http://www.t3campitalia.it/

26. Responsive Web Design 28
CSS
img, embed, object, video {
max-width: 100%;
height: auto;
width: auto;
}
CSS3 Media Queries
@media screen and (max-width: 320px) {
...
}
@media screen and (max-width: 480px) {
...
}
@media screen and (max-width: 760px) {
...
}
@media screen and (max-width: 1024px) {
...
}
http://www.t3campitalia.it/

27. Responsive Web Design
Demo
YAML CSS Framework
for truly flexible, accessible and responsive websites
TYPO3 4.7.7
templavoila
ws_flexslider
formhandler
static_info_tables
t3quixplorer
static_info_tables
tt_news
Pag. http://www.t3campitalia.it/

28. Responsive Web Design
TYPO3 4.7 Release Notes
TYPO3 harmonizes with HTML5
Wherever rich media content (images, audio or video) needs to be integrated on
various platforms, HTML5 has established itself as the de facto standard in
development of modern websites. Therefore with TYPO3 version 4.7, HTML5
conformity is now a core feature. What was possible in earlier versions of TYPO3 only
by using third party extensions or custom configuration, can now be achieved very
easily. In conjunction with the system extension ›CSS Styled Content‹, TYPO3 version
4.7 now generates clean HTML5 source code that corresponds to the W3C validation
guidelines.
The feature-enhanced and HTML5 optimized Rich Text Editor (RTE) can be adapted
much more easily to individual needs. In addition, the integration of HTML5 video
and audio files is now possible as well as the simultaneous uploading of multiple files
within TCEForms. For video content TYPO3 version 4.7 uses the JavaScript library
VideoJS and Flowplayer as fallback.
http://typo3.org/download/release-notes/typo3-4-7-release-notes/
Pag. http://www.t3campitalia.it/

29. Responsive Web Design 31
Lista della spesa
● Approccio 'Content out'
● Design e layout per tutti i dispositivi
● Layout: colonne e larghezza
● Navigazione semplice
● Dimensione e formato del testo
● Immagini e oggetti
● App mobile e siti web responsive a confronto
● Media query css3 per il RESPONSIVE DESIGN
● Scripting per le funzioni aggiuntive
http://www.t3campitalia.it/

30. Responsive Web Design
Pag. http://www.t3campitalia.it/

31. Responsive Web Design
The end
Pag. http://www.t3campitalia.it/

32. Responsive Web Design 34
www.linkedin.com/in/alfredofurno
alfredof72@gmail.com
www.spookyaction.it
www.fiatlinux.it
http://www.t3campitalia.it/