Imágenes responsive con la etiqueta Picture

En muchas ocasiones, el diseño responsive se complica al utilizar las imágenes. Más allá de utilizar la etiqueta Viewport, que vimos hace unos días, o de asignar a las imágenes una anchura relativa con CSS, necesitamos un  método que nos permita seleccionar la imagen más adecuada para cada pantalla en cuanto a su tamaño y resolución. Para eso, tenemos la etiqueta Picture, cuyas principales características explicamos en este artículo.

Leer más

Cómo crear formas avanzadas con border-radius

Si hace unos días nos aproximábamos a las funcionalidades de border-radius para crear bordes redondeados, ahora profundizamos un poco más. Con esta propiedad de CSS3, la imaginación es el límite a la hora de crear diferentes formas, añadir sombras o realizar incluso animaciones cualquier página web.

En este artículo, explicamos cómo sacar el máximo partido a este elemento, que nos resultará muy útil para incluir formas circulares en cualquier proyecto web y directamente desde el código.

Leer más

Viewport, una etiqueta imprescindible para el diseño responsive

Viewport es  la etiqueta que mejor representa la web en movilidad, ya que nos permite indicar cómo se verá un proyecto web en dispositivos móviles. Apple la creó para decirle al iPhone como debería renderizar el documento, convirtiéndose desde entonces en un estándar que ya está soportado por la mayoría de dispositivos.

Como definición rápida, diremos que viewport podría traducirse como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, nivel de escalado y el zoom que debe mostrar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta META.
Leer más

Bordes redondeados con CSS3

Seguimos profundizando en las características del HTML5 y lo hacemos repasando una de las funcionalidades más útiles de CSS3 para diseño web: crear bordes redondeados. Esto lo podemos hacer directamente con el atributo border-radius, que define qué curva tiene que tener el borde del elemento al que se le aplica. Para ello, CSS3 añade novedades en el control de los bordes de los elementos, permitiendo esquinas redondeadas, bordes con imágenes, sombras, etc.

Leer más

¿Qué pasos debo seguir para hacer una web responsive?

A la hora de hacer una página web responsive, una de las cosas que tenemos que tener en cuenta es la multitud de dispositivos con características diferentes que se conectan a una página web. A continuación, ofrecemos unas pautas de trabajo que nos facilitarán mucho las tareas de desarrollo cuando trabajamos en un proyecto responsive. Leer más

¿Qué son las fuentes de iconos y por qué utilizarlas en una página web?

Si hay un recurso que utilizan todos los desarrolladores para dar un mayor atractivo a su sitio web, ese es la iconografía, ya que puede dar un toque final perfecto al trabajo.  Existen multitud de paquetes de iconos en formato gráfico, pero lo ideal es usar fuentes tipográficas, más conocidas como icon fonts  o fuentes de iconos.

En este artículo, explicamos los motivos para utilizar las fuentes de iconos en una página web, sus ventajas e inconvenientes e incluimos algunos recursos útiles con fuentes de iconos.

Leer más

¿Buscas un programa gratuito para editar tus imágenes?

No se puede negar: el popular programa de edición gráfica Adobe Photoshop sigue siendo la herramienta número uno en cuestión de edición de imágenes. Aún así, cada vez son más los editores online gratuitos que nos permiten editar imágenes con calidad y, en muchos casos, sin necesidad de instalar ningún programa en el ordenador; directamente desde el mismo navegador.

En este artículo, te presentamos una selección de las mejores herramientas web gratuitas que pueden ser una buena alternativa para editar las imágenes de nuestra web. Leer más

10 trucos de HTML para mejorar la entregabilidad de los correos

A la hora de planificar nuestra campaña de Email Marketing, una de las principales preocupaciones que tenemos es su entregabilidad. Es decir,  la cualidad que tiene un correo electrónico para llegar con éxito a la bandeja de entrada de los destinatarios. Esto engloba un conjunto de técnicas que garantizan que nuestros emails lleguen a nuestros contactos… Y aterricen en su bandeja de entrada y no en la de spam, sin que nuestro mensajes aparezcan también como perdidos o rebotados.

Leer más

Tres conceptos básicos antes de poner en marcha una web responsive

Como ya hemos visto en más de una ocasión, el diseño responsive ya no es una tendencia; es hablar de la web de hoy. Al afrontar el desarrollo y diseño de un proyecto responsive, conviene tener en cuenta tres aspectos fundamentales para su correcta visualización en todos los navegadores y sistemas, dimensiones y resoluciones de pantalla y velocidades de conexión.

Por tanto, deberemos optimizar nuestro trabajo en esta tres direcciones complementarias para conseguir que  las personas que acceden nuestra web tengan una óptima experiencia de usuario, independientemente del dispositivo de acceso que utilicen.

Leer más

7 consejos para optimizar las fotos de una página web

Las imágenes son fundamentales en nuestra página web, ayudan a “vestirla” y captan la atención de nuestros visitantes. Una fotografía puede ser el detonante para que un usuario compre nuestro producto, pero puede también causar el efecto contrario.

Aunque hoy en día las velocidades de conexión a Internet son cada vez más rápidas, hay que tener en cuenta el peso de nuestras imágenes, por lo que conviene optimizarlas y ajustar bien su tamaño/calidad, una tarea para la que te resultarán útiles estas siete recomendaciones.

Leer más