Diseño elástico y PressWork

ex-site-flexible

Este año 2011 que acaba fue probablemente en España, y a pesar de las condiciones desfavorables de la economía, un año record en ventas de dispositivos móviles.

Cada vez es más fácil que las webs que desarrollamos para nuestros clientes sean vistas desde un “smartphone” o una “tableta”. Es importante que nos aseguremos que la página que estamos construyendo se verá correctamentecon estos dispositivos.

Hay muchas maneras de conseguir que un sitio web sea compatible con dichos dispositivos, algunos en forma de plugin para WordPress cómo por ejemplo el afamado WPtouch u otros similares. Yo personalmente procuro evitar el uso de plugins siempre que puedo, es un opción personal, creo que demasiados acaban sobrecargando nuestras webs, ralentizan su carga y por lo tanto influyen negativamente en el rendimiento de la misma, y además hacen más complejo el mantenimiento por la gran cantidad de actualizaciones que deberemos, o deberá, gestionar nuestro cliente.

Una opción cada vez más popular, (aunque a todo el mundo no le gusta) es el maquetar páginas según lo que ha pasado a denominarse Diseño Elástico o Diseño Web Adaptable (Fluid or Responsive design en Inglés).
Cómo indica su nombre este tipo de diseño consiste en maquetar la página para que se adapte en función de la resolución de pantalla desde la cual la estamos mirando. Si leéis inglés os recomiendo este fantástico artículo referencia de A list Apart.
Si no sabéis inglés o tenéis pereza de leer el artículo siempre podéis hacer la prueba en vivo. (Aseguraos de hacer click en la esquina inferior derecha de la página del enlace que os he dejado y vereis con vuestros ojos asombrados cómo el diseño se transforma y adapta según la vais reduciendo Y/O agrandando).

Con CSS3 este proceso de adaptabilidad viene muy facilitado con las llamadas Media Queries que introducen una manera muy práctica de controlar la distribución de los elementos de nuestra página (tales cómo barras laterales, pie de páginas, menus etc..) mediante nuestra hoja de estilos.

PressWork ya viene programado “de fábrica” para ser compatible con resoluciones pequeñas tales smartphones y tabletas. Para mí esto es claramente una ventaja ya que me ahorro muchas horas de programación ya que todo viene hecho.
Sólo tendremos que ir con cuidado si estamos introduciendo nuestros propios cambios para no “romper” el diseño al introducir reglas de css no compatibles.

Al ser un concepto relativamente nuevo, muchas veces me encuentro en los Foros de PressWork con que muchos desarrolladores no entienden el concepto de diseño adaptable o no piensan en el cómo una ventaja sino más bien cómo un inconveniente.

PressWork usa dos simples reglas de CSS para conseguir la Elasticidad, y nosotros podemos a su vez modificarlas añadir cosas en ellas o incluso anularlas. son :

@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) { }

para Tabletas y,

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { }

para smartphones.

Para acabar os dejo con más ejemplos de diseño elástico

2 thoughts on “Diseño elástico y PressWork

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>