Usamos cookies propias y de terceros para mostrar publicidad. Si continua navegando consideramos que acepta el uso de cookies. OK Más información

Consultas de medios, web responsive design

Publicado por Israel Noguera

web_responsive_design.jpg

No hace falta hacer un estudio de mercado para darnos cuenta de la realidad actual en cuanto al acceso a Internet; el PC de sobremesa, ya no es el único periférico de acceso, tampoco el más usado.

Ahora usamos portátiles -laptops-, móviles de última generación -smartphones-, tablets incluso TV con acceso a Internet de casa... Internet es móvil, accesible y con gran cantidad de dispositivos móviles a precios atractivos, tarifas planas de datos y una apuesta clara de las grandes compañías. Internet es el futuro multimedia en casa, es interactivo, es comercio, es comunidad, es comunicación, es la tecnología del siglo. ¿Cómo lo ves?.

Yo de verdad, no lo veo muy bien, tengo serios problemas para leer las noticias en la pantalla de 3 pulgadas de mi teléfono móvil. Y es que a día de hoy la web en Internet sigue siendo 'desktop' con suerte con algún que otro diseño fluido y en otros casos dos versiones, una para la versión de escritorio y otra para la versión móvil, esto es, mucho trabajo.

Hasta hace cosa de unos pocos años, lo normal era tener una única versión de un contenido web, para una resolución de pantalla que al menos fuera visible por la mayoría de pantallas del mercado, con unas dimensiones de pantalla que fueran adecuadas para monitores de 1024x768 píxeles 'salvabas el culo', esto más un poco de diseño líquido o fluido*.

* esto es cuando modificas las dimensiones de la ventana del navegador y el contenido se adapta al contenedor. Esto hasta cierto punto va bien, pero si estiras o contraes demasiado queda hecho un cristo.

tablet.jpgYa entonces, hace 3 o 4 años, el móvil comenzaba su particular incursión en el mercado y aunque la proporción de accesos a la Red desde este dispositivo fuera baja, era un mercado interesante de absorber y aprovechar. Ciertamente daba bastante trabajo, tratabas de averiguar el 'user agent' = dispositivo que hacía la petición (PC de sobremesa o móvil), mediante 'sofisticadas' técnicas javascript y ofrecías unos contenidos u otros. Esto venía a ser como mínimo, casi el doble de trabajo. Ya de partida lo habitual era crear contenido específico para cada plataforma. La verdad es que de alguna manera funcionaba, pero eso a día de hoy ya no es válido. ¿Cómo lo ves?

Efectivamente, ahora tenemos smartphones, laptops de todo tipo, tablets, y a saber cuantos modelos, características y tipos de pantalla. Ahora hay que tener en cuenta hasta las características físicas nativas de cada dispositivo: si es táctil, si tiene acelerómetro, cambia de orientación... Ya no sirve una versión 'mobile' y ¿qué hacemos? no.. no vamos a hacer 100 versiones diferentes de un website.

La solución, por lo menos a día de hoy es sencillamente ofrecer un único contenido pero 'tratado' a cada tipo de dispositivo, teniendo en cuenta principalmente las dimensiones de la pantalla y algunas características nativas del aparato, como la orientación, por ejemplo.

Fíjate en estos ejemplos, modifica las dimensiones del navegador y dime que te parece:

¿Cómo lo ves? ¿mejor no? Usando la potencia de HTML5 que gracias a las MediaQueries (consultas de medios) expanden su rol a otro nivel, capaces de proporcionar unos estilos u otros en función del dispositivo que hace la petición a la web. No solo son capaces de resolver las dimensiones, incluso con propiedades nativas del dispositivos. De momento unas poquitas, pero esto irá en progresión. Afortunadamente, a día de hoy, ya son compatibles con los navegadores modernos, incluido el Internet Explorer 9 y la mayoría de navegadores de los dispositivos móviles.

Con las media queries conseguimos que las páginas se puedan ver a cualquier resolución de pantalla y que nunca aparezca una barra de desplazamiento horizontal. Mediante la reescritura de reglas CSS reordenaremos el contenido, incluso suprimiremos el contenido menos relevante.

Con las media queries conseguimos que las páginas se puedan ver a cualquier resolución de pantalla y que nunca aparezca una barra de desplazamiento horizontal.

Yo, como desarrollador web ya no puedo pensar en una web sin usar esta técnica, es fácil de hacer, pero hay que tenerla en cuenta desde el principio. Tenemos que hacer un diseño bien estructurado con puntos de ruptura y líquido en la medida que el diseño lo permita. Deberemos tener en cuenta los widgets o scripts que vamos a usar, ya que estos manejados con el ratón no ofrecen problemas, pero manejados desde dispositivos táctiles sí pueden presentar problemas.

Todavía un 25% de navegadores no soporta este tipo de tecnología, piensa en ello, ofrece una alternativa. Modenizr  te puede ayudar. Y aún más porque se asoman temas muy interesantes: Flexbox, la caja flexible con CSS3, todavía en fase de desarrollo y CSS Grid Layout. Con el CSS Grid Layout o estructura visual de cuadrícula CSS3, tendremos un sistema de cuadrícula típico basado en CSS. Permitirá definir regiones en la estructura de la página, con columnas y filas, desplazamientos, espacios, márgenes interiores, plantillas de cuadrícula y otros elementos, imponiendo una independencia total entre los aspectos correspondientes al HTML y los de CSS.

Por lo tanto, la combinación del Grid CSS3 con las consultas de medios es una potente solución para crear aplicaciones web fluidas y adaptivas.

Por supuesto que en Internectia, como colaborador, siempre que se pueda en función del proyecto, el Responsive Design es una realidad.