TYPESTRAP. Controla el tamaño de tus fuentes.
Typestrap es un kit de tipo basado en CSS que utiliza una escala modular para ayudarnos a controlar la tipografía en las distintas resoluciones de pantalla, desktop, mobile,… (más…)
Guía gratuita Google para la creación de webs móviles
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
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.
Librería para gestos multi-touch. Mobile
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
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.
Plantillas psd de iPhone GRATIS !!!
Plantillas PSD iPhone
Templates o plantillas de iPhone en psd, todo en capas para que puedas hacer una buena presentación de tu App o WebApp.
Buen post de GraphicsFuel en el que podrás encontrar toda una relación direcciones en las que descargar gratuitamente todo tipo de psd’s de iPhone. Podrás encontrar desde las carcasas del móvil hasta los más mínimos detalles, como iconos, elementos de formulario, teclados, botones, fondos…
Mi Portfolio
