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 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!
Twittear
No hay comentarios:
Publicar un comentario