Publicidad
Publicidad

RSS Responsive Design

matchMedia(), la forma más simple y rápida de usar @media queries en JavaScript

7 Comentarios
matchMedia(), la forma más simple y rápida de usar @media queries en JavaScript

El Responsive Design ya no es solo una moda, sino que se ha convertido en una premisa en el diseño web. Desde que se accede más a Internet desde dispositivos móviles que desde PC se ha convertido en norma el adaptarse a dispositivos móviles (de las diferentes formas que existen) y el que no lo lleva a cabo acaba perdiendo público en su web, sea del tipo que sea.

Hace tiempo hablamos extensamente en Genbeta Dev sobre Responsive Design con una extensa introducción, pero pasamos por alto algo muy ligado al diseño adaptable y que justamente no incumbe a CSS, y es el uso de las @media queries en JavaScript con matchMedia().

Leer más »
Publicidad

Embed Responsively, un quebradero de cabeza menos

1 Comentario
Embed Responsively, un quebradero de cabeza menos

Mis largas sesiones de navegación por el proceloso mar de Internet tienen un propósito (bueno, dos si contamos el de encontrar gifs animados graciosos): encontrar herramientas y recursos que hagan más sencilla mi vida laboral. Pues bien, Embed Responsively entra de lleno en ese grupo llamado 'Recursos online que te ahorran quebraderos de cabeza' porque a veces el embeber o incrustar contenido de terceros y la moda del responsive design no casan del todo bien.

Leer más »

¿Se puede hacer operaciones matemáticas con CSS?: sí, con la función calc()

18 Comentarios
¿Se puede hacer operaciones matemáticas con CSS?: sí, con la función calc()

addEventListener('load', function (event) { prettyPrint() }, false);

Suena a ciencia ficción poder realizar cálculos en el CSS, pero así es, sin necesidad de JavaScript podemos realizar sumas, restas, multiplicaciones y divisiones gracias a la función calc().

Pero lo mejor es que nos permite sumar distintas unidades (como em, px, %...), lo que nos facilitará la labor de ajustar elementos con medidas relativas que tengan, por ejemplo, bordes o márgenes que suelen tener el tamaño en píxeles y descolocan gran parte del diseño, esto algo que dificulta los diseños adaptables. Y otra gran ventaja es que funciona hasta con Internet Explorer 9 (increíble, pero cierto).

Leer más »

Centurion, otra opción para crear webs responsive

9 Comentarios
Centurion, otra opción para crear webs responsive

Es Nochebuena y estarás con los villancicos y los polvorones haciendo tiempo para la pantagruélica cena de esta noche (yo igual, este post está escrito desde el pasado) pero en Genbeta Dev os traemos un regalito para que a partir del miércoles tengáis una opción más a la hora de crear webs siguiendo el espíritu del las navidades pasadas responsive design: se llama Centurion y es un framework para desarrollo web responsive basado en CSS3 y el preprocesador SASS.

Leer más »
Publicidad

Responsive Design: puesta en marcha

49 Comentarios
Responsive Design: puesta en marcha

addEventListener('load', function (event) { prettyPrint() }, false);

Ya he contado la mayoría de lo que hay que saber sobre el Responsive Design, pero algunas veces lo difícil es aplicarlo de la forma que necesitamos o mostrar el contenido de una forma eficaz sin perder en diseño ni usabilidad, y en esto es en lo que me voy a centrar, en estructurar correctamente de distintas formas el contenido de una página que se adapta a distintos tipos de pantalla.

Leer más »

Responsive Design: adaptar imágenes y vídeos

30 Comentarios
Responsive Design: adaptar imágenes y vídeos

addEventListener('load', function (event) { prettyPrint() }, false);

Como comenté en el artículo sobre la estructura básica del Responsive Design, un diseño adaptable deja de serlo si cuando lo visualizas desde un móvil ves que las imágenes y los vídeos sobresalen de la página, por lo que os voy a enseñar como hacer que se adapten a distintos tipos de pantalla los contenidos multimedia (imágenes y vídeos de HTML5, Youtube y Vimeo).

Leer más »

Responsive Design: estructura adaptable

19 Comentarios
Responsive Design: estructura adaptable

addEventListener('load', function (event) { prettyPrint() }, false);

Tras la introducción al Responsive Design ahora toca conocer lo esencial para crearlos: el meta-tag Viewport, las @media queries y tener en cuentas ciertas cosas más "clásicas", pero que son esenciales (cosas como las que permiten que los borradores y notas de W3C se adapten "casi" perfectamente al ancho de pantalla).

Leer más »

Responsive Design: introducción

44 Comentarios
Responsive Design: introducción

En Genbeta Dev hemos hablado antes sobre Responsive Design, pero voy a hacer una pequeña guía de como crear diseños que se adapten a todo tipo de pantallas con el uso de CSS, que actualmente nos brinda al posibilidad de crear un diseño adaptable sin necesidad de JavaScript e incluso gran parte de la base es compatible con navegadores antiguos (lo que es la base, no podemos pretender que Internet Explorer 7 visualice un completo diseño adaptable).


Leer más »
Publicidad

Ver más artículos