RESPONSIVE LOGOS – CSS Y WORDPRESS

responsive-logos-css-wp

En la actualidad la mayoria de páginas web estan añadiendo un nuevo concepto, el Diseño Responsive.   La finalidad del Diseño Responsive es de adaptarse a cualquier resolución, dispositivo o giro del dispositivo. Para hacerlo se pueden usar librerías, JavaScript o si lo quieres hacer por ti mismo la mejor manera es con las mediaqueries de CSS3. Un diseño así implica que absolutamente cualquier usuario mediante cualquier dispositivo podrá ver el contenido de nuestra web en su totalidad.

WordPress, es un CMS (Content Management System) que implementa el uso de CSS (Creative Style Sheets) en su diseño, nos da la facilidad de poder hacer cambios y modificaciones a plantillas y también implementar elementos que sean Responsive en nuestra pagina.

Cuando hablamos acerca de Responsive Logos, lo primero que tenemos que trabajar es el diseño; aquí van 3 puntos básicos que tenemos que tener en cuenta al momento de diseñar un logo para nuestra empresa:

  1. La simplicidad – No podemos diseñar logos que sean muy complicados y que contrasten demasiado con el sitio web.  Además, un logotipo complicado puede molestar a los usuarios, y definitivamente es lo último que uno quiere como diseñador.  El equilibrio es la clave en esta ecuación: el logo debe ser discreto en tal medida que no irrite a los espectadores, pero lo suficientemente poderoso para hacerse notar.
  2. Cada pixel es importante – La visita a un sitio web desde su desktop o laptop, permite espacio tanto para los logos y contenido; pero con la aparición de los nuevos gadgets, especialmente los smartphones, la situación cambio dramáticamente y cualquier pixel es importante en al economía global del espacio.  Un diseño responsive debe incluir un logo que, con solo unos cuantos pixeles, pueda convencer a los espectadores a permanecer en el sitio web.
  3.  Degradados no serán la solución – Una regla del buen diseño del logo dice que una creación no debe incluir mas de tres colores, por lo tanto, un logo utilizando degradados no puede respetar esto.  En un formato mas pequeño el degradado es difícil de notar y muchas veces, complica la situación, el usuario se siente enredado.

Tomando en cuenta estos puntos, podemos diseñar un logo que sea exitoso.  El siguiente paso para diseñar un logo que sea “Responsive”, necesitamos utilizar CSS3 y el código que utilizaríamos seria el:

@media all {
  #logo img {
      max-width: 100%;

height: auto;
  }
}

La regla @media permite especificar estilos para distintos tipos de medios en la misma hoja de estilos. En ella podemos informar sobre los tipos de medio sobre los que queremos definir estilos CSS.  En este caso utilizamos @media all para todo tipo de pantallas,   y el tag de <img> dándole el porcentaje en el width de 100% y height en auto.  Esto permitirá que nuestro logo no sea tan afectado por los cambios de resolución de pantalla en que aparezca.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.