Aprende como hacer un sitio web adaptable a dispositivos móviles, la manera mas fácil rápida y efectiva, Tutorial responsive design
Share on Pinterest
Comparte con tus amigos
Una de las preguntas mas frecuentes que me hacen en internet es, ¿Como puedo hacer sitio web Responsive? Así que he decidido hacer este tutorial en el cual les explico a grandes rasgos que es el diseño adaptable, también conocido como Responsive Design y después te explico que puedes hacer para convertir tu sitio en un sitio responsive y que se pueda visualizar desde cualquier dispositivo móvil.
Tutorial responsive design, Como hacer un sitio web adaptable a dispositivos móviles
Linea de código del View Port:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Articulo sobre propiedad Box-sizing:
https://www.falconmasters.com/css/cambiando-modelo-de-caja-box-sizing-css/
Share on Pinterest
Comparte con tus amigos
Buen post carlos arturo me sirvi mucho gracias
Genial! Me alegra que te haya servido :D
Muy útil.
¿Podrías hacer un tutorial de la propiedad »transition» para dar efectos a los menús de navegación? Sería genial y serviría de mucho. :)
Saludos.
Claro que si, seria genial :D
[…] Ah y casi me olvido!, por si fuera poco, este header dinámico también sera adaptable a dispositivos móviles (Responsive Design) […]
oye me puedes ayudar? es que tengo una pagina web pero no puedo poner el boton de facebook como el tuyo de «fans» me haces un tutorial de como por favor y no es que no sepa hacer botones es que no se como hacer que cuando la gente entre y le ponga ñike aparezca 1 numero mas
Los botones sociales no los he hecho yo, es un plugin que he comprado para WordPress.
ok, pero ¿tu página esta hecha con wordpress?
Si, este sitio esta bajo WordPress
Execelente explicación muy clara de verdad
Hola Carlos, te felicito porque está vien explicado pero te pido ayuda porque no he podido hacerlo funcionar, cuando está en pantalla pequeña no logro que al hacer clic en la barra se desplegue en menu, el ccs y el java lo tengo tal cual el tuyo te paso el html haber si puedes ver fallo, desde ya muchas gracias gracias
menu
Menu
Inicio
Trabajos
Proyectos
Servicios
Contactos
Te falta el contenedor!
eres muy bueno explcando gracias a tus tutoriales pude hacer una pagina web con una gran presentacion
Genial! Muchas gracias
Hey carlos una pregunta, no haz pensado en sacar algun tutorial en el que expliques como crear un sistema de articulos
Si, podría decirse que ya hice uno, un curso de WordPress.
https://www.youtube.com/watch?v=pQ2rZLpsn8k
HOla y gracias por el video , una pregunya yo realizaba las páginas con divpa (absolutos) se puede aplicar tu concepto a este tipo de diseño.
GRacias de antemano
Si que se puede, pero es mas complicado.
Hola Carlos, primero decirte que desde que me tompé con tu web estoy feliz!… lo tienes todo y muy bien explicado… me encanta!! mis mas sinceras felicitaciones por tu trabajo… segundo… tengo un inconveniente y despues de cansarme googleando me animé a molestarte…
estoy adaptando una web para hacerla responsive y me encuentro con que no sé como hacer para que el header tenga de fondo completo un background:#000, claro al tener el div contenedor con max-width:960px no lo consigo. te adjunto unas imagenes a ver si te puedo explicar mejor lo que necesito y a ver si podrías ayudarme… mil gracias de antemano por tu tiempo!
Ya lo solucioné… quité el y el header, nav y footer tienen divs absolutos, para el resto tuve que agregarle las propiedades de «contenedor» a cada div… en fin no quería hacerlo individualmente, preferiría el div class=»contenedor», lo tendré en cuenta a la hora de diseñar más páginas… Saludos!!!
Hola Kroli, me alegra que hayas podido solucionarlo, una disculpa por la tardanza en responder.
Saludos!
Un exelente video Carlos muchisimas gracias.
Hola una consulta.
Qué herramienta para crear mockups o hacer prototipos web utilizan o recomiendan ustedes?
Muchas gracias y felicitaciones por los tutoriales.
No suelo hacer mockups digitales, primero hago la idea en papel y ya para el prototipo si utilizo photoshop.
Amigo, estoy recién aprendiendo, pero no cacho porque cuando escribo @media screen en DW y en Sublime Text, no me reconoce ese codigo en el archivo CSS… tu llegas, lo escribes y te lo reconoce, pero a mi nada.. me sale todo en color clanco, wtf!? Debo instalar un plugin o habilitar una opción específica o hay algo que no hago o hago mal? Saludos!
Buenas noches Carlos y gracias por este magnífico video-tutorial, lo empecé ayer y hoy lo tengo funcionando correctamente. Solo una pregunta: -Que editor de Html y CSS utilizas en el vídeo me gusta mas que el dreamweaver que yo utilizo. Lo veo muy ordenado el html. Gracias y felicidades también por la web
Hola que tal. Utilizo Sublime text. Saludos
Hola Carlos, excelente tutorial…como siempre.
¿Cómo puedo hacer para que el texto se vaya adaptando al nuevo tamaño de la pantalla?
Gracias
Hola, la verdad que te felicito eres un excelente diseñador web pero quiero pedirte un grande favor yo estoy estudiando pero recien estoy en introduccion a java script quiera que me expliques el modelo de la pagina que deseo crear yo es asi como esta –> http://www.iglesiaevangelicaamara.com/ y como estoy recein en introduccion a java script necesito ya crear una pagina web. te agradeceria bastante si me ayudaras!! Buenas horas =D #FalconMasters!!
Una sola cosa:
Lo he intentado varias veces pero no puedo conseguir que la
altura del “section” y del “aside” sean iguales tanto en 1000, como en 800 y
400 pixel. Es decir ¿Cómo puedo poner que el del height del aside igual que el
section?. Gracias una vez más por este magnífico tutorial. Saludos. JMRuiz.
Una sola cosa:
Lo he intentado varias veces pero no puedo conseguir que la
altura del “section” y del “aside” sean iguales tanto en 1000, como en 800 y
400 pixel. Es decir ¿Cómo puedo poner que el valor del height del aside sea igual que el
section?. Gracias una vez más por este magnífico tutorial. Saludos. JMRuiz.
Hola Carlos, donde puede encontrar los códigos html y css completos y escritos para poder copiar y adaptarlos a mi sitio web muchas gracias.
Hola Carlos, esta muy bueno ese tutorial pero tengo un problema al colocar el código @media screen and… para que lo que se encuentra de lado pase abajo cuando la pantalla sea más pequeña, el código no me funciona y no me sale. Quisiera saber como podía hacer eso.
Hola, me encuentro con el mismo problema. Pudiste resolverlo?
yo tambien estoy en la misma! no pasa nada con el media screen
¡Muchas gracias Carlos por este gran tutorial! Está muy bien explicado, soy estudiante de sistemas y me encantaría hacer páginas web, lo voy a poner a prueba a ver que tal me va, cualquier cosa te molesto, de nuevo gracias infinitas. :D
hola este método es mejor que
Bootstrap ??
Carlos, muy buen tutorial, gracias, pero donde puedo descargar el codigo tanto de la página de ejemplo como la de css para poder analizarlo mejor gracias…
Excelente tutorial, aprendiendo mucho con tus aportes, se entiende muy bien la explicación de lo que haces, el tutorial funciona correctamente.
Hola! no me funciona absolutamente nada y lo hice tal cual…cual seria mi problema??
Me suscribo a tu canal, y me gusta el contenido que nos traes :D (una peticion, no se si es mucho pedir, podrias hacer un video donde expliques las diferentes herramientas relacionadas a javascript? no me queda claro para que sirve cada una, y algunos no se si son librerias o frameworks -.- apenas estoy iniciando en el mundo de la programacion y me confunde, pero quiero iniciar con javascript ya que veo que tiene un abanico muy grande de herramientas)
Excelente explicación, Afortunadamente para los que conocen poco de diseño/programación/código existen servicios como http://go2movi.com
Un saludo ;-)
creo que vere todos tus tutoriales xD
Buen trabajo Carlos. Te agradecería me ayudes sobre un tema de responsive design y repetición de menú en todas las páginas. Mi correo es juapasde@gmail.com. Gracias
Hola excelente explicacion, podrias ayudarme para saber como adaptar el tamano de los videos a un web responsive…
hola Carlos buen dia , no se si me podrias ayudar lo que pasa es que hice una pagina web en mi trabajo pero tengo dificultades para que sea responsiva los dispositivos moviles , laptops etc… , no se si me podrias ayudar, mi correo es lic.edgarmedina@hotmail.com , espero que asi sea , saludos
hola que tal, tendrás los archivos HTML y CSS. gracias
hola, no soy programador y estoy haciendo mi web con wysiwyg web builder 10 y no se como ingresar ni el contenedor ni el codigo, ¿me podras ayudar?
hola amigo carlos, yo hice paso a paso el tutorial de webs responsive pero no me funciona ya que losw estilos css no se aplican solo se ve la estructura html nada mas como si no le fuerse aplicado css los media querrys si funcionan pero los colores no se ven y hice el codigo tal cual al tuyo.. necesito ayuda de tu parte..
en mi css no me toma el @media… tengo que bajarme algún plug in no entendí, diculpame
Genial, aprendí mucho, gracias.
Me quedaré con el esqueleto del HTML y CSS porque se pueden utilizar para mucho.
hola..!!! me gustaria pedirte ayuda en una area de mi pag web donde no me da responsive, es en el header, no me modifica nada al hacer los cambios de pantalla….espero me puedas ayudar..
Hola buen dia yo también tengo un problema lo que necesito es que a la hora de que la pantalla tenga 800px de medida, un banner que tengo cambien a un ancho del 100%, lo que hice fue ponerle un media quary tal cual lo describes en el video como si fuera una imagen. pero no funciona. com debo hacerlo? no se que estoy haciendo mal. éste es el código que utilice par el banner:
@media screen and (max-width: 800px){
body {
box-sizing:border-box;
}
.carrusel1 {
width:100%;
height:auto;
}
}
Hola buen dia, yo también tengo un problema lo que necesito es que a la hora de que la pantalla tenga 800px de medida, un banner que tengo cambien a un ancho del 100%, lo que hice fue ponerle un media quary tal cual lo describes en el video como si fuera una imagen.en dream weaver en la parte de design ya funciona si agrando o achico el design si funciona pero cuando lo pruebo en el explorador no funciona. com debo hacerlo? no se que estoy haciendo mal. muchas gracias!!! éste es el código que utilice par el banner:
@media screen and (max-width: 800px){
body {
box-sizing:border-box;
}
.carrusel1 {
width:100%;
height:auto;
}
}
pero cual es el codigo de tu html que asigna el banner para saber si le estas aplicando bien a la clase la caractiristicas
Hola Carlos, me ayudo mucho tu tutorial con mas ideas para mi pagina web, es verdad que los internautas navegan mas por los dispositivos móviles, ya me encargue de ajustar imágenes y texto, y esto me trajo muchas ventajas, me gustaría compartirles algunas. http://isopixel.net/2016/05/09/ventajas-del-diseno-responsivo/
Os aconsejo que tengáis si o si una página de empresa en Google+ y que pidáis a vuestros clientes que os dejen una opinión, esto os ayudará muchísimo a posicionar mejor vuestra empresa en Internet.
Y otra cosa… es importante que la persona sienta que siempre encontrará lo que busca y que eso no le tomará más de 90 segundos. Si tienes una página web con navegación lenta, olvídalo, el comprador se irá hacia la competencia.
Hola gracias por tu tutorial, queria preguntarte como podría desaparecer una imagen para cuando este en una pantalla de menos de 800px pero sin que desaparescan todas las imagenes? Lo que quiero decirle al codigo es que cuando este a 800px la pantalla desaparesca una imagen en especifico
Hola Carlos, saludos y felicitaciones desde Rep. Dom. por los tutoriales tan bien explicados.
siguiendo tus tutoriales he podido crear mi maqueta y la e adaptado a todos los dispositivos, pero he notado que en la posición estándar del dispositivo todo funciona bien pero cuando giro el dispositivo de manera horizontal se descuadra todo. aquí dejo el link http://sya.sytes.net/ a mi pagina para si alguien quiere aportar alguna sugerencia al caso pueda entender mejor lo que digo. gracias y quedo a la espera.