Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Diseño Más Responsive con WordPress

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.

SiloCreativo

April 25, 2015
Tweet

More Decks by SiloCreativo

Other Decks in Design

Transcript

  1. Responsive: “Quick to react in the way that is needed,

    suitable, or right for a particular situation” Macmillan Dictionary
  2. > 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
  3. <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
  4. 24% (7 out of 29) How Big Is Art-Direction? http:/

    /blog.yoav.ws/2013/05/How-Big-Is-Art-Direction
  5. 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
  6. $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!" />