Diseño Web Responsive y Accesible con Temas WordPress

6d22f37140f6460f5b806d2148d33085?s=47 SiloCreativo
March 17, 2014

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

6d22f37140f6460f5b806d2148d33085?s=128

SiloCreativo

March 17, 2014
Tweet

Transcript

  1. 2.
  2. 5.
  3. 7.

    2

  4. 8.
  5. 9.
  6. 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
  7. 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 */
  8. 12.

    html { font-size: 100%; } h1 { font-size: 28px; font-size:

    1.75rem; } p { font-size: 14px; font-size: 0.875rem; } IE
  9. 14.
  10. 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
  11. 19.

    4

  12. 20.
  13. 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
  14. 24.