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

Diseño Web Responsive y Accesible con Temas Wor...

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

SiloCreativo

March 17, 2014
Tweet

More Decks by SiloCreativo

Other Decks in Design

Transcript

  1. 2

  2. 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
  3. html { font-size: 62.5%; } /* 10px */ h1 {

    font-size: 2.8rem; } /* 28/10 = 2.8 */ p { font-size: 1.4rem; } /* 14/10 = 1.4 */
  4. html { font-size: 100%; } h1 { font-size: 28px; font-size:

    1.75rem; } p { font-size: 14px; font-size: 0.875rem; } IE
  5. .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
  6. 4

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