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

Diseño responsive y accesibilidad con WordPress: usuario vs pixel

Diseño responsive y accesibilidad con WordPress: usuario vs pixel

Ponencia para WordPress Euskadi. Mayo de 2014.
Diseño por Verónica Valenzuela.
Repaso al uso de diseño web responsive en temas de WordPress, con especial atención al comportamiento y vídeos en pequeñas resoluciones, tipografías en unidades relativas, construcción de diseños a partir de mobile-first y gestión de menús responsive mediante WordPress

6d22f37140f6460f5b806d2148d33085?s=128

SiloCreativo

May 24, 2014
Tweet

More Decks by SiloCreativo

Other Decks in Design

Transcript

  1. Ricardo Prieto @ricardpriet silocreativo.com

  2. SPAM

  3. 1

  4. > 600 px > 900 px

  5. None
  6. None
  7. 768px 992px 1200PX

  8. STYLE.CSS @media (min-width: ***px) { }

  9. None
  10. 2 IMÁGENES FLEXIBLES

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

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

    max-width: 100%; height: auto; }
  14. .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. */ }
  15. Fuente: trilibis.com

  16. the_post_thumbnail(); the_post_thumbnail('thumbnail'); // Thumbnail (default 150px x 150px max) the_post_thumbnail('medium');

    // Medium resolution (default 300px x 300px max) the_post_thumbnail('large'); // Large resolution (default 640px x 640px max) the_post_thumbnail('full'); // Full resolution (original size uploaded) the_post_thumbnail( array(100,100) );
  17. None
  18. add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 720, 500, true ); // Add

    Thumbnail sizes add_image_size( 'silocreativo-thumb-380', 380, 300, true ); add_image_size( 'silocreativo-thumb-380', 380, 300, array( 'left', 'top' ) ); NEW in WP 3.9!
  19. None
  20. None
  21. None
  22. PB Responsive Images http://wordpress.org/plugins/pb-responsive -images/ Simple Responsive Images http://wordpress.org/plugins/simple-respo nsive-images/

  23. <picture> <source media="(min-width: 36em)" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

    sizes="33.3vw" /> <source srcset="cropped-large.jpg 2x, cropped-small.jpg 1x" /> <img src="small.jpg" alt="alternative text" /> </picture>
  24. 3

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

  27. STYLE.CSS .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%; }
  28. 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.1.0', true); iframe { max-width: 100%; } FUNCTIONS.PHP
  29. 4

  30. None
  31. None
  32. 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
  33. html { font-size: 62.5%; } /* 10px */ h1 {

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

    1.75rem; } p { font-size: 14px; font-size: 0.875rem; }
  35. STYLE.CSS @media (min-width: ***rem) { }

  36. None
  37. None
  38. 5

  39. None
  40. None
  41. register_nav_menus( array( 'primary' => __( 'Navigation Menu', 'silocreativo' ), 'social'

    => __( 'Social Links Menu', 'silocreativo' ), ) ); #menu-social li a[href*="twitter.com"]::before { content: "\f099"; }
  42. None
  43. GRACIAS!! Ricardo Prieto @ricardpriet silocreativo.com