Como diseñador web uno de los mayores desafíos es que todo website que realice debe adaptarse a diferentes dispositivos y tamaños de pantalla para mostrar el contenido. Pero diseñar un mismo sitio más de 3 veces para que se adapte a cada tamaño de dispositivo es extremadamente cansado y consumen mucho tiempo, para hacer este trabajo fácil, me di cuenta de que lo mas lógico seria usar un diseño de «Grid Fluida» para el «layout» de mi website, muy parecido a las «grids» usadas en JQuery Mobile estas celdas me permiten, estas reaccionan a los cambios en el tamaño de la pantalla con el uso de porcentajes o «width».
Primeros Pasos
Es en Dreamweaver 6(parte del paquete adobe) que ahora se nos permite crear nuevos «Fluid grid layouts» lo cual hace que diseñar un sitio para múltiples pantallas sea un poco mas fácil para mi, así que paso a paso diré como se crea un Grid Layout, dentro de Archivo podemos seleccionar un Fluid Grid Layaout.
Pantalla Principal
Esta pantalla es una de las más importantes al momento de iniciar el proyecto, primero tenemos 2 características en cada pantalla, la primera es el numero de Columnas que se verán en cada uno de las 3 pantallas, y lo segundo más importante es que porcentaje de la pantalla deseamos usar, una vez que tenemos esto seleccionado Creamos el archivo, todos estos diseños fluidos hacen uso de HTML5 por defecto.
Una vez que creamos el archivo, nos damos cuenta de muchas cosas entre ellas:
- Tendremos un DIV principal BASE el cual va a contener nuestro sitio web <div.gridContainer.clearfix>
- También veremos de que tendremos 3 iconos que hacen referencia a los 3 diferentes tamaños de pantallas con los cuales trabajaremos.
3 dimensiones de nuestro website
Todo nuestro sitio web se trabajara a base de <DIV>, dentro de nuestro contenedor tenemos la libertad de crear los DIV que necesitemos, pero cada DIV creado te pide las opciones de «crear nueva fila» con esto se refiere a que si esta fila ocupara el máximo de la pantalla, en caso de no seleccionar esta opción, la fila creada se acomodara al espacio que tenga disponible.
Por default, cosas como «header» , «navigationbar», «footer» tendrán su propia fila y actúan como separadores de secciones, ya depende del programador crear filas y llenarlas con información.
mas divs para contenidos
Gráficamente cada fila nueva tendrá un borde rojo, mientras que cada fila que no queremos ocupe una fila completa la veremos con bordes amarillos, son estos DIV amarillos quienes se acomodaran al tamaño de la pantalla.
También algo que me di cuenta mientras trabaje con los DIVS es que todo <div> tag tiene flechas al lado derecho e izquierdo, pero cada flecha tiene una función única la función de la flecha derecha es reducir el ancho del bloque <div> mientras que la flecha derecha tiene la función de incremental el marco izquierdo entre la pantalla y el contenido, por lo general usaremos la flecha derecha para reducir el ancho de los bloques <div> y si nos damos cuenta si reducimos los bloques <div> lo suficiente estos se ubicaran uno al lado del otro, ocupando así una fila en vez de dos.
CSS
Aprendí de la práctica de que para agregar al momento de crear el sitio web fluido este me crea una hoja de estilos dentro de una carpeta en el directorio raíz, este archivo CSS no tiene estilos, pero contiene reglas muy importantes y media Query las cuales se aplican luego de determinar el tamaño de la pantalla del dispositivo que la carga. Así que si deseas agregar una hojas de estilos a tu website, es completamente recomendado, cargar OTRA hoja de estilos dentro de la carpeta CSS la cual contenga el estilo visual del website, nunca se edita el CSS inicial ya que contiene las reglas del diseño fluido y al manipularlas pueden afectar las funciones de nuestro sitio web! lo cual es algo que deseamos.
OTRAS PANTALLAS
Generalmente no importa porque diseño del website empiece, ya que una vez que terminemos de colocar el contenido del sitio web y lo ajustemos a una pantalla, debemos dar click en el sig dispositivo ya sea tableta o Smartphone y nuestro contenido original sigue ahí, solo queda editarlo un poco para que se ajuste como queramos. Ahora bien en este punto es donde se vuelven útiles las columnas de definimos a un principio, ya que las tomamos como referencia para saber con cuanto tamaño contamos para ubicar los <div>. Una vez que tuve los 3 tamaños configurados a mi gusto, es atravez de un preview que cargamos la pagina en nuestro navegador y al ir reduciendo el tamaño del navegador nuestros elementos se van acomodando de otra manera.
en el navegador luego de aplicar estilos css
Hay que tener cuidado con las imágenes que coloquemos dentro del website, ya que dependerá de lo que decidamos los tamaños pueden ser fijos o basados en porcentajes de ancho de la pantalla. no se recomienda para nada usar imágenes grandes ya que estas pueden dañar el diseño en pantallas de menor resolución.
tamaño escritorio
Experiencia
Hay que tomar muchas cosas en consideración cuando se empieza a diseñar en Fluid Grid Layaout, los layouts del ejemplo son fáciles y simples, pero no siempre será así, entre más elementos tenga un sitio web los layouts se volverán mas y mas complicados, ya que una vez que terminemos con la pantalla uno, tendremos que seguir con la pantalla 2 y la pantalla 3, pero la realidad es que recude tiempos de programación y también los tiempos de carga, ya que no carga un sitio diferente, sino el mismo sitio pero atravez de un CSS que acomodara los elementos acorde al tamaño de la pantalla y es una excelente forma de conocer los «fluid layouts» y «media querys», Adobe realmente se está tomando muy enserio la parte de crear sitios dinámicos y seguramente esta opción se irá puliendo con las versiones siguientes.
Conclusiones
Todo sitio web debe estar en la capacidad de adaptar su contenido al tamaño del dispositivo que esta acensado a los contenidos, facilitando la lectura y la navegación, todo diseñador web debe apuntar a este formato, y desde luego aprender a trabajar con las herramientas actuales para crear proyectos y dar soluciones, crear el sitio web es solo el primer paso ya que luego debe valerse de otras herramientas para hacerlo dinámico y interactivo, es realmente mucho los conceptos que se manejan y solo la practica da una visión solida de lo que estamos creando y de lo que aún falta por diseñar e implementar.
