Cómo hacer un diseño web acomodable (reponsive design)
por· Actualizado
15 marzo, 2018
Resumen: Guía y consejos para hacer un diseño web amoldable o bien responsive design y conseguir que tu página web se adapte a cualquier dispositivo, ya sea móvil, pc, etc. Técnicas y prácticas para hacer tu página web adaptable.
El
diseño web amoldable o responsive designes un conceptoque lleva ya unos años, el que se ha venido aplicado con el objetivo de alcanzar una correcta funcionalidad de las interfaces en cualquier dispositivo, ya sea un PC de escritorio, un móvil, un tablet, etc.
Ayuda a solucionar los problemas asociados con las diferentes resoluciones y la variedad de dispositivos que se utilizan actualmente para desplegar páginas web.
Índice de contenidos
¿Qué es el diseño responsive?
Resumiendo, agencia de marketing ourense de diseñar una página web para varias 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. Esto es, 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 en el momento de encarar la, hay que pensar en todos .
Entre los beneficios más importantes, se debe destacar que trabajando apropiadamente un único código fuente, se pueden abarcar las diferentes resoluciones de pantallas. Con ello el sitio web estará dispuesto para poder ser navegable en cualquier dispositivo.
Cuando se inicia un nuevo proyecto de desarrollo, el diseño del sitio debe planearse para adecuarse a todos y cada uno de los tipos dispositivos de empleo común, desde teléfonos pequeños a grandes pantallas lisas.
Puede que al principio este término suene como algo difícil de aplicar, mas en la práctica resulta bastante sencillo, basta con continuar ciertas reglas básicas para permitir que nuestro diseño sea adaptable 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 muy 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 una mayor frecuencia.
El lugar geográfico de donde proceden la mayoría de los usuarios también importa. Por ejemplo, si el lugar es visitado desde Asia o el Oriente Medio,será la plataforma que sea utilizada con más frecuencia, en tanto 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 sitio tenga iPads, iPhones y Blackberries, y deberás aplicar esta clase 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 Google 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, aunque siempre y en todo momento habrá variaciones entre los.
Lo más importante es optimizar nuestros diseños para las plataformas de los browsers y dispositivos en los cuales estimamos que éstos serán visualizados más comúnmente, conforme al tipo y localización de lade cada sitio.
Actualmente, debido a la gran cantidad de resoluciones diferentes que existe, resulta casi imposible hacer un diseño para todas, o bien peo raún un diseño para cada una… la idea es hacer un diseño capaz de amoldarse a cualquier dispositivo basándonos en
rangos de resolución.
Hay que dejar de pensar en resoluciones y comenzar a pensar más en la experiencia de usuario en sí de cada tipo de dispositivo (móviles, tablets, pcs, ebooks..)
Técnicas para hacer un diseño responsive
Para asistirle a empezar a trabajar rápidamente con este género de diseño, en este artículo enlistaremos los principales conceptos a considerar para realizar la lógica básica del diseño acomodable.
Si tienes conocimiento anterior de, el aprendizaje de estos conceptos no se te dificultará.
La mayoría de los navegadores utilizados en, escalan las páginasen base a un ancho fijo el que las ajusta para que quepan en la pantalla que las despliega.
Para alterar esto y restablecer el valor que tomará, podemos hacer empleo del
metatag viewport, el cual indica al navegador que ancho debe tomar y deshabilita la escala inicial.
Este metatag debe ser incluido en la etiqueta “head” y debe ser representado de la siguiente 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 agregar condiciones a nuestra hoja de estilo, permitiéndonos usar una serie de layouts para desplegar de diferentes formas un mismo contenido, el que se irá adaptando al dispositivo que lo despliegue.
Para ver el potencial de media queries, esta web vale más que mil palabras:
El truco está en prever la manera en que nuestro sitio se desplegará en diferentes dispositivos y tamaños de ventana, para esto debemos utilizar una
estructuraresponsive, que sea flexible y fácil de amoldar a distintos ambientes, a fin de que después de esto, baste con agregar las condiciones precisas a la hoja de estilo, las cuales dejen el uso de diferentes layouts.
Por ejemplo, si quisiéramos aplicar unexclusivo 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, usamos porcentajes para establecer el ancho de cada elemento del layout, esto causa 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 efectuar lo mismo para el ancho de unpodríamos hacer esto:
En esta instrucción quitamos la barra lateral a fin de que no ocupe espacio, asignamos un ancho automático al div de contenido y hacemos que el encabezado de nuestro sitio tenga una altura adaptable.
Así como en este par de ejemplos, puedes utilizar 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 exactamente 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 elemento, esto es importante de fijar cuando se manejan porcentajes como valor de las propiedades, de esta manera establecemos un limite de ampliación.
Si por poner un ejemplo quisiéramos un contenedor que ocupe el noventa por cien de la pantalla, mas que en casos donde la ventana sea muy grande su tamaño no exceda de mil veinticuatro píxeles, tendríamos que establecer un código como el siguiente:
De esta manera el contenedor se desplegará a lo ancho del 90 por cien de la pantalla en todos los dispositivos donde esta medida no pase de 1024px, en caso de desplegar 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 empleo de porcentajes como valor de las propiedades hace que resulte más sencillo amoldar elementos a diferentes ambientes, es por esta razón que
se recomienda usarlos para márgenes, tamaños de fuente y padding.
Con el empleo de valores relativos el espacio que se despliega en los elementos puede ser heredado, así no resulta necesario emplear medidas diferentes para buscar uniformidad, puesto que el resto de los elementos tomará como base el porcentaje concretado en el elemento padre.
De igual manera, deja crear, como en el caso de los paddings.
Cuando empleamos un padding con valor absoluto, si hacemos más pequeña nuestra ventana y el contenedor va disminuyendo su tamaño, al final vamos a ver 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 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 utilizadas como valores de este atributo.
Píxeles (px)
Los píxeles es lo más próximo que encontraremos a un
tamaño fijo, generalmente se estima que un píxel equivale a un punto de la pantalla del dispositivo utilizado para navegar, mas realmente 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 preciso que con otras unidades.
- Sin embargo, esto hace que el tamaño no aumente o bien disminuya basándonos en alguna variación en el tamaño del espacio visual, lo que hace 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 emplean 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 ocasionar más dolores de cabeza que soluciones. Es por esta razón, que estas unidades no son nada recomendadas para hacer un diseño adaptable.
Dentro de esta misma 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 buscamos, son los ems. Los ems son una
medida escalable, esto causa que sean ideales para conseguir un diseño acomodable.
Un em es relativo al tamaño de la fuente que establecimos en el elemento contenedor o bien 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, con cierta frecuencia resulta difícil de calcular.
Porcentajes ( por ciento )
Los porcentajes son muy afines a los ems, sirven para asignar
valores escalablesy también asignan el valor en forma de catarata, por lo que su valor es relativo al valor del padre más próximo.
Si empleamos un valor de 100 por cien estamos indicando 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 cien por ciento , con lo que si tienes un tamaño de 1.5em el valor en porcentaje sería ciento cincuenta por ciento y así consecutivamente.
Prueba tus sitios con emuladores
Existe un sinnúmero de herramientas a fin de que los diseñadores puedan probar sus diseños, las cuales ofrecen una reproducción fidedigna de la experiencia de los usuarios que visitan la página web utilizando diferentes plataformas.
Por un lado están los programas y complementos que ofrecen la posibilidad de probar el sitio que diseñamos de igual modo en que se verá un determinado dispositivo, por ejemplo Android (Android SDK) o bien Symbian.
Este tipo de programas se hallan por norma 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 en el momento de efectuar un diseño web responsive
Usabilidad: Es esencial que la web sea fácil de emplear desde cualquier teléfono. Cuando se diseña una página para móvil hay que pensar en lo esencial. Se ha de ser brev y específico.
Ahorro de tiempo: El usuario debe solucionar pronto sus búsquedas, necesidades o dudas. Cuanto menos tiempo tarde, mejor. Por ejemplo, si queremos vender un producto por internet, hay que eludir cuestionarios y demás. Que la persona que desee, pueda adquirir su compra en un ‘tap’ o 2. Además, no se deben incluir formularios pesados. Es mejor resolverlo con casillas que puedan ir marcando tu camino.
Layout: Tienes que meditar en que el desarrollo de tu página web es para móviles también. Para el PC se suelen emplear una rejilla de entre 1. y uno columnas. En el diseño de una página para móvil, esto se adapta y se transforma en un layout con una o un máximo de 3 columnas. Eso se debe adaptar al móvil y a su anchura.
Imágenes: Se deben adaptar al tamaño del móvil que corresponda. Prescindir de todas aquellas que no sean esenciales. No es recomendado utilizar fotos para decorar en una versión web de móvil. No debes desperdiciar espacio, ni ancho de banda. El uso de svgs puede solucionar el problema de las diferentes resoluciones para imágenes, ya que al ser archivos vectoriales puedes ampliarlos y reducirlos a tu antojo sin perder calidad.
El manejo se efectúa con los dedos: No hay un ratón como en el PC. La pantalla es táctil y en vez de hacer un clik, hacemos un ‘tap’. Por este motivo, ten presente que los espacios para realizar ese ‘tap’ deben ser mayores, para que el dedo pueda pulsarlos sin problemas. Los botones o links 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 evitar scrolls horizontales.
Ventajas y también inconvenientes del adaptable design
En el diseño web adaptable encontramos una serie de
ventajascomo:
- Aumenta la visibilidad de la página web entre usuarios de smartphone y otros dispositivos digitales. Tendremos un alcance mayor y eso nos reportará beneficio.
- En caso de tener un negocio, servirá a fin de que las ventas medren. maquetacion de web madrid los clientes, 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 lugar, por 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 principal inconveniente es el
mayor tiempo de desarrolloque implica hacer una web responsive. No basta con que se vea bien en desktop, consume un buen tiempo desarrollarla apropiadamente para las distintas resoluciones, aunque el ahínco vale la pena.
)