Crear un diseño flexible con CSS y HTML

Regresar al índice

1. Las dos estrategias

Usted tiene un proyecto de sitio web y desea que los usuarios puedan consultar su contenido desde cualquier tipo de dispositivo: pantallas de ordenador, tabletas o smartphones.

Dispone de dos estrategias: 

• Crear páginas web específicas para cada tipo de dispositivo. 
• Realizar un diseño web adaptable.

Los adeptos de la primera estrategia afirman que el contexto de uso hace necesaria la creación de páginas web específicas. Según ellos, una persona que consulte un sitio web en una pantalla de ordenador deberá poder acceder a toda la información disponible, sin restricciones, ya que el contexto de uso, en la pantalla del ordenador, permite visualizarla completamente. Al contrario, si un usuario consulta un sitio web a partir de un smartphone, el contexto de uso no le permitirá visualizar toda la información disponible y el simple hecho de que esa persona utilice un smartphone sugiere que no necesita acceder a todo el contenido. Existen otros muchos argumentos para no adoptar el diseño web adaptable. Le recomiendo que lea este largo y bien argumentado artículo con el título "11 reasons why Responsive Design isn’t that cool!", que encontrará en esta URL: http://www.webdesignshock.com/responsive-design-problems/

Los adeptos de la segunda solución afirman, por su parte, que no es posible saber por adelantado, en función del contexto de uso (ordenador, tableta o smartphone), a qué quieren tener acceso los visitantes de un sitio web. Por ese motivo, no podemos "censurar" el sitio web y solamente publicar una parte de su contenido. Además, ¿qué contenido se deberá mostrar y cuál no? Cada visitante es un mundo y las necesidades pueden ser muy diferentes. Si tenemos que ocultar determinada información, siempre podremos usar la propiedad display: none.

2. Diseñar un sitio web adaptable

Para diseñar un sitio web adaptable, deberá hacerse algunas preguntas: 

• ¿Qué diferencias habrá entre el diseño de la versión para ordenador y la versión para smartphone del sitio web? 
• ¿Dónde deberán posicionarse las principales zonas de visualización? 
• ¿Qué contenido deberá mostrarse imperativamente en la versión para smartphone y qué contenido no se mostrará? 
• La misma pregunta para los elementos multimedia: imágenes, audio, vídeos, PDF... 
• ¿Cómo se van a mostrar los elementos de navegación? 
• ¿Cómo se van a mostrar los formularios? 
• ¿Esos cambios van a afectar a la ergonomía? 
• ...

A continuación podrá comenzar a crear las plantillas para los diferentes soportes, para ver el resultado y modificarlo, adaptarlo, en función de las necesidades específicas. Lo ideal es usar las plantillas directamente en los diferentes soportes para probar la navegación, la ergonomía y la usabilidad del sitio web que esté creando.

Es primordial que ataque por "todos los frentes" al mismo tiempo, es decir, que trabaje en todas las plantillas al mismo tiempo: la plantilla para las pantallas de ordenador, la de las tabletas y la de los smartphones. Sería un error lamentable dedicarse exclusivamente a la maqueta "pantalla de ordenador" y luego intentar adaptarla a las demás pantallas. Eso no funcionará. Es necesario tener una visión global del proyecto.

3. Otros ejemplos de diseño web adaptable

En la web encontrará multitud de sitios web que recopilan aquellos sitios web que utilizan las búsquedas Media Queries. Uno de los más famosos es Media Queries - a collection of sites using media queries, con su magnífica URL, disfrútelo: http://mediaqueri.es/

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear