TRABAJOS

PROYECTOS PERSONALES

SOBRE MI

ARTICULOS

CONSEJOS PARA DISEAR APLICACIONES O PGINAS WEB PARA MVILES II

2011 por Jimena Catalina

Este es el segundo artculo en la serie que ampla los conceptos expuestos en la presentacin Disear para mviles. En esta entrada repasar el panorama actual de los smartphones en Espaa y explicar las decisiones previas que se han de tomar antes de comenzar a trabajar en un proyecto mvil.

DISEAR PARA MVILES: REGRESO AL PASADO

Pantallas y resoluciones pequeas, varios navegadores distintos con soporte de css y javascript precario, tiempos de descarga lentos y un nuevo medio en el que no terminan de encajar las soluciones que ya aplicabas en otros. Cada vez que comienzo un nuevo proyecto para dispositivos mviles me siento como si hubiera vuelto al 2000 (me consuela que al menos NO hay que maquetar con tablas). El mayor dolor de cabeza lo provoca la diversidad de dispositivos y sus diferentes capacidades. Y es que, para sorpresa de muchos, disear para mviles no e s dise ar e xclusivame nte para iPhone . En nuestro sector tenemos una visin sesgada de cul es la verdadera penetracin de los smartphones (especialmente el de la manzanita) en el grueso de la poblacin. Segn las ltimas estadsticas de Nielsen para el primer trimestre de 2011 slo 4 de cada 10 espaoles tiene un telfono inteligente y el sistema operativo predominante sigue siendo Symbian (es decir, Nokia) con un 65% de cuota de mercado.

Aunque es cierto que estos nmeros cambian en cada campaa de Navidad e ir aumentando la proporcin de smartphones (gracias a los terminales subvencionados por las operadoras) dudo que ningn s.o. vaya a imponerse sobre los dems a corto plazo. De manera que no podemos perder de vista a Android, a WP7, a Symbian o a Blackberry (que sorprendentemente triunfa entre los adolescentes adems de en entornos corporativos) y quizs en algn momento llegue Samsung con Bad y HTC con su nuevo s.o. Todo diversin. La conclusin es que los usuarios a los que queremos llegar poseen cie ntos de

dispositivos dife re nte s , y la mala noticia es que es imposible re alizar un nico dise o que funcione en todos y cada uno de ellos. Por tanto nos veremos obligados a limitarnos a los terminales que sean ms habituales entre nuestro pblico objetivo.

DECISIONES PREVIAS
Ante la perspectiva de comenzar un nuevo proyecto para mviles (y con los tiempos ajustados que solemos manejar) el primer impulso es descargarte con entusiasmo una plantilla PSD de iPhone y empezar a disear pantallas como un loco. Sin embargo hay una serie de de cisione s que afe ctan al dise o que se deben tomar antes de empezar, sobre todo si queris ahorrar tiempo y disgustos a posteriori.

PARA QU DISPOSITIVOS?
Hemos visto que dentro del ecosistema smartphone existen cientos de mviles diferentes que varan en cuanto a tamao, orientacin y resoluciones de pantalla, soporte de css y javascript, deteccin de gestos y posicin, botones de hardware, etc. Sobre todo a la hora de realizar una pgina web en su versin mvil tenemos que asegurarnos que sea accesible para el mayor nmero de dispositivos. Una buena solucin es agrupar los te rminale s por familias para cubrir las 3 o 4 opciones ms comunes, y realizar un diseo para cada una de ellas. Lo habitual es hacer la agrupacin atendiendo a las caractersticas de interaccin (tctil vs no tctil), resoluciones de pantalla y soporte de funcionalidades clave.

Un ejemplo de agrupacin que hicimos para un proyecto web real fue: Tctiles con pantalla de alta resolucin: cubre iPhone4, Samsung Galaxy, Samsung Omnia, Nokia N7, etc Resto de tactiles: iPhone3 e inferior, Androids de resolucin media y baja, Blackberry Storm, Nokia 5800 Terminales con navegacin por teclas/rueda/pad: Blackberry Curve, Nokia E7, Nokia N97 Terminales sin soporte javascript o con soporte limitado: Blackberry Pearl, Nokias antiguos y muchos ms Para este proyecto definimos un total de 34 pantallas, como cada una se dise en 4 variantes al final acabamos con 136 archivos PSD. Evidentemente primero se hizo una de las versiones y hasta que no estuvo completamente aceptada por el cliente no se comenz con las dems. Podis imaginar que hasta un simple cambio de color al final de un proyecto de este tipo puede resultar en cientos de horas de trabajo adicionales.

APLICACIN O WEB?
Aplicamos dife re nte s patrone s de dise o si se trata de una aplicacin nativa o una pgina web. Por ejemplo en una web tendremos menos espacio de pantalla disponible pues

hemos de reservar el que ocupan las barras del navegador, pero sin embargo no har falta buscar un sitio para poner un botn de atrs/volver. Para los usuarios de iPhone es habitual encontrar en una app la navegacin en el pie, pero en web la navegacin a veces se pone en la cabecera, etc.

No podremos aplicar la misma carga grfica de una aplicacin a una web pues hay que tener mucho cuidado con el pe so de las imge ne s , an quedan muchas zonas donde no llega la cobertura 3G y la conexin tira de GPRS (como muchos habris descubierto estas vacaciones).

GRFICA PROPIA O CONTROLES DEL S.O.?

Siempre que en una app se opte por una grfica propia lo ms probable es que tengas que realizar los recursos grficos a 3 tamaos distintos (para resoluciones altas, medias y bajas). Adems afecta a los tiempos y costes de programacin.

Una solucin chapucera que he visto ms de una vez para ahorrar costes consiste en disear la aplicacin para iPhone y luego replicarla pixel por pixel en Android. El resultado es un fracaso e stre pitoso entre los dueos de un mvil Android que se sentirn incomodos ante un diseo visual y experiencia de usuario que les resultan totalmente ajenos.

QU VA A ESTAR VISIBLE EN LA PANTALLA?

A la hora de decidir la cantidad de elementos que tengo que mostrar en la pantalla los factores que hay que tener en cuenta son: Presencia de botones de botones de hardware o teclado. Ej: botones de atrs/volver o de

desplegar un men que tienen los dispositivos con Android, Nokia y Blackberry. Interaccin por rueda/pad o tctil. Ej: si el dispositivo es tctil no puedo mostrar opciones en rollover Reconocimiento de gestos del dispositivo. Ej: drag o long press para mostrar opciones ocultas. Patrones de interaccin comunes. Ej: debo poner un botn para actualizar datos o es conocido el gesto pull to refresh? Soporte de javascript. Ej: tengo soporte suficiente para desplegar/plegar listas y capas?

PARA QU RESOLUCIONES DE PANTALLA?

Existen muchas resoluciones de pantalla diferentes, tanto en tamao como en orientacin. Si queremos soportar varias nos veremos obligados a generar los grficos a 2 o 3 tamaos distintos . Para pginas web es mejor pensar en un dise o fluido , que pueda adaptarse a pequeas variaciones en las dimensiones de la pantalla e incluso al cambio de orientacin de los dispositivos. En las aplicaciones nativas el cambio de orientacin en los mviles puede servirnos para navegar entre diferentes pantallas o cambiar el modo de visualizacin (por ejemplo entre listado/grfico de datos). Si necesitamos ahorrar costes y slo podemos hacer una versin de la aplicacin/web no es recomendable hacerla para los dispositivos ms potentes y con mejor pantalla, ya que los mviles ms bsicos te ndrn proble mas de re ndimie nto (almacenamiento en cach ms limitado, procesador ms lento, etc.). Si lo hacemos a la inversa (disear para los terminales bsicos) perderemos calidad grfica en los smartphones de ltima generacin pero la app/web podr ser usada por un mayor rango de usuarios.

RESPONSIVE DESIGN
Si ests trabajando en un proyecto web te puedes preguntar si es una solucin viable recurrir al responsive design. En general el usuario no e spe ra e ncontrar los mismos conte nidos e n una situacin mvil , de forma que no basta con mostrar lo mismo pero con diferente distribucin. Me parece una buena opcin para webs pequeas, como portfolios personales o pginas informativas de pequeas empresas. Si finalmente se opta por una solucin de este tipo debe hacerse bajo la filosofa del progressive enhancement dado que las media queries de CSS en las que se basa este mtodo no funcionan e n todos los te rminale s . La versin base debe ser la que tenga el css bsico, las imgenes pequeas y sin javascript, y no la de PC. En la presentacin Pragmatic Responsive Design podis ver una explicacin detallada de cmo se trabaja en un proyecto de este tipo y las dificultades que hay que resolver a lo largo del diseo y desarrollo. En realidad, si se plantea correctamente, una web con responsive design puede llegar a ser mucho ms cara que una versin mvil pensada y desarrollada desde cero. Cunto ms cara depender de los modelos de mvil que se quieran soportar. Una buena solucin es combinar esta tcnica con deteccin de dispositivo en el servidor para servir diferentes componentes clave dentro de la estructura de la pgina: RESS (Responsive Web Design + Server Side Components)

ETIQUETAS: CONSEJOS, DISEO, DISEO MVIL, DISPOSITIVOS MVILES, SMARTPHONES

Me gusta

Compartir

37

Tw ittear

41

16

Share 13

ANTERIOR

Consejos para disear aplicaciones o pginas web para mviles I

La aventura de hacer un ebook

SIGUIENTE

HAY 15 COMENTARIOS (DJANOS EL TUYO [+])

alex dice:
10 diciembre, 2012 a las 11:38

mm he leido 2 lineas . y ya he visto que est obsoleto este post . 9% android y 9%iphone? lol
RESPONDER

JIMENA dice:
10 diciembre, 2012 a las 13:30

Ya, el mundo de los mviles va tan rpido que en un ao muchos de los datos del artculo se han quedado obsoletos :) Los ltimos datos de 2012 a los que he tenido acceso (pre-ventas de Navidades) hablan ya de un 51% de penetracin de los smartphones con el siguiente reparto: - 34% Android - 21% Symbian - 14% iOS - 12% Blackberry (y el reparto del resto no es significativo) Sin embargo, ms all de los datos, muchos de los principios de diseo que menciono se siguen aplicando.
RESPONDER

Santiago Meja dice:

14 enero, 2013 a las 22:13

Dejando de lado las estadsticas, el artculo es de gran perspectiva. Si no se toman en cuanta estos aspectos que pasan normalmente desapercibidos, ser un dolor de cabeza querer resolver la multiplataforma. Me ha ayudado mucho. Saludos y gracias.
RESPONDER

Miguel Prieto dice:

26 febrero, 2013 a las 22:23

Hola, Necesito saber que aplicaciones existen de forma gratuita para disear paginas web para mviles (waps) son las ms fcil de utilizar y que se puedan probar on-line (comportamiento y tiempos de respuesta reales) sin necesidad de tener que pagar un dominio propio en la red?.
RESPONDER

NGEL DE HERAS dice:

2 abril, 2013 a las 13:34

Como dice Santiago, dejando atrs las estadsticas, es un artculo buensimo. En pases de Sudamrica y otras zonas del mundo densamente pobladas, donde aun no hay gran nmero de smartphones, an son aplicables estas directivas. Llevo 7 aos en el mundo mvil, desde que se programaban las pginas en WML y CHTML. Es increble lo rpido que evoluciona.
RESPONDER

ESTEBAN CERVI dice:

25 abril, 2013 a las 23:52

Muy interesante el artculo. Coincido en que combinar Server Side Components con Responsive Web Design es una decisin acertada, sobre todo debido a la diversidad de dispositivos y sistemas operativos y porque el trfico puede venir desde cualquiera de ellos.
RESPONDER

Mario dice:
12 mayo, 2013 a las 18:07

Hola Jimena, La verdad Es que es muy difcil Disear una web para una gran variedad de dispositivos moviles y cada mes hay nuevos modelos. Existe una herramienta que muy usada por los diseadores web http://herramientasonline.com/responsive/responsive-design-test-online.php Es una de las mas exactas en cuanto a la emulacion movil se refiere y tambien tiene resoluciones para tablets.
RESPONDER

ALEX RAMIREZ dice:

15 mayo, 2013 a las 5:14

COMO HAGO PARA PONER LAS APLICACIONES

RESPONDER

PHE dice:
6 junio, 2013 a las 12:06

Buen articulo! thanks! :)

RESPONDER

MOVILWE dice:
30 octubre, 2013 a las 2:15

Hola a todos: He ledo con inters este artculo, y estoy de acuerdo en todo, sin embargo el tema de apps y webs mvil va a seguir siendo un debate que no llegue a ningn lado, pues personalmente creo que depende del tipo de negocio puede usarse una otra o ambas. En cuanto al modo de servir la informacin, si es verdad que con responsive te ahorras mucho trabajo pero tampoco es lo ms adecuado para muchos tipos de negocios como restaurantes por ejemplo que si quieren dar un toque diferenciador es mejor un diseo web movil personalizado, como propongo en el enlace. Un saludo
RESPONDER

BarcelinaGracia dice:
20 diciembre, 2013 a las 10:27

Buenos das Jimena, tu artculo es muy interesante. Actualmente estoy desarrollando una web en responsive design para mobiles y no consigo a declarar los 326ppp (ppi) para que lea la media query de 640px y no la de 320px. Estuve leyendo mucho, en ingls, en espaol y no encuentro la solucin, ni en el libro de Ethan Mascotte. Empezo a pensar que tiene que ser tn evidente que nadie escribe sobre el tema. Si me puedes echar una mano te lo agradecera. Slds. Barcelina
RESPONDER

JIMENA dice:
20 diciembre, 2013 a las 10:58

Hola Barcelina Si lo que quieres es dirigirte solo a los mviles con alta resolucin de pantalla el media query que se usa es:

@ m e d i a( w e b k i t m i n d e v i c e p i x e l r a t i o :2 ) ,( m i n r e s o l u t i o n : 1 9 2 d p i ){ / *C S Se s p e c f i c o* / } La primera instruccin es para los iPhone/iPad con Retina display y la segunda para el resto de dispositivos (Android sobre todo)
RESPONDER

BarcelinaGracia dice:
20 diciembre, 2013 a las 13:39

Hola Jimena, Intent poner este cdigo en el css antes de todas las mediaqueries (sigue cogiendo la mediaquery de 320px en iphone4S portrait y en android), despus en cada mediaqueries (cogi la de 320px tambin en portrait tal como en landscape) y acab ponindolo solo en la de 640px y no result tampoco. Quizas lo hago mal

BarcelinaGracia dice:
20 diciembre, 2013 a las 13:01

Merci Jimena para tu respuesta tan rpida!! Voy a implementarlo en el css antes de los mediaqueries, cruzando los dedos para que funcione. Mil gracias
RESPONDER

Oscar dice:
25 enero, 2014 a las 11:46

Muy buen artculo felicidades

RESPONDER

DEJA UN COMENTARIO
Tu direccin de correo electrnico no ser publicada. Los campos necesarios estn marcados *

Nombre* Correo electrnico* Web Comentario

Puedes usar las siguientes etiquetas y atributos HTML: < ah r e f = " "t i t l e = " " >< a b b rt i t l e = " " >< a c r o n y mt i t l e = " " >< b > < b l o c k q u o t ec i t e = " " >< c i t e >< c o d e >< d e ld a t e t i m e = " " >< e m >< i > < qc i t e = " " >< s t r i k e >< s t r o n g >

PUBLICAR COMENTARIO

Copyright Jimena Catalina 2012. Todos los derechos reservados.