Diseño sensible, adaptable, o escalable. (Responsive design) con Dreamweaver y Boilerplate.

Con seguridad los diseñadores Web no tuvimos durante mucho tiempo la capacidad de dar una buena solución al diseño de contenidos para pantallas grandes, así como también para pantallas más pequeñas de diferentes tamaños en aparatos móviles y de mejor resolución.

Esta entrada trata sobre un análisis del diseño Web con hojas de estilo CSS3 y HTML5,en Adobe Dreamweaver. Este tipo de diseño en principio se denomina Responsive Design (Diseño adaptable traducido del inglés) y que debe su nombre a un artículo, aparecido en 2010:
http://www.alistapart.com/articles/responsive-web-design/. Se describen los diferentes tipos de archivos que maneja el método, y finalmente se presenta un link a un tutorial en video.

La técnica se basa en un hoja de estilo CSS con Mediaquery, los HTML y una librería Javascript.
Gracias a la aparición de la técnica de Plantillas de  Diseño Fluido de Dreamweaver CS6, se hace más fácil su implementación.

A pesar de que es una buena alternativa para sitios móviles, debe tratarse con cuidado el manejo de los contenidos ya que podríamos estar enviando al dispositivo móvil archivos que son usados para el ordenador de escritorio, que, en relación al móvil, se supone más potente. Para optimizar los contenidos para móviles, estos deberían estar preparados, sobretodo las imágenes y videos, para las pantallas más pequeñas y procesadores menos potentes. Sin embargo, con cada actualización de tabletas o teléfonos, nos damos cuenta que estos tienen un poder de proceso y memoria que compiten ya con los equipos de escritorio. También se podría usar el Framework Jquery Mobile que optimiza los recursos del móvil.

Ventana de diáologo de Dreamweaver 6, mostrando un archivo
nuevo a partir de una plantilla de Diseño Fluido.

Análisis de la plantilla propuesta por Adobe Dreamweaver CS6.

La técnica de Diseño Adaptable mediante Adobe Dreamweaver CS6 se basa en una hoja de estilos CSS básica denominada "Boilerplate.css", un script de Javascript llamado "respond.min.js" y una hoja de estilo CSS propia, que puede tener cualquier nombre.

 

 Boilerplate.css

El archivo vinculado a nuestro HTML5, "boilerplate.css"  es el resultado de una intensa investigación sobre estilos válidos para múltiples navegadores. Adobe dá los respectivos  créditos y agradecimientos en el código fuente a varios desarrolladores y a la comunidad de H5BP ( Información detallada acerca de este CSS: h5bp.com/css).

El archivo "boilerplate" corrige el texto que cambia de tamaño de forma extraña en IE6/7 cuando el tamaño de fuente del cuerpo se establece en unidades "em". Forza la barra de desplazamiento vertical en navegadores distintos de IE. Evita el ajuste de tamaño de texto en iOS cuando cambia la orientación del dispositivo sin que se desactive el zoom de usuario. También establece tamaños de tipografía a "1em", estandariza el ancho de los caracteres para las etiqueta B y STRONG, así como estandariza todo lo relacionado a saltos de línea, reglas, listas ordenadas y desordenadas, colores de links, etc.

Este archivo iguala a ceros muchos de los valores de las reglas CSS básicas dentro de un DIV con clases de CSS no semánticas como .clearfix, .visuallyhidden y .focusable

En conclusión, la hoja de estilos "boilerplate.css" adelanta un gran camino en la estandarización y pruebas de diseño para los diferentes navegadores que por alguna razón muestran resultados inesperados con los CSS.

 

 Respond.min.js

Básicamente, el script recorre la CSS a que se hace referencia en la página (la CSS propia o la que se haya creado con la página y que es independiente de boilerplate.css) y se ejecuta una expresión regular o dos en su contenido para encontrar preguntas de los medios y sus bloques asociados de CSS.

El script analiza el ancho de la pantalla donde se esté desplegando la página, y selecciona una porción del código de  la hoja de estilo precedida con un

 "@media only screen and (min-width: npx) siendo "n" el ancho mínimo de la pantalla"

para colocarla al principio de la renderización del CSS.

Dreamweaver 6 adjunta la dirección relativa del archivo respond.min.js (entre otras) cuando se inicia el diseño mediante la acción de menú Archivo/Nuevo diseño de cuadrícula fluida. Los archivos .css y .js se suben al servidor una vez se quiera publicar el sitio.

La hoja de estilos propia. (miNombre.css)

Además de los dos archivos mencionados, se hace necesario un archivo CSS propio o personalizado, que es el que manejará los estilos de textos personalizados, márgenes, paddings, clases y ID. Este archivo CSS es el que contiene el Media Query.

De acuerdo con mi experiencia, es mejor hacer caso a la advertencia del texto de ayuda de las DIV, la cual dice que no se aconseja anidar DIV-s. Estas se insertan por  el comando de menú:

insertar/Objetos de diseño/DIv de diseño de cuadrícula fluida

Y deben quedar siempre dentro de la DIV principal denominada ".gridContainer clearfix" (nombre de clase). Una tras otra, sin anidar. Las posiciones y estilos se dan a partir de allí en la hoja de estilos, repitiendo los nombres de las clases y ID para cada caso o @media only screen and (min-width: npx) y colocando los valores acertados para cada ancho de pantalla.

Ejemplo de hoja de estilo propuesta por Dreamweaver mediante este método, con @media Query:

@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
width:100%;
}
/*
Propiedades de cuadrícula fluida de Dreamweaver
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
http://www.alistapart.com/articles/responsive-web-design
y Golden Grid System de Joni Korpi
http://goldengridsystem.com/
*/
/* Diseño móvil: 480 px e inferior. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */
@media only screen and (min-width: 481px) {

.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}


/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}

En el ejemplo anterior se ve que la primera porción de CSS es la estandard y es la que se desplegará en cualquier pantalla si no encontrara la condición  de medir mínimo 481px o 769px, casos en los cuales desplegará las reglas estipuladas en cada sección (fíjese que las llaves que encierran cada porción están en color rojo).

 

 Manejo de imágenes.

Es posible diseñar las imágenes y contenidos para que mediante el procedimiento Mediaquery cargue en cada dispositivo las que le corresponden a su tamaño. Una solución posible es colocar los tamaños del ancho de las imágenes, DIV y demás características en porcentajes, haciendo que no ocupen el ancho total mediante una regla de ancho máximo

por ej.: img {width: 90%; max-width: 1200px;}

deberíamos, por lo tanto, colocar en la carpeta de imágenes las apropiadas a cada tamaño de pantalla y llamarlas mediante la hoja de estilos en cada porción de @media.

 Otra opción que funciona bien para el cambiante mundo de los tamaños de imagen es el "width: auto;". 

img {width: auto; max-width: 600px;}

Ya que este atributo acomoda los anchos de la imagen con respecto a su contenedor y en relación al tamaño original. Parece también comunicarse muy bien con el atributo Viewport.

  ¿Qué usar, ID o Clases?

Es una buena pregunta. Las ID son identificaciones únicas a objetos como DIV que no se deban repetir en el diseño, van precedidas por el signo "#",  por su lado, las clases son objetos que pueden ser genéricos (van precedidos con "."), tales como tipos de letra en de títulos H1, H2, etc, párrafos, etc, y siempre tienen nombre único con la diferencia que en el HTML el objeto al que se le haya aplicado dicha clase (spam class) renderizará el estilo cuantas veces lo encuentre. Digamos, por lo tanto, que no es  el hecho de qué usar más o menos veces, sino de saberlo aplicar.

Conclusión

El uso de herramientas como Dreamweaver, o un Frameworks para el Javascript, los CSS o el HTML nos ayuda mucho en la consecusión rápida de nuestras metas de diseño ya que adelanta trabajo en las pruebas con navegadores.

Javascript se consolida como el lenguaje de integración de la web ya que es compatible con los programas de navegación, y como vimos, maneja bien las hojas de estilo.

Adobe no es la solución perfecta a todos los requerimientos de diseño, en algunos casos debemos valernos de investigaciones de otras fuentes como  los frameworks de Github , JqueryMobil, Jquery y demás.

Tutorial de este artículo.

Diseño adaptable en Dreamweaver