Cómo hacer un diseño web amoldable (reponsive design)
por· Actualizado
15 marzo, 2018
Resumen: Guía y consejos para hacer un diseño web adaptable o adaptable design y lograr que tu página web se adapte a cualquier dispositivo, así sea móvil, pc, etcétera Técnicas y prácticas para hacer tu web responsive.
El
diseño web acomodable o adaptable designes un conceptoque lleva ya unos años, el cual se ha venido aplicado con el propósito de lograr una adecuada funcionalidad de las interfaces en cualquier dispositivo, ya sea un computador de escritorio, un móvil, un tablet, etc.
Ayuda a resolver los problemas asociados con las distintas resoluciones y la pluralidad de dispositivos que se utilizan actualmente para desplegar páginas web.
Índice de contenidos
¿Qué es el diseño responsive?
Resumiendo, se trata de diseñar una página web para múltiples resoluciones de pantalla.
Entendemos como sitios 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 optimada de dicha web, sin tener la necesidad de descargar o bien instalar alguna aplicación.
No todos y cada uno de los móviles tienen exactamente la misma resolución y tamaño de pantalla. Tampoco es igual que la página web se reproduzca en un sistema operativo u otro.
Habrá que adaptarla a fin de que funcione a la perfección en iOS y Android. Así que en el momento de encarar la, hay que pensar en todos .
Entre las ventajas más esenciales, se debe resaltar que trabajando adecuadamente un único código fuente, se pueden englobar las diferentes resoluciones de pantallas. Con ello el sitio estará preparado para poder ser navegable en cualquier dispositivo.
Cuando se comienza un nuevo proyecto de desarrollo, el diseño del sitio debe planearse para adecuarse a todos y cada uno de los tipos dispositivos de uso común, desde teléfonos pequeños a grandes pantallas planas.
Puede que al principio este término suene como algo difícil de aplicar, pero en la práctica resulta bastante sencillo, es suficiente con proseguir ciertas reglas básicas para permitir que nuestro diseño sea acomodable al.
Saber para quién diseñas
Si buscas que tus diseños funcionen
perfectamenteen cada uno de los dispositivos que existen, es muy probable que no lo logres.
En cambio, si conoces realmente bien laque 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 lugar utilizarán con mayor frecuencia.
El lugar geográfico de donde proceden la mayoría de los usuarios también importa. Por servirnos de un ejemplo, si el sitio es visitado desde Asia o bien el Oriente Medio,será la plataforma que sea empleada con más frecuencia, ya que Nokia continúa siendo líder en esa área.
Por otro lado, si se trata de un lugar de finanzas, es muy probable que el público al que apunta el lugar tenga iPads, iPhones y Blackberries, y deberás aplicar este tipo de argumento y análisis de patrones de consumo de lapara cada uno de los sitios que diseñes.
Ya que los browsers Mobile Safari (Apple) Nokia, el Chrome para Android y BlackBerry usan, hay algunos parámetros básicos que facilitan el logro de una consistencia entre la visualización en estas plataformas, si bien siempre y en toda circunstancia habrá variaciones entre los.
Lo más importante es optimar nuestros diseños para las plataformas de los browsers y dispositivos en los que estimamos que éstos serán visualizados más comúnmente, de acuerdo al tipo y localización de lade cada sitio.
Actualmente, debido a la gran cantidad de resoluciones diferentes que existe, resulta prácticamente 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 basándonos en
rangos de resolución.
Hay que parar de pensar en resoluciones y comenzar a pensar más en la experiencia de usuario en sí de cada género de dispositivo (móviles, tablets, pcs, ebooks..)
Técnicas para hacer un diseño responsive
Para ayudarle a comenzar a trabajar rápidamente con esta clase de diseño, en este artículo enlistaremos los primordiales conceptos a considerar para efectuar la lógica básica del diseño adaptable.
Si tienes conocimiento previo de, el aprendizaje de estos conceptos no se te dificultará.
La mayoría de los navegadores usados en, escalan las páginasen base a un ancho fijo el cual las ajusta a fin de que quepan en la pantalla que las despliega.
Para modificar esto y restablecer el valor que tomará, podemos hacer empleo del
metatag viewport, el que indica al navegador que ancho debe tomar y deshabilita la escala inicial.
Este metatag debe ser incluido en la etiqueta “head” y ha de ser representado de la próxima manera:
Con el código que mostramos en el ejemplo, estaríamos usando la anchura del dispositivo donde visualizamos la página para establecerlo como el nuevo viewport de nuestro sitio.
Losson propiedades de, las que básicamente nos dan la capacidad de añadir condiciones a nuestra hoja de estilo, permitiéndonos usar una serie de layouts para desplegar de distintas formas un mismo contenido, el que se irá amoldando al dispositivo que lo despliegue.
Para ver el potencial de media queries, esta web vale más que mil palabras:
El truco está en preveer la manera en que nuestro lugar se desplegará en diferentes dispositivos y tamaños de ventana, para esto debemos usar una
estructuraresponsive, que sea flexible y fácil de amoldar a diferentes ambientes, para que después de esto, baste con agregar las condiciones precisas a la hoja de estilo, las que dejen el uso de diferentes layouts.
Por ejemplo, si quisiéramos aplicar unexclusivo para dispositivos que funcionen con un ancho de ventana menor a novecientos ochenta píxeles, bastaría con emplear el siguiente conjunto de reglas:
Como se puede estimar, empleamos porcentajes para establecer el ancho de cada elemento del layout, esto hace que los contenedores sean más fluidos y amoldables, 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 unpodríamos hacer esto:
En esta instrucción quitamos la barra lateral para que no ocupe espacio, asignamos un ancho automático al div de contenido y hacemos que el encabezado de nuestro lugar tenga una altura amoldable.
Así como en este par de ejemplos, puedes emplear todos y cada uno de los media query que desees, así lograrás aplicar diferentes reglasy vertebrar diseños diferentes ciertos por el ancho de ventana.
Debes tener muy presente que los media queries pueden estar en la misma hoja de estilo o en un fichero separado, todo dependerá de la forma en que tú desees organizarte.
Uso de Max-Width y Min-Width
Estas dosjuegan un papel muy relevante en el
diseño multiplataforma, gracias a ellas podemos concebir distintas estructuras.
Estas propiedades nos dejan establecer la mínima y máxima anchura que puede percibir un factor, esto es importante de fijar cuando se manejan porcentajes como valor de las propiedades, así establecemos un limite de ampliación.
Si por servirnos de un ejemplo quisiéramos un contenedor que ocupe el 90 por ciento de la pantalla, pero que en casos donde la ventana sea muy grande su tamaño no exceda de 1024 píxeles, tendríamos que establecer un código como el siguiente:
De esta forma el contenedor se desplegará a lo ancho del noventa por ciento de la pantalla en todos los dispositivos donde esta medida no pase de 1024px, en caso de desplegar exactamente la misma página en un dispositivo más grande el div contenedor no sobrepasará la medida que especificamos.
Esta propiedad también se puede aplicar a imágenes, si necesitamos que una imagen se ajuste a las dimensiones del contenedor, podemos hacer algo como esto:
Uso de medidas relativas
Finalmente debes tener siempre y en toda circunstancia en consideración que lassiempre serán mejores que las absolutas al realizar diseños amoldables.
El uso de porcentajes como valor de las propiedades hace que resulte más sencillo amoldar elementos a diferentes entornos, es por ello que
se recomienda emplearlos para márgenes, tamaños de fuente y padding.
Con el uso de valores relativos el espacio que se despliega en los elementos puede ser heredado, así no es preciso utilizar medidas diferentes para buscar uniformidad, puesto que el resto de los elementos tomará como base el porcentaje detallado en el factor padre.
De igual forma, permite crear, 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 reduciendo 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 absolutamente responsive, sería diseñar una estructura capaz de superar el cambio de tamaño y que le resulte constante la alteración del texto.
Si el, 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 empleadas como valores de este atributo.
Píxeles (px)
Los píxeles es lo más cercano que encontraremos a un
tamaño fijo, usualmente se estima 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 presupuesto tienda online granada píxeles la medida más precisa para establecer una valor de tamaño de fuente.
Esta característica de “precisión”, hace que la medida tenga ventajas y desventajas.
- La primordial 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 reduzca basándonos en alguna variación en el tamaño del espacio visual, lo que provoca que else vea muy pequeño en monitores con resolución altísima, o bien muy grande en pantallas pequeñas.
Puntos (pt)
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 setenta y dos puntos.
Cuando se emplea esta medida en, varia mucho su presentación, en tanto 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 cefaleas que soluciones. Es por esta razón, que estas unidades no son nada recomendadas para llevar a cabo un diseño acomodable.
Dentro de esta categoría también encontramos otras unidades como “cm” (centímetros), “mm” (milímetros), “in” (pulgadas) y “pc” (picas).
Ems (em)
Una medidad más adecuada para la funcionalidad que estamos buscando, son los ems. Los ems son una
medida escalable, esto causa que sean ideales para lograr un diseño adaptable.
Un em es relativo al tamaño de la fuente que establecimos en el factor contenedor o padre del texto.
En caso de no haber establecido ningún tamaño, entonces el em toma el valor estándar de uno píxeles, medida que es usada por los navegadores para establecer el tamaño por defecto de las letras.
La desventaja de usar ems en nuestro diseño, es que su aplicación respeta el orden jerárquico, con lo que si tenemos un código algo completo, frecuentemente resulta difícil de calcular.
Porcentajes ( por ciento )
Los porcentajes son muy similares a los ems, sirven para asignar
valores escalablesy también asignan el valor en forma de cascada, por lo que su valor es relativo al valor del padre más próximo.
Si utilizamos un valor de 100 por ciento estamos señalando que deseamos 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 ciento , con lo que si tienes un tamaño de 1.5em el valor en porcentaje sería 150 por cien y así sucesivamente.
Prueba tus sitios con emuladores
Existe un sinnúmero de herramientas a fin de que los diseñadores puedan testar sus diseños, las cuales ofrecen una reproducción fiel de la experiencia de los usuarios que visitan la página web usando diferentes plataformas.
Por un lado están los programas y consultor seo en murcia que ofrecen la posibilidad de probar el sitio que diseñamos de exactamente la misma manera en que se verá un determinado dispositivo, por poner un ejemplo Android (Android SDK) o Symbian.
Este tipo de programas se encuentran en general a disposición en las webs de los fabricantes de cada dispositivo. He aquí algunos de los más útiles:
Por otra parte, existen herramientas más complejas capaces de simular las experiencias de usuario en una variedad de plataformas.es una de las más populares, en tanto 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.
Consejos a la hora de efectuar un diseño web responsive
Usabilidad: Es esencial que la página web sea fácil de utilizar desde cualquier teléfono. Cuando se diseña una página para móvil hay que pensar en lo esencial. Se debe ser sucinto y concreto.
Ahorro de tiempo: El usuario debe resolver pronto sus búsquedas, necesidades o bien dudas. Cuanto menos tiempo tarde, mejor. Por servirnos de un ejemplo, si deseamos vender un producto por la red, hay que eludir cuestionarios y demás. Que la persona que desee, pueda adquirir su compra en un ‘tap’ o bien dos. Además, no se deben incluir formularios pesados. Es mejor resolverlo con casillas que puedan ir marcando tu camino.
Layout: Debes meditar en que el desarrollo de tu página web es para móviles también. Para el ordenador se acostumbran a emplear una rejilla de entre uno y uno columnas. campañas publicitarias en google ño de una página para móvil, esto se amolda y se transforma en un layout con una o un máximo de 3 columnas. Eso se debe amoldar al móvil inteligente y a su anchura.
Imágenes: Se deben adaptar al tamaño del móvil que corresponda. Prescindir de todas y cada una aquellas que no sean esenciales. No es recomendado usar fotografías para decorar en una versión web de móvil. No debes desaprovechar espacio, ni ancho de banda. El empleo de svgs puede solucionar el problema de las diferentes resoluciones para imágenes, en tanto que siendo ficheros vectoriales puedes ampliarlos y reducirlos a tu antojo sin perder calidad.
El manejo se realiza con los dedos: No hay un ratón como en el computador. La pantalla es táctil y en lugar de hacer un clik, hacemos un ‘tap’. Por este motivo, ten en cuenta que los espacios para realizar ese ‘tap’ han de ser mayores, para que el dedo pueda pulsarlos sin inconvenientes. Los botones o enlaces necesitarán un tamaño más grande.
No incluir scroll horizontal:Son muy incómodos en la navegación con el móvil. En cambio, el scroll vertical es de lo más frecuente y resulta muy cómodo de hacer. Así que lo mejor es apilar los elementos verticalmente y eludir scrolls horizontales.
Ventajas e inconvenientes del adaptable design
En el diseño web adaptable hallamos una serie de
ventajascomo:
- Aumenta la visibilidad de la web entre usuarios de smartphone y otros dispositivos digitales. Vamos a tener un alcance mayor y eso nos reportará beneficio.
- En caso de tener un negocio, servirá a fin de que las ventas medren. Una mayor visibilidad por parte de los clientes del servicio, nos hará llegar a más sitios.
Mejorará la visibilidad de tu weben los motores de búsqueda. No duplicarás contenido. Tus esfuerzos se centrarán en un único sitio, con lo que con una campaña, tendrás una estrategia común para todos y cada uno de los dispositivos en los que se reproduzca tu página web.
Respecto a los
inconvenientesdestacamos uno:
- El primordial problema es el
mayor tiempo de desarrolloque implica hacer una web adaptable. No es suficiente con que se vea bien en desktop, consume mucho tiempo desarrollarla adecuadamente para las diferentes resoluciones, si bien el ahínco merece la pena.
)