Diseño Web Responsivo III El codigo
Por fin la parte que mas me gusta de esta serie de 3 artículos sobre diseño web responsivo: El Código puro y duro, pero antes algunas consideraciones
Antes de :
-
Empecemos en Grande
-
No Usar Valores exactos!!
-
No ventas Popup
-
No Muestres todo!!
Lo primero que se recomienda es empezar tu diseño web responsivo desde el tamaño mas grande en que vaya a ser desplayado, es decir si piensas crear una pagina que se muestre en pantallas de 1920×1080, se empieza diseñando para ese tamaño y luego se va modificando el diseño web responsivo para pantallas mas pequeñas.
En su lugar usaremos valores porcentuales para esto nos ayuda la regla de 3 simple es decir si empezamos con una ancho total de 960px, y queremos un sidebar de 300px tendríamos que sacarlo asi: ancho deseado x ancho total / 100, o para el caso 300×960/100 = 31.25% , y lo mismo para cada caja o div o sección que se quiera crear.
Los ventanas popup se muestran encima de la pagina principal y en dispositivos móviles no se puede distinguir esto y suele dar confusiones, lo mejor es no usarlas o usarlas con sabiduría.
Hay que pensar que los dispositivos mas pequeños como teléfonos, no se puede mostrar todo la información, así que lo mejor es ocultar para los móviles las cosas que no se necesiten, por ejemplo, publicidad, o el buscador en la misma pagina.
El Código
Bueno el código para el Diseño Web Responsivo no tiene mucha magia, pero es importante conocer sus partes
primero el infaltable meta viewport que tiene la finalidad de indicarle al dispositivo que estemos usando de que tamaño y a que zoom se va a mostrar nuestra pagina web.
La línea 007 de este código indica que la pagina se va a ver en todo el ancho de la pantalla a una escale de 1 y el usuario no la puede escalar. mas info en este link
Luego como los navegadores antiguos no reconocen el meta viewport ni los meta querys, no apoyamos en java script para solucionarlo esto se aplica en las líneas de la 12 a la 20.
Luego la Magia, pasamos a la sección que nos va a permitir escalar las imágenes eso lo logramos con css y lo apreciamos en las líneas de la 30 a la 34 donde le indicamos que las imágenes, los videos, y los objetos que incrustemos ocupen todo el ancho del contener que los soporta, es decir si utilizamos un ancho de 960px, y dentro creamos dos cajas una de contenido de 70% ancho y la otra sidebar de 30% de ancho, y luego dentro de esas cajas incrustamos imágenes, las imágenes ocuparían el 100% de la caja que lo contiene. y si luego cambiamos el tamaño del ancho de 960px por 500px los contenedores y sus imágenes se redimensionaran automáticamente.
Y al final los Media Queries, que nos permiten ejecutar una sección de css según sea el tamaña de la pantalla, es decir cuando nuestra pagina se despliega en una pantalla de 980px de ancho se ejecuta la todo el css que no esta destro de las etiquetas metaquery mas el css que esta dentro de la etiqueta @media screen and (max-width: 980px) y cuando la pantalla se reduce a 700px igual se ejecuta todo el css mas el contenido de la etiqueta @media screen and (max-width: 700px);
dos observaciones, la redimensión de videos, seria tema de otro post explicar al detalle la forma de tratar los videos ya que usualmente no responden o se hacen una franja muy delgada, esto lo corregimos con un una regla css “.video-container” que nos va a permitir generar la altura para el video, revisen esa regla para que les funcione, y el otro problema es el redimensión de backgrounds, esto se soluciona fácil con la regla background-size, pero tienen modificar esta regla para cada media query.
compartan este esfuerzo, y si necesitan una pagina web ya saben a quien llamar.
[…] Cualquiera de estos frameWorks es una gran decisión a la hora de empezar un proyecto responsivo, pero como desarrolladores debemos conocer los pormenores del código para ello lo pasaremos a explicar en nuestro siguiente post que lo puedes encontrat aqui. […]
Excelente aporte. Muchas gracias
No veo el codigo, solo lo describes. Se puede ver?
Recien vi el ejemplo pero no se puede descargar el ejemplo, el zipeado esta defectuoso
Hola acabo de revisar el zip y lo he podido descargar y abir y editar sin complicaciones, porfavor revisa tu descaga, muchas gracias por reportar links rotos o problemas con la web
Que buen post. Gracias por la informaci
Muy bien explicado muchas gracias!