En este momento cuando inicies un proyecto web lo primero que debes preguntarte es ¿Tendré usuarios desde dispositivos móviles, tablets o similares? Si es un sí, definitivamente debes ponerle mucha atención a tener un diseño adaptativo o responsive en tu proyecto, según la siguiente infografía creada por WhoIsHostingThis? actualmente hay 2,100 millones de usuarios con móviles, el 87% de los adultos en USA tienen smartphone, cifra que es similar en Latinoamerica, ¿O no has notado que cada día aumenta el número de amigos en Facebook con el icono de un móvil en el chat? ;), el 74% de usuarios con móvil abandonan el sitio web si éste toma más de 5 segundos en cargar.

La clave está en crear grillas fluidas y imágenes flexibles haciendo uso de Media Queries y enfocarse en la cabecera del sitio web, la galería de imágenes, la descripción del producto, la información relevante y el pie de página, al resto no tienes que prestarle tanta atención en móviles.

Vía: WhoIsHostingThis?

La entrada Buenas prácticas para crear sitios web Responsive se publicó primero en Punto Geek.

Si estás creando un sitio o aplicación web con diseño Responsive y todavía no sabes que Media Queries utilizar para los dispositivos que estás soportando este sitio te vendrá perfecto.

Se llama Media Query Snippets y tal como lo dice el nombre, es un compilado de snippets o pequeños fragmentos de código con las media queries para detectar la mayoría de dispositivos que existen en el momento, desde los monitores normales de los portátiles o computadores de escritorio hasta los smartphones más conocidos, como el iPhone, HTC, Samsung Galaxy y el Blackberry Torch, por supuesto no pueden faltar las tablets, como las Acer Iconia, Google Nexus, iPads, Sony, Lenovo entre otras.

Un recurso que te queda perfecto si estás desarrollando tu web para alguno de estos dispositivos y todavía no sabías como detectarlos correctamente para adaptar tu diseño a ellos.

Media Query Snippets

La entrada Snippets de los media queries más utilizados se publicó primero en Punto Geek.

Si estás creando un proyecto web y tienes una gran cantidad de elementos que mostrar en una grilla o cuadrícula, y dichos elementos son categorizables, es decir, se pueden organizar de cierta forma dependiendo de sus características el siguiente plugin de jQuery te será perfecto para organizar tus elementos.

Se trata de MixItUp, un sencillo pero poderoso plugin de jQuery para organizar, ordenar y filtrar elementos de una cuadrícula, especialmente útil para galerías en portafolios, blogs y todo tipo de contenido que se necesite organizar.

El plugin utiliza los métodos de animación de jQuery combinándolos con las transiciones de CSS3, haciendo que los elementos se muevan por la pantalla suavemente cuando son filtrados por el usuario, los elementos se pueden filtrar de forma ascendente o descendente por su nombre o cualquier otra propiedad, el plugin ofrece 7 efectos diferentes para las transiciones y 4 tipos de movimientos.

Una de las características más sobresaliente y agradecidas del plugin es que es completamnete Responsive, es decir, la galería de elementos es completamente funcional en cualquier resolución, así que no tienes que preocuparte porque el efecto no funcione en moviles o tablets.

Pueden encontrar en el sitio web oficial la documentación completa y descubrir todas las posibilidades que ofrece.

Descargar: MixItUp

La entrada MixItUp: Plugin jQuery para filtrar y organizar contenido se publicó primero en Punto Geek.

Ya hemos hablado en varias ocasiones sobre el diseño Responsive, presentado algunas plantillas gratuitas y compartido diferentes herramientas para verificar tus sitios web Responsive, crear un sitio que se adapta de forma dinámica a todas las resoluciones y dispositivos que existen es un trabajo tedioso y para nada fácil, que requiere mucho tiempo y sobretodo muchísimas pruebas para comprobar que todo se ve como debería verse.

Pero ahora existe una herramienta para crear sitios web totalmente Responsive de forma visual y mucho más fácil que hacerlo de forma manual, se trata de FROONT, una aplicación web creada especialmente para facilitarte el trabajo, incluye en su editor las resoluciones más comunes de los dispositivos moviles actuales, se puede mover, editar y personalizar fácilmente todo tipo de los elementos comunes que tienen cualquier sitio web.

En el siguiente vídeo pueden ver su funcionamiento y lo fácil que resulta crear sitios web con diseño responsive en tiempos considerablemente menores.

FROONT

La entrada FROONT: Crea sitios web responsive de forma fácil se publicó primero en Punto Geek.

En la actualidad es prácticamente obligatorio crear los sitios web, desarrollar las plantillas e implementar las aplicaciones pensando en los diferentes dispositivos moviles que existen, como les hemos contado varias veces ahora gran parte de la población mundial ingresa o visita tu sitio web desde su móvil y no desde su PC de Escritorio o pórtatil algo que tienes tener muy presente cuando empieces la implementación.

Muy pocos desarrolladores y diseñadores tiene a su mano una buena cantidad de dispositivos físicos para realizar pruebas reales de su trabajo, si eres al igual que yo de los que no los tienen te presento Responsive Web Design Test Tool, una sencilla pero útil página web donde puedes visualizar tu sitio web, proyecto o aplicación en 45 resoluciones diferentes, desde móviles como el iPhone 5, Blackberry, Samsung hasta las pantallas de iMac o Dell de 27 pulgadas.

Una herramienta más que completa para comprobar como se vería tu sitio en todas estas resolucionas.

Responsive Web Design Test Tool

La entrada Herramienta para comprobar tu sitio web en 45 resoluciones diferentes se publicó primero en Punto Geek.

Flat UI Colors es una sencilla pero muy bonita colorida página donde están los 20 colores que utiliza el set para interfaces de usuario Flat UI, un set completo con todo tipo de elementos para interfaces de aplicaciones web como botones, menús, navegación, header, iconos, galerías de imágenes y vídeos, entre otros.

La página posee un diseño Responsive por lo que es posible ponerla en un tamaño pequeño como si fuera un Widget o una paleta de colores pequeña y consultarla cada vez que necesites un color, además de esto permite copiar los colores en dos formatos diferentes: Hexadecima y RGB.

Flat UI Colors

La entrada Paleta de colores Flat para proyectos web se publicó primero en Punto Geek.

En estos tiempos donde la mayoría de los visitantes de tus sitios web acceden a el desde dispositivos móviles es fundamental brindarles una forma fácil, sencilla y directa de para que lo naveguen sin complicaciones y sin tener que dar muchas vueltas para ir desde un enlace a otro, de esta forma les aseguras una experiencia tan fluida como si lo visitarán desde un PC.

Crear o tener un menú que cumpla con estas condiciones es algo complicado de realizar al primer intento, por ello hoy les presento un excelente menú creado por los chicos de Codrops, que aunque no es perfecto ni satisfará todas tus necesidades de tu proyecto, si te dará un buen punto de partida para que cumplas con tus necesidad específicas.

El menú utiliza Animaciones CSS3 para lograr los 5 diferentes efectos que tiene, fade, animación a la derecha o hacia delante o atrás.

Descargar: Responsive Multi-Level Menu

Demo: Responsive Multi-Level Menu

La entrada Menú multinivel responsive para tus sitios web se publicó primero en Punto Geek.

Si eres un desarrollador frontend conoces de primera mano que existen en el mercado una basta variedad de Frameworks para todo, des de maquetación, grids, animaciones, funcionalidad específicas y muchos otros.

Existen tantos que decidirse por alguno puede ser una tarea que toma días en resolver, muchos sitios tiene opiniones muy variadas y diferentes,  a veces crees que encontraste el indicado pero luego surge uno perfecto que soluciona todas las necesidades que tienes para empezar el proyecto que tienes en mente.

Por ello te presento hoy CSS Frontend Frameworks un sitio web creado por usabli.ca, un grupo de desarrolladores independientes que crean aplicaciones y productos con alta usabilidad, el sitio muestra la comparación de más de 30 frameworks diferentes, entre la información que utilizan para compararlos está la compatibilidad con las versiones de los navegadores más usados, Chrome, Firefox, Safari, Opera e Internet Explorera, el lenguaje dinámico que utilizan para su creación, si es Responsive, es decir, si está creado de tal forma que el sitio web que lo utilice se puede ver correctamente en móviles y tablets, la licencia bajo la cual es ofrecido y por último un pequeño texto descriptivo del Framework.

CSS Frontend Frameworks comparison

La entrada Comparación de frameworks CSS se publicó primero en Punto Geek.

Tethered es un nuevo tema para WordPress completamente gratuito, presenta un diseño muy minimalista, solo consta del encabezado, una barra lateral a la derecha y una sección principal donde van los posts, en cuanto a la tipografía posee títulos grandes y muy definidos pero siempre conservando el estilo sencillo, haciendo más fácil la lectura de los posts que ocupan gran parte de la pantalla.

El tema está desarrollado con Twitter Bootstrap, haciendo posible su estructura Responsive, es decir, se adapta a cualquier resolución de pantalla, algo muy útil especialmente para tablets y smartphones, además de eso tiene Página personalizables, Menús desplegables, Comentarios anidados, Comentarios de autores destacados y fondo personalizable.

Descargar Tethered

La entrada Tethered: Plantilla para WordPress gratuita, minimalista y responsive en HTML5 se publicó primero en Punto Geek.

Ari es un nuevo tema para WordPress recomendado para sitios personales, para todos aquellos que quieren un blog limpio, sencillo pero con enfoque en el contenido de los posts.

Sus características son:

• Compatible con WordPress 3.0+.
• Compatible con Chrome, Firefox, Safari e Internet Explorer 8 y 9.
• Diseño minimalista.
• 3 columnas.
• Diseño Responsive, es decir, adaptable a cualquier dispositivo móvil o tablets.
• Opciones del tema que incluye color del texto, color de los enlaces, color de fondo y logo personalizado.
• Enlaces a tu perfil en las principales redes sociales.
• Google Web Fonts, Droid Sans y Droid Serif.
• Comentarios anidados con imágenes de Gravatar.
• Listo para ser traducido.
• Validado con las normas de desarrollo de WordPress.

Demo: Ari

Descarga: Ari

La entrada Ari, tema gratuito minimalista de WordPress para sitios personales se publicó primero en Punto Geek.

Sólo tienen que arrastrar el bookmarklet a la barra de marcadores y cuando estén en un sitio que deseen testear tienen que pinchar él para que se activen las opciones. Allí verán que tienen para ver el sitio en un iPhone, en un iPhone 5, en tablets, en resoluciones personalizadas, etc.

Presten atención porque no solo pueden usar el bookmarklet que ofrecen como predeterminado, también pueden personalizarlo según sus necesidades si bajan un poco en la página, allí pueden elegir los dispositivos que tendrá disponible el bookmarklet.

Enlace: Viewport Resizer

Visto en WebResourcesDepot

La entrada Viewport Resizer: Bookmarklet para testear sitios responsive con un click se publicó primero en Punto Geek.