Responsive design - Parte 2/2

miércoles, 23 de enero de 2013

Para empezar a pensar en diseños adaptables primero debemos ponernos al dia con algunos conceptos:

Tag meta

Proporciona metadata acerca del documento HTML, útil para el procesamiento de la página (Por ejemplo: Codificación de caracteres, Autor, Últimas modificaciones, etc)

Siempre se ubican dentro del tag head



Viewport

Es un atributo del tag meta. Hace referencia al área visual en la cual mostramos el documento HTML. Podemos manipular una serie de caracteristicas que posee para controlar la visualización del HTML dentro de la pantalla de un dispositivo móvil.

Sus propiedades más destacadas son:
  • Inicial-scale: Escala inicial en la que se muestra la página. Valor numérico de 0.1 en adelante. 1 representa no escalar
  • Width: Ancho del área visible, en píxeles. Es buena práctica usar el valor device-width para ajustar dinámicamente el tamaño del área visible al ancho del dispositivo
(Más info: http://www.desarrolloweb.com/articulos/etiqueta-meta-viewport.html)

Media-queries

Le facilita al navegador la información necesaria acerca de cómo renderizar la página para anchuras específicas a través de expresiones que retornan verdadero o falso

Hay varias alternativas de lugares donde podemos especificar la media-query. Ellas son:
  • Usando @media en las hojas de estilo: Es la opción más usada. Si la expresión es verdadera se ejecuta el código css encerrado entre llaves { }
  • Usando @import: Es parecido al anterior, solo que en vez de código css se indica la hoja de estilos que se quiere usar en el caso de que la condición sea verdadera
  • Indicando la expresión directamente en el link de importación del .css bajo el atributo media
  • Utilizando código javascript: Por medio de las media-queries podremos adaptar nuestros sitios a resoluciones, orientación e incluso colores
La opción más utilizada (y sobre la cual nos vamos a enfocar) es la primera, usando @media


Ejemplo práctico

Creamos el código necesario para editar los estilos cuando tenemos un iPad en posición vertical

En el HTML:



En el CSS:



Sencillo? Analicemos en profundidad el código HTML y el CSS correspondiente

HTML:





En este código le indicamos al navegador que ancho, alto y escala debe utilizar para mostrar el contenido. Detalles:
  • El valor del atributo content es conjunto de propiedades especificadas como clave=valor donde hay constantes que podemos utilizar para adaptar nuestro sitio de mejor manera a la resolución del usuario: device-width y device-height (este último no suele utilizarse porque el navegador muestra el scroll cuando el contenido verticalmente es mayor a la resolucion del usuario)
Existen otras propiedades que podemos utilizar:


  • Escala: zoom inicial




  • Limitaciones de escala máxima y mínima




  • Desactivar / Activar zoom




  • Ajustar los DPI (Puntos por pulgada)





CSS:

Con la sintáxis @media se nos permite interactuar con el browser para generar estilos que serán aplicados solo si se cumplen las condiciones especificadas.


@media + media type: Es una regla que permite definir estilos para cada tipo de medio de visualización de una página. Estos medios incluyen desde pantallas, proyectores, impresiones, pantallas táctiles para braille, televisores, etc.

Podemos usar un mismo estilo para varios tipos (Separados por coma)
           


En nuestro ejemplo, nosotros solo aplicamos estilo a un solo tipo de visualizador (screen)


and (propiedad: valor): Se anexan al media type para dar especifidad a los estilos que buscamos aplicar. Podemos usar muchos de estos condicionales separados por coma

Las propiedades que podemos utilizar son muchas pero las más importantes son:
  • Aspect-ratio: Mira las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9, por ejemplo
  • Width y height: Mira las dimensiones del área de visualización. Además pueden ser expresadas en valores mínimos y máximos (Como en el ejemplo que estamos analizando)
  • Orientation: Mira si el layout es panorámico (el ancho es mayor que el alto) o vertical (el alto es mayor que el ancho). Esto nos permite ajustar los diseños para dispositivos con propiedades de giro de la pantalla como el iPhone, y otros smartphones y los tablets
  • Resolution: Mira la densidad de los pixeles en el dispositivo de salida. Esto es especialmente útil cuando queremos aprovecharnos de las ventajas de los dispositivos que tiene una resolución mayor a 72 dpi
  • Color, Color-index y monochrome: Encuentran el número de color o bits por color. Esto nos permite crear diseños específicos para dispositivos monocromáticos.
En el ejemplo que citamos, hacemos uso de condiciones que afectan:
  • Ancho máximo y mínimo de la pantalla: and (min-width: 768px)  and (max-width: 1024px)
  • Orientación: and (orientation: landscape)






Para terminar, les dejo como un nuevo ejemplo de un sitio que responde perfectamente con las técnicas de un diseño responsive design: www.bostonglobe.com

Y para ser más específicos todavía les dejo el link de la hoja de estilos donde se aplican las media queries para que las puedan ver más fácilmente: http://www.bostonglobe.com/css/globe-trialHeaders.css



Leer más...

Responsive design - Parte 1/2

miércoles, 9 de enero de 2013

La web no es estática; cambia todo el tiempo y también la forma en la que accedemos a ella. Un signo visible de esta verdad es la cantidad de dispositivos móviles que están a nuestro alcance y que usamos para conectarnos a internet

Este cambio de paradigma tan grande que se dio en estos tiempos debido al gran uso de teléfonos inteligentes y tabletas nos hizo notar (a todos aquellos que construimos la web) que no basta con una sola vista de nuestro sitio para toda la gama de ordenadores móviles y de escritorio desde la que nuestros clientes consumen lo que les ofrecemos


Es por ello que nacen un conjunto de técnicas que nos permitirán hacer adaptable al entorno del usuario nuestros sitios web. A este conjunto de técnicas las denominamos Responsive design


El diseño adaptable o responsivo es un conjunto de técnicas de desarrollo web que, mediante el uso de estructuras fluidas y media-queries, permiten adaptar un sitio al entorno del usuario

 
Aquí les dejo un ejemplo de un sitio web con un diseño adaptable: www.spigotdesign.com

La idea y creación de estas técnicas provienen de la W3C en su recomendación “Mobile Web Best Practices”, donde se hace referencia a que deberíamos construir una web para todos y accesible desde cualquier dispositivo


Aplicar un diseño adaptable tiene sus ventajas:


  • 1 sólo código: No quedamos atados a plataformas, tecnologías o resoluciones
  • Experiencia de usuario mejorada: Diseño según resoluciones y según orientación de nuestro dispositivo
  • Mejor lectura y usabilidad para personas con discapacidad
  • Actualizaciones eficientes y mejores búsquedas
  • Mejor SEO: Google localiza mejor el contenido

Y también algunos detalles que debemos tener en cuenta:
  • Google te odia: Las imágenes se redimensionan, pero hacen esto desde el máximo posible (Un tamaño que seguramente en un dispositivo móvil no usemos). Así, penalizamos a nuestro móvil en una descarga de imágenes que finalmente no utilizará y a nuestro sitio por tardar en descargarse, e iremos a parar a las catacumbas de los resultados de Google
  • Estresando las máquinas: Para el CPU del dispositivo o el PC no es gratuito redimensionar las imágenes
  • Reestructuración de sitios existentes: Algunos sitios (Al estar pensados para grandes resoluciones) pueden ser complicados de aplicar un diseño responsivo. Quizás se deba modificar la estructura original para obtener claridad y luego recién, trabajar en las diferentes vistas para resoluciones inferiores a la inicial

    La aplicación de estas técnicas tiene su éxito en aprovechar las bondades de cada dispositivo para ofrecer la mejor experiencia de usuario posible, bajo ningún punto de vista requiere que la información y funcionalidad esté implementada de la misma manera para el universo de puntos de acceso

    En un próximo artículo veremos la aplicación práctica!


    Links de interés:



    Leer más...