Mostrando las entradas con la etiqueta Responsive design. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Responsive design. Mostrar todas las entradas

Responsive y Adaptive Design

jueves, 27 de febrero de 2014

Cuando se habla de Responsive y Adaptive web design suelen tomarse como lo mismo.

Pero buceando en la web podemos encontrar 3 visiones diferentes sobre estos términos: los que piensan que son dos cosas muy distintas que no tienen puntos en común ("tengo que elegir entre uno u otro"), los que sostienen que el Responsive Web Design (RWD) es un subconjunto del Adaptive Web Design (AWD) y otros (tal vez los menos?) que consideran que en realidad son dos conceptos que se complementan.

En una definición general podemos encontrar que se habla de Responsive Design cuando se piensa un sitio donde el contenido pueda ser reacomodado según el dispositivo donde se visualiza (desktop, tablet, celular, etc.) enviando siempre la misma información.

Muy genéricamente también encontramos que el diseño Adaptive se define como el diseño pensado en base a los dispositivos donde se visualizará una aplicación, diseñando una versión para cada uno de ellos, haciendo que sea el servidor el que detecte qué dispositivo lo está invocando y enviando el diseño adecuado para el mismo.

Tal como mencionamos, algunas visiones consideran al RWD como parte del AWD, como un subconjunto del mismo. Muchas puntualizan que el Resposive design tiene como objetivo el layout únicamente.

Si bien los dos conceptos tienen en común que se focalizan en permitir que los sitios puedan ser vistos en dispositivos de distintos tamaños o resoluciones buscando dar una mejor experiencia a los usuarios, Adaptive design es algo más amplio e íntimamente relacionado con la mejora progresiva, cosa de la que el RWD tampoco está ajeno. Es por ello que hay quienes consideran que ambos conceptos se complementan. Personalmente me inclino más por esta visión.

El AWD es un concepto más abarcativo y, según la definición de su creador Aaron Gustafson, utiliza mucho de los componentes de la mejora progresiva (PE - Progressive Enhancement) que se focaliza en el uso de los métodos de diseño necesarios que apunten al usuario y no a los browsers, donde el RWD debería ser una parte, pero siempre teniendo en cuenta  que el AWD es un "acercamiento más holístico del diseño web".

Desde el punto de vista de los usuarios de los sitios que desarrollamos, poco sabrán ellos sobre qué métodos fueron usados para crearlos. Sólo buscarán poder navegarlos de la forma más simple, rápida y clara desde cualquier "aparato" que se los permita y si no, simplemente los abandonarán. Es por eso que las herramientas y métodos que usemos en su creación deben llevarnos siempre a satisfacer de la mejor forma posible las necesidades de dichos usuarios.

Tomar lo mejor que cada uno nos brinda para lograr este objetivo puede ser una buena idea ...

    


Leer más...

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...