4. El Responsive Design o diseño adaptativo,
es la técnica que se usa en la actualidad para
tener una misma web adaptada a las
diferentes plataformas que nos brinda la
tecnología: ordenador, tablet y
Smartphone.
Consiste en una serie de hojas de estilo en
CSS3, que usando el atributo “mediaquery”
convierten una web ordinaria en una web
multiplataforma capaz de adaptarse a todos
los tamaños que existen, ofreciendo una
experiencia para el usuario mucho más
amena y cubriendo las necesidades de
nuestro público.
RESPONSIVE DESIGN
5. Las media queries (consultas de medios) son
útiles cuando deseas modificar tu página
web o aplicación en función del tipo de
dispositivo o de características y
parámetros específicos.
• Aplicar estilos condicionales con las
reglas-at @media e @import de CSS.
• Indicar medios específicos en los
elementos <link>, <source> y otros
elementos HTML.
• Testear y monitorizar los estados de los
medios usando los métodos de javascript
Window.matchMedia() y
MediaQueryList.addListener().
MEDIAS QUERIES
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)"
href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
6. 6
• Como su propio nombre indica mobile
first o por su traducción en inglés, «los
móviles primero», resume perfectamente
esta filosofía de desarrollo.
• Básicamente se refiere a un modo de
diseñar que tenga en cuenta, en primera
instancia, un dispositivo móvil. Pantallas
reducidas en comparación a los
monitores que usamos normalmente con
los ordenadores, y tras tener la maqueta
preparada, realizar un escalado, es decir,
aumentar el tamaño y adaptarlo a una
pantalla de escritorio.
MOBILE FIRST
<link rel="stylesheet"
href="style.css">
<link rel="stylesheet"
href="style_table.css"
media="screen and (min-width:
768px)">
@media (min-width: 768px) {...}
@media (min-width: 992px) {...}
@media (min-width: 1200px) {...}
7. 7
• Mostly Fluid: El patrón Mostly fluid
consiste, principalmente, en una cuadrícula
fluida. Por lo general, en las pantallas
grandes o medianas se mantiene el mismo
tamaño y simplemente se ajustan los
márgenes en las más anchas.
PATRONES DE MAQUETACION
10. 10
• Layout shifter: El patrón Layout shifter es
el más adaptable, ya que posee varios
puntos de interrupción en diferentes
anchos de pantalla.
PATRONES DE MAQUETACION
13. 13
• Column drop: En el caso de los diseños
con varias columnas de ancho completo,
durante el proceso de colocación de
columnas éstas únicamente se colocan
de forma vertical debido a que el ancho
de la ventana es demasiado reducido
para el contenido.
PATRONES DE MAQUETACION
16. 16
• Tiny tweaks: El patrón Tiny tweaks
permite realizar pequeños cambios en el
diseño, como ajustar el tamaño de la
fuente, cambiar el tamaño de las
imágenes o desplazar el contenido de
maneras muy poco significativas.
• Off canvas: En lugar de apilar contenido
verticalmente, el patrón Off canvas
coloca contenido menos usado.
PATRONES DE MAQUETACION