En esta clase adaptaremos nuestro diseño al salto de ancho de pantalla más estrecho: el diseño para móvil con 689px de ancho con su margen correspondiente.
Veremos como las composiciones de 4 columnas pasan a dos y las de dos a una, así como la típica tabla de pricing que la pondremos en una columna con los modelos de precio uno encima del otro tal y como teníamos definido en el wireframe.
También veremos como el apartado de testimonios cambiará ligeramente sobre lo que teníamos planteado en el wireframe. ¡Vamos a ello!
Ya lo veis, el diseño es un proceso que va evolucionando, así que siempre debemos estar abiertos a la posibilidad de hacer evolucionar nuestras decisiones.
Hemos cambiado algunos elementos del wireframe manteniendo la esencia de su planteamiento inicial y gracias a las mesas de trabajo podemos comparar todos los diseños a un solo vistazo.
Con estos tres saltos de ancho de pantalla diseñados el programador ya tiene toda la información necesaria para poder programar. Insisto en remarcar que estos tres anchos pueden variar según vuestro criterio y las resoluciones más utilizadas por los usuarios de vuestra web.
Ahora nos queda el repaso final en el que veremos que esté todo correcto, definiremos acciones para el programador y definiremos los menús. Y recordad, el wireframe siempre os sirve a vosotros, y no al revés!
Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente (y última) lección! :)
Todos los capítulos de este curso:
- Curso de diseño responsive #1. Introducción
- Curso de diseño responsive #2. Tips de diseño responsive
- Curso de diseño responsive #3. Mesas de trabajo y guías
- Curso de diseño responsive #4.Wireframe web de escritorio
- Curso de diseño responsive #5.Wireframe Web Tablet
- Curso de diseño responsive #6. Wireframe Web Móvil
- Curso de diseño responsive #7. Diseño Web de Escritorio
- Curso de diseño responsive #8. Adaptación Tablet
- Curso de diseño responsive #9. Adaptación móvil
- Curso de diseño responsive #10. Repaso final y menús