Tendencias Web. Responsive Design.

La última tendencia de diseño web es el Responsive Design o «Diseño Adaptativo». Con la ayuda del HTML5 y CSS3, ahora podemos adaptar los diseños de páginas web en función del tamaño de pantalla del usuario. La característica fundamenteal de este tipo de diseño web, es que se adapta perfectamente a cualquier resolución, basta con ir cambiando el tamaño de la ventana del navegador, para ver cómo se van recolocando los módulos que forman la web.

Gracias a esta técnica no tenemos que hacer distintas web o utilizar distintas CSS para hacer un diseño para web, smartphone o tableta. El mismo diseño se verá correctamente en cualquiera de los distintos dispositivos y lo más importante, se reducirán los costes de creación y mantenimiento.

La idea de implementar esta técnica viene de lejos, del año 2008, recomendado por W3C  en «Mobile Web Best Practices» bajo el subtítulo «One Web«.

Hoy en día la disparidad tan grande que hay en tamaños de pantalla (sobremesas, portátiles, smartphones, tablets…), ha provocado que finalmente los diseñadores web nos planteemos esta práctica como indispensable en todos nuestros diseños. (más…)

Share and Enjoy !

Shares

Detectar una o varias acciones en una pantalla táctil

Acciones sobre pantallas táctiles

A diferencia del diseño web convencional, en el diseño para móviles, o tabletas, la interface táctil es diferente a la interface basada en ratón. En una pantalla táctil el modo de comportamiento del usuario es totalmente distinto y eso es algo que tenemos que tener en cuenta y sobre todo aprovechar sus ventajas.

Estamos familiarizados con la experiencia de interacción con la ayuda del ratón, seguramente una experiencia a la que todavía le queda mucho tiempo. La interface táctil es relativamente nueva. En un principio se trasladó la experiencia de ratón a la pantalla táctil, pero en seguida y de forma casi natural, comenzaron a desarrollarse una serie de interacciones basadas en la forma de tocar la pantalla. Gestos, distinción entre el uso de uno o más dedos, acciones pre grabadas que permiten recordar gestos y asociarlos a una acción, etc…

(más…)

Share and Enjoy !

Shares

Manipular Viewport con CSS

Viewport

Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.

Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.

El viewport es un atributo del tag <meta> que  se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:

(más…)

Share and Enjoy !

Shares

Ideas para diseñar Apps para iPhone e iPad

Interfaces para iPhone y iPad

El diseño de Apps es ya una asignatura de obligado conocimiento para un diseñador. Tamaño de gráficos, resoluciones, usabilidad, interfaces, todo es distinto a lo que actualmente hemos diseñado para web, así que no queda más remedio que ponerse al día y fijarse en lo que se está haciendo bien.

En esta pequeña muestra, podemos ver todo tipo de tendencias y soluciones muy creativas en lo referente a interfaces de usuario. Echadle un vistazo porque seguro que de aquí sacareis buenas ideas para próximos diseños.
(más…)

Share and Enjoy !

Shares
Diseñando para Android

Diseñando para Android

Diseñando para Android

Diseñando para Android

Cuando vamos a diseñar para Android, el primer problema con el que nos encontramos es la enorme diferencia que existe de un terminal a otro, no solo en cuanto a rendimiento, si no a resolución, que es el verdadero problema con el que nos vamos a encontrar cara al diseño.

Android pone a nuestra disposición una completa documentación en la que podemos consultar todos los aspectos técnicos que tenemos que tener en cuenta a la hora de abordar un diseño App.

(más…)

Share and Enjoy !

Shares
Web App con jQuery Mobile. Tutorial I.

Web App con jQuery Mobile. Tutorial I.

Web App con jQuery Mobile I

Web App con jQuery Mobile I

Hoy vamos a ver cómo enfrentarnos por primera vez a una Web App con jQuery Mobile. Se trata de un pequeño tutorial en el que podrás hacer tu primer diseño web para movil. Es básico, pero puede ser la base de grandes diseños futuros.

Vamos a empezar paso a paso definiendo cada uno de los códigos que componen la Web App y vamos a explicarlos.

(más…)

Share and Enjoy !

Shares