Cómo usar las Media Queries en diseño web responsive

Tal y como vimos la semana pasada, las Media Queries de CSS3 mejoran la visualización de nuestros proyectos web. En esta ocasión abordamos el tema desde un  punto de vista más práctico e incluimos algunos ejemplos que podemos implementar en el código y facilitarán que nuestros diseños web se  adapten a cualquier medio y pantalla, algo imprescindible en el desarrollo web hoy en día.
Leer más

Cómo utilizar las Media Queries de CSS3 para mejorar la visualización de nuestros proyectos web

Las Media Queries son una de las grandes ventajas de CSS3, ya que permiten saber qué sistema se está visualizando una página web y, en función de ello, aplicar unas reglas de estilo u otras.  Así, podemos servir un CSS personalizado, acorde las condiciones del navegador o dispositivo que nos visita. Como veremos a continuación, se han convertido en uno de los mejores recursos con los que cuentan los diseñadores para hacer sitios responsive.

Leer más

Maquetación web en varias columnas con CSS3

CSS3 realiza una maquetación directa del texto en diferentes columnas de manera automática, ya que posee distintos elementos y atributos que le confían al navegador la tarea de producir el texto en multicolumna. Desde que existe esta característica, la maquetación web goza de un interesante recurso para la presentación de la información y que a más de uno nos traía de cabeza para conseguirlo con otros medios, como las tablas. En este artículo explicamos cómo utilizar el elemento column y sus diferentes atributos.

Leer más

¿Qué veremos en Desarrollo web y Diseño web este 2017?

Como ya hicimos hace poco más de un año, repasamos las tendencias que encontraremos en los proyectos web que se lancen en los próximos meses y lo hacemos en dos grandes bloques muy relacionados y que no pueden ir por libre a la hora de lanzar una página web, el Desarrollo y el Diseño web. Ambas disciplinas buscarán en 2017 compaginar la eficiencia en los procesos de trabajo y un mayor rendimiento de las páginas web, con la vista siempre puesta en la mejora de la experiencia de usuario.

Leer más

Cómo utilizar el atributo overflow-wrap para romper palabras en varias líneas

El atributo overflow-wrap  sirve para definir qué hacer cuando hay palabras que, por facilidad de lectura o integración en el diseño, se rompen en varias líneas. En este artículo explicamos cómo utilizar overflow-wrap, un atributo que nos ofrece la posibilidad de decidir el comportamiento de las palabras ante estos saltos de línea.

Leer más

Los diferentes formatos de imagen con los que podemos trabajar

Al trabajar con imágenes, nos encontraremos con diferentes formatos que pueden utilizarse y que van más allá de los formatos nativos de cada programa (como el PSD de Photoshop). A continuación, explicamos las características de los principales formatos estándar y para qué podemos utilizarlos, ya que dependiendo de para qué vayamos a usar las imágenes, podremos optar por uno u otro.

Leer más

¿Qué elementos poner en la home para mejorar la conversión?

La home page o, como se le conoce normalmente, home, es la parte de una página web que más tráfico de visitas recibe, por lo que es imprescindible otorgarle la importancia que merece.  Ya que ésta es la mejor carta de presentación de un website, debe causar una buena impresión al visitante, de manera que se sienta atraído por el contenido y lo suficientemente cómodo para seguir navegando.  En este artículo, repasamos algunos  elementos clave que ayudan a mejorar una home, atrayendo al mayor número de clientes potenciales y mejorando su conversión.

Leer más

Cómo crear un bocadillo de cómic con CSS

Ahora que ya hemos hablado de adaptar los textos a las formas de una imagencrear elipses y otras formas con border-radius, vamos a dar un paso más y  ver una de las muchas técnicas que podríamos usar para crear los bocadillos de las historias de cómic, aquellos que hacen entender que los personajes están hablando o pensando y que puede resultar un recurso muy útil para cualquier página web.

Lo haremos sólo con CSS, sin apoyarnos en imágenes. Esto que optimizará el sitio web y nos permitirá reutilizarlo fácilmente, solo a partir del nombre de una clase que colocaremos a todos los elementos que tengan que representarse como el elemento balloon, el nombre por el que se conocen los bocadillos de cómic en inglés.

Leer más

Estilos CSS básicos para diseño responsive

Tras repasar Viewport y Picture en los últimos días, seguimos profundizando en los principales recursos para diseño responsive. Y no podemos olvidarnos de las Media Queries, tal vez las herramientas más representativas cuando pensamos en CSS para responsive design , ya que permiten realizar la mayor parte del efecto de adaptación a todo tipo de pantallas. De ellas, hablaremos más adelante porque es un tema que da para mucho.

De momento, nos centraremos en una lista de propiedades de estilo CSS para conocer algunas técnicas útiles que conviene tener en cuenta en la maquetación web, especialmente si estamos trabajando en sitios adaptables.

Leer más

Cómo adaptar los textos a las formas de una imagen

Más allá de las características y funcionalidades de border-radius, en más de una ocasión tendremos que maquetar los textos para que se adapten a la forma de la imagen los acompaña, algo que podremos hacer mediante técnicas de CSS, como explicamos a continuación.

Leer más