Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Todo lo que debes saber sobre el Responsive Web Design

Responsive Design

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero hablarles del Responsive Web Design.

Tanto la idea como el propósito del Responsive Web Design fueron previamente discutidos y descritos por la W3C el 29 de julio de 2008 en su recomendación "Mobile Web Best Practices".

Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de una única web (One Web), y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de escritorio.

El concepto de One Web hace referencia a la idea de construir una web para todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

Algunas traducciones al español serían: 

  • Diseño Web Sensible o
  • Diseño Web Adaptable o
  • Diseño Web Responsivo.

Un poco de historia en imágenes

En 2007 Apple saca a la luz el iphone y a partir de ahí se da un incremento masivo en el surgimiento de dispositivos móviles.

Iphone

En ese entonces, en los dispositivos de escritorio la resolución que reinaba era la de 1024 x 768 pixeles, pero con el incremento de teléfonos inteligentes, tabletas, laptops, netbooks y pantallas planas, dicha resolución comenzó a perder usuarios.

Resolución 1024x768

Entonces la web dejo de ser las pantallas de nuestras computadoras de escritorio.

This is not the web

Y en 2012 y 2013 la web se convirtió en una gran cantidad de pantallas y dispositivos.

Thjis is the web

Y ahora con el concepto del Internet de las cosas, prácticamente la web está en todos lados.

Internet of Things

¿Qué es el Responsive Web Design?

Concepto en 2010 - 2011

Formalmente Responsive Web Design fue un término acuñado el 25 de mayo de 2010 por Ethan Marcotte en su artículo Responsive Web Design publicado en A List Apart y posteriormente argumentado en el libro de mismo nombre publicado en 2011.

En dichas fechas (2010-2011) se presenta como una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de los sitios y aplicaciones web al dispositivo que se esté utilizando para visualizarlos.

Se basa en 3 principios de CSS:

  1. Maquetación Fluída
  2. Multimedios Flexibles
  3. Uso de Media Queries

Concepto hoy 2017

Hoy día los sitios y aplicaciones web se visualizan en multitud de tipos de dispositivos como:

  • Tabletas
  • Teléfonos inteligentes
  • Lectores electrónicos,
  • Portátiles
  • Equipos de Escritorio
  • Relojes
  • Pantallas
  • etc

Además, cada tipo de dispositivo tiene sus características concretas:

  • Tamaño de pantalla
  • Resolución
  • Potencia de CPU
  • Capacidad de memoria
  • Conexión inalámbrica
  • Red de datos
  • etc

Por tales motivos el Responsive Web Design hoy:

  • No se trata exclusivamente de reacomodar la información.
  • Sino de entregar el contenido de manera óptima, considerando las características de hardware, software y tipos de conexiones, del dispositivo que el usuario este usando.

 

Hoy Responsive Web Design es la manera de hacer Diseño Web Actual para Multi Dispositivos

 

Técnicas de Diseño Web Multi Dispositivo

Dependiendo de las tecnología que uses al aplicar Responsive Design han surgido diferentes corrientes y técnicas, pero finalmente todas van a un mismo punto, hacer sitios y aplicaciones amigables para cualquier tipo de pantalla y que sean rápidos al cargar en el dispositivo del usuario, algunas de ellas son:

 

Enfoques de Diseño Web MultiDispositivo

Con el Responsive Design, surgieron 2 enfoques a la hora de construir las interfaces de sitios y aplicaciones: 

  1. Desktop First, que es la técnica que siempre habíamos usado desde antes de los dispositivos móviles, que consta en centrar el diseño y funcionalidad adaptada a la computadora de escritorio, esto significa que tanto el diseño, la maquetación y programación se centran en pantallas grandes y con la ayuda de las mediaqueries con la propiedad max-width y agregando los breakpoints del mayor al menor se van adaptando las interacciones y funcionalidades para el móvil, esta técnica a nivel de programación se conoce como la degradación elegante (Graceful Degradation).

  2. Mobile First, que es la técnica que surge con los dispositivos móviles, y consta en centrar el diseño y funcionalidad adaptada a la pantalla más pequeña, esto significa que tanto el diseño, la maquetación y programación se centran en los dispositivos móviles y con la ayuda de las mediaqueries con la propiedad min-width y agregando los breakpoints del menor al mayor incrementando las interacciones y funcionalidades para dispositivos más grandes, esta técnica a nivel de programación se conoce como la mejora progresiva (Progressive Enhancement).

Enfoque

Mobile First

Desktop First

Técnica

Progressive Enhancement

Graceful Degradation

CSS General

Equipo Móvil

Equipo de Escritorio

CSS con Mediaqueries

min-width

max-width

Breakpoints

Del menor al mayor

Del mayor al menor

  Mobile First

 

Desktop First

 

 

Hoy en 2017, a 10 años del surgimiento del primer gran dispositivo móvil inteligente (el iphone) ya no tendrías por que usar el enfoque Desktop First, con la gran cantidad de consumo que hay de Internet en móviles, todo proyecto que inicies, sea un sitio o una aplicación, tendrías que comenzar centrándote en el Mobile First, además que a nivel de CSS todas las etiquetas contenedoras como div, header, aside footer, etc su naturaleza es de bloque lo que significa que ocupan todo el ancho disponible desplazando los siguientes elementos al siguiente salto de línea y a nivel del DOM siempre será más fácil y menos costoso a nivel de rendimiento ir agregando elementos dinámicos y funcionalidades a nuestro navegador en vez de quitárselos como propone Desktop First.

 

Media Queries

Desde la especificación de CSS 2.1, las hojas de estilo han tenido cierto grado de capacidad para el reconocimiento de dispositivos mediante el uso de tipos de medios. Por ejemplo:

<link rel="stylesheet" href="print.css" media="print">

Con CSS3, la W3C perfeccionó y mejoró los tipos de medios con características multimedia y con la capacidad de preguntar dichas características a los medios.

Esto no sólo hace posible inspeccionar el contenido que se entrega al dispositivo, sino también las características físicas reales del dispositivo.

El uso de media queries permite pedir fácilmente al navegador sus características, tales como anchura, altura, relación de aspecto y la orientación.

La sintaxis es la siguiente:

@media screen and (max-width:480px) and (orientation:portrait) {
    /* 
    Código CSS que se aplicará cuando se cumpla la media queries
    */
}

 

Breakpoints

Ethan Marcotte en su libro Responsive Design nos propone la siguiente lista de puntos de interrupción según la resolución del dispositivo:

Tamaño Dispositivos
320px Para dispositivos con pantallas pequeñas, como los teléfonos en modo vertical
480px Para dispositivos con pantallas pequeñas, como los teléfonos, en modo horizontal
600px Tabletas pequeñas, como el Amazon Kindle (600×800) y Barnes & Noble Nook (600×1024), en modo vertical
768px Tabletas de diez pulgadas como el iPad (768×1024), en modo vertical
1024px Tabletas como el iPad (1024×768), en modo horizontal, así como algunas pantallas de ordenador portátil, netbook, y de escritorio
1200px Para pantallas panorámicas, principalmente portátiles y de escritorio

 

Importante... Convierte tus Breakpoints a EMs

¿Por qué?

Aunque los pixeles se consideran una unidad de medida absoluta, en realidad son unidades relativas a la resolución de pantalla del dispositivo que lo visualiza, si dicho dispositivo tiene una densidad mayor a la normal, entonces la proporción de los pixeles cambiará, por ello es importante que los breakpoints de las media queries se conviertan a ems que si son unidades relativas y proporcionales, quieres aprender más al respecto aquí te dejo un par de enlaces que amplían el tema:

Fórmula de conversión

Objetivo en pixeles / Contexto en pixeles = Resultado en Ems
320px / 16px = 20em
480px / 16px = 30em
600px / 16px = 37.5em
768px / 16px = 48em
1024px / 16px = 64em
1200px / 16px = 75em

 

Finalmente te dejo un par de sitios que te pueden interesar para estar al tanto de todas las novedades del Responsive Design:

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana... 

...bye ;)

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal