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

Diseñando una mejor Experiencia Ecommerce en Responsive

Diseñando una mejor Experiencia Ecommerce en Responsive

Ponencia para WordPress Marbella. Mayo de 2014.
Diseño por Verónica Valenzuela.
Buenas prácticas a la hora de trabajar con Diseño Web Responsive orientado al comercio electrónico bajo WordPress. Especial atención al Mobile-FIrst, gestión de imágenes fluidas, uso de sliders y correcta ubicación y gestión de Menús.

6d22f37140f6460f5b806d2148d33085?s=128

SiloCreativo

May 30, 2014
Tweet

More Decks by SiloCreativo

Other Decks in Design

Transcript

  1. Ricardo Prieto @ricardpriet silocreativo.com

  2. None
  3. 1

  4. > 600 px > 900 px

  5. None
  6. 768px 992px 1200PX

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

  8. CONTENT FIRST (READABILITY FIRST)

  9. STYLE.CSS @media (min-width: ***rem) { }

  10. 2IMÁ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. None
  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. 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!
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. 3

  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. register_nav_menus( array( 'primary' => __( 'Navigation Menu', 'silocreativo' ), 'social'

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