Responsive Design

 Concepto
 Filosofía Mobile First
 Porque usarlo

Agenda  Pruebas de diferencias entre usarlo y no usarlo.

 Modo mobile en el navegador

 Elementos del responsive design
  Luego de aprender a posicionar los elementos, podemos
enfocarnos en estructura de diseño CSS vamos a utilizar
 Las estructuras que podemos utilizar son:
1.
Ahora bien… 2.
Diseños Fijos
Diseños Fluidos

3. Diseños Elásticos
4. Diseños Híbridos
  El diseño fijo, es aquel que como su nombre indica nos aporta el
tamaño de nuestra estructura en unas medidas inalterables por
nuestro navegador.
 Pros
1. El area de lectura está rigurosamente controlada, sin necesidad
de controlar tamaños mínimos ni máximos.
2. Al ser un ancho fijo, hace más fácil el diseñar sobre él.
3. 760px (ancho típico para resoluciones 800×600) son los más
Diseños Fijos óptimos para la lectura.
 Contras
1. Al amplicar el tamaño de la fuente, el diseño no varía,
rompiendo la estética de la línea.
2. Gente con monitores más pequeños que el ancho definido tienen
problemas con la página.
3. Gente con monitores más grandes ven los diseños fijos muy
pequeños.
  Estos diseños fueron creados para no tener un tamaño definido, y permitir
que los monitores pueden condicionar el tamaño de salida. Usando
porcentajes (%) podremos definir el tamaños de los elementos de nuestra
aplicación web para definir un diseño fluido que se adapte a cualquier
monitor.
 Pros
1. Si lo has hecho bien, tu diseño se podrá adaptar a cualquier monitor y/o
Diseños Fluidos dispositivo.

o Liquidos 2.
3.
El diseño fluido es considerado el más purista.
Más contenido puede ser mostrado sin necesidad de scroll.

 Contras
1. Demasiado contenido disponible y un fuerte deseo de llenar los espacios en
blanco pueden afectar a la usabilidad. Demasiado contenido, puede confundir al
usuario y dar una sensación de congestión.
2. Problemas con Internet Explorer (6 o inferiores) para controlar los tamaños
máximos (max-width).
  Son aquellos que usan medidas relativas basadas en
(em), una medida muy usada para el tamaño
proporcional de nuestros textos. Permitiendonos que
nuestro textos crezcan condicionados con el tamaño de
los elementos padres.
 Pros
Diseños 1. Si lo haces bien, se trata de una estructura muy estable, ya que

Elásticos todo se redimenciona al mismo ratio.

2. Un diseño elástico es un reto.
 Contras
1. Aparte de ser el diseño de moda, no hay muchas más ventajas
por usarlo.
2. A menos que esté limitado este diseño puede ser un desastre
para la usabilidad.
  En conjunto a los diseños, debemos
conocer la definición a nivel de
estructura de diseño de cada etiqueta.
Complementaci Para este caso tenemos los tipos
ón 1. Inline
2. Block
3. Inline-block
  En conjunto a los diseños, debemos
conocer la definición a nivel de
Tipos de estructura de diseño de cada etiqueta.
posicionamiento Para este caso tenemos los tipos
por defecto de 1. Inline
elementos 2. Block
3. Inline-block
 Elementos en block

Un elemento en bloque ocupa

todo el espacio de su elemento
padre (contenedor), creando así
un "bloque". Este artículo ayuda
a explicar lo que esto significa.

Formateo: De forma predeterminada, los elementos de bloque comienzan en una nueva línea, pero los elementos en línea pueden
comenzar en cualquier parte de una línea.
 Modelo de contenido: En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque. Inherente
a esta distinción estructural es la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.
 article, aside, blockcode, blockquote, body, button, canvas,
caption, col, colgroup, dd, div, dl, dt, embed, fieldset,
Listado de figcaption, figure, footer, form, h1 - h6, header, hr, li, map,
object, ol, output, p, pre, progress, section, table, tbody,
Etiquetas block textarea, td, tfoot, th, thead, tr, ul, video
Elementos en línea
Un elemento en línea ocupa sólo
el espacio delimitado por las
etiquetas que definen el
elemento en línea. El siguiente
ejemplo demuestra la influencia
de los elementos en línea

 Formateo: De forma predeterminada, los elementos en línea no comienzan con la nueva línea.
 Modelo de contenido: En general, los elementos en línea pueden contener únicamente los datos y otros
elementos en línea.
  a, abbr, address, area, b, cite, code, del, details,
dfn, datalist, em, font, i, iframe, img, input, ins,
kbd, label, legend, link, mark, meter, nav,
Listado de optgroup, option, q, samp, small, select, source,
span, strong, sub, summary, sup, textarea, tt, u,
Etiquetas inline time
 Listado de  Elementos
etiquetas inline- como button, del, iframe, ins, map, object,
y script
block
Concepto General
  El repsonsive design es el concepto de realizar un diseño de
interfaz de usuario para web que se pueda adaptar a cualquier
tipo de dispositivos.

Definición  Utilizar este concepto, nos permitirá tener un buen diseño sin
importar el tamaño de la del dispositivo que estemos usando en
el momento, ya sea un teléfono, una Tablet o la computadora
como tal.
  Utilizando el concepto de responsive design, lo que se enfoca
Filosofía mobile esta filosofía es trabajar primero el diseño para un tamaño de
first pantalla de teléfono y luego para dispositivos con pantallas mas
grandes.
  Algunas de las razón de porque siempre debemos tener en
Porque debemos consideración casi obligatoria de trabajar con paginas

usar el responsive:
 La creciente relevancia de los Dispositivos Móviles
Responsive  Los beneficios del SEO en el Diseño Responsive Web.

Design?
 Resolución de Pantalla 460*800px aproximados

Diferencias visuales entre usar y no usar responsive design

  Como se menciono, se puede tener una medida de referencia
para denominar las diferentes resoluciones de pantallas que
Tabla de mas se utilizan

resoluciones de  Para pantallas de pc, podemos utilizar una medida superior a

1024px y la llamaremos large (lg)

pantalla mas  Para pantallas de tablets o similares, podemos utilizar medidas

comunes
entre 620px y 1023px y la llamaremos médium(md)
 Para pantallas de teléfonos, las podemos colocar en medidas
menores a 619px y la llamaremos small (sm)
  Haciendo uso de las herramientas de desarrollador del

Activar modo navegador podemos activar la opción de visualización de

nuestro sitio en modo mobile con la posibilidad de varias el
mobile en el ancho de nuestras pantallas.

navegador  Para ello debemos hacer click en el botón señalado en la

imagen
  Meta Viewport
 Imagenes y textos Responsive
Elementos  Media queries
  Para crear un sitio responsive, es necesario agregar la etiqueta
<meta> a todas sus páginas web con el contenido de la escala del
viewport
  <meta name="viewport" content="width=device-width, initial-scale=1">

Viewport  Esto configurará la ventana gráfica de su página, que le dará al

navegador instrucciones sobre cómo controlar las dimensiones y la
escala de la página.
Visualmente
hablando
  Como hemos vistos en ejemplos anterior, para obtener
imágenes responsive, es necesario realizar el truco con width y
max-width.

Imágenes  Por ejemplo, para colocar una imagen a la mitad de su

contenido, podemos utilizar el truco de
responsive  .img{
 width:100%;
 max-width:50%;
 }
  Podemos utilizar un conjunto de imágenes dependiendo del
ancho de nuestra pantalla.
 Para ello utilizamos la etiqueta picture

Imágenes según
el ancho de la
pantalla.
 Podemos utilizar la misma imágenes con diferentes
resoluciones o imágenes diferentes por cada tamaño de
pantalla.
  Además de cambiar el tamaño de texto e imágenes, también es
común usar el media querie en páginas web responsive.
Media queries  Los media queries me permiten tener un diseño totalmente
diferente o adaptado en base al tamaño de una pantalla.
  Lo primero a definir es la palabra reservada @media
 Luego, se debe colocar una condición que puede incluir un operador
lógico
 Al final, dentro de llaves {} definimos las modificaciones al código
css

Definiendo un
media queries

 Otro ejemplos
 @media (min-width: 700px) { ... }
 @media (min-width: 700px) and (orientation: landscape) { ... }
 Redefinir un menú

Algunas cosas Redimensionar espacios (max-width)

que hacemos
con los medias Acomodar elementos flotados

queries Esconder elementos