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. ;)

Transcript

1. Ricardo Prieto @ricardpriet silocreativo.com
2. SPAM
3. MOBILE FIRST 1
4. > 600 px > 900 px
6. STYLE.CSS @media (min-width: ***px) { }
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
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/
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
25. Ricardo Prieto @ricardpriet silocreativo.com