Responsive Design - Wordcamp 2013

1,033 views
947 views

Published on

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,033
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
36
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Responsive Design - Wordcamp 2013

  1. 1. Alla scoperta del Responsive Web Design per WordPress di Mirko SantangeloWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  2. 2. GULLIVER’S TRAVELSWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  3. 3. GULLIVER E IL DESIGN Gullivers Travels, by Jonathan Swift, released in 1700WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  4. 4. GULLIVER E IL DESIGNLILLIPUZIANI EGIGANTIWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  5. 5. GULLIVER E IL DESIGN COSA ACCOMUNA GULLIVER AI MODERNI DESIGNERS?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  6. 6. GULLIVER E IL DESIGN ENTRAMBI DEVONO ADATTARSI AL CONTESTOWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  7. 7. MOBILE EXPERIENCEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  8. 8. MOBILE EXPERIENCE 80% OF CONSUMERS ACCESS THE WEB VIA COMPUTERS 60% OF THEM USE MOBILE DEVICES Source: Google and the Mobile Marketing Association Survey, Late 2011WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  9. 9. MOBILE EXPERIENCE DISPLAY CON DIMENSIONI DIFFERENTIWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  10. 10. MOBILE EXPERIENCE CONSIDERARE FUTURI UPDATE TECNOLOGICIWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  11. 11. RESPONSIVE DESIGNWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  12. 12. RESPONSIVE DESIGN BROWSER VIEW - FIXED LAYOUT HEADER CONTENT SIDEBAR FOOTERWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  13. 13. RESPONSIVE DESIGN SMARTHPHONE VIEW - FIXED LAYOUT Gulliver i in Cambrig his father i then he rWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  14. 14. RESPONSIVE DESIGN SMARTHPHONE VIEW - RESPONSIVE LAYOUT HEADER I was the third of five sons. He sent me to College in Cambridge at fourteen years old. Then he realize that responsive design is better than fixed layout on mobile devices...WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  15. 15. RESPONSIVE DESIGNPERCHÈ DOVREI USARE UN APPROCCIORESPONSIVE PER I MIEI PROGETTI? DESIGN USABILITY MARKETWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  16. 16. DESIGNWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  17. 17. RESPONSIVE DESIGN DESKTOP MOBILE DESIGN LOGO LOGO MENU MENU CONTENT SIDEBAR CONTENT FOOTER FOOTER FOOTER 960 PX 320 PXWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  18. 18. RESPONSIVE DESIGN DESIGN MODULAR GRID SYSTEMWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  19. 19. RESPONSIVE DESIGN DESIGN FLUID DESIGN THINKINGWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  20. 20. USABILITYWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  21. 21. RESPONSIVE DESIGN MOBILE DEVICES USABILITY CONTENT IS THE KEY sistema gerarchico prioritario velocita d’accesso alle informazioni accessibità bassa percentuale d’erroreWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  22. 22. RESPONSIVE DESIGNPENSA INGRANDEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  23. 23. RESPONSIVE DESIGNPENSA INPICCOLOWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  24. 24. RESPONSIVE DESIGN PROBLEMA AZIONI Prenotare un tavolo per una 1. Aprire il sito ufficiale del ristorante. cena di lavoro al ristorante 2. Accedere velocemente alla sezione contatti. USABILITY più in della città. 3. Recuperare il numero di telefono. 4. Avviare la chiamata e prenotare. FLUID DESIGN THINKING es. Posso fare a meno della foto dello INTERFACCIA chef francese che cucina nella pagina dei contatti?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  25. 25. RESPONSIVE DESIGN USABILITY FIVE PEOPLE TRY TO FIGURE OUT THE NEW BLACKBERRY Z10 FONTE: MASHABLEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  26. 26. THEMEFOREST MOJO THEMES STUDIO PRESS MARKET WOO THEMES WPMART CODE CANYONWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  27. 27. CODINGWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  28. 28. HOW TO CODING A RESPONSIVE LAYOUT FLUID GRID & TYPO RESPONSIVEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  29. 29. HOW TO CODING A RESPONSIVE LAYOUT TOTAL WIDTH IN PIXELS: 960PX FLUID GRID & TYPO 700 PX 180 PXWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  30. 30. HOW TO CODING A RESPONSIVE LAYOUT <div class = “wrapper”> <div class = “blog”> FLUID <div class = “content”>...</div> GRID & TYPO <div class = “sidebar”>...</div> </div> </div> wrapper = 960px blog = 900px content = 700px sidebar = 180pxWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  31. 31. HOW TO CODING A RESPONSIVE LAYOUT % EMWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  32. 32. HOW TO CODING A RESPONSIVE LAYOUTFLUID WRAPPER valore di contesto arbitrario .wrapper { width = 90%; margin = 30px auto; }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  33. 33. HOW TO CODING A RESPONSIVE LAYOUT OBIETTIVO / CONTESTO = UNITÀ RELATIVAWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  34. 34. HOW TO CODING A RESPONSIVE LAYOUT OBIETTIVO VALORE RELATIVO 900 / 960 = 0,9375 % = 93,75 % CONTESTO PERCENTUALEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  35. 35. HOW TO CODING A RESPONSIVE LAYOUTFLUID BLOG valore calcolato .blog { width = 93,75%; margin = 0px auto; }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  36. 36. HOW TO CODING A RESPONSIVE LAYOUT WRAPPER: 90% BLOG: 93,75% CONTENT: 77,7777778 % SIDEBAR: 20%WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  37. 37. HOW TO CODING A RESPONSIVE LAYOUTFLUID MARGINS & PADDING Per fissare i margini di un elemento utilizzando un approccio fluido ilMARGIN contesto è la larghezza del contenitore dell’elemento. Per fissare il padding di un elemento utilizzando un approccio fluido ilPADDING contesto è la larghezza dell’elemento stesso.WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  38. 38. HOW TO CODING A RESPONSIVE LAYOUT PADDING: 20 / 700 = ,028571429 = 2,8571429 % CONTENT: 77,7777778 % SIDEBAR: 20%WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  39. 39. HOW TO CODING A RESPONSIVE LAYOUTFLUID TEXT body { font-size = 16px; /* 1em = 16px */ } 30 / 16 = 1,875 h1 { font-size = 1,875em; /* 1em = 16px */ }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  40. 40. HOW TO CODING A RESPONSIVE LAYOUTFLUID TEXT INHERITANCE h1 { font-size = 1,875em; /* 30/16 */ } 10 / 30 = 0,333333333 h1 a { font-size = 0,333333333em; /* 10/30 */ }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  41. 41. HOW TO CODING A RESPONSIVE LAYOUT FLUID FLUID GRID & TYPO MEDIA RESPONSIVEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  42. 42. HOW TO CODING A RESPONSIVE LAYOUTFLUID MEDIA .big-thumbnails { max-width = 100%; }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  43. 43. HOW TO CODING A RESPONSIVE LAYOUTFLUID MEDIA .big-thumbnails { max-width = 100%; } MAX-WIDTH: 100% CONTENT: 77,7777778 % SIDEBAR: 20%WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  44. 44. HOW TO CODING A RESPONSIVE LAYOUT FLUID FLUID MEDIA GRID & TYPO MEDIA QUERIES RESPONSIVEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  45. 45. HOW TO CODING A RESPONSIVE LAYOUT DISPLAY CON DIMENSIONI DIFFERENTIWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  46. 46. HOW TO CODING A RESPONSIVE LAYOUT RENDERING SURFACE DISPLAY AREAWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  47. 47. HOW TO CODING A RESPONSIVE LAYOUTWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  48. 48. HOW TO CODING A RESPONSIVE LAYOUTMEDIA TYPES all braille embossed handheld print projection screen speech tty tvWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  49. 49. HOW TO CODING A RESPONSIVE LAYOUTMEDIA TYPES<link rel="stylesheet" href="style.css" media="screen"/>WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  50. 50. HOW TO CODING A RESPONSIVE LAYOUTMEDIA TYPES @media screen { .big-thumbnails { max-width: 100%; } }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  51. 51. HOW TO CODING A RESPONSIVE LAYOUTMEDIA QUERIES @media screen and (min-width: 1024px) { .big-thumbnails { max-width: 100%; } }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  52. 52. HOW TO CODING A RESPONSIVE LAYOUTMEDIA QUERIES TYPES width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-indexWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  53. 53. HOW TO CODING A RESPONSIVE LAYOUTMEDIA QUERIES TYPES@media screen and (min-width: 480px) and (orientation: landscape){...}WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  54. 54. VIEWPORTWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  55. 55. VIEWPORT LAYOUT RENDERING 980 PXWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  56. 56. VIEWPORTCANVAS SCALING LIVELLO ZOOM 100% CANVAS WIDTH<meta name="viewport" content="initial-scale=1.0" width="device-width"/>WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  57. 57. BREAKPOINTSWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  58. 58. BREAKPOINTS 1024 480 320 600 768WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  59. 59. BREAKPOINTS 1200 1400WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  60. 60. COMPATIBILITÀWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  61. 61. COMPATIBILITÀBROWSERS SUPPORTWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  62. 62. COMPATIBILITÀBROWSERS SUPPORTWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  63. 63. HOW TO CODING A RESPONSIVE LAYOUTFLUID MEDIA - IE FIX .big-thumbnails { width = 100%; }WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  64. 64. COMPATIBILITÀ RESPOND.JS developed by Scott Jehl JSWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  65. 65. COMPATIBILITÀRESPOND.JS IMPLEMENTATION @media screen and (min-width: 1024px) { .big-thumbnails { max-width: 100%; } } /*/mediaquery*/WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  66. 66. COMPATIBILITÀ E SE JAVASCRIPT È DISATTIVATO?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  67. 67. RESPONSIVE SITESWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  68. 68. RESPONSIVE SITES thenextweb.com - new inspiring responsive design websitesWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  69. 69. RISORSEWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  70. 70. COMPATIBILITÀRESPONSIVE FRAMEWORKSTitan FrameworkFoundationResponsive Grid SystemIngridBootstrapGumbyLess+ FrameworkWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  71. 71. COMPATIBILITÀRESPONSIVE IMAGES & MEDIAadaptive-images.comJulius Design - Responsive web design i migliori tutorial risorseHeyGrady - Responsive images without javascriptCss Tricks - Which responsive images solution should you use?Mark Tyrrell - Blueberry SliderViljamis - Responsive SlidesWowsliderSpeckyboy - Responsive ImageWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  72. 72. COMPATIBILITÀRESPONSIVE TESTINGhttp://www.responsinator.comhttp://lab.maltewassermann.com/viewport-resizer/http://screenqueri.esAptusWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  73. 73. RELATORE MIRKO SANTANGELO www.mirkosantangelo.com Progettista grafico, Adobe Certified Expert e Beta Tester, si occupa prevalentemente di visual design orientato alla comunicazione per clienti con rilevanza nazionale e internazionale. Il suo lavoro spazia dalla costruzione di identità visive, marchi, icone ed interfacce per dispositivi mobili e desktop, graphic design rivolto al settore pubblicitario ed editoriale fino alla manipolazione creativa delle immagini e la post-produzione. Nel 2010 vince il concorso Adobe YouGC – Categoria White Papers, ed è stato inserito dalla Siryus Cybernetic Corporation nella classifica Top 16 – Best Italian Digital Designer. Collabora attivamente come autore per riviste e web magazine internazionali come PSDTuts+ e Advanced Photoshop. CDO e Co-Founder di PhotoSpotLand.com. Facebook: Mirko Santangelo Twitter: @mirkosantangeloWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

×