Como hacer responsive una pagina web

Hacer que el sitio web sea amigable con los móviles

Hoy en día, casi todos los clientes nuevos quieren una versión móvil de su sitio web. Al fin y al cabo, es prácticamente imprescindible: un diseño para la BlackBerry, otro para el iPhone, el iPad, el netbook, el Kindle… y además, todas las resoluciones de pantalla deben ser compatibles. En los próximos cinco años, es probable que tengamos que diseñar para una serie de inventos adicionales. ¿Cuándo acabará esta locura? No lo hará, por supuesto.

Hoy en día, casi todos los clientes nuevos quieren una versión móvil de su sitio web. Al fin y al cabo, es prácticamente imprescindible: un diseño para BlackBerry, otro para el iPhone, el iPad, el netbook, el Kindle… y, además, todas las resoluciones de pantalla deben ser compatibles. En los próximos cinco años, es probable que tengamos que diseñar para una serie de inventos adicionales. ¿Cuándo acabará esta locura? No lo hará, por supuesto.

En el campo del diseño y el desarrollo web, estamos llegando rápidamente al punto de ser incapaces de seguir el ritmo de las infinitas nuevas resoluciones y dispositivos. Para muchos sitios web, crear una versión del sitio web para cada resolución y nuevo dispositivo sería imposible, o al menos poco práctico. ¿Debemos sufrir las consecuencias de la pérdida de visitantes de un dispositivo a cambio de ganar visitantes de otro? ¿O hay otra opción?

Lee más  Javascript para que sirve

Css responsivo para móviles

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, 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:

Lee más  Cómo hacer un blog

Probar el sitio web responsivo

En los primeros tiempos del diseño web, las páginas se construían para un tamaño de pantalla concreto. Si el usuario tenía una pantalla más grande o más pequeña de lo que el diseñador esperaba, los resultados iban desde barras de desplazamiento no deseadas hasta longitudes de línea demasiado largas y un mal uso del espacio. A medida que se fueron ampliando los tamaños de pantalla, apareció el concepto de diseño web responsivo (RWD), un conjunto de prácticas que permite que las páginas web modifiquen su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma de diseñar para una web multidispositivo, y en este artículo te ayudaremos a entender las principales técnicas que debes conocer para dominarla.

Estos dos enfoques solían dar como resultado un sitio web que se veía mejor en la pantalla de la persona que lo diseñaba. El sitio líquido daba lugar a un diseño aplastado en las pantallas más pequeñas (como se ve a continuación) y a longitudes de línea ilegibles en las más grandes.

Cuando la web móvil empezó a ser una realidad con los primeros teléfonos móviles, las empresas que deseaban adoptar el móvil solían crear una versión especial de su sitio para móviles, con una URL diferente (a menudo algo como m.ejemplo.com, o ejemplo.mobi). Esto significaba que había que desarrollar y mantener actualizadas dos versiones distintas del sitio.

Consultas de medios

El diseño web responsivo (RWD) es un enfoque del diseño web que pretende que las páginas web se visualicen bien en una variedad de dispositivos y tamaños de ventana o pantalla, desde el mínimo al máximo, para garantizar la usabilidad y la satisfacción[1][2][3][4].

Lee más  Todos los productos e business

Un diseño responsivo adapta el diseño de la página web al entorno de visualización[1] utilizando técnicas como las cuadrículas basadas en proporciones fluidas,[5][6] las imágenes flexibles,[7][8][9] y las consultas de medios de CSS3,[3][10][11] una extensión de la regla @media,[12] de las siguientes maneras:

Aunque muchos editores han implementado diseños responsivos, uno de los retos para la adopción de RWD era que algunos anuncios de banner y vídeos no eran fluidos[29]. Sin embargo, la publicidad de búsqueda y la publicidad de display (de banner) llegaron a soportar una orientación específica de la plataforma del dispositivo y diferentes formatos de tamaño de anuncio para el escritorio, el smartphone y los dispositivos móviles básicos. Se han utilizado diferentes URLs de páginas de aterrizaje para diferentes plataformas,[30] o se ha utilizado Ajax para mostrar diferentes variantes de anuncios en una página.[31][23][32] Las tablas CSS permitían diseños híbridos fijos y fluidos.[33]