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










Enviar

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










Enviar

FalconMasters Carlos Arturo

59 respuestas a “Tutorial responsive design como hacer un sitio web adaptable a dispositivos móviles”

  1. jeanechabaudis dice:

    Buen post carlos arturo me sirvi mucho gracias

  2. Snoopy diaz dice:

    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.

  3. […] Ah y casi me olvido!, por si fuera poco, este header dinámico también sera adaptable a dispositivos móviles (Responsive Design) […]

  4. Roy Soriano Rodríguez dice:

    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

  5. Jose Vitola Martinez dice:

    Execelente explicación muy clara de verdad

  6. juan dice:

    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

  7. Brandon Santana dice:

    eres muy bueno explcando gracias a tus tutoriales pude hacer una pagina web con una gran presentacion

  8. Alex Hernandez J dice:

    Hey carlos una pregunta, no haz pensado en sacar algun tutorial en el que expliques como crear un sistema de articulos

  9. diego dice:

    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

  10. kroli dice:

    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!

    • kroli dice:

      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!!!

  11. Roberto Medellin dice:

    Un exelente video Carlos muchisimas gracias.

  12. Diana dice:

    Hola una consulta.
    Qué herramienta para crear mockups o hacer prototipos web utilizan o recomiendan ustedes?
    Muchas gracias y felicitaciones por los tutoriales.

  13. Miguel Hernández dice:

    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!

  14. José María Ruiz dice:

    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

  15. OWD dice:

    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

  16. Gerson dice:

    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!!

  17. Guest dice:

    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.

  18. José María Ruiz dice:

    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.

  19. Juan Ángel Paniagua Sánchez dice:

    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.

  20. Natalia Quintero dice:

    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.

  21. Camilo Romero dice:

    ¡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

  22. EDUARDO GARCIA dice:

    hola este método es mejor que
    Bootstrap ??

  23. IVAN AYAZO dice:

    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…

  24. Excelente tutorial, aprendiendo mucho con tus aportes, se entiende muy bien la explicación de lo que haces, el tutorial funciona correctamente.

  25. Anacleta Acro dice:

    Hola! no me funciona absolutamente nada y lo hice tal cual…cual seria mi problema??

  26. Jazz Ivo Escobedo dice:

    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)

  27. Rafa Biancardi dice:

    Excelente explicación, Afortunadamente para los que conocen poco de diseño/programación/código existen servicios como http://go2movi.com
    Un saludo ;-)

  28. Rosalie Maite dice:

    creo que vere todos tus tutoriales xD

  29. jmpa dice:

    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

  30. Jose Datel dice:

    Hola excelente explicacion, podrias ayudarme para saber como adaptar el tamano de los videos a un web responsive…

  31. Edgar Esteban Medina Duran dice:

    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

  32. Gerardo Lara dice:

    hola que tal, tendrás los archivos HTML y CSS. gracias

  33. Betuel T. Del Angel dice:

    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?

  34. ivan dice:

    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..

  35. Pau Delgado dice:

    en mi css no me toma el @media… tengo que bajarme algún plug in no entendí, diculpame

  36. Mel.L.W dice:

    Genial, aprendí mucho, gracias.
    Me quedaré con el esqueleto del HTML y CSS porque se pueden utilizar para mucho.

  37. bety dice:

    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..

  38. celia dice:

    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;

    }
    }

  39. celia dice:

    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;

    }

    }

  40. 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/

  41. Michael dice:

    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.

  42. Eduardo dice:

    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

  43. Narciso J. Pimentel dice:

    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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso