1.- Qué es Responsive Web Design
Comenzamos con una descripción general del término Responsive Web Design de modo que todos podamos entender de dónde viene y por qué es tan importante en el mundo actual del desarrollo.
2.- Diseño responsive es diseño web
La web solo se concibe si es adaptable, hablar de un diseño responsive es hablar de diseño web, no hay web si no hay responsive.
3.- Responsive es algo más que tamaños de pantalla
Problemática sobre el diseño adaptable. Responsive Web Design es algo más que tamaños de pantalla, hay que adaptarse en muchos otros sentidos a las características de la navegación en escritorio y dispositivos.
4.- Los tres pilares de optimización del diseño responsive
Cuando diseñamos una web debemos fijarnos en tres cosas fundamentales, diseño para todos los navegadores y sistemas, todas las resoluciones de pantalla y todas las velocidades de conexión.
5.- Flujo de desarrollo de un sitio responsive
Cómo se desarrolla un sitio adaptativo, aproximación de los procesos usados para la creación de un diseño Responsive Web Design.
6.- Progressive Enhancement Vs Graceful Degradation
Dos técnicas, o flujos de trabajo, que nos ayudan a resolver los problemas de compatibilidad de los distintos navegadores frente al estándar CSS, explicadas en el marco del diseño adaptable.
7.- Mobile First
Mobile First es una filosofía, una manera de encarar el trabajo y una forma de facilitarnos la labor durante el diseño responsive, comenzando siempre por los dispositivos, con pantallas menores.
8.- CSS Media Queries
Las Media Queries, incorporadas en CSS3, son las primeras construcciones del lenguaje CSS que nos permiten definir estilos condicionales, aplicables únicamente en determinadas situaciones.
9.- Guías de uso de las Media Queries en Responsive Web Design
Vamos a conocer muchas de las técnicas relacionadas con las media queries que puedes aplicar para sitios que se adapten a todo tipo de pantallas y medios.
10.- Breakpoints para diseño Responsive
Los puntos o medidas de anchura donde se pueden crear saltos en el diseño Responsive, llamados comúnmente breakpoints, a partir de donde aplicar las media queries para Responsive Web Desing.
11.- Medidas estándar de pantallas para tus media queries
Listado de pantallas y viewports comunes de dispositivos y ordenadores de escritorio para hacernos una idea de hacia dónde podrían apuntar nuestras media queries CSS.
12.- Unidades de medida en CSS: relativas y absolutas
Discusión sobre las unidades de medida CSS, distinas unidades con sus explicaciones y la diferenciación entre unidades relativas y absolutas.
13.- Unidades de medida CSS más adecuadas para el Responsive Web Design
Explicaciones sobre las mejores unidades de medida y discusión sobre cuándo debemos usar unas u otras para sacar lo mejor de las hojas de estilo y el diseño adaptable.
14.- Unidades de medida CSS para fuentes Responsive Web Design
Las mejores unidades de medida de CSS para trabajar con tamaños para tipografías en Responsive Web Design, ventajas, inconvenientes y soluciones a la unidad rem.
15.- Unidades CSS viewportwidth y viewportheight
Nuevas unidades de CSS3: viewportwidth y viewportheight. Cómo podemos hacer un útil uso de ellas al aplicarlas a tamaños de las tipografías.
16.- Estilos CSS básicos para Responsive Web Design
Estilos, atributos y valores de CSS que resultan esenciales para el Responsive Web Design y que existen desde las versiones antiguas del estándar de las hojas de estilo.
17.- Etiqueta meta Viewport
El Viewport es una de las etiquetas más representativas de la web móvil, que nos permite configurar cómo debe interpretar una página el navegador web para móviles.
18.- Imágenes responsive con la etiqueta Picture
Cómo usar la etiqueta Picture para crear imágenes responsive, un nuevo elemento de HTML5 que permite que las imágenes y su resolución se adapten a todo tipo de pantallas.
19.- Mejorar la experiencia de usuario en sitios Responsive
Diseño web y Responsive Web Design requieren una adaptabilidad al contexto móvil, y no solo en la parte estética. Cómo mejorar el rendimiento, la carga y la experiencia de usuario en webs Responsive.
0 comentarios:
Publicar un comentario