Diseño Web Responsivo
Castaño, Cecilia Vanesa
20182018
¿Qué es el diseño web adaptable?
▶ Responsive Web Design es la técnica que nos permite crear
sitios adaptables a las condiciones del ordenador o
dispositivo desde donde se van a acceder, sobre todo en lo
que tiene relación con la pantalla del sistema donde se
están visualizando.
▶ El objetivo es producir paginas web que detectan el
tamaño y la orientación de la pantalla del visitante para
cambiar el diseño según corresponda.
Características
▶ - Adaptar el ancho de la web al ancho del dispositivo.
El diseño pasa de ser un diseño horizontal a un diseño vertical, la web se adapta al ancho del
dispositivo, siendo más cómoda la navegación y la visualización de la web.
▶ - Reorganización de los contenidos y elementos de la web.
Los contenidos deben de disponerse de tal forma que se puedan ver correctamente en todas las
pantallas. Reajustar el tamaño y la separación entre los contenidos (Textos, imágenes, botones…)
según el ancho del dispositivo para que la navegación resulte fácil.
▶ - Simplificar.
En una versión móvil no podemos mostrar todo lo que aparece en una pantalla de ordenador, hay que
priorizar y seleccionar los elementos que sean necesarios, eliminar objetos gráficos que únicamente
son estéticos para poder tener menos carga visual.
▶ - Cambio de apariencia de algunos elementos.
El menú, por ejemplo, pasa de ser un menú visible a desplegable, un icono que al pinchar sobre él, se
despliegan los elementos del menú para poder acceder a los enlaces. Este cambio tiene por objetivo
ahorrar espacio y optimizar, labor de gran importancia en una versión móvil.
Diseño web adaptable
VENTAJAS DESVENTAJAS
▶ Aumento de la velocidad de carga. ▶ Aunque las ventajas del sitio web con diseño
web adaptativo son numerosas, sin embargo
▶ Como ya hemos dicho antes en un diseño existen ciertos inconvenientes. Se trata
responsive se eliminan los elementos que no particularmente del tiempo de descarga.
son necesarios por tanto al haber menos ▶ La mayoría de las veces, los usuarios se
elementos que descargar, la web se carga encuentran en la obligación de descargar de
más rápido. manera inútil un código HTML/CSS. De igual
manera, las imágenes son a menudo
▶ No afecta negativamente al SEO. simplemente alargadas y redimensionadas
provocando un impacto negativo en el tiempo
▶ Google ha informado a los webmaster que las de descarga.
webs con un diseño responsive gozarán de ▶ Por otra parte, el diseño web adaptativo no
una mejor posición de sus resultados de permite ajustar fácilmente los títulos, las
búsqueda en estos dispositivos móviles. descripciones y otros contenidos en los
teléfonos móviles. Además, el desarrollo del
▶ Evita el contenido duplicado, únicamente sitio web adaptativo exige más tiempo.
Obliga a una descarga de todos los elementos
existe una web y esta es la que se adapta a que constituyen la página pudiendo ocasionar
los distintos dispositivos. No hay duplicidad un rendimiento menor. Existen
en la URL. definitivamente más dificultades en cargar el
contenido de un sitio web adaptativo que el
▶ Ahorro de tiempo y de costes de contenido de un sitio móvil especializado.
mantenimiento debido a que la gestión de un
único sitio web es más económico
1 Maqueta tu web utilizando unidades relativas:
En lugar de usar px utiliza % o em para el tamaño de tus capas, fuentes e imágenes (especialmente para el
ancho). Así te será más cómodo adaptar tu web a diferentes resoluciones. Inicialmente puedes limitar la capa
contenedora con la propiedad max-width, o bien establecer un ancho en px y luego cambiarlo a % a través de
@media
2 Añade el meta tag viewport en el <head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móviles. Así nos
aseguramos que el contenido se ajusta al ancho del dispositivo. En este caso estamos indicando que el
contenido tendrá el ancho del dispositivo y que la escala mínima y máxima es de 1
3 Utilzamos la clase @media para adaptar nuestra web
La expresión @media de css3, es fundamental. Nos permite establecer condiciones desde CSS para conocer el
dispositivo desde el que se accede a nuestra web y aplicar nuevos estilos CSS. Por ejemplo: podemos eliminar el
sidebar de nuestro blog si el navegador mide menos de 600px.
Las propiedades que más nos interesan son las siguientes:
a) width y height:
Ancho y alto del navegador (podemos añadir el prefijo min– o max-)
b) device-width y device-height:
Ancho y alto del dispositivo, móviles y tablets (podemos añadir el prefijo min– o max- )
c) orientation:
Orientación del móvil o tablet (para panorámico utilizaremos orientation:portrait, para
vertical orientation:landscape)
Ejemplo – Bootstrap 3
▶ Características
▶ Puedes tener una web bien organizada de forma
visual rápidamente: la curva de aprendizaje hace
que su manejo sea asequible y rápido si ya sabes
maquetar. Grid System de 12 columnas
▶ Dispone de una gran variedad de componentes
utilizables desde su documentación, desde iconos
a desplegables, combinando HTML,CSS y
Javascript.
▶ Nos permite un diseño responsivo.
▶ Nos brinda el grid system: maquetar por columnas
nunca fue tan fácil. Además, son muy
configurables.
▶ Nos permite usar Less, para enriquecer aún más
los estilos de la web.
▶ Bootstrap utiliza las siguientes media queries para
establecer los diferentes puntos de ruptura en los
que la rejilla se transforma para adaptarse a cada
dispositivo.
Bootstrap 4 - Novedades
▶ Características
▶ Cambio de LESS a SASS
▶ No mas soporte para IE8
▶ Se mejoraron los Tooltips y Popovers gracias a la librería JS: Tether
▶ Soporte para Flexbox
▶ Se remplazaron los: well, thumbnails y panels, por los Card
▶ Mejoras en el sitema de grid
▶ Se agrego soporte para Jquery 2
▶ Como unidades de medida se usaran ahora “rem” y “em”
Media Query
▶ Consiste en un tipo de medio y al menos una consulta Ejemplo Básico
que limita las hojas de estilo utilizando
características del medio como ancho, alto y color. Se Ventana o monitor menor de 800px
entiende como un módulo CSS3 que permite adaptar
la representación del contenido a características del @media screen and (max-width: 800px) {
dispositivo. Añadido en CSS3, las media queries dejan #contenedor{
que la presentación del contenido se adapte a un width:100%;
rango específico de dispositivos de salida sin tener }
que cambiar el contenido en sí. }
▶ Consisten de un media type y una o mas expresiones,
implicando características del medio, la cual se
Con @media screen estamos iniciando la
resuelve como verdadera o falsa. El resultado de la
consulta media query, para añadir condiciones
consulta es verdadera si el tipo de medio
debemos utilizar “and”. Es este caso estamos
especificado en el media query concuerda con el tipo
aplicando un ancho del 100% a la capa
de dispositivo que está siendo mostrado y todas las
#contenedor si el monitor o ventana tiene una
expresiones en el media query son verdaderas.
resolución inferior a 800px
Ejemplos
▶ @media screen and (max-device-width ▶ @media screen and (min-device-width : 768px)
: 480px) { and (max-device-width : 1024px) and
(orientation : landscape){
.entry, .entry-content
#sidebar{
{
display:none;
font-size:1.2em;
} line-height:1.5em;
#menu{ }
text-align:center; }
} ▶ Uniendo esta tres condiciones “and
(min-device-width : 768px) and
} (max-device-width : 1024px)” Estamos limitando
▶ Los anteriores estilos sólo se aplicaran que los estilos sólo se apliquen a dispositivos
a si el dispositivo tiene un ancho que con una resolución de entre 768px y 1024, y
inferior a 480px con “and (orientation : landscape)” indicamos
que se apliquen cuando estén en posición
vertical.
Cajas flexibles – Flex Box
▶ La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que
permite colocar los elementos de una página para que se comporten de forma
predecible cuando el diseño de la página debe acomodarse a diferentes
tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el
modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque
no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible
interfieran con los márgenes de sus contenidos.
▶ Ahora se crea un modelo de caja nuevo, la caja flexible o
FlexBox con display: flex.
▶ Funciona ajustando los tamaños y la disposición de los elementos que se
encuentran dentro de un contenedor o caja, de tal manera que se adapten
siempre al espacio disponible. Permite posicionar dichos elementos internos
con gran facilidad, de manera independiente al orden en el que aparezcan en
el código.
display: flex
▶ La declaración display: flex; define un
“contenedor flexible” y convierte de
forma automática a sus “hijos”
directos en “elementos flexibles”.
▶ Un contenedor flexible tiene un Eje
principal (main axis), que es la dirección
en la cual se posicionan los elementos
flexibles. Y tiene un Eje transversal,
perpendicular al Eje principal. Ambos ejes
tienen una serie de propiedades que
controlan cómo se posiciona cada
elemento flexible en relación a los
demás. Puedes además poner
contenedores flexibles uno dentro de
otro, ya que la pripiedad display no se
hereda de forma automática.
