Source: https://www.lawebera.es/diseno-web/hacer-diseno-web-adaptable-responsive-design.php
Timestamp: 2020-07-14 03:25:19+00:00

Document:
Cómo hacer un diseño web adaptable (reponsive design) - Diseño de Paginas Web
Inicio » Diseño de Paginas Web » Cómo hacer un diseño web adaptable (reponsive design)
Resumen: Guía y consejos para hacer un diseño web adaptable o responsive design y conseguir que tu web se adapte a cualquier dispositivo, ya sea móvil, pc, etc. Técnicas y prácticas para hacer tu web responsive.
Ayuda a resolver los problemas asociados con las diferentes resoluciones y la variedad de dispositivos que se utilizan en la actualidad para desplegar páginas web.
2 Saber para quién diseñas
3 Técnicas para hacer un diseño responsive
3.1 Uso de viewport en la etiqueta metatag
3.2 Uso de Media Queries
3.3 Uso de Max-Width y Min-Width
3.4 Uso de medidas relativas
3.5 Tamaño de fuente en un diseño responsive
3.5.1 Píxeles (px)
3.5.2 Puntos (pt)
3.5.3 Ems (em)
3.5.4 Porcentajes (%)
3.6 Prueba tus sitios con emuladores
4 Consejos a la hora de realizar un diseño web responsive
5 Ventajas e inconvenientes del responsive design
Resumiendo, se trata de diseñar una página web para varias resoluciones de pantalla.
Entendemos como sitios web responsive, aquellos que están diseñados y desarrollados para la navegación desde cualquier dispositivo y resolución de pantalla. Es decir, desde cualquier teléfono podemos acceder a una versión optimizada de dicha web, sin tener la necesidad de descargar o instalar alguna aplicación.
No todos los móviles tienen la misma resolución y tamaño de pantalla. Tampoco es igual que la web se reproduzca en un sistema operativo u otro.
Habrá que adaptarla para que funcione a la perfección en iOS y Android. Así que a la hora de encarar la creación y desarrollo de webs, hay que pensar en todos ellos.
Cuando se inicia un nuevo proyecto de desarrollo, el diseño del sitio web debe planearse para adecuarse a todos los tipos dispositivos de uso común, desde teléfonos pequeños a grandes pantallas planas.
Si buscas que tus diseños funcionen perfectamente en cada uno de los dispositivos que existen, es muy probable que no lo consigas.
En cambio, si conoces muy bien la audiencia que tiene la web para la que diseñas, tendrás la capacidad de concentrar más esfuerzs en en los dispositivos que los usuarios del sitio utilizarán con mayor frecuencia.
El lugar geográfico de donde provienen la mayoría de los usuarios también importa. Por ejemplo, si el sitio es visitado desde Asia o el Oriente Medio, Symbian será la plataforma que sea utilizada con más frecuencia, ya que Nokia continúa siendo líder en esa área.
Actualmente, debido a la enorme cantidad de resoluciones diferentes que existe, resulta casi imposible hacer un diseño para todas, o peo raún un diseño para cada una… la idea es hacer un diseño capaz de adaptarse a cualquier dispositivo en base a rangos de resolución.
Técnicas para hacer un diseño responsive
Para ayudarle a comenzar a trabajar rápidamente con este tipo de diseño, en este artículo enlistaremos los principales conceptos a considerar para realizar la lógica básica del diseño adaptable.
Si tienes conocimiento previo de CSS, el aprendizaje de estos conceptos no se te dificultará.
La mayoría de los navegadores utilizados en dispositivos móviles, escalan las páginas HTML en base a un ancho fijo el cual las ajusta para que quepan en la pantalla que las despliega.
Para modificar esto y restablecer el valor que tomará, podemos hacer uso del metatag viewport, el cual indica al navegador que ancho debe tomar y deshabilita la escala inicial.
meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
El truco está en preveer la manera en que nuestro sitio se desplegará en distintos dispositivos y tamaños de ventana, para ello debemos utilizar una estructura HTML responsive, que sea flexible y fácil de adaptar a distintos entornos, para que después de esto, baste con agregar las condiciones necesarias a la hoja de estilo, las cuales permitan el uso de distintos layouts.
Por ejemplo, si quisiéramos aplicar un layout exclusivo para dispositivos que funcionen con un ancho de ventana menor a 980 píxeles, bastaría con utilizar el siguiente conjunto de reglas:
Como se puede apreciar, utilizamos porcentajes para establecer el ancho de cada elemento del layout, esto hace que los contenedores sean más fluidos y adaptables, así no dependemos de un ancho fijo y nos ahorramos el despliegue de barras desplazadoras.
Si quisiéramos realizar lo mismo para el ancho de un dispositivo móvil podríamos hacer esto:
Así como en este par de ejemplos, puedes utilizar todos los media query que desees, así lograrás aplicar diferentes reglas CSS y estructurar diseños diferentes determinados por el ancho de ventana.
Debes tener presente que los media queries pueden estar en la misma hoja de estilo o en un archivo separado, todo dependerá de la manera en que tú quieras organizarte.
Estas dos propiedades CSS juegan un papel muy relevante en el diseño multiplataforma, gracias a ellas podemos idear distintas estructuras.
Finalmente debes tener siempre en consideración que las medidas relativas siempre serán mejores que las absolutas al realizar diseños adaptables.
El uso de porcentajes como valor de las propiedades hace que resulte más sencillo adaptar elementos a diferentes entornos, es por ello que se recomienda utilizarlos para márgenes, tamaños de fuente y padding.
De igual manera, permite crear estructuras más balanceadas, como en el caso de los paddings.
Cuando utilizamos un padding con valor absoluto, si hacemos más pequeña nuestra ventana y el contenedor va disminuyendo su tamaño, al final veremos un recuadro con un margen muy grande y con un contenedor muy pequeño, esto hará que no luzca bien, en cambio si utilizáramos porcentajes, el margen y el contenedor disminuirán proporcionalmente.
Tamaño de fuente en un diseño responsive
Lo ideal para conseguir una web totalmente responsive, sería diseñar una estructura capaz de superar el cambio de tamaño y que le resulte invariable la alteración del texto.
Si el diseño de tu estructura, demanda un manejo de distintos tamaños de letras y composiciones, entonces es necesario que tengas en mente qué representa cada una de las medidas que tienes a tu disposición, para ser utilizadas como valores de este atributo.
Los píxeles es lo más cercano que encontraremos a un tamaño fijo, usualmente se considera que un píxel equivale a un punto de la pantalla del dispositivo utilizado para navegar, pero en realidad es una medida relativa a la resolución que tengamos en nuestro dispositivo.
Debido a esta relación directa entre la resolución y la unidad, se considera a los píxeles la medida más exacta para establecer una valor de tamaño de fuente.
Esta característica de “precisión”, hace que la medida tenga ventajas y desventajas.
La principal ventaja que esto trae, es que el diseñador puede ser más exacto que con otras unidades.
Sin embargo, esto hace que el tamaño no aumente o disminuya en base a alguna variación en el tamaño del espacio visual, lo que provoca que el texto se vea muy pequeño en monitores con resolución muy alta, o muy grande en pantallas pequeñas.
Los puntos o points, son otra unidad de medida para establecer el tamaño de una fuente. Estos generalmente se utilizan para la impresión en papel, y basan su tamaño en las pulgadas. Cada pulgada equivale a 72 puntos.
Cuando se utiliza esta medida en CSS, varia mucho su presentación, ya que depende del navegador y de la pantalla donde se esté observando.
Los puntos son buenos al momento de crear plantillas de impresión con CSS, pero fuera de eso pueden causar más dolores de cabeza que soluciones. Es por esta razón, que estas unidades no son nada recomendadas para llevar a cabo un diseño adaptable.
Un em es relativo al tamaño de la fuente que establecimos en el elemento contenedor o padre del texto.
En caso de no haber establecido ningún tamaño, entonces el em toma el valor estándar de 16 píxeles, medida que es usada por los navegadores para establecer el tamaño por defecto de las letras.
La desventaja de utilizar ems en nuestro diseño, es que su aplicación respeta el orden jerárquico, por lo que si tenemos un código algo completo, con frecuencia resulta difícil de calcular.
Si utilizamos un valor de 100% estamos indicando que queremos el tamaño de fuente estándar.
Si tienes tus valores en ems y los deseas pasar a porcentajes, entonces ten en consideración que 1em es equivalente a 100%, por lo que si tienes un tamaño de 1.5em el valor en porcentaje sería 150% y así sucesivamente.
iOS SDK Información sobre simuladores para iOS
Por otra parte, existen herramientas más complejas capaces de simular las experiencias de usuario en una variedad de plataformas. Sigos es una de las más populares, ya que permite testear nuestros diseños webs en más de 2.000 dispositivos diferentes.
Sin un testeo a través de las plataformas más usuales, el trabajo de diseño no está completo, y con el tiempo, esta etapa se está volviendo cada vez más crucial.
Ventajas e inconvenientes del responsive design
Si bien es cierto que en el momento actual, las estrategias de marketing online, las campañas SEO para mejorar el posicionamiento y aspectos relacionados con la usabilidad web y la privacidad en el ámbito del comercio electrónico, los que se tratan de forma más profusa en los contenidos digitales. S...	Leer más
Para que un diseño web sea efectivo, debe lograr que los usuarios del sitio puedan acceder con facilidad a los contenidos, interactuar con eficacia con todos los componentes y sentirse cómodo en forma permanente, y todo ello sin siquiera pensarlo. El elemento que consigue que esto sea posible es la...	Leer más
Licencia: Coautor del artículo: Juan Carlos Picurelli de Yeeply, Veronica P. de The Wander Life. Contenido exclusivo de LaWebera.es. Prohibida su copia.
Buen contenido, información muy completa para los que no usan WordPress o algún otro CMS
excelente post ! es muy cierto, lleva mucho esfuerzo adaptar correctamente a todos los dispositivos
Pues para lo que no entendieron, el diseño elástico es que cambies el entorno principal no a pixeles sino a porcentaje, el entorno principal debe tener 100% en horizontal y vertical, entonces tu pagina web se adecuara a cualquier pantalla en la que se active tu pagina, en pantallas CRT, Plasma, HD o celulares, ipad, iphone o celulares antiguos con pantalla pequeña, yo he probado con Pantallas HD, CRT, Tablet y con Blackberry, Iphone, Smartphone y con mi nokia antiguo con conexión a internet y la web se adecua a la pantalla, sin bajar el tamaño de letra. muy buena solución, enhorabuena.
Hola, primero gracias por tu aportación, en mi caso, estoy trabajando con un diseño para un portfolio donde la riqueza visual está, sobretodo en el caso de la home y páginas con menor contenido, en las imágenes de fondo que ocupan gran parte de la pantalla. En este punto, y probando diferentes soluciones creo que además de la maquetación elástica, lo mejor será emplear dos diseños y que el navegador interprete “cual emplear” dependiendo de la resolución de la pantalla, ¿existe algún post donde se hable de esto? Gracias!
se agradece muchisimo la ayuda, haceos un trabajo excelente, seguir así.
https://www.lawebera.es/diseno-web/hacer-diseno-web-adaptable-responsive-design.php#la-importancia-de-un-diseno-web-responsive
Me pareció muy bueno el punto del diseño elástico, sólo que con un ejemplo codificado se podría ver mejor, ya que no se dice mucho de como hacerlo.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución