Cómo hacer un diseño web amoldable (reponsive design) |
por· Actualizado
Resumen: Guía y consejos para hacer un diseño web acomodable o bien responsive design y lograr que tu web se adapte a cualquier dispositivo, ya sea móvil, pc, etcétera Técnicas y prácticas para hacer tu página web adaptable.
El
diseño web adaptable o responsive designes un conceptoque lleva ya unos años, el que se ha venido aplicado con el propósito de lograr una adecuada funcionalidad de las interfaces en cualquier dispositivo, así sea un PC de escritorio, un móvil, un tablet, etc.
Ayuda a resolver los inconvenientes asociados con las distintas resoluciones y la variedad de dispositivos que se emplean hoy en día para desplegar páginas web.
Índice de contenidos
Resumiendo, se trata de diseñar una página web para varias resoluciones de pantalla.
Entendemos como sitios adaptable, 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 los móviles tienen la misma resolución y tamaño de pantalla. Tampoco es igual que la página web se reproduzca en un sistema operativo o bien otro.
Habrá que adaptarla para que funcione a la perfección en iOS y Android. Así que en el momento de enfrentar la, hay que meditar en todos .
Entre las ventajas más importantes, se debe destacar que trabajando apropiadamente un único código fuente, se pueden abarcar las distintas resoluciones de pantallas. Con ello el sitio web estará preparado para poder ser navegable en cualquier dispositivo.
Cuando se comienza un nuevo proyecto de desarrollo, el diseño del sitio web 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 llanas.
Puede que al comienzo este término suene como algo difícil de aplicar, mas en la práctica resulta bastante sencillo, es suficiente con continuar ciertas reglas básicas para permitir que nuestro diseño sea acomodable al.
Si buscas que tus diseños funcionen
perfectamenteen cada uno de los dispositivos que existen, es muy probable que no lo consigas.
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 sitio utilizarán con una mayor frecuencia.
El lugar geográfico de donde proceden la mayoría de los usuarios también importa. Por poner un ejemplo, si el lugar es visitado desde Asia o el Oriente Medio,será la plataforma que sea usada 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 lugar 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 ellos de los sitios que diseñes.
Ya que los browsers Mobile Safari (Apple) Nokia, el Chrome para Android y BlackBerry emplean, 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á variantes entre los.
Lo más esencial es diseño de paginas web con base de datos ños para las plataformas de los browsers y dispositivos en los cuales 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 y cada una, 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.
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..)
Para ayudarle a empezar a trabajar rápidamente con este tipo de diseño, en este artículo enlistaremos los primordiales conceptos a estimar para efectuar 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 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 que indica al navegador que ancho debe tomar y deshabilita la escala inicial.
Este metatag ha de ser incluido dentro de la etiqueta “head” y ha de ser representado de la siguiente manera:
Con el código que mostramos en el ejemplo, estaríamos utilizando la anchura del dispositivo donde visualizamos la página para establecerlo como el nuevo viewport de nuestro sitio.
Losson propiedades de, las cuales básicamente nos dan la capacidad de agregar condiciones a nuestra hoja de estilo, permitiéndonos emplear 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 distintos dispositivos y tamaños de ventana, para ello debemos utilizar una
estructuraresponsive, que sea flexible y fácil de adaptar a distintos entornos, a fin de que después de esto, baste con añadir las condiciones necesarias a la hoja de estilo, las cuales permitan el uso de distintos 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 usar el próximo conjunto de reglas:
Como se puede querer, utilizamos porcentajes para establecer el ancho de cada elemento del layout, esto causa que los contenedores sean más fluidos y acomodables, 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 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 acomodable.
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 determinados por el ancho de ventana.
Debes tener 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.
Estas dosjuegan un papel muy relevante en el
diseño multiplataforma, gracias a ellas podemos idear 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 forma establecemos un limite de ampliación.
Si por poner un ejemplo quisiéramos un contenedor que ocupe el 90 por ciento 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 forma 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 el caso de desplegar la misma página en un dispositivo más grande el div contenedor no sobrepasará la medida que detallamos.
Esta propiedad también se puede aplicar a imágenes, si precisamos que una imagen se ajuste a las dimensiones del contenedor, podemos hacer algo como esto:
Finalmente debes tener siempre en consideración que lassiempre serán mejores que las absolutas al efectuar diseños adaptables.
El uso de porcentajes como valor de las propiedades hace que resulte más sencillo adaptar elementos a diferentes ambientes, es por este motivo que
se aconseja utilizarlos 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 usar medidas diferentes para buscar uniformidad, puesto que el resto de los elementos tomará como base el porcentaje especificado en el factor padre.
De igual forma, deja 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 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.
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 diferentes tamaños de letras y composiciones, entonces es preciso 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.
Los píxeles es lo más próximo que encontraremos a un
tamaño fijo, usualmente se estima que un píxel equivale a un punto de la pantalla del dispositivo usado para navegar, pero 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.
Los puntos o points, son otra unidad de medida para establecer el tamaño de una fuente. Estos en general se utilizan para la
impresión en papel, y fundamentan su tamaño en las pulgadas. Cada pulgada equivale a setenta y dos puntos.
Cuando se usa esta medida en, varia mucho su presentación, puesto que depende del navegador y de la pantalla donde se esté observando.
Los puntos son buenos al instante 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 realizar un diseño adaptable.
Dentro de esta categoría también encontramos otras unidades como “cm” (centímetros), “mm” (milímetros), “in” (pulgadas) y “pc” (picas).
Una medidad más adecuada para la funcionalidad que estamos buscando, son los ems. Los ems son una
medida escalable, esto hace que sean ideales para lograr un diseño amoldable.
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 utilizada 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, con lo que si tenemos un código algo completo, habitualmente resulta difícil de calcular.
Los porcentajes son muy similares a los ems, sirven para asignar
valores escalablesy también asignan el valor en forma de cascada, con lo que su valor es relativo al valor del padre más próximo.
Si empleamos un valor de cien por cien estamos indicando que queremos el tamaño de fuente estándar.
Si tienes tus valores en ems y los quieres pasar a porcentajes, entonces ten en consideración que 1em es equivalente a cien por cien , por lo que si tienes un tamaño de 1.5em el valor en porcentaje sería 150 por cien y así consecutivamente.
Existe un sinnúmero de herramientas a fin de que los diseñadores puedan probar sus diseños, las que ofrecen una reproducción fidedigna de la experiencia de los usuarios que visitan la web utilizando diferentes plataformas.
Por un lado están los programas y complementos que ofrecen la posibilidad de experimentar el sitio que diseñamos de igual manera en que se verá un determinado dispositivo, por ejemplo Android (Android SDK) o bien Symbian.
Este género 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 probar 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.
En el diseño web responsive encontramos una serie de
ventajascomo:
Respecto a los
inconvenientesdestacamos uno:
| Êîììåíòèðîâàòü | « Ïðåä. çàïèñü — Ê äíåâíèêó — Ñëåä. çàïèñü » | Ñòðàíèöû: [1] [Íîâûå] |
