Consideraciones generales del diseño adaptable a dispositivos móviles

Hace no tanto tiempo, en los inicios de la Word Wide Web la única forma de acceder a un Sitio Web era a través de una computadora de escritorio, con monitores que hasta hoy aumentan de resolución y tamaño año tras año.

Ahora, podemos visitar toda clase de Sitios Web desde laptops, tabletas y celulares (smartphones), que a la inversa, han reducido los monitores a los cuales se debe adaptar nuestro diseño y contenido, lo que es llamado en inglés responsive design o responsive layout.

En un Sitio Web adaptable a dispositivos, la Hoja de Estilo en Cascada (CSS) que controla la apariencia del Sitio Web indica distintas medidas y atributos según el tamaño del ancho del navegador.

Interpretación de las páginas.

Para una mejor experiencia del usuario el diseño debe ser flexible al tamaño del monitor:

  • A mayor tamaño: más contenido e imágenes de mayor tamaño.
  • A menor tamaño: el contenido e imágenes reducen y se ajustan.

Recomendaciones para diseñar un Sitio Web adaptable a dispositivos móviles.

Para una buena experiencia de usuario (UX) y usabilidad, las consideraciones generales del comportamiento del Sitio Web (según la W3C) son:

  • Consistencia en la dirección y la página Web:
    El visitante debe poder acceder con la misma dirección URI a exactamente la misma página Web en su computadora de escritorio y en cualquier dispositivo móvil aunque su contenido varíe ligeramente.
  • Explotar las capacidades del dispositivo:
    Se debe mostrar el mismo contenido a través de todos los dispositivos, a la vez que se aprovechen las capacidades de dispositivos que pueden proveer mejoras sobre otros.
  • Evitar implementaciones deficientes:
    Hay navegadores que no interpretarán el contenido de acuerdo a lo planificado y hay deficiencias en la implementación. Si un dispositivo es conocido por tener limitaciones particulares, el diseñador y/o desarrollador debe ajustarse a las Mejores Prácticas para evitar en la medida de lo posible, restringir su contenido solo a ciertos dispositivos.
  • Pruebas:
    Al realizarse pruebas, se debe procurar utilizar el dispositivo real en la versión que se estima utilizará el mercado objetivo.
    De utilizarse un emulador, es preferible utilizar el de la empresa que lo manufactura.

Otras consideraciones son:

Navegación y enlaces:

  • Permitir el acceso desde direcciones cortas.
  • Barra de navegación superior de una sola línea.
  • Estructura balanceada evitando el exceso de hiperenlaces.
  • Navegación consistente agrupada y proveer un enlace hacia arriba (el principio de la página).
  • Permitir el uso de las flechas del teclado.
  • Identificación clara del destino de un hiperenlace.
  • Evitar el uso de Image Maps a menos que se conozca que se soporte efectivamente por el dispositivo.
  • Actualización, redireccion y apertura de ventanas nuevas:
    • No causar que se abran pop-ups, ventanas nuevas, ni el cambio de ventana sin informar previamente al usuario.
    • No auto-actualizar una ventana, sin proveer al usuario de una forma de detenerla.
    • No usar re-dirección automática a través del HTML, de ser necesaria implementarla mendiante  HTTP 3xx (como la redirección 301 o 302).
  • Mantener el número de enlaces a recursos (Como CSS, imágenes, etc.) externos al mínimo.

Diseño de página y contenido:

  • Evitar las barras de desplazamiento horizontales.
  • Optimizar el peso de las imágenes y otros recursos.

Definiciones en la página:

  • Evitar el uso de iFrames.
  • Usar el elemento Table solo para tablas.
  • Evitar el uso de texto imágenes para sustituir texto real (que puede ser seleccionado y copiado).

Datos introducidos por el usuario (formularios):

  •  Minimizar el trabajo del usuario, especialmente la escritura mediante el teclado.
  • Habilitar la navegación en el formulario mediante las flechas y números del teclado.

Optimizar y exportar fotografías y otras imágenes en mapa de bits

Importar las imágenes

Al importar imágenes en mapa de bits a Photoshop o Gimp para incluirlas en un Sitio o diseño Web, es recomendable empezar por:

  • Escanear la fotografía revelada,
  • Escanear los negativos o
  • Importar los archivos de las fotografías desde la cámara digital.

Optimizar imágenes en mapa de bits

Es importante contar con fotografías que cuya corrección de color, contaste y retoque fotográfico sean innecesarios o ya hayan sido aplicados, para como diseñadores Web, enfocarnos en optimización del modelo de color, resolución, ajuste del tamaño y tipo de archivo para Web.

Encuadre

  • Recorte en Gimp:

Para elegir la herramienta de Recorte. Has clic en el botón  en la caja de herramientas o en el menú: Herramientas > Herramientas de transformación > Recortar en la ventana de la imagen.

Cuando cambie el cursor, has clic y arrastra formando un rectángulo que cubra únicamente las partes de la imagen que desees conservar, si tu primera selección no fue de tu agrado, puedes arrastrar las esquinas o bordes del rectángulo para cambiar las dimensiones del área seleccionada y hacer doble clic sobre la imagen para aplicar el recorte.

Sus dimensiones y proporción se muestran en la barra de estado.

Exportar para Web.

  • En Gimp:

Archivo > Exportar como… > Seleccione el tipo de archivo.

  • En Photoshop:

Archivo > Exportar para  Web, seleccione el tipo de archivo desde el menú en la parte superior de la nueva ventana.

Las extensiones recomendadas para publicar las fotografías en Internet son:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

Extensiones recomendadas para compartir originales:

  • PSD: Imágenes a editar en Adobe Photoshop.
  • EPS
  • XCF: Imágenes a editar en Gimp.

Es recomendable que los archivos de imágenes se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Fuente: http://docs.gimp.org/es/

Resolución de una imagen para Web

La resolución de una imagen es una forma de indicar cuánto detalle puede observarse en ella, a mayor resolución, mayor detalle o calidad visual.

La resolución de las imágenes en mapa de bits es descrita con 2 números, el primero indica la cantidad de columnas de píxeles (px) y la segunda la cantidad de filas de píxeles.

Por ejemplo: indicar que una imagen es de 800 x 600 px, señala que cuenta con 800 pixeles a lo ancho y 600 a lo alto.

Megapixeles

Aunque una forma de válida de comunicar la resolución de una imagen digital es expresando el total de pixeles de la imagen, usualmente como  el múltiplo correspondiente a millón o mega-,  multiplicando la cantidad de columnas de pixeles en una imagen por la cantidad de filas.

Nombrar la resolución en megapixeles (Mpx) es una convención más usual en el ámbito de la fotografía, no así en diseño Web.

Formatos de archivo de imagen para Web

Las extensiones de imágenes para Web mas comunes son:

Imágenes en mapa de bits:

Tanto JPEG*, PNG y GIF son formatos para imágenes en mapa de bits o ráster (del inglés raster image). La imagen se representa mediante una cuadrícula de píxeles y no pueden ser aumentadas de tamaño sin que pierdan calidad, resultando en un imágenes que frecuentemente se llaman pixeleadas, pixelizadas o pixelosas.

* Aunque existen 3 variantes del estándar JPEG que comprimen la imagen sin pérdida de resolución: JPEG2000, JPEG-LS y Lossless JPEG, su uso no es generalizado.

En cambio SVG es un formato de imágenes vectorial, éste tipo de imágenes, al no estar conformadas por pixeles, se caracterizan por su capacidad de ser redimensionadas a cualquier tamaño sin que pierdan calidad.