Diseño web adaptable: que es y como usarlo - Consultoria SEO

Buscar

Ruta de Navegación

Post patrocinados

Post patrocinados

 


Diseño Web Adaptable: Qué es y Cómo Usarlo

diseo web adaptableCasi cada nuevo cliente en estos días quiere una versión móvil de su sitio web. Es prácticamente imprescindible, después de todo: un diseño para el BlackBerry, otro para el iPhone, el iPad, netbook, Kindle - y todas las resoluciones de pantalla debe ser compatible, también. En los próximos cinco años, lo más probable es que sea necesario diseñar para una serie de invenciones adicionales. ¿Cuando se va a detener la locura? No lo hará, por supuesto.

En el campo del diseño y desarrollo web, estamos llegando rápidamente al punto de no poder mantenernos al día con las nuevas resoluciones y dispositivos. Para muchos sitios web, la creación de una versión del sitio para cada resolución y nuevo dispositivo será imposible, o al menos poco práctico. ¿Debemos sufrir las consecuencias de la pérdida de los visitantes de un dispositivo, para el beneficio de obtener visitantes de otro? ¿O hay otra opción?

 

El diseño web adaptable es el enfoque que sugiere que el diseño y desarrollo deben responder al comportamiento del usuario y el dispositivo en función del tamaño de la pantalla, la plataforma y la orientación. La práctica consiste en una mezcla de redes flexibles y diseños, imágenes y un uso inteligente de las consultas de medios CSS. A medida que el usuario cambia desde su ordenador portátil para el iPad, el sitio web debe cambiar automáticamente para adaptarse a la resolución, y tamaño de imagen. En otras palabras, el sitio web debe tener la tecnología para responder automáticamente a las preferencias del usuario. Esto eliminaría la necesidad de un diseño diferente y de desarrollo para cada nuevo aparato en el mercado.

El concepto de Diseño Web Responsive.

Diseño web adaptable, originalmente definido por Ethan Marcotte en A List Apart responde a las necesidades de los usuarios y los dispositivos que están usando. Los cambios de diseño en función del tamaño y las capacidades del dispositivo. Por ejemplo, en un teléfono, los usuarios podrían ver el contenido se muestra en una vista única columna; una tableta podría mostrar el mismo contenido en dos columnas.

Trasplantar esta disciplina en el diseño web, ¿Por qué debemos crear un diseño web personalizado para cada grupo de usuarios; después de todo, los arquitectos no diseñan un edificio para cada tamaño y tipo de grupo que pasa a través de él? Al igual que la arquitectura sensible, diseño web se debe ajustar automáticamente. No debe requerir un sin número de soluciones a medida para cada nueva categoría de usuarios.

Obviamente, no podemos utilizar sensores de movimiento y robótica para lograr esto. El diseño web adaptable requiere una forma más abstracta del pensamiento. Sin embargo, ya se están practicando algunas ideas: Los diseños fluidos, consultas de medios y secuencias de comandos que pueden volver a formatear las páginas Web y el margen de ganancia sin esfuerzo (o automáticamente).

Pero el diseño web de respuesta es no sólo sobre las resoluciones de pantalla ajustables e imágenes de tamaño automáticamente, sino más bien de una forma totalmente nueva de pensar en el diseño. Vamos a hablar de todas estas características, además de otras ideas. 

La configuración de la Resolución de la Pantalla  

Cada vez más dispositivos vienen en distintas resoluciones de pantalla, definiciones y orientaciones. Los nuevos dispositivos con nuevos tamaños de pantalla se están desarrollando cada día, y cada uno de estos dispositivos pueden ser capaces de manejar variaciones en el tamaño, la funcionalidad e incluso el color. Algunos están en modo paisaje (horizontal), retrato (vertical), otros en otros más, incluso completamente cuadrados. Como sabemos por la creciente popularidad de los iPhone, iPad y teléfonos inteligentes avanzados, muchos de los nuevos dispositivos son capaces de cambiar de vertical a horizontal según el capricho del usuario. ¿Cómo se puede diseñar para estas situaciones?

orientaciones de la pantalla vertical y horizontal

Además de diseñar tanto horizontal y vertical (y permitir que estas orientaciones cambien en un instante sobre carga de la página), debemos tener en cuenta los cientos de diferentes tamaños de pantalla. Sí, es posible agruparlos en categorías principales, el diseño para cada uno de ellos, y hacer cada diseño tan flexible como sea necesario. Pero eso puede ser abrumador, y quién sabe lo que las cifras de uso estarán en cinco años? Además, muchos usuarios no maximizan sus navegadores, que en sí deja demasiado espacio para la variedad de los tamaños de pantalla.

Morten Hjerde y algunos de sus colegas identificaron las estadísticas de alrededor de 400 dispositivos vendidos entre 2005 y 2008 solamente!. Imaginense la cifra partir del 2008. A continuación se presentan algunos de los más comunes:

 tamaños de dispositivos vendidos

 

Desde entonces incluso más dispositivos han salido. Es obvio que no podemos seguir creando soluciones personalizadas para cada uno. Entonces, ¿cómo podemos hacer frente a la situación?

PARTE DE LA SOLUCIÓN: FLEXIBLE TODO 

Hace algunos años, cuando los diseños flexibles eran casi un "lujo" para los sitios web, y las únicas cosas que eran flexibles en un diseño eran las columnas de diseño (elementos estructurales) y el texto. Las imágenes podían romper fácilmente los diseños, e incluso los elementos estructurales flexibles. Los diseños web flexibles no eran realmente tan flexible; podían ajustarse más o menos unos pocos cientos de píxeles, pero a menudo no podían ajustarse de una gran pantalla de la computadora a un netbook.

Ahora podemos hacer las cosas más flexible. Las imágenes se pueden ajustar de forma automática, y tenemos soluciones para que los diseños nunca se rompen (aunque pueden llegar a ser ilegibles y aplastarse en el proceso). Si bien no es una solución completa, la solución nos da muchas más opciones. Es perfecto para los dispositivos que cambian de orientación vertical a horizontal en un instante o para cuando los usuarios cambian de una gran pantalla de la computadora a un iPad.

 

Imágenes flexibles

Un importante problema que necesita ser resuelto con el diseño web de respuesta está relacionado con las imágenes. Hay una serie de técnicas para cambiar el tamaño de las imágenes proporcionalmente, y muchas se hacen fácilmente. La opción más popular, señala las imágenes de fluidas pero primero es el uso de CSS max-width, una solución fácil.

 img {ancho máximo : 100% ;} 

Para hacer las imágenes también adaptables a los diferentes tamaños de ventana y, por tanto, a las diferentes resoluciones, una buena manera es aplicándoles el siguiente estilo CSS:

1
2
3
4
img {
max-width: 100%;
height: auto;
}

Con esto, la imagen siempre se mostrará con su tamaño original hasta que se encuentre con una ventana pequeña; desde entonces se adaptará siempre al ancho máximo del elemento en el que esté contenida.

Si bien lo anterior es una gran solución rápida y buen inicio de imágenes de respuesta, la resolución de las imágenes y los tiempos de descarga deben ser las consideraciones primordiales. Mientras cambiar el tamaño de una imagen para dispositivos móviles puede ser muy simple, si el tamaño de la imagen original se extiende para los dispositivos de gran extensión, los tiempos de descarga podrían ralentizar significativamente y ocupan espacio innecesariamente.

DETENER SIMULADOR DE IPHONE IMAGE RESIZING 

Una cosa agradable sobre el iPhone y el iPod Touch es que los diseños de Web cambian la escala automáticamente para adaptarse a la pantalla pequeña. Un diseño de tamaño completo, a menos que se especifique lo contrario, simplemente se reduciría proporcionalmente para el pequeño navegador, sin necesidad de desplazamiento o de una versión móvil. A continuación, el usuario podría fácilmente ampliar y reducir, según sea necesario.

Hubo, sin embargo, un problema con este simulador creado. Cuando el diseño web adaptable despegó, muchos notaron que las imágenes todavía estaban cambiando proporcionalmente con la página, incluso si fueron hechas específicamente para (o de lo contrario podrían encajar) la pequeña pantalla.Esto a su vez redujo el texto y otros elementos.

Debido a que esto sólo funciona con el simulador de Apple, podemos utilizar una etiqueta meta de Apple específico para solucionar el problema, colocándolo debajo de la página web en la sección <head> . 

 <Meta name = "viewport" content = "width = dispositivo de ancho; inicial escala = 1.0"> 

Ajuste de la initial-scale de 1 sustituye el valor predeterminado para cambiar el tamaño de las imágenes proporcionalmente, mientras que las deja como están, si su anchura es la misma que la anchura del dispositivo (ya sea en modo retrato o paisaje). La Documentación de Apple tiene mucha más información en la etiqueta meta ventana gráfica. 

Diseño de Estructuras personalizado 

Para los cambios de tamaño extremos, es posible que desee cambiar el diseño por completo, ya sea a través de una hoja de estilo separada o, de manera más eficiente, a través de una consulta de medios CSS. Este no tiene que ser un problema; la mayoría de los estilos puede seguir siendo la misma, mientras que las hojas de estilo específicas pueden heredar estos estilos y mover elementos con flotadores, anchuras, alturas y así sucesivamente.

Por ejemplo, podríamos tener una hoja de estilo principal (que también sería el valor por defecto) que definiría todos los principales elementos estructurales, tales como #wrapper , #content , #sidebar , #nav , junto con los colores, fondos y tipografía. Anchuras y flotadores flexibles por omisión también pueden definirse.

Si una hoja de estilo hizo que el diseño web fuera demasiado estrecho, corto, ancho o alto, entonces podríamos detectar eso y cambiar a una nueva hoja de estilos. Esta nueva hoja de estilo secundario adoptaría todo, desde la hoja de estilo por defecto y luego simplemente redefinir la estructura del diseño.

CONSULTAS DE MEDIOS 

Las consultas de medios son simples filtros que pueden aplicarse a los estilos CSS. Facilitan el cambio de estilos según las características del dispositivo, como el tipo de pantalla, el ancho, el alto, la orientación e incluso la resolución.

Por ejemplo, usted podría poner todos los estilos necesarios para la impresión dentro de una consulta de medios de impresión:

<link rel = "stylesheet" href = "print.css" media = "print" >

Patrones

La mayoría de los diseños utilizados por las páginas web de respuesta pueden clasificarse en uno de los cinco patrones: la mayoría de fluidos, gota columna, la palanca de cambios de diseño, pequeños retoques y fuera de la lona. En algunos casos, una página puede utilizar una combinación de modelos, para la caída de la columna de ejemplo y fuera de la lona.
 
En el siguiente articulo Ud. puede obtener más información acerca del diseño web responsive.
 

Comparte este enlace en tu web: copia y pega este código en tu sitio:

Sobre la autora
Author: Estela Silva
Estela Silva es fundadora y desarrollador principal en Tu Consultora Seo, su función principal es el diseño y desarrollo de sitios web Joomla. Ella también es apasionada del posicionamiento en buscadores y especialista Adwords certificada. Estela ha construido sitios web basados ​​en CMS Joomla desde el año 2000, así como tiendas en línea, cuando no está escribiendo PHP, Javascript o CSS.

Contenido Especial Para Ti Diseño web

Clientes

Marketing digital Marketing digital Marketing digital Marketing digital Marketing digital