Guía gratuita Google para la creación de webs móviles

Guía Google para optimizar web mobile

Guía Google para optimizar web mobile

Si estás pensando en diseñar una web para smartphone, Google pone a tu disposición una guía gratuita con todo tipo de consejos, trucos y código para optimizarla y obtener los mejores resultados.

Para empezar, lo primero que Google te recomienda es realizar un diseño web receptivo, es decir, utilizar el mismo HTML para todos los dispositivos, independientemente de su resolución, y utilizar CSS para decidir los cambios según estas resoluciones.

Esta guía, te ofrece además, la posibilidad de consultar la compatibilidad entre smartphones o recomendaciones para el uso de javascript en tu sitio.

En definitiva, se trata de una guía realizada por Google, eso significa que si quieres tener contento a Googlebot, léete esta guía y síguela al pie de la letra 😉

 

 

VER LA GUÍA GOOGLE PARA WEB MOBILE

¿Cómo diseñar una web mobile?

Diseño de Web para Móviles

Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

(más…)

Los 50 jQuery más usados en el 2012

los 50 jQuery más usados en 2012

los 50 jQuery más usados en 2012

He encontrado en speckyboy.com, un artículo que creo de gran utilidad para tener en cuenta en nuestros diseños web. Se trata de 50 plugins jQuery, de todo tipo.

Entre ellos podrás encontrar plugins para distribuir contenido en la página, plugins para crear efectos, parallax, responsive, menús de navegación, sliders, gráficos, fuentes, etc…

Merece la pena echarle un vistazo, muchos de ellos ya los conoceréis porque los hemos tratado aquí.

 

VER LOS 50 PLUGINS JQUERY

Librería para gestos multi-touch. Mobile

Biblioteca multi-touch para WebApp

Biblioteca multi-touch para WebApp

En numerosas ocasiones se ha recurrido al desarrollo de aplicaciones nativas al no existir la posibilidad de poder realizar ciertos desarrollos para web.
Una de las limitaciones en una aplicación web era el no poder programar gestos multitáctiles, como pellizcar para agrandar o disminuir el zoom, rotar, drag and drop,… Gracias a Hammer.js, ahora podemos implementar todo tipo de gesto multi-touch en nuestra WebApp
Hammer.js es una biblioteca javascript (requiere jQuery) para gestos multitáctiles de apenas 2kb destinado a operar con los gestos multitáctiles, clic, doble clic, arrastrar, mantener pulsado, escalar,…

Además, parece ser que ha sido testada en diferentes smartphones y tablets comprobando su compatibilidad.

VER VIDEO DEMO EN YOUTUBE

DESCARGAR CÓDIGO

Slider para Web App Mobile

Slider para Web App

Slider para Web App

Todos conocemos el efecto de pase de fotos o de la navegación entre contenidos en un Smartphone o tablet. Al desplazar el contenido hacia un lado u otro, este desaparece y aparece el siguiente. Este es el código que traemos hoy en este post de diseño web, en este caso para Web App.

El complemento utilizado es Swipe, un slider ligero hecho para mobile.

Al igual que si de un iPhone, iPad o Android se tratase, el pase de fotografías o contenidos se puede hacer en ambas direcciones, además, Swipe permite el giro de pantalla y se adapta a la pantalla escalándose sin problema alguno.

(más…)

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…)