Responsive Design

RESPONSIVE DESIGN:
DISEÑO RECEPTIVO Y ADAPTIVO EN LA WEB

ALUMNO: FRANKLIN LUNA CASTILLO
CURSO: LP III

INDICE

1.- INTRODUCCIÓN 3
2.- ¿QUÉ ES RESPONSIVE DESIGN? 4
3.- ¿POR QUÉ ES IMPORTANTE EL RESPONSIVE DESIGN? 4
4.- CONCEPTOS BÁSICOS PARA RESPONSIVE DESIGN 5
4.1.- DISEÑO FLUIDO 5
4.2.- MEDIA QUERIES 6
4.2.1.- ¿QUÉ NAVEGADORES SOPORTAN MEDIA QUERIES? 8
4.2.2.- META TAGS 85.-PATRONES 9
5.1.-Mostly Fluid – más o menos fluido 9
5.2.-Column Drop – caída de columna 9
5.3.-Layout shifter – movimiento de estructura 10
5.4.-Tyny tweaks – pequeños cambios 11
5.5.-Off canvas – fuera del canvas 11
6.-CONCLUSIONES 12
7.-RECOMENDACIONES 13
8.-BIBLIOGRAFIA 13

1.- INTRODUCCIÓN

Hoy en día los usuarios de nuestras páginas web o tiendas online puedenacceder a las mismas desde diferentes medios:
un ordenador de sobremesa con pantalla panorámica, un móvil, una tableta.
Partiendo de la base de que el diseño de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseñador, en el programador o en el dueño de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo más placentera posible conindependencia de qué medio esté usando para verla. Es por ello que últimamente tantos sitios webs están utilizando lo que se llama Responsive Design o Diseño Web adaptable.

2.- ¿QUÉ ES RESPONSIVE DESIGN?

Son una serie de técnicas que permiten a nuestra página web adaptarse al medio a través del cual un usuario está accediendo a la misma. Los tamaños de pantalla cambian según el medio con elque se accede (no es lo mismo una pantalla de un iPhone que la de un monitor panorámico de sobremesa) pero el usuario cada vez más exige que su experiencia usando nuestra web sea la óptima en cada caso concreto. Utilizando HTML y principalmente CSS podemos servir al usuario una versión de nuestra web en función del ancho de pantalla utilizado. Es decir, nuestra web se adapta al ancho de pantalla,responde ante los cambios del tamaño la misma. Además podemos pensar en mejorar el acceso a formularios, botones, etc. Eso es Responsive Web Design o Diseño Web Adaptable.

3.- ¿POR QUÉ ES IMPORTANTE EL RESPONSIVE DESIGN?

La web a través del móvil está defraudando a los usuarios. ¿La razón? Los sitios no están optimizados, no están pensados para verse a través de una pantalla tan pequeña comola del móvil. Como decíamos antes, si el usuario es lo más importante no podemos permitir que esto suceda con nuestra web.
Haz una auditoría SEO a tu web, la experiencia de usuario debe ser prioritaria a la hora de pensar en tu estrategia SEO. Las webs con mejor experiencia de usuario gustarán más, serán más compartidas, mejor valoradas, más populares. Y eso en SEO es muy importante.
Dado elgran número de medios y navegadores existentes no es factible crear una versión de nuestra web para cada uno de ellos, por lo que necesitamos un sistema para que nuestra web se adapte al contexto en el que está siendo vista, optimizándose de manera automática.

4.- CONCEPTOS BÁSICOS PARA RESPONSIVE DESIGN

4.1.- DISEÑO FLUIDO
El principal concepto en el que se apoya el Diseño Web Adaptable esen abandonar los anchos fijos de nuestra web. Estos deberán ser fluidos. En lugar de diseñar nuestra web basándonos en valores fijos (por ejemplo width: 960px), el diseño fluido está pensado en términos de proporciones. De esta manera cuando veamos nuestra web a través de la pequeña pantalla de un móvil todos los elementos de la web se harán más pequeños guardando la proporción entre ellos. Porejemplo, para saber ahora el ancho de un elemento tendremos que dividir el ancho inicial del mismo entre el ancho del elemento “padre”, por llamarlo de alguna manera sencilla. Pongamos que tenemos por ejemplo esta estructura:

En este ejemplo partíamos de unos valores fijos: un contenedor de 960 pixels y dentro del mismo un elemento de 360 pixels de ancho. Si dividimos el segundo entre el primero...