responsive Archives - Punto Geek

Buenas prácticas para crear sitios web Responsive

22 junio, 201518 agosto, 2013 por Juanguis

Responsive, el término o tendencia más escuchada durante los últimos dos años, tendencia que prácticamente se volvió obligación para todo desarrollador web o empresa con negocios en Internet que quieren llevar su producto a más clientes o que simplemente desea permanecer actualizada con las últimas tecnologías que nacen en Internet.

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?

Snippets de los media queries más utilizados

27 julio, 2013 por Juanguis

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

MixItUp: Plugin jQuery para filtrar y organizar contenido

31 mayo, 2013 por Juanguis

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

FROONT: Crea sitios web responsive de forma fácil

28 mayo, 2013 por Juanguis

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

Herramienta para comprobar tu sitio web en 45 resoluciones diferentes

24 mayo, 201324 mayo, 2013 por Juanguis

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

Paleta de colores Flat para proyectos web

28 abril, 2013 por Juanguis

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

Menú multinivel responsive para tus sitios web

21 abril, 2013 por Juanguis

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

Comparación de frameworks CSS

16 marzo, 2013 por Juanguis

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

Tethered: Plantilla para WordPress gratuita, minimalista y responsive en HTML5

6 febrero, 2013 por Juanguis

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

Ari, tema gratuito minimalista de WordPress para sitios personales

29 octubre, 2012 por Juanguis

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