2. Responsive design: definizione
• Utilizzato nell’articolo
http://alistapart.com/article/responsive-web-
design di Ethan Marcotte
• «Responsive architecture»
• Approccio non più «device-based» ma «future-
proof»
• Imprescindibile l’uso di HTML 5 + CSS 3
3. Responsive design: cos’è?
• Contenuto adattabile all’area visibile del browser
(«viewport»)
• 3 tecniche: layout a griglia fluida, dimensione
immagini flessibile e media queries
• Differenti (ed adeguate!) esperienze d’uso a
seconda del dispositivo utilizzato
• http://d.alistapart.com/responsive-web-
design/ex/ex-site-FINAL.html
• ATTENZIONE! NON SIAMO SU CARTA STAMPATA!
4. HTML5 & CSS3: pro e contro
PRO
• Adattabilità alle diverse risoluzioni video
• Codice più snello e manutenibile
• Minore uso di tecnologie alternative per singoli
compiti (Adobe Flash, Javascript, ecc..)
• RESPONSIVE DESIGN POSSIBILE
CONTRO
• Compatibilità browser
• Livello qualitativo dei contenuti
7. E’ la scelta giusta?
• Le versioni mobile / desktop sono simili nel contenuto /
logica / dinamica di navigazione?
• Il sito deve risultare identico su ogni browser, incluso
IE8 e precedenti?
• Graceful degradation VS progressive enhancement
• Mobile -> Desktop
• SEO?
• Progettazione di più layout differenti (breakpoint)
• Contenuto a supporto del design responsive
• BUDGET
