Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Diseño Web Responsive y Accesible con Temas WordPress

6d22f37140f6460f5b806d2148d33085?s=47 SiloCreativo
March 17, 2014

Diseño Web Responsive y Accesible con Temas WordPress

Buenas prácticas a la hora de diseñar temas en WordPress. Hablamos de diseño responsive mobile first, tipografías en unidades relativas, correcta gestión de imágenes fluidas y como trabajar correctamente con elementos de vídeo externo en pequeñas resoluciones, y no tan pequeñas! Que la disfrutes. ;)

6d22f37140f6460f5b806d2148d33085?s=128

SiloCreativo

March 17, 2014
Tweet

More Decks by SiloCreativo

Other Decks in Design

Transcript

  1. Ricardo Prieto @ricardpriet silocreativo.com

  2. SPAM

  3. MOBILE FIRST 1

  4. > 600 px > 900 px

  5. None
  6. STYLE.CSS @media (min-width: ***px) { }

  7. 2

  8. None
  9. None
  10. html { font-size: 100%; } /* Browserdefault, 16px */ h1

    { font-size: 1.75rem; } /* 28/16 = 1.75 */ p { font-size: 0.875rem; } /* 14/16 = 0.875 */ STYLE.CSS
  11. html { font-size: 62.5%; } /* 10px */ h1 {

    font-size: 2.8rem; } /* 28/10 = 2.8 */ p { font-size: 1.4rem; } /* 14/10 = 1.4 */
  12. html { font-size: 100%; } h1 { font-size: 28px; font-size:

    1.75rem; } p { font-size: 14px; font-size: 0.875rem; } IE
  13. 3IMAGÉNES FLEXIBLES Be water, my friend

  14. None
  15. img { height: auto; max-width: 100%; } STYLE.CSS

  16. .entry-content img, .entry-summary img, .comment-content img, .widget img, .wp-caption {

    max-width: 100%; height: auto; }
  17. .ie img { width: inherit; /* Make images fill their

    parent's space. Solves IE8. */ max-width: 100%; /* Add !important if needed. */ height: auto; /* Add !important if needed. */ } IE
  18. PB Responsive Images http:/ /wordpress.org/plugins/pb-responsive-images/ Simple Responsive Images http:/ /wordpress.org/plugins/simple-responsive-images/

  19. 4

  20. None
  21. <iframe src="http:/ /www.youtube.com/embed/AAAAAAA" height="315" width="560" allowfullscreen="" frameborder="0"></iframe> <div class="video-container"> <iframe></iframe>

    </div>
  22. .video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0;

    overflow: hidden; } .video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } STYLE.CSS
  23. fitvids.js if ( is_page_template('page-home.php') ) wp_enqueue_script( 'silotheme-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js',

    array( 'jquery' ), '1.0.3', true); iframe { max-width: 100%; } FUNCTIONS.PHP
  24. None
  25. Ricardo Prieto @ricardpriet silocreativo.com