Cómo hacer un diseño web acomodable (reponsive design) |
Posted: May 31, 2020 |
por· Actualizado Resumen: Guía y consejos para hacer un diseño web adaptable o adaptable 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 responsive. El Ayuda a resolver los inconvenientes asociados con las diferentes resoluciones y la variedad de dispositivos que se emplean 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 varias resoluciones de pantalla. Entendemos como sitios web responsive, aquellos que están No todos y cada uno de 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 enfrentar 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 estará preparado para poder ser navegable en cualquier dispositivo. Cuando se inicia 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 empleo común, desde teléfonos pequeños a grandes pantallas llanas. Puede que al principio este concepto suene como algo difícil de aplicar, mas en la práctica resulta bastante fácil, es suficiente con proseguir ciertas reglas básicas para permitir que nuestro diseño sea acomodable al. Saber para quién diseñasSi buscas que tus diseños funcionen 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 mayor frecuencia. El lugar geográfico de donde provienen la mayoría de los usuarios también importa. Por servirnos de un ejemplo, si el lugar es visitado desde Asia o bien el Oriente Medio,será la plataforma que sea empleada 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 posible que el público al que apunta el lugar tenga iPads, iPhones y Blackberries, y deberás aplicar este género de razonamiento 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 emplean, hay determinados parámetros básicos que facilitan el logro de una consistencia entre la visualización en estas plataformas, si bien siempre habrá variaciones entre los. Lo más importante es optimar 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 enorme 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 Hay que dejar de pensar en resoluciones y comenzar a meditar 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 responsivePara ayudarle a empezar a trabajar rápidamente con esta clase de diseño, en este artículo enlistaremos los principales conceptos a estimar para realizar la lógica básica del diseño acomodable. Si tienes conocimiento previo de, el aprendizaje de estos conceptos no se te dificultará. La mayoría de los navegadores empleados 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 alterar esto y restablecer el valor que tomará, podemos hacer empleo del Este metatag ha de ser incluido dentro de 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 lugar. Losson propiedades de, las que básicamente nos dan la capacidad de añadir condiciones a nuestra hoja de estilo, permitiéndonos utilizar una serie de layouts para desplegar de diferentes formas un mismo contenido, el cual 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 forma en que nuestro lugar se desplegará en distintos dispositivos y tamaños de ventana, para ello debemos usar una 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 próximo conjunto de reglas: Como se puede estimar, utilizamos 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 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 acomodable. Así como en este par de ejemplos, puedes utilizar todos los media query que desees, así lograrás aplicar diferentes reglasy articular 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 bien en un fichero separado, todo dependerá de la manera en que tú desees organizarte. Uso de Max-Width y Min-WidthEstas dosjuegan un papel muy relevante en el 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 servirnos de un ejemplo quisiéramos un contenedor que ocupe el 90 por cien de la pantalla, pero que en casos donde la ventana sea muy grande su tamaño no sobrepase de 1024 píxeles, tendríamos que establecer un código como el siguiente: De esta manera el contenedor se desplegará a lo ancho del noventa por cien de la pantalla en todos y cada uno de 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 relativasFinalmente debes tener siempre y en toda circunstancia en consideración que lassiempre serán mejores que las absolutas al realizar diseños acomodables. El empleo de porcentajes como valor de las propiedades hace que resulte más sencillo adaptar elementos a diferentes ambientes, es por ello que Con el empleo de valores relativos el espacio que se despliega en los elementos puede ser heredado, así no resulta necesario utilizar medidas distintas para buscar uniformidad, puesto que el resto de los elementos tomará como base el porcentaje detallado en el elemento 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 responsiveLo ideal para 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 usadas como valores de este atributo. Píxeles (px)Los píxeles es lo más cercano que encontraremos a un 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.
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 Cuando se utiliza esta medida en, varia mucho su presentación, ya 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 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 conveniente para la funcionalidad que buscamos, son los ems. Los ems son una Un em es relativo al tamaño de la fuente que establecimos en el factor 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 1. 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, con lo que si tenemos un código algo completo, habitualmente resulta difícil de calcular. Porcentajes ( por cien )Los porcentajes son muy afines a los ems, sirven para asignar Si utilizamos 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 deseas pasar a porcentajes, entonces ten en consideración que 1em es equivalente a 100 por cien , con lo que si tienes un tamaño de 1.5em el valor en porcentaje sería 150 por cien y así consecutivamente. Prueba tus sitios con emuladoresExiste un sinnúmero de herramientas para 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 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 manera en que se verá un determinado dispositivo, por ejemplo Android (Android SDK) o bien Symbian. Este género de programas se encuentran generalmente a disposición en las webs de los fabricantes de cada dispositivo. He aquí ciertos más útiles: Por otra parte, existen herramientas más complejas capaces de simular las experiencias de usuario en una pluralidad de plataformas.es una de las más populares, en tanto que deja testear nuestros diseños webs en más de 2.000 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 crucial. Consejos a la hora de efectuar un diseño web responsive
Ventajas y también inconvenientes del adaptable designEn el diseño web responsive hallamos una serie de
Respecto a los
|
||||||||||||||||
|