Cargando



Diseño adaptable a dispositivos o responsivos

El Diseño web responsivo o diseño web adaptable surge con fureza en el año 2008 como iniciativa de la W3d por crear una recomendación estandar para Mobile Web Best Practices (Mejores practicas para web en dispositivos moviles


may 07 2014 18:34
may 07 2014 18:35
Diseño web adaptable, ¿Cual es el beneficio para la web?


Muchos aspectos del comportamiento de los usuarios han sido estudiados por especialistas de marketing e indican que el 70% de las personas entre 18 y 45 años navega en internet no soso desde ordenadores, sino desde tablet y desde teléfonos, lo cual es un mercado muy grande como para dejarlo de lado.

¿Qué es un diseño web responsivo?


Es un diseño que se adapta a cualquier dispositivo y resolución de pantalla, sin importar si es un teléfono, una tableta, un ordenador, una pantalla de tv. Todo esto debe adaptarse sin crear versiones diferente de una web para cada dispositivos sino que es una única web que debe ser capaz de adaptarse.


respon.jpg



¿Cómo hacemos nuestro diseño responsivo?


Una manera es mediante media queries módulo de CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla

Por ejemplo en el fichero de estilos.css
@import url(estilos.css) only screen and (max-device-width: 480px);

Dentro del fichero comenzamos a definir dispositivos de ancho máximo 480px y orientados horizontalmente :
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
/* aquí iran los estilos para este dispositivo */
}


Otro estilo para pantalla verticales
@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : portrait) {
/* estilos */
}


Aquí definimos estilos para un iPhone 5
@media screen and (device-aspect-ratio: 40/71) {
/* estilos */
}


Lo ideal es medir todo en porcentaje para poder hace una web generica si tener que realizar tantas hojas de estilo.
Una forma es colocando el contenido cubriendo un 80% de la anchura de la pantalla, esto hará que en cualquier dispositivo se mantenga la sección de contenidos.

Algunas ventajas y aspectos a considerar


El diseño web responsivo funciona es una forma de hacer SEO ya que evitamos duplicar enlaces y contenido para distintas versiones de dispositivo, Google le gusta aunque no significa que sea necesario. Si lo hacemos de ser para los usuarios del móvil y no para Google.

Para cada dispositivo la experiencia y la urgencia es diferente ya que se utiliza en distintos momentos.

Generalmente quienes navegan desde un ordenador están en el trabajo o en la casa, por lo tanto la búsqueda sera mas distendida y con mas tiempo para leer y ver banner, quien navega desde una tableta seguramente sera un profesional o alguien que realiza una tarea especifica por lo tanto necesita información guía o de referencia pero no algo que entorpezca la búsqueda.

Mientras quien navegan por teléfono serán los mas jóvenes o personas con mucha mas movilidad y buscaran información rápida y concreta para consulta urgentes o búsqueda rápida de información sobre algún lugar, evento o necesidad de comunicación, algunos de estos aspecto son revelados en el informe comScore de marketing online que es libre, gratuito y refleja las tendencia anuales.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X