Diseño adaptable (aka Responsive Design)
El siguiente es un excelente recurso que cualquiera que tenga un sitio Web basado en WordPress puede implementar.
El tratamiento adaptable de la imágenes no sólo mejora la accesibilidad al sitio Web sino que además, la experiencia de usuario; con independencia del dispositivo que utilice.
Visto en WP Recipes
Sólo es necesario hacer los siguientes sencillos ajustes, 3 pasos:
1 – editar tu archivo functions.php
function responsive_images($atts, $content = null) { return '<div class="image-resized">' . $content .'</div>'; } add_shortcode('responsive', 'responsive_images'); |
2 – editar tu archivo style.css
/*Imágenes adaptables a cualquier dispositivo*/ @media only screen and (max-width:767px) { .image-resized img { width:100%; height:auto; } } |
3 – utilizar tu nuevo shortcode
[responsive] <img src="la ruta a tu imagen" alt="texto alternativo" title="el título va aquí" /> [/responsive] |
Imagen cortesía de Bermole
Podés encontrar a Daniel en Google+
