Nuevo diseño responsive del blog Pa Monísima:Yo

martes, febrero 23, 2016


Tener un blog de Blogger no significa que no se pueda lucir un diseño moderno y profesional, como el de un blog de Wordpress. En este post te muestro el nuevo diseño del blog Pa Monísima: Yo, al que he instalado y personalizado una plantilla premium responsive.

Si me sigues sabrás que a principios de Enero fue mi propio blog el que sufrió esta transformación, instalando la plantilla Voux de Themexpose. Tenía muchas ganas de dar el paso, pero por un motivo u otro lo iba dejando, hasta que un día me planté y lo instalé en una sola noche. Y no puedo estar más contenta del resultado, no sólo por la mejora del aspecto, sino también por una sensible subida en mi posicionamiento.

Es por este motivo que no dudé en partir de una plantilla premium para el rediseño del blog de Débora, Pa Monísima: Yo. Actualmente cualquier web o CMS (gestor de contenido como Blogger o Wordpress) presenta un código sumamente complejo en el que participan varios lenguajes de programación. Diseñar una web desde cero supone un gran trabajo, y es por eso que actualmente se suele partir de plantillas i/o frameworks donde una gran parte del código está ya hecho.

La elección de una buena plantilla de base es fundamental. Y para ello Débora y yo analizamos muy bien qué funcionalidades necesitabamos implementar en su blog.

Evidentemente el nuevo diseño debía ser responsive, es decir que se viera bien en cualquier dispositivo/pantalla. También teníamos claro que mantendríamos el aspecto de blog tradicional, con una columna lateral (sidebar) y una página de inicio sencilla.

El blog de Débora es el escaparate de sus creaciones: detalles y complementos hechos a mano en muy diversos materiales y técnicas, fieltro y ganchillo principalmente. Tiene una tienda en construcción, y un catálogo pendiente. Y es que uno de los puntos débiles de su anterior diseño era la dificultad de hacerse una idea de todas las monerías que crea.

En este sentido le sugerí crear un menú con subcategorías para filtrar sus creaciones según destinatarios: bebé, niños, mujeres y hogar. Y complementarlo con un menú secundario en la sidebar con etiquetas más concretas. Esto exige un trabajo de redefinición de etiquetas, de momento pendiente pero que muy pronto estará completado.

Por otra parte Débora es muy activa en varias redes sociales, y por tanto la presencia de botones y gadgets sociales en la plantilla debía estar asegurada.

Teniendo todo esto en cuenta escogimos la plantilla Minimal de Themexpose. Ésta posee un menú fijo desplegable muy completo, con iconos de redes sociales y buscador. Además de tener un diseño limpio y moderno.


La plantilla en si ya es plenamente funcional y solamente necesita ser instalada y traducir algunos de sus elementos. Aún así añadí directamente una serie de funcionalidades nuevas que pacté con Débora:
  • Botones de redes sociales en el footer
  • Botón de subir arriba flotante
  • Carrousel con las fotos de Instagram en el footer
  • Botón de compartir en Google +
  • Botón pin-it al pasar por las imágenes del post
  • Páginas estáticas sin sidebar
  • Tablas responsives en dos, tres y cuatro columnas editables desde el panel de control edición de entradas
  • Formulario de contacto responsive
  • Aumentar las entradas relacionadas mostradas de 3 a 5
Además revisé e introduje el código imprescindible para mejorar el SEO y permitir que el blog se posicione mejor en su temática.

Aunque el trabajo más completo fue su personalización. Constituyó un reto para mi poder borrar el aspecto un tanto frío de blog de moda de la plantilla. En este sentido la aportación de Débora fue esencial. El logo o imagotipo, una simpática monita, es de su creación, y ella aportó también las cintas rosas así como ideas de estilo como el uso de textura téxtil y pespuntes que ya existían en su anterior diseño. A partir de aquí fui configurando la nueva imagen, puliendo y armonizando todos los elementos en juego: tipografías, colores y formas.

Antiguo diseño de Pa Monísima: Yo


Nuevo diseño responsive


Entre otras cosas se modificó mediante CSS:
  • La barra de información de cookies, que se envió al pie de la pantalla y se redujo su tamaño.
  • La cabecera anterior se redujo para adaptarla al móvil, optimizar el espacio y permitir mostrar el principio de las entradas.
  • Se aportó un toque de estilo a la foto de presentación, retocando el encuadre y exposición, y colocándola sobre un fondo de tela.
  • Se creó una guía de estilo para aplicar en las entradas, con cuidado diseño de encabezado y destacados, aplicables de manera automática desde el editor de entradas. Se definió la etiqueta que crea una fina línea de separación, y la decoración de las tablas responsive.

En todos estos cambios se fueron introduciendo las modificaciones necesarias para que se vieran bien en la gran mayoría de dispositivos y pantallas. Una odisea de cambios y pruebas, pero con llegada a buen puerto.

¿Qué opinas? ¿Aún no le has echado un ojo? Pues ve ahora mísmo al blog de Débora! ¡Tus apreciaciones serán muy bienvenidos abajo en los comentarios!



Entradas relacionadas

18 comentarios

  1. ¡Qué maravilla! Ha quedado monísima... me encantan.

    Minerva todo lo que tocas se convierte en una cosita bonita, qué arte.

    ¡Un muackiles, guapura!

    ResponderEliminar
    Respuestas
    1. Gracias!!! Ojalá tuviera yo ese don a lo rey Midas...pero yo también la pifio de tanto en tanto!
      Gracias por tu visita!

      Eliminar
  2. Todo lo que nos comentas es super interesante y un trabajo excelente. Besos y felicitaciones a ambas ha quedado espectacular.

    ResponderEliminar
    Respuestas
    1. Gracias, ya sabes que tu blog puede quedar igual de bien ;)

      Eliminar
  3. Muy buen trabajo, el cambio que le has hecho a la plantilla básica está muy bien y ha quedado un blog precioso.
    Besitos!

    ResponderEliminar
    Respuestas
    1. Cuando tienes plantillas con todo tan medido y colocado a veces es una temeridad tocarlas pero...si ganamos con ello darle un nuevo aire más personal: a por todas!!!

      Eliminar
  4. Hola. me gusta mucho el diseño de tu blog y el de Débora. Me gusta por su ''limpieza' y su claridad. Muy comunicativo. Acabo de descubrir tu blog y me gusta mucho la variedad de temas que tratas. En este momento tengo un blog dedicado a los jóvenes y Educación que te invito a visitarlo: http://cativodixital.blogspot.com.es/ . Si quieres seguimos en contacto. Yo ya me hice seguidora de tu blog.

    ResponderEliminar
    Respuestas
    1. Hola encantada de conocerte! Me alegra que te parezca interesante mi blog, mis interesese van evolucionando y supongo que de ahí las diferentes temáticas, todas ellas relacionadas con el mundo visual!
      Me paso por tu blog ahora!

      Eliminar
  5. La verdad es que queda infinitamente mejor. Muy buen trabajo :)

    ResponderEliminar
    Respuestas
    1. Gracias, de eso se trata de mejorar, y en internet no hay pausa, siempre hay nuevas versiones ;)

      Eliminar
  6. Te quedó genial, la verdad que yo también he partido muchas veces de plantilla, no merece la pena hacer un blog desde cero porque las posibilidades de modificar una plantilla son infinitas y te ahorras muchos problemas. Quedó genial el resultado, ¡enhorabuena!

    ResponderEliminar
    Respuestas
    1. Mi formación es artística,de manera que tener una base ya programada que cumpla todas las funcionalidades es casi requisito necesario. Mi objetivo es el de cualquier diseñador gráfico: domeñar la imagen para que cumpla sus funciones comunicativas...aunque se tenga que recurrir a código (uight!)por suerte lo lenguajes front-end no son muy difíciles!!

      Eliminar
  7. Qué te voy a decir que no te haya dicho ya...
    El nuevo diseño me tiene enamorá ^.^ Ah, no, que eso ya te lo he dicho :)
    Muchos besos ♥♥

    ResponderEliminar
  8. Hola Minerva mi nombre es Carolina, vengo del blog de Dianita (La cajita de Diana), yo tengo dos blogs uno de psicología y otro de cuidado personal, la verdad vengo a molestarte pues ando buscando la manera de arreglar la imagen de mi producto ya que quiero algo muy limpio y ordenado, te agradezco enormemente la ayuda, tú me dices dónde encuentro las publicaciones claves dentro de tu blog y me pongo en la tarea. Por si deseas visitar mi contenido estos son mis enlaces. Blog de psicología http://misaludpsicologica.blogspot.com y mi blog de belleza http://caroldriguez.blogspot.com Gracias por tu apoyo.

    ResponderEliminar
  9. Bienvenida Carolina. Puedes encontrar consejos de diseño y algunos tutoriales publicados en el índice de mi blog. Está por apartados y te será muy fácil llegar a lo que buscas.
    Un saludo

    ResponderEliminar
  10. Acabo de instalar esta plantilla en mi blog y no puedo configurar adsense, alguien sabe como solucionarlo? Gracias!

    ResponderEliminar
    Respuestas
    1. Hola, en principio te debería funcionar bien. Se adminsitra mediante un gadget

      Eliminar