Muy bien, es tan técnicamente hemos
terminado de construir nuestra página web.
Tenemos la página de inicio,
tenemos la página del blog,
y también tendremos una página de contacto
así como el encabezado y pie de página.
Pero hay una cosa muy, muy
importante que tenemos que cuidar y
que va a ser diseño receptivo.
Recuerda siempre que tantas personas
hoy en día usan sus teléfonos móviles para navegar por Internet.
Y si alguien tropeza,
tropeza con tu sitio web en el teléfono móvil,
quieres asegurarte de que se vea bien.
Entonces lo que vamos a hacer en
el resto de esta sección es que te voy a
mostrar cómo puedes reconstruir el encabezado, la página de inicio,
el pie de página,
y las otras páginas para lucir receptivas.
Para que si se ve en un dispositivo tablet
o en un dispositivo móvil, se verá bien.
Lambdas te dan una demostración muy,
muy rápida en este momento
esto es para la vista de la tableta.
Se puede ver que he reducido
el tamaño de mi pantalla al de una tableta.
Y se puede ver en este momento que todavía
se ve muy, muy, muy bien.
No tenemos ningún problema con el espacio en el encabezado.
Se ve bien.
La sección de notas de testimonio se ve bien.
La foto se ve bien.
Pero ahora si me desplaza todo el camino hacia abajo
hasta el tamaño de pantalla más pequeño,
que normalmente será tu teléfono móvil.
Déjame volver a la cima ahora se puede
ver que el encabezado se ve diferente.
Tenemos un fondo negro.
Sí tenemos nuestro logo.
Tenemos aquí el menú principal,
que ahora es el menú de hamburguesas,
que ya has visto muchas veces antes.
Y luego si vuelvo a desplazar hacia abajo,
puede ver que se ve bien
todo el camino aquí abajo hasta el pie de página.
Por lo que el diseño receptivo es extremadamente importante.
Así que viniendo, te voy a mostrar cómo puedes
hacer cambios en tu sitio web para
que se vea bien en cualquier dispositivo móvil.
Lambda también menciona rápidamente
que cuando se trata de un diseño receptivo,
hay algunos conceptos que deben tener en cuenta.
Uno implicaría hacer cosas como reducir
los márgenes son los patrones que has
agregado en la versión de escritorio.
Por ejemplo, te acuerdas ahí con el banner de la página de inicio.
Para esta sección, tuvimos que sumar
una cantidad escandalosa de
margen negativo y creo que fue
menos de dos a dos píxeles cuando se trata de versiones móviles.
Por lo que las versiones responsivas, es posible
que tengas que reducir ese tamaño o Mabou,
o tal vez incluso en ciertas situaciones aumenten el tamaño.
Será necesario ajustar a las imágenes o patrones.
Además, hay momentos en los que solo necesitas
ocultar tipos de elementos de configuración
cuando se ve en un dispositivo móvil porque
podría verse muy bien en el escritorio.
Un ejemplo sería un editor de video
se verá muy bien en el escritorio.
Pero en un dispositivo móvil,
puede que no necesariamente sea tan grande.
Lo mismo aplica con las animaciones también.
Y las medidas se verán bien en un escritorio,
las pasarelas en un escritorio,
pero el teléfono móvil podría tener
problemas para mostrar esa animación.
Entonces todo el punto de este diseño masivo es el sacrificio.
Haces cambios, eliminas ciertas características para que
cuando se vea en un dispositivo móvil sea Uber grid.
Entonces eso es todo por
la muy rápida introducción induct al diseño sensible.
Empecemos ahora con él.