Servicios W.Y.Z - Maquetacion y CSS

La maquetación y CSS

Ha habido mucha discusión últimamente con respecto a las técnicas implicadas en diseño adaptable desde un punto de vista técnico: las preguntas de los medios, el porcientaje de ancho, etc. Sin embargo, una vez que se dominan los trucos del CSS para ejecutar un diseño adaptable, le hacen frente a el diseño real.
¿ Es bastante dificil llevar a cabo un diseño profesional cuando usted se está preocupado del solo formato, cuánto más difícil sea el formato, más lo será para el diseño adaptable?
Constantemente vemos objeciones de ambas partes, tanto de diseñadores como de clientes, pues lo ven como na empresa inmensa y complicada. Y se convierte en una lucha de costos y horas hombre para producir un trabajo de calidad.
Afortunadamente, el tiempo de diseño del esqueleto se recorta notablemente con CSS. Sin embargo, como diseñador usted todavía necesitará centrarse en su sólida experiencia para dar a dad usuario el diseño solicitado. Hechemos una ojeada algunas de las practicas que debe tener en mente todo diseñador.
Photoshop no lo cortará
La visualización en el navegador es no más un capricho, es una necesidad. Se deben descartar definitivamente algunas ideas en Photoshop, tales cómo se vera el sitio en distintas resoluciones, y lograr un resultados más atractivo, pero la verdad simple es que Photoshop no puede realizar efectos dinámicos; indicativo de diseño adaptable.
Cuando uno piensa en que el diseño se acople el tamaño de la ventana del navegador, es tomar la resolución de pantalla , por ejemplo la resolución mas baj en que yo trabajo es 1024px de ancho por 780px de alto, por lo cual el ancho minimo de mis paginas debera ser 960px, la altura depedera de las imagenes y la informacion a ser presentada. de esta forma tomamos en cuenta que los navegadores difieren en como presentan los web sites en detalles pequeños, si lo dudan habran la misma pagina en OPERA, IE, CHROME ó FIREFOX.
Tenga presente que sus maquetas pueden todavía ser productos bajos en calidad, sin un buen soporte grafíco si usted quiere comenzar con un wireframe o algo másbásico, basta con mirar el diseño de imagen realizado en photoshop y analisar las posibilidades. La llave aquí es que usted tiene algo vivo, que ira evolucionando, para así poder solucionar los problemas mientras que se presentan y mantener la idea fundamental lo más intacta posible.
La Transición
No va definitivamente siempre a ser el caso, pero una versión móvil-amistosa contendrá todo el contenido fundamental de su diseño para navegador de escritorio. El truco entonces es considerar todo que usted y su cliente están planeando en incluir y crear una jerarquía e importancia, de modo que podamos, determinar que no es necesario para las versiones más pequeñas.
Al realizar la diferenciasión del flujo de datos para una versión móvil. Algo del contenido fue visto como esencial mientras que el otro contenido es más de un "agradable a tener" cuando hay bastante espacio de la pantalla disponible. El ejemplo más obvio de esto está en el área de la navegación. La versión más grande del diseño contiene los pequeños sub-niveles para cada elemento de la navegación. Éstos ayudan al usuario más lejos a entender el esquema de la navegación. En la pequeña versión sin embargo, éstos se han ido para ahorrar espacio en el sitio.
Mientras que analiza su diseño para los elementos esenciales, la experimentación es la clave. Intente utilizar varios componentes para juzgar independientemente si le son de utilidad. Observara que estas decisiones se deben tomar en cada intervalo, no apenas el el más pequeño y más grande. Sino del elemento de mayor importancia hacia el de menor.
Touch es diferente de Click
Otro punto significativo a recordar son las escalas del diseño son que el estado actual de la computación está partido en diversas categorías: toque los dispositivos de entrada basados y los que utilizan un cursor. La presunción segura por supuesto (por el momento no sabemos en un par de años) es que los tamaños más grandes de ventanas de navegador tienden a corresponder a las pc y los laptops; mientras que tamaños más pequeños de ventana de navegador indican generalmente un interfaz basada en touch screen.
Está todo en el medio
Una cosa crucial importante a conseguir en su cabeza con respecto a diseño adaptable es que esté sobre más que tamaños de pantalla: Porque alguien tiene las 13 pulgadas MacBook no significa que la ventana del navegador es ese tamaño. Es a menudo el caso que los usuarios abren y utilizan navegadores en espacios menores a la pantalla completa. El Punto aquí es que después de probar algunas resoluciónes. Clasificar según el tamaño la ventana y el navegador, cómo el diseño responde. En proxima entrega profundizare más, con un para de casos de estudio de unos clientes.
Escrito por: Yker González