Cómo hacer un diseño web adaptable (reponsive design) |
por· Actualizado
Resumen: Guía y consejos para hacer un diseño web acomodable o responsive design y lograr que tu 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 bien responsive designes un conceptoque lleva ya unos años, el que se ha venido aplicado con la finalidad de lograr una correcta 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 pluralidad de dispositivos que se emplean en nuestros días para desplegar páginas web.
Índice de contenidos
Resumiendo, se trata de diseñar una página web para múltiples resoluciones de pantalla.
Entendemos como sitios web 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 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 amoldarla a fin de que funcione a la perfección en iOS y Android. Así que a la hora de encarar la, hay que pensar en todos .
Entre expertos en marketing online más importantes, se debe destacar que trabajando adecuadamente un único código fuente, se pueden englobar las distintas resoluciones de pantallas. Con ello el sitio estará listo para poder ser navegable en cualquier dispositivo.
Cuando se empieza un nuevo proyecto de desarrollo, el diseño del sitio web debe planearse para adecuarse a todos los tipos dispositivos de empleo común, desde teléfonos pequeños a grandes pantallas lisas.
Puede que al principio este concepto 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 adaptable al.
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 página 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 sitio 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 usada con más frecuencia, puesto que Nokia continúa siendo líder en esa área.
Por otro lado, si se trata de un sitio 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 razonamiento 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 Google 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 habrá variantes 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, de acuerdo al tipo y localización de lade cada sitio.
Actualmente, debido a la enorme cantidad de resoluciones diferentes que existe, resulta prácticamente imposible hacer un diseño para todas y cada una, o bien 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 empezar a pensar más en la experiencia de usuario en sí de cada género de dispositivo (móviles, tablets, pcs, ebooks..)
Para asistirle a comenzar a trabajar rápidamente con esta clase de diseño, en este artículo enlistaremos los primordiales conceptos a considerar para realizar la lógica básica del diseño amoldable.
Si tienes conocimiento previo 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 modificar esto y restablecer el valor que tomará, podemos hacer uso del
metatag viewport, el cual señala al navegador que ancho debe tomar y deshabilita la escala inicial.
Este metatag debe ser incluido dentro de la etiqueta “head” y debe 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 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 preveer la forma en que nuestro lugar se desplegará en distintos dispositivos y tamaños de ventana, para esto debemos usar una
estructuraresponsive, que sea flexible y fácil de amoldar a diferentes entornos, para que después de esto, baste con añadir las condiciones necesarias a la hoja de estilo, las que dejen el empleo 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 usar el siguiente conjunto de reglas:
Como se puede apreciar, usamos porcentajes para establecer el ancho de cada elemento del layout, esto hace 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 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 utilizar todos los media query que desees, así lograrás aplicar diferentes reglasy vertebrar diseños diferentes ciertos por el ancho de ventana.
Debes tener presente que los media queries pueden estar en exactamente la misma hoja de estilo o bien en un fichero separado, todo dependerá de la manera en que tú desees organizarte.
Estas dosjuegan un papel muy relevante en el
diseño multiplataforma, gracias a ellas podemos concebir diferentes estructuras.
Estas propiedades nos permiten establecer la mínima y máxima anchura que puede percibir un elemento, esto es esencial de fijar cuando se manejan porcentajes como valor de las propiedades, así establecemos un limite de ampliación.
Si por poner 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 y cada uno de 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 detallamos.
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:
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 ambientes, es por ello que
se aconseja usarlos 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 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.
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 psique 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 cercano que encontraremos a un
tamaño fijo, generalmente se cree que un píxel equivale a un punto de la pantalla del dispositivo usado 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 precisa 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 normalmente 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 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 instante 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 realizar 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).
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 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 utilizada por los navegadores para establecer el tamaño por defecto de las letras.
La desventaja de emplear 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, por lo que su valor es relativo al valor del padre más cercano.
Si usamos un valor de 100 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 100 por ciento , por lo que si tienes un tamaño de 1.5em el valor en porcentaje sería 150 por cien y así sucesivamente.
Existe una gran cantidad 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 página web utilizando diferentes plataformas.
Por un lado están los programas y plugins que ofrecen la posibilidad de experimentar el sitio que diseñamos de igual modo en que se verá un determinado dispositivo, por servirnos de un ejemplo Android (Android SDK) o Symbian.
Este tipo de programas se encuentran normalmente a disposición en las webs de los fabricantes de cada dispositivo. servicio seo 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 testar nuestros diseños webs en más de dos mil dispositivos diferentes.
Sin un testeo a través de las plataformas más frecuentes, el trabajo de diseño no está completo, y con el tiempo, esta etapa se está volviendo cada vez más vital.
En el diseño web responsive hallamos una serie de
ventajascomo:
Respecto a los
inconvenientesdestacamos uno:
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
