Crear web responsive desde cero

sitio web responsivo completo

Saltar al contenidoCómo hacer un sitio web responsivo en 3 sencillos pasosHoy en día, un sitio web no debe verse bien sólo en una pantalla de escritorio, sino también en tabletas y smartphones.Un sitio web es responsivo si es capaz de adaptarse a la pantalla del cliente.El diseño web responsivo es extremadamente importante hoy en día y es, de hecho, una técnica que debes dominar como desarrollador o diseñador web.En este artículo, te mostraré cómo construir fácilmente un sitio responsivo y cómo aplicar técnicas de diseño responsivo en páginas web existentes en tres sencillos pasos.

Una vez hecho esto, vamos a ver cómo de responsivo es tu diseño. Para ello, utilizo esta impresionante herramienta creada por Matt Kersley. Por supuesto, puedes comprobar el resultado en tu propio dispositivo móvil.2 – MediasUna maquetación responsiva es el primer paso hacia un sitio web totalmente responsivo. Ahora, vamos a centrarnos en un aspecto muy importante de un sitio web moderno: los medios de comunicación, como los vídeos o las imágenes.El código CSS que aparece a continuación garantizará que tus imágenes nunca sean más grandes que su contenedor principal. Es súper sencillo y funciona para la mayoría de los sitios web responsivos. Para que funcione correctamente, hay que insertar este fragmento de código en tu hoja de estilos CSS.img { max-width: 100%; height: auto; }Aunque la técnica anterior es eficiente, a veces puedes necesitar tener más control sobre las imágenes y mostrar una imagen diferente según el tamaño de la pantalla del cliente.Aquí tienes una técnica desarrollada por Nicolas Gallagher. Vamos a empezar con el html:

script para sitios web responsivos

En la última serie (“Entendiendo el diseño web responsivo”), definí las características básicas de este nuevo e importante enfoque responsivo para el diseño amigable con el móvil y agnóstico para el dispositivo. Ahora, vamos a preparar el terreno para un trabajo más concreto.

Hemos visto que hay muchos aspectos que hay que tener en cuenta a lo largo del proceso de diseño responsivo: tamaño de la pantalla, plataforma operativa, comportamiento del usuario, etc. Hemos explorado las distintas opciones de medición de las fuentes en un sitio web, y hemos tratado la mejor manera de enfocar la tipografía en términos de diseño web responsivo. Hemos explorado las características de cuatro tipos de diseño diferentes y sus respectivos campos de aplicación. Hemos cubierto algunos problemas comunes que un diseñador web puede encontrar al gestionar imágenes responsivas (y hemos señalado posibles soluciones). Por último, hemos explorado el problema de la compatibilidad entre navegadores y hemos propuesto diferentes formas de conseguirla.

Uno de los fundamentos del diseño responsivo son las consultas de medios, que en última instancia hacen que el sitio sea accesible y utilizable por el mayor número de usuarios, incluidos aquellos que no utilizan versiones recientes de navegadores populares como Internet Explorer, Mozilla Firefox y Chrome.

hacer un sitio web responsivo automáticamente

En este tutorial vamos a construir un sitio web del mundo real con HTML 5 puro y CSS 3 que puede ser utilizado como una plantilla para una agencia de diseño web o cualquier otro sitio web de negocios. Vamos a echar un vistazo al resultado final primero: La plantilla del sitio web es totalmente responsable y consta de tres páginas. La página de inicio tiene el siguiente aspecto:

En el siguiente paso tenemos que dar estilo al contenido del sitio web. El archivo css/style.css ya ha sido incluido en index.html: <link rel=”stylesheet” href=”./css/style.css”> Vamos a utilizar ese archivo para incluir el código CSS que se necesita para dar estilo a nuestra aplicación web:

Ten en cuenta que los enlaces del menú deben cambiar de aspecto cuando el ratón se mueve sobre el elemento. Por lo tanto, se utiliza el selector header a:hover y se establecen los valores de las propiedades color y font-weight.

La imagen de fondo se establece utilizando la propiedad background del elemento section con ID showcase. El archivo de imagen se almacena dentro de la carpeta img y el nombre del archivo es headerbg.jpg. Este archivo se selecciona utilizando la función CSS url. Esta función espera la ruta relativa como primer y único parámetro. Para asegurarse de que la imagen se adapta correctamente a los distintos tamaños de pantalla es importante utilizar además las opciones no-repeat y center. Además, debe asegurarse de establecer la propiedad CSS background-size con el valor cover.

sitio web responsivo en línea

Hemos visto que hay muchos aspectos que hay que tener en cuenta a lo largo del proceso de diseño responsivo: tamaño de la pantalla, plataforma operativa, comportamiento del usuario, etc. Hemos explorado las distintas opciones de medición de las fuentes en un sitio web, y hemos cubierto la mejor manera de abordar la tipografía en términos de diseño web responsivo. Hemos explorado las características de cuatro tipos de diseño diferentes y sus respectivos campos de aplicación. Hemos cubierto algunos problemas comunes que un diseñador web puede encontrar al gestionar imágenes responsivas (y hemos señalado posibles soluciones). Por último, hemos explorado el problema de la compatibilidad entre navegadores y hemos propuesto diferentes formas de conseguirla.