Boletín

Inicio / Noticias / Diseño web / Diseño de sitios web adaptativos orientados a medios móviles

Diseño de sitios web adaptativos orientados a medios móviles

Diseño de sitios y proyectos con tecnología CSS Media Queries que permite crear una versión adaptativa frente a medios móviles como tabletas y smarth phones.

Diseño web adaptativo. Una realidad para el presente e inversión para el futuro.

Descripción

El mercado de navegación en Internet ha y continua cambiando rápidamente.
Algunos datos de interés.

Según la empresa de análisis tecnológicos Gartner®, la más importante del mundo, en 2014 el mercado de tablets (tabletas) crecerá un 130% en dos años y las ventas de PCs descienden un 15% en el mismo plazo. Otros datos muestran que para finales de 2014 habrá 146 millones de dueños de smarthphones (teléfonos inteligentes) en Latinoamérica y para 2017 unos 243 millones.

Más del 40% de las personas que acceden al Internet lo hacen desde este tipo de dispositivos.
El crecimiento es vertiginoso a nivel global, hoy en día cada vez mas usuarios navegan por la Web mientras están en movimiento.

¿ Esto en que forma concierne a su proyecto de Internet y su diseño web ?

La razón es simple y elocuente.
Los dispositivos móviles tienen pantallas de tamaño mucho mas pequeño que un PC de escritorio o Notebook y la navegación y exploración de las páginas web ocurre de forma distinta.

Para ofrecer al usuario una visión global de la página los medios de pantalla chica, achican el contenido de toda la página para que el usuario pueda ver todo el contenido de una sola vez acarreando problemas que dificultan la experiencia de usuario.

Aquí algunos ejemplos de problemáticas :

Los textos y fotos se ven muy pequeños y requieren de hacer zoom para agrandar o alejar constantemente para poder ver el contenido en un tamaño aceptable.
Para los usuarios de Smartphone representa una molestia en la lectura debido a que están obligados a desplazar las páginas numerosas veces o a hacer zoom para leer todo el contenido.

Los botones o links resultan muy pequeños y muchas veces se torna difícil poder seleccionar algo o se termina seleccionando otra cosa por error.
No todos los usuarios tienen los dedos del mismo tamaño, ni el mismo nivel de visión o precisión y verdaderamente muchas veces se hace frustrante navegar un sitio web.

No todos los dispositivos móviles tienen las mismas capacidades de procesamiento y rendimiento por lo que muchas veces recursos que funcionan apropiadamente en un PC no lo hacen de la misma forma en un dispositivo móvil.

El diseño web Adaptativo como solución.

El diseño web adaptativo o adaptable es una técnica de diseño y desarrollo web la que mediante el uso de media-queries en la hoja de estilo CSS, consigue adaptar el diseño del sitio web o proyecto a las características del medio móvil del usuario para que este obtenga la mejor experiencia de navegación.

Las resoluciones (anchos de pantalla) más comunes en medios móviles son :
320, 480, 600, 640, 720, 768, 800, 960, 1024.

En un PC, Notebook, consola o Smarth tv se puede dar por sentado que las resoluciones están siempre por arriba de 1024.

Beneficios de contar con una web de diseño adaptativo orientado a medios móviles.


1. Mejora la experiencia de navegación del usuario.

Esta tecnología también conocida como (CSS Media Queries for Responsive Web Design) permite conseguir sitios adaptables mejorando la usabilidad y la conversión (éxito que su proyecto obtiene de cada visita).

Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante presentando los contenidos en función del tamaño de esta y haciendo énfasis en que sean cómodos y accesibles aumenta la retención de usuarios sustantivamente así como la conversión.


2. Visibilidad desde distintos dispositivos móviles y menor costo.

La técnica habitual para que los usuarios pudieran acceder a una web desde un dispositivo distinto a una PC, era redireccionando a un sitio web específico alternativo (ej. movil.suempresa.com, ipad.suempresa.com)

En definitiva se trataba de versiones alternativas del proyecto orientadas a las versiones mas comunes de dispositivos móviles.
Esto anterior solo desde el punto de vista de mantenimiento, testeo y costes de desarrollo lo hace muy superior ya que se trata de tener varias páginas distintas que manejan la misma información.

Por el contrario, el diseño web adaptativo permite que el sitio web o proyecto pueda visualizarse en dispositivos móviles adaptándose a cada uno sin inconvenientes.
Es la hoja de estilos la que hará que el sitio cambie su forma y distribución, desde el punto de vista de etiquetado y programación el proyecto será el mismo.


3. Posicionamiento web (SEO).

Mediante la antigua técnica mencionada en el punto anterior (tener una versión paralela del proyecto orientada a móviles), se evita el incurrir en penalizaciones de Google u otros buscadores por poseer contenido duplicado.
Con el diseño adaptativo esto no ocurre ya que el proyecto es siempre el mismo sitio con el mismo punto de entrada y lo que hace este es cambiar su aspecto y distribución visual a cada tipo de pantalla.

Todas las acciones necesarias que se tomarán para posicionar una web serán mucho más fructíferas al ser realizadas sobre un solo sitio web, que si se tuviera que hacer sobre varios.


4. Redes sociales.

Las redes sociales se utilizan en gran medida desde dispositivos móviles.

Si un usuario comparte algo desde un PC y luego alguno de sus amigos/seguidores lo ve a través de un dispositivo móvil no va a percibir exactamente la misma experiencia que aquel que lo compartió.

Mediante el diseño web adaptativo es lo mismo desde que plataforma se comparta y desde dónde se visualice, siempre estará especialmente optimizado para cada medio.


5. Estadísticas de visitas.

Al igual que pasa con SEO, tendremos todas las estadísticas por URL y por contenido exactas, sin tener que ir a ver otros subdominios o el temor a que las redirecciones hayan duplicado las visitas.
Esto hace que el seguimiento de las visitas sea mucho más eficiente y simple.


6. Mayor valor de su imagen de marca.

Al contar con un sitio web adaptable y cómodo a cada tipo de dispositivo móvil y pantalla estamos aumentando valor a nuestra imagen de marca ya que la gente que visite su sitio web o proyecto, notará que se esta utilizando técnicas para mejorar la presentación y comodidad del contenido y asociará su marca con creatividad e innovación.

Además, cada día son más las empresas, entre ellas su competencia, que cambian sus diseños al plano adaptativo.


7. Google lo recomienda.

Si el buscador más grande y poderoso del planeta recomienda el diseño web adaptativo, lo mas intelignte es tener en cuenta la recomendación.

Aqui citamos el link de la sugerencia de google : http://googlewebmastercentral.blogspot.ch/2012/06/recommendations-for-building-smartphone.html


Reflexiones sobre el diseño web adaptativo.

El acceso desde dispositivos móviles ya es mayor que el acceso desde computadoras de escritorio.
Es hora de cambiar para adaptarse a la realidad.
El diseño adaptativo ofrece una solución elegante para adaptarse a los tiempos actuales donde los smarthphones y tabletas ya son mas populares que el PC entre las plataformas informáticas.

Es tan real esto, que no hace falta mas que observar a la gente transitar en la ciudad para verlo con sus propios ojos.

Hoy por hoy, tener una correcta imagen 2.0, en éste caso una web adaptada a los diferentes dispositivos que hay en plaza es de vital importancia para competir y cumplir con los objetivos más importantes

El diseño web adaptativo sin dudas es una solución eficaz para ofrecer al usuario una experiencia de navegación y lectura óptima y aunque implica un trabajo importante vale la pena por las numerosas ventajas que genera para un sitio web.

Adaptarse al presente es vital.
Nuestra empresa con todo gusto le hará una propuesta acorde.




A continuación presentamos pantallas de algunos ejemplos de sitios web adaptables para hacerse a una idea mas fiel de a que refiere esta adaptación visual en función del tamaño de pantalla.

EJEMPLO suponiendo un smarthphone de resolución mínima (320 de ancho x 480 de alto) como lo es el IPHONE básico el que mucha gente utiliza.

Ejemplo de sitio web adaptativo.
En la versión adaptativa el contenido se lee claramente
y las imagines se aprecian perfectas sin necesidad
del incomodo efecto de tener que hacer zoom y navegar
un sitio como si fuera un mapa por así compararlo.

Puede conocer el ejemplo visitando desde distintos
dispositivos demo3.minegocioinmobiliario.com

Ejemplo de sitio web NO adaptativo.
Es visible que la web no permite leer ni ver imágenes
con claridad y que sería muy fácil presionar algo
equivocadamente por error.


Puede conocer el ejemplo visitando desde distintos
dispositivos demo3.minegocioinmobiliario.com


OTROS EJEMPLOS DE DISEÑO ADAPTATIVO


Citamos algunos de los dispositivos más comunes indicando que resolución utilizan entre paréntesis.

La gran mayoría disponen de la opción de rotación por lo que con el dispositivo móvil rotado la resolución se invierte. Como se puede ver la variación es extremadamente amplia.

Amazon Kindle Fire (First Generation) (1024 x 600)
Amazon Kindle Fire HDX 7" (1920 x 1200)
Amazon Kindle Fire HDX 8.9" (2560 x 1600)

Apple iPad 1 / 2 / iPad Mini (1024 x 768)
Apple iPad 3 / 4 / (1024 x 768)
Apple iPhone 3GS (320 x 480)
Apple iPhone 4 (320 x 480)
Apple iPhone 5 (320 x 568)

BlackBerry PlayBook (1024 x 600)
BlackBerry Z10 (384 x 640)
BlackBerry Z30 (360 x 640)

Google Nexus 10 (1280 x 800)
Google Nexus 4 (384 x 640)
Google Nexus 5 (360 x 640)
Google Nexus 7 2 (960 x 600)
Google Nexus 7 (960 x 604)
Google Nexus S (320 x 533)

HTC Evo, Touch HD, Desire HD, Desire (320 x 533)
HTC One X, EVO LTE (360 x 640)
HTC Sensation, EVO 3D (360 x 640)

LG Optimus 2X, Optimus 3D, Optimus Black (320 x 533)
LG Optimus G (384 x 640)
LG Optimus LTE, Optimus 4X HD (424 x 753)
LG Optimus One (213 x 320)

Motorola Defy, Droid, Droid X, Milestone (320 x 569)
Motorola Droid 3, Droid 4, Droid Razr, Atrix 4G, Atrix 2 (540 x 960)
Motorola Droid Razr HD (720 x 1280)
Motorola Xoom, Xyboard (1280 x 800)

Nokia C5, C6, C7, N97, N8, X7 (360 x 400)
Nokia Lumina 7X0, Lumina 8XX, Lumina 900, N800, N810, N900 (320 x 533)

Samsung Galaxy Note 3 (540 x 960)
Samsung Galaxy Note II (360 x 640)
Samsung Galaxy Note (400 x 640)
Samsung Galaxy S III, Galaxy Nexus (360 x 640)
Samsung Galaxy S, S II, W (320 x 533)
Samsung Galaxy S4 (360 x 640)
Samsung Galaxy Tab 7.7, 8.9, 10.1 (1280 x 800)
Samsung Galaxy Tab (1024 x 600)
Sony Xperia S, Ion (360 x 640)
Sony Xperia Sola, U (480 x 854
Sony Xperia Z, Z1 (360 x 640)
Compartir
RESPALDO y DIVISIONES DE NEGOCIOS
Compartir

Newsletter

Info
Chat
Enviar por email
Email de tu amigo Mensaje
Enviar por email
Email de tu amigo Mensaje