Crea tu web responsive online !!!

Crea online tu web responsive

Crea online tu web responsive

El presente y futuro del diseño web es el «responsive design«.

34Grid es un sistema de red sensible formado por columnas y que nos permite adaptar nuestra web a todo tipo de resoluciones.

El procedimiento es simple. Definimos online la cantidad máxima de columnas que vamos a necesitar por fila y los márgenes entre celdas. Hecho esto, no queda más que descargar el paquete zip en el que podremos encontrar dos carpetas, «CSS» y «DEMO».

La carpeta «DEMO» contiene un archivo html que nos muestra las posibles configuraciones.

 

DESCARGA TU WEB RESPONSIVE

Share and Enjoy !

0Shares
0 0 0

Menú Responsive para tu diseño web

El diseño de una web responsive, adapta su tamaño y arquitectura, a la resolución del dispositivo en el que la estamos viendo. Ya hemos visto como en una web de columnas, al reducir la resolución, las columnas se desplazan para colocarse una debajo de la otra, en el orden que hayamos establecido, pero ¿qué pasa con el menú?.

La mejor solución por diseño y sobre todo por usabilidad es la que presentamos hoy aquí. Se trata de convertir el menú horizontal en un menú desplegable, tal y como podéis ver en las imágenes que encontrareis más adelante.

Para una resolución grande, el menú aparece en horizontal, con una opción a continuación de la otra. Cuando bajamos la resolución de tal modo que no cabe en el ancho de la pantalla, convertimos esa única fila en tres, y si seguimos reduciendo la pantalla, lo que va a ocurrir es que las tres filas se van a convertir en un menú desplegable.

Como podréis comprobar cuando os descarguéis el código, el menú está limitado a 600px de ancho. Son 6 opciones de menú y cada una con un ancho de 100px. Es evidente que entonces, para cualquier soporte que tenga una resolución mayor a 600px, no tenemos que tener ningún problema, es decir, si utilizamos cualquier ordenador o una tablet como puede ser el iPad, el menú se verá tal y como fue diseñado, una lista con todos sus elementos en una misma fila.

A continuación, vamos a ver cómo se construye esta web y cómo se distingue en la CSS las distintas resoluciones.

(más…)

Share and Enjoy !

0Shares
0 0 0

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 !

0Shares
0 0 0
Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por ofrecer una buena experiencia de navegación al usuario, también desde el punto de vista del SEO y la penalización que conlleva no ofrecer un buen responsive.

Por lo tanto es muy importante verificar cómo se ve nuestro site y cómo se comporta en esos distintos dispositivos.

What is my screen resolution

Hoy os dejo What is my screen resolution. Se trata de una intuitiva herramienta excelente para probar cómo se verá su sitio en diferentes dispositivos. Escribes la URL y eliges entre escritorio, móvil, tableta y televisión e incluso la orientación. Verás que al pulsar sobre desktop, mobile, tablet o televisión, te saldrán unas resoluciones por defecto, pero si luego quieres probar una resolución en concreto, puedes introducirla y comprobar la visibilidad del site. Muy interesante y además GRATIS !!!

COMPROBAR RESOLUCIONES

 

 

Share and Enjoy !

0Shares
0 0 0
Introducción al dibujo con SVG

Introducción al dibujo con SVG

Los SVG (del inglés Scalable Vector Graphics), son formatos gráficos vectoriales muy útiles por su flexibilidad y la capacidad de mostrar imágenes en web, sin perder calidad al cambiar de resolución. Los SVG se definen en formato XML. Esto nos permite, además de...

Necesito una web profesional

TU CUÑADO NO SABE HACER WEBS Y LO SABES... 8 de cada 10 personas consultan internet antes de consumir un producto. Tu web es tu escaparate, no puedes dejarle esta responsabilidad a cualquiera. ¿Sabías que Google penaliza las webs mal hechas?. Confía en nosotros, somos...

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

Share and Enjoy !

0Shares
0 0 0

Players en HTML5. Audio y Video

Una de las herramientas más útiles que ha aportado HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia en nuestras webs. Además HTML5 nos permite construir reproductores tanto de audio como de video.

Webs tan populares como youtube, vimeo o daylimotion ya hace tiempo que incorporan reproductores en HTML5.

En este post de diseño web, vamos a hacer una breve introducción de las etiquetas <AUDIO> y <VIDEO> de HTML5, y vamos a ver varios tipos de reproductores que nos pueden ser muy útiles a la hora de construir nuestros sitios web.

(más…)

Share and Enjoy !

0Shares
0 0 0