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

Diseño Más Responsive con WordPress

6d22f37140f6460f5b806d2148d33085?s=47 SiloCreativo
April 25, 2015

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.

6d22f37140f6460f5b806d2148d33085?s=128

SiloCreativo

April 25, 2015
Tweet

Transcript

  1. Ricardo Prieto | Verónica Valenzuela @ricardpriet | @valenveronica silocreativo.com

  2. Spam.

  3. None
  4. None
  5. None
  6. None
  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
  9. None
  10. None
  11. None
  12. None
  13. None
  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
  15. None
  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
  17. None
  18. 24% (7 out of 29) How Big Is Art-Direction? http:/

    /blog.yoav.ws/2013/05/How-Big-Is-Art-Direction
  19. None
  20. None
  21. None
  22. None
  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
  24. None
  25. None
  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!" />
  27. None
  28. RICG Responsive Images wordpress.org/plugins/ricg-responsive-images

  29. None
  30. Ricardo Prieto | Verónica Valenzuela @ricardpriet | @valenveronica silocreativo.com