Alasthor's Room

Sitios Mobiles, ¿el futuro de la web?

El año 2012 y aun el 2011 ha sido un año bastante ajetreado en general, no solo en el aspecto de la vida cotidiana y que el mundo se quiso acabar como 3 veces este año. Me refiero al hecho de mi trabajo. Sucede que yo como Diseñador Gráfico en mi trabajo me han pedido ya varias veces que adapte sitios de la web a versiones para ser vistos en dispositivos móbiles.

En general la expectativa de la web en el mundo tiende a mandarnos a todos a la Web en móbiles, esto basados en la cosa de que cada vez pasamos mas tiempo conectados a la "internéh" desde nuestros teléfonos o desde nuestra tablet… o piensen… ¿Acaso no les es mas práctico revisar el sitio de alguien en el telefono "On-the-Go"?


Esta tendencia nos obliga a los que creamos Diseño Web o a los desarrolladores a planear Sitios que sean funcionales en estos dispositivos móbiles y que a la vez sean accesibles y visualmente satisfactorios para el usuario promedio… en otras palabras, que cuando te metas a ver que onda con un negocio y su página, lo puedas hacer desde tu "esmarfón" y quedes agusto con la info que puedas leer ahi…

Este reto de adaptar sitios a mobiles tiene de 2 sopas según he investigado:

Como seguro saben, los sitios se crean con html, csss, xhtml, js, y otras tantas cositas que cuando no te dedicas a esto, solo lees "letritas raras"… codigo…

Pues bien, como mencionaba las opciones son 2 y estas van directamente relacionadas a la necesidad del sitio y de sus usuarios.

Imagen tomada del articulo de Google: Mobile Websites vs Responsive Design

Layout Responsivo

en su versión mobil deberás incluir  con los MediaQueries eso mismo considerando no pixeles para medir… lo ideal seria medir en EM's o en Porcentajes

@media handheld and (max-width:360px){
      body{
    -webkit-text-size-adjust:200%;
    -moz-text-size-adjust:200%;
    -ms-text-size-adjust:200%;
     }
      .post-content{
                  width:60%;
                  margin: 0 auto;
                  font-size:12px;
      }
}

esto es un ejemplo… pero técnicamente se debería (o así lo estoy entendiendo de cierto modo) re-escribir gran parte del CSS para que quede bien adaptado a la visualización en mobiles. Cabe destacar que este pedacito @media handheld and (max-width:360px) es solo para un dispositivo, quizás en Vertical como podría ser un iphone, pero se deben incluir las tantas especificaciones como variantes de pantallas habrá por dispositivo…

Sitio Aparte

La otra solución que se ofrece para los sitios en móbiles, es la creación de un sitio totalmente aparte, donde ya estén adaptadas todos los elementos desde las distribuciones del layout hasta la optimización de imagenes… Google en este aspecto recomienda esta opción pues es la mas amigable con los teléfonos en general.

La logica que sigue este método es crear 2 sitios, la versión normal de escritorio que todo podremos visitar desde nuestra computadora y que veremos como siempre… y la versión móbil que estará 100% planeada para ser vista en los diferentes dispositivos. Pero siempre conservando en este segundo siempre un Link que nos de la opción de visualizar en sitio de escritorio aun cuando estemos en el iPhone o en el Samsung Galaxy…

Esto se logra con un JS (que no incluyo aquí)… y con un condicional que se ubica en la parte superior del código de nuestro sitio… en el index dentro de la etiqueta  < head> </ head> allí se debe incluir algo parecido a esto:



Las ventajas que supone esto es que los sitios deberían cargar aun mas rapido pues algo que siempre esta presente en la internet es la ligereza de los archivos… (Estadísticamente, si un sitio tarda mas de 6 segundos en cargar, pierde el interés un usuario… ) y de este modo donde solo se carga uno de los 2 sitios, se optimiza el tiempo tan preciado de carga.

——————

Y a esto… ¿cuál es la buena? ¿Cuál es la mas correcta? ¿Cuál nos conviene mas? ¿Quién tiene razon la W3C o Google?

Según ESTE articulo que leí, ambas formas son correctas… no existe tal cual una mala forma… quizas si una mala practica pero en general ambas formas son validas para adaptar nuestro sitios.

Lo que nos debe ayudar a definir cual es el mejor método para adaptar nuestro sitio debe de ser la función del mismo, puesto que ambos metodos presentan ventajas y desventajas, nuestro sitio y la función para la que fue diseñado influirá en esta decisión. No existe tal cual una pauta a seguir entre sitios grandes o sitios pequeños…

Personalmente creo que es cómodo usar los media-queries para adaptar sitios, pero teniendo en cuenta varios factores y la cantidad cosas a adaptar a veces es mejor la re-dirección de sitios… finalmente creo que al igual que el articulo lo menciona, se debe hacer un estudio de el sitio a adaptar antes de decidirse por alguno.

Para terminar… les comento, que no soy experto, y lo que escribo aquí es lo que entiendo y percibo de esto… si requieren aclarar algo mas… ¿Por qué no lo "Googlean"?