volver a SuperCSS
SuperCSS

SuperCSS #80

# Newsletter sobre diseño web en español #

Bienvenid@ a un nuevo newsletter de SuperCSS.

Este número 80 se ha resistido un poco, pero aquí está…

Google está empezando a incluir la etiqueta “Mobile-friendly” en los resultados de su buscador cuando se utiliza a través de móviles. La idea es mejorar el acceso a la información para los usuarios de estos dispositivos y evitar las malas experiencias al pulsar en resultados de páginas que no estén optimizadas para ellos.

mobile-friendly

Si quieres saber si tu página es “Mobile-friendly”, prueba a pasarle este test: Mobile-Friendly Test

Hasta el próximo envío!

Articulos & Tutoriales

 

Sistema de clasificación 5 estrellas con CSS3

w3.unpocodetodo.info/

Seguro que en algún proyecto has tenido que incluir un sistema de clasificación para que los usuarios puedan valorar un producto o un servicio. En este tutorial explican lo sencillo que puede llegar a ser usando botones de radio y label.

Posición de los botones

laux.es/posicion-botones

Artículo sobre donde deben situarse los botones en diferentes dispositivos y como hacerlos más eficientes en visualización. Es continuación de este otro, Ok y Cancelar no es suficiente que tampoco deberíais perderos.

El nuevo elemento de HTML5 para crear imágenes responsive

librosweb.es

Un repaso al nuevo elemento picture de HTML5 que permite describir con todo detalle cómo deben cargarse las imágenes responsive de tu sitio web

Conoce cómo funciona el browser y optimiza tu código frontend

www.csslab.cl

Interesante artículo que muestra cómo funciona un browser desde que inicia el render del código de una página y con esa información, nos sugiere algunas técnicas para aumentar la optimización de los elementos que la componen.

Lazy Load de imágenes con JavaScript (funciona con Responsive Design)

www.kabytes.com

Tutorial para realizar carga de imágenes bajo demanda (Lazy Load), una de las mejores técnicas para acelerar y reducir los tiempos de carga de un sitio web.

 

Inspiración

 
BeoPlay H2
BeoPlay H2
Longchamp
Longchamp
Parallàxis
Parallàxis
Maison Roger Vivier
Maison Roger Vivier
Lorenzo Bocchi Designer
Lorenzo Bocchi Designer
Jet Belt
Jet Belt
 

Recursos

 
Coolors: paletas de colores

Coolors: paletas de colores

Generador de paletas de colores muy fácil de usar. Tan solo hay que ir pulsando la barra espaciadora e ir bloqueando colores hasta completar la combinación que queramos. Y si te registras, puedes guardar las paletas.

 
Type Genius: combinaciones de fuentes

Type Genius: combinaciones de fuentes

Si eres de los que te cuesta encontrar combinaciones de fuentes, con Type Genius lo tienes más fácil. Eliges una fuente de inicio y te muestra diferentes opciones basadas en ejemplos de otras páginas web.

 
Test: ¿Cúanto sabes de CSS3?

Test: ¿Cúanto sabes de CSS3?

Curioso test para comprobar tu nivel de conocimiento de CSS3…a pesar del ser algo básico, hay que fijarse bien en las posibles respuestas porque alguna pregunta tiene trampa!