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.
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.
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.
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.