5 soluciones prácticas para el desarrollo de Responsive Web Design

En dispositivos móviles con pantallas de alta definición -Retina display- las imágenes usadas para la iconografía (PNG) se muestran pixeladas.

Solución:

Adoptamos el formato de imágenes SVG (Gráficos Vectoriales Redimensionables), que como su nombre lo dice, son imágenes en vectores que permiten aumentar o reducir el tamaño sin comprometer la calidad de la visualización. En comparación con los formatos JPG o PNG, el SVG tiene un peso mucho menor y puede ser escalado a cualquier tamaño sin perder la calidad de imagen, haciéndolo ideal para dispositivos con mayor densidad de pixeles por pulgada. Este formato se puede utilizar perfectamente como una imagen común y corriente, insertandola dentro del atributo “src” de cualquier etiqueta <img>.

Ejemplo:

<img src="imagen.svg" alt="Esto es una imagen en formato SVG" />

El formato SVG no es soportado por todos los navegadores,  particularmente antiguas versiones de Android(2.3 y anteriores) y Explorer (8 y anteriores)

Solución:

Combinamos Jquery, atributos personalizados de HTML5 y Modernizr para así detectar si el navegador soporta imágenes en SVG. Si la aplicación no será capaz de visualizar este archivo, utilizamos un fallback para desplegar un formato de imagen compatible con el navegador. Con esta opción será necesario contar con los dos formatos para cada caso.

Ejemplo:

En el HTML escribimos una etiqueta <img> que desplegará el SVG y al mismo tiempo tendrá un atributo personalizado “data-fallback” que tendrá la imagen en formato PNG en caso de que el navegador no soporte vectores redimensionables.

<img src="imagen.svg" data-fallback="imagen.png" alt="Esto es una imagen en formato SVG" />

Luego, utilizando Modernizr detectamos si el navegador soporta SVG, si no es el caso, entonces toma la imagen en formato PNG que se encuentra en el atributo personalizado y lo inserta en el src escrito.

       if( !Modernizr.svg ) { //A través de Modernizr detectamos si el navegador no soporta formatos SVG
            var svgObjects = $('[data-fallback]'); //Almacenamos la imagen en una variable
            $.each(svgObjects, function(i, elm){
                $(elm).attr('src', $(elm).attr('data-svgFallback')); //Reemplazamos la imagen SVG del source por la imagen PNG del atributo personalizado 
            });
        }

<strong style="font-size: 1em; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;"

La mayoría de los dispositivos móviles acceden a internet a través de conexiones limitadas e inestables, lo que ralentiza la carga del contenido de los sitios responsive.

Solución:

Los sitios web desarrollados en diseño responsive cargan todo el contenido sin discriminar dispositivos. El problema más común sucede con las imágenes, que consideran también la petición al servidor y la descarga. Como alternativa a esta limitante insertamos la imagen directamente en el documento a través de Data URIs. Básicamente es un string extenso que contiene la información de la imagen codificada para que el navegador la interprete y la despliegue sin necesidad de realizar peticiones al servidor o descargarlas, lo que disminuye considerablemente el tiempo de carga del documento. Existen muchas herramientas gratuitas para generar estos códigos, una de ellas es Data URI Generator, donde solo basta con subir la imagen y obtenemos el código.

Ejemplo:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxM3B4IiBoZWlnaHQ9IjE0cHgiIHZpZXdCb3g9IjAgMCAxMyAxNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTMgMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyLjcwOSwxMC40MzlsMC4yOS05LjE4OWMwLjAyLTAuNzEtMC41LTEuMjctMS4xNi0xLjI1bC04LjUzLDAuMzJjLTAuNjcsMC4wMi0xLjIzLDAuNjItMS4yNSwxLjM0DQoJYy0wLjAyLDAuNzIsMC41LDEuMjgsMS4xNiwxLjI1bDUuNjItMC4ybC04LjQ2LDkuMTAxYy0wLjQ4LDAuNTI5LTAuNTEsMS4zNS0wLjA2LDEuODRjMC40NiwwLjQ5LDEuMjIsMC40NTksMS43MS0wLjA2MWw4LjQ2LTkuMTENCglsLTAuMiw2LjA0OWMtMC4wMTEsMC4zNjEsMC4xMiwwLjY4MSwwLjMzLDAuOWMwLjIxLDAuMjMsMC41LDAuMzYsMC44NCwwLjM1QzEyLjExOSwxMS43NiwxMi42NzksMTEuMTYsMTIuNzA5LDEwLjQzOXoiLz4NCjwvc3ZnPg0K" alt="Esto es una imagen codificada" />

Al trabajar en columnas con porcentajes la propiedad de CSS “border” solo permite trabajar en pixeles.

Solución:

Una de las premisas del diseño responsive es el trabajo con anchos porcentuales, de modo que los elementos siempre se adecuarán al tamaño de la pantalla donde se estén desplegando. Nos ha sucedido que en diversos proyectos es necesario habilitar un elemento HTML flexible, con ancho porcentual y borde al mismo tiempo, lo que rompe la estructura al agregar pixeles al espacio que lo contiene. Esta dificultad la solucionamos utilizando box-shadow para simular los bordes en pixeles, ya que la sombra se superpone sobre el contenedor en comparación al borde que se suma a la estructura.

Ejemplo:

Para una grilla con estructura de 4 columnas: Cada columna debería medir 1/4 del total, es decir un 25% de ancho. Si se añade un borde de 1 px la estructura se romperá ya que la suma entre los anchos de la columna y los píxeles de los bordes es mayor al 100%:

.columna{

width:25%;

float:left;

border:1px solid #CCC;

}

Además, simulamos los bordes con la propiedad “box-shadow”, creando sombras duras de un pixel que se superponen sobre las columnas:

.columna{

width:25%;

float:left;

box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.45) //Sombra negra con opacidad de un pixel de ancho movido a la derecha

Las animaciones funcionan más lento en dispositivos móviles que en computadores de escritorio.

Solución:

Las tablets y smartphones poseen menor capacidad de procesamiento que un dispositivo de escritorio, por lo que recomendamos seguir los siguientes consejos prácticos:

• Utiliza mayor cantidad de código nativo posible, ya que permite que los procesos se generen más rápido.
• Ocupa transiciones y animaciones CSS3, que son más rápidas en comparación animaciones a través de Javascript.
• Usa más memoria y menos procesador en el código Javascript.