Categoría : MÓVIL

Resoluciones de Iphone 5, Iphone 4 y Ipads

Cuando hablamos de resoluciones hablamos de tamaño de la pantalla. Hoy en día, exiten las pantallas retina, un concepto inventado por Apple, que hacen que para un mismo tamaño físico de dispositivo haya diferentes resoluciones. Donde antes cabía un pixel ahora caben 2 o más. Por ejemplo, resolución del Iphone 3G es de 163 ppp y la de Iphone 4, que tiene el mismo tamaño físico, su resolución es de 326 ppp, el doble, es lo que llamamos retina, doble resolución.

Los diseñadores que diseñan APPS para Apple tienen que tener en cuenta estas resoluciones para usar un tamaño de lienzo en photosohop apropiado.Los tamaños indicados son en apaisado o landscape:

  • iPhone Original/3G/3GS: 480×320
  • Iphone 4 y iPhone 4S  (retina): 960 x 640
  • Iphone 5c y Iphone 5s(retina): 1136 x 640
  • iPad, Ipad 2, Ipad 3 y iPad Mini 1 : 1024 x 768
  • Ipad 4, Ipad Air y Ipad Mini Retina: 2048 x 1536

Sustituir el HOVER en dispositivos táctiles

En los móviles con pantalla táctil no existe la interacción hover. Esta interacción, como todos sabréis, es lo que ocurre cuando pasamos el ratón por encima de un elemento. Normalmente aparece una capa, un tooltip con información adicional o secundaria. En las webs que accedemos con pantallas no táctiles a través de ordenadores o portátiles muchas veces es un contenido que no queremos mostrar en la pantalla principal por lo que usamos este recurso para que el usuario vea más información pasando el ratón por encima de los elementos de nuestra web. Esta técnica actualmente no es muy usada y sólo en caso particulares en los que debemos estudiar con detalle. Esta interacción la usa Twitter, Google adwords, Google Maps, aplicaciones webs con Gráficas…

Contunuar leyendo

Los labels dentro de los inputs

En estos últimos años, después del auge de aplicaciones móviles, cada vez se está usando más el poner los labels dentro de los inputs para los formularios de validación.

Estos ejemplos los puedes ver en aplicaciones y webs tan importantes como facebook, evernote… :

evernote loginfacebook login

¿Por qué se ponen los labels dentros de estas cajas de texto?

Cuando diseñamos para aplicaciones móviles el espacio es algo muy privilegiado por lo que dejar un input vacio parace un espacio desaprovechado. Sobretodo estas cajas de texto deben ser bastante grandes, más de lo normal ya que van a tener interacción táctil. Si ponemos el label fuera del input esto nos hará tener que agrupar más los elementos y no habrá tantos márgenes o espacios vacios, Lukew, un gran conferenciante sobre mobile, es un gran defensor de este tipo de práctica.

Problemas de poner labels dentro de un input

Cuando el usuario quiere acceder a una zona privada de una web lo ideal es que visualmente vea los inputs vacios donde van a tener que introducir información, según puedes leer en UXmatters, este espacio está reservado para los usuarios.
También ocurre que cuando el usuario pulsa dentro del input el label desaparece y el usuario no recuerda si tiene que introducir un email o un nombre de usuario (esto me ha pasado a mí muchas veces), visualmente no encuentra ningún sitio donde diga que dato tiene que introducir y lo único que puede hacer es borrar la información que ha introducido en el input y visualizar de nuevo el label.
Entiendo que esta situación en móvil se realice ya que el espacio es muy preciado pero en un formulario de validación de una web, donde suele haber sitio, no veo sentido hacer esta práctica. También tenemos que tener en cuenta que en un móvil hay muchos factores del entorno que nos hacen distraernos, quien no consulta facebook mientras va andando, y si tienes que validarte, a veces no eres capaz de rellenar un formulario entero manteniendo la mirada fija en el móvil por lo que las distracciones externas no te hacen recordar que tipo de campo era si usuario o e-mail.

Contunuar leyendo

Inspiración para diseños web, móvil y tablets

Listado de webs para inspiración a la hora de realizar cualquier proyecto online

Inspiración web:

Inspiración de colores:

Inspiración css y html, responsive, jquery:

Inspiración revista, fotografía, maquetación:

Blogs de lectura, diseño, ux, seo:

Inspiración móvil y tablets:

Charla sobre Responsive Design

El próximo Jueves 19 de Julio de 2012 doy en TUCAMON Madrid una píldora formativa sobre Responsive Design y la utilización de esta técnica para adaptar webs a diferentes dispositivos móviles y sus distintas resoluciones.

La charla es a las 19:00h y  el registro es gratuito. Te puedes inscribir en la web de Tucamon.

Ver mi web en un móvil

Google ha sacado un nuevo servicio para adaptar tu página web a dispositivos móviles. Mensajes del tipo:

“2 de cada 3 personas usan su móvil como si fuera una linterna”
“las tendencias para el 2013 es que habrá más usuarios que se conecten a internet desde su móvil que desde un pc”
“En el 2010 las búsquedas por móvil sufrieron un crecimiento del 400%”

Bueno, todo esto quiere decir que tu web debería estar optimizada para poder ser visualizada de forma correcta desde un dispositivo móvil.
¿Qué quiere decir que tu móvil se vea de forma correcta en un dispositivo móvil?

– El texto de tu web se debería de leer sin tener que hacer zoom
– Los enlaces y botones deben ser fácilmente clikables con el dedo también sin hacer zoom.
– Las cajas de búsqueda y formularios deberán ser grandes para que el usuario acceda de forma correcta.
– Tu página tarda mucho en cargar desde un móvil?

Para poder contestar a estas preguntas puedes acceder a la web de Haz tu web móvil y probar el Test móvil de tu página web

Resolución Ipad, iphone y dispositivos móviles más comunes

A la hora de crear diferentes diseños para web debemos tener claro las dimensiones en pixel de los nuevos dispositivos móviles que están en el mercado.
La mejor opción es usar media queri que te da la posibilidad de adaptar con css tus clases para abarcar las diferentes resoluciones.

 

Aquí están las resoluciones de los dispositivos más importantes:

Resulución Ipad: 1024×768
Resolución Ipad 2: 1024×768
Resolución Iphone: 320×480
Resolución Samsung Galaxy Ace: 320×480
Resolución Samsung Galaxy S II: 800×480
Resolución Nokia Lumia 800: 800×480