Diseño Más Responsive con WordPress

Partiendo de que entendemos el término responsive como una mejora en la adaptabilidad frente a diferentes dispositivos y entornos, es el momento de introducir una segunda variable asociada al mismo, hagamos diseño responsive “quick to react”.

Con Mobile first se introducen mejoras relativa a la carga de CSS y los elementos declarados en el mismo, mejorando el tiempo de carga y por tanto la UX en mobile. Sin embargo, de media más del 60% del tamaño de una web reside en las imágenes, con lo que cualquier mejora queda eclipsada por el peso preponderante de las mismas.

Pero ahora estamos en condiciones de implementar nuevos elementos y atributos (srcset) para mejorar el comportamiento de nuestras imágenes, en conjunción además con los ya conocidos thumbnails de WordPress, logrando un menor tiempo de carga, una experiencia para el visitante de la web y también para el usuario de WordPress.

Transcript

1. Ricardo Prieto | Verónica Valenzuela @ricardpriet | @valenveronica silocreativo.com
2. Spam.
7. Responsive: “Quick to react in the way that is needed, suitable, or right for a particular situation” Macmillan Dictionary
8. > Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20%. > When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks. > Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1%. Website Optimization Andrew B. King
14. <img src="fallback.jpg" srcset="small.jpg 320w, medium.jpg 640w, large.jpg 960w" sizes="100vw, (min-width: 750px) 33.3vw" alt="Trátame bien Google!" /> SRCSET
16. <picture> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <source media="(min-width: 750px)" srcset="large.jpg 1x, large-hd.jpg 2x"> <img src="fallback.jpg" alt="Trátame bien!"> </picture> PICTURE
18. 24% (7 out of 29) How Big Is Art-Direction? http:/ /blog.yoav.ws/2013/05/How-Big-Is-Art-Direction
23. set_post_thumbnail_size( 720, 400, true ); / / Add Thumbnail sizes add_image_size( 'large-img', 1140, 420, true ); add_image_size( 'extralarge-img', 2140, 820, true ); FUNCTIONS.PHP
26. $thumb_id = get_post_thumbnail_id(); $thumb_medium = wp_get_attachment_image_sr- c($thumb_id,'medium', true); $thumb_large = wp_get_attachment_image_src($- thumb_id,'large', true); $thumb_extralarge = wp_get_attachment_ima- ge_src($thumb_id,'extralarge', true); <img src="<?php echo $thumb_medium[0]; ?>" srcset="<?php echo $thumb_medium[0]; ?> 320w, <?php echo $thumb_large[0]; ?> 640w, <?php echo $thumb_extralarge[0]; ?> 960w" sizes="100vw, (min-width: 750px) 33.3vw" alt="Trátame bien Google!" />
28. RICG Responsive Images wordpress.org/plugins/ricg-responsive-images
30. Ricardo Prieto | Verónica Valenzuela @ricardpriet | @valenveronica silocreativo.com