¿Quieres tener tu propio blog?
Diseño adaptable a todos los bolsillos
O más bien dicho, de diseños adaptables a todos los dispositivos de bolsillo, eso es de lo que vamos a hablar. Sobre cómo conseguirlo trata el último artículo que he leido en A List Apart. Si bien ya muchos desarrolladores estamos sensibilizados con los beneficios de programar usando estándares web, a veces creo que no llegamos a ser conscientes (al menos hablo por mi) del enorme beneficio que podemos llegar a conseguir por ese "sobreesfuerzo" que puede suponer atenerse a los, en ocasiones, rígidos estándares del W3C. Ya no sólo se trata de que una página web pueda leerse correctamente en varios navegadores, si no ya en varias plataformas. Hablamos no sólo de soportes PC, si no de Pda's y móviles, por ejemplo. Cada vez es más común que los teléfonos incorporen opciones sencillas de acceso a información en internet por GPRS (entradas, información bursátil, el tiempo, noticias...), y aunque los dispositivos PDA no están aún muy extendidos, su uso va en aumento: los precios bajan y las prestaciones aumentan a un ritmo muy importante.
Son muchos los sites que, pensando en estos reducidos _de momento_, grupos de usuarios, proporcionan una versión de su página para PDAs. Versiones que en muchas ocasiones consisten en simplificar el contenido de la página y presentarla en texto plano. Eso, evidentemente, limita la funcionalidad de la web sobremanera a los usuarios de dispositivos móviles, ya que en general simplemente se listan los últimos contenidos interesantes, no todas las secciones. (Ejemplos: Bulma, TodoPocketPC, PCdeMano) Podríamos compararlo a aquellos sites que nos presentaban diferentes versiones de su web según la resolución o el navegador que usábamos... ¿No os parece un trabajo innecesario? HTML, el lenguaje en el que se escriben las páginas web, se ideó para presentar información y ordenarla jerárquicamente en el conjunto de un documento, así como para poder especificar nombres para las diferentes partes, dar énfasis a ciertos contenidos, etc... Es cierto que se proporcionan medios para modificar el aspecto visual de esos elementos, pero para jugar con el diseño y la apariencia ya están las hojas de estilo. Para que te hagas una idea, aqui puedes ver la apariencia de esta página sin hojas de estilo, es decir su esqueleto HTML (Puedes hacer clic de nuevo para volver a la versión con CSS). Siendo así, lo lógico sería que, en todo caso, lo que cambiara fueran las hojas de estilo según el dispositivo al que va dirigida la información. Y en la mayoría de ocasiones, ni ésto sería necesario. (Ejemplos: Obokaman en PDA, Minid en PDA) Como comentábamos al principio, quizás estas opciones sean más costosas en un primer momento, en ocasiones hay que montárselas de mil maneras para conseguir un aspecto aceptable en todas las versiones, pero a largo plazo nos estaremos ahorrando muchas reescrituras de código y ganaremos unos cuantos visitantes satisfechos de poder leer nuestros contenidos tanto desde su escritorio como desde su dispositivo móvil en la calle, el coche o la oficina. Es el futuro, amigo. Desde A List Apart nos dan una serie de consejos que nos pueden ayudar en la planificacion y los primeros momentos del desarrollo. Resumiendo un poco...
- Consejos para la correcta visualización de documentos web en PDA y móviles
- Las dimensiones son la principal limitación. Debemos intentar conseguir:
- Diseños de una columna y prevención de floats.
- Optimizar tu HTML usando etiquetas eficientes y semánticas
- Minimizar el uso de imágenes decorativas.
- Usar texto alternativo para las imágenes.
- Huir de los efectos dinámicos que requieran de la interacción con el ratón o el teclado
- Disminuir dimensiones de márgenes, bordes, fuentes (mejor usar tamaños relativos
En lo que a imágenes se refiere es importante tener en cuenta que muy posiblemente la persona que acceda a una web desde un dispositivo móvil esté usando una conexión GPRS. En estos momentos los precios de los packs de conexión GPRS son bastante elevados, así que nuestro visitante agradecerá que le ahorremos cabeceras, botones o cualquier tipo de adorno en la medida de lo posible, aunque la web se visualizara de forma correcta también con ellas. Si te interesa el tema, puedes consultar estos otros artículos relacionados:
